React Native Collapsible Animated Invoice 🔥

A simple and customizable React Native animataed invoice or list component. Perfect for the E-commerce applications to show the list of bills or invoice in the user orders section.

Example

Try this exapmple on Expo Snack ❤️

--------------- ios --------------- ------------- Android -------------

Prerequisites

⚠️ Peer Dependencies

• react-native-vector-icons

This component has a peer dependency on react-native-vector-icons has to be installed and linked into your project. Follow react-native-vector-icons to install the dependency.

Installation

Supported version: react-native >= 0.59.0

npm install react-native-collapsible-invoice

Example

contains code for one invoice

...
import AnimatedInvoice from 'react-native-collapsible-invoice';
 
 const App = () => {
  return (
  ...
      <View>
        <AnimatedInvoice
          triangleNumbers={'20'}
          triangleHeight={10}
          barStyle={{ backgroundColor: 'white', }}
          triangleStyle={{ backgroundColor: 'white' }}
          iconColor={'black'}
          barComponent={ <Your Component/> }
        >
        </AnimatedInvoice>
       </View>
       ...
        )}
       
const styles = StyleSheet.create({

  container: {
      flex:1
   }
   
});

export default App;

Props

| Prop | Description | Type | Default Value | Required | | :--------------------:|:-------------------------------------------------------------------------------------------:|:-----------------------------:|:-------------:|:--------:| | triangleNumbers | Triangles you want at the bottom of the component | Number | 0 | false | | triangleHeight | Triangle Height | Number | Best Fit | false | | barStyle | Bar Container Style | ViewStyle | {} | false | | triangleStyle | Trianlge Style | ViewStyle | {} | false | | iconColor | Color for the arrow up and down icons | String | black | false | | barComponent | Bar Component | React.Component | null | false |