├── src
    ├── index.js
    └── AnimatedInvoice
    │   ├── Triangle.js
    │   └── index.js
├── Demo
    ├── example_ios.gif
    └── example_android.gif
├── package.json
└── README.md


/src/index.js:
--------------------------------------------------------------------------------
1 | import AnimatedInvoice from "./AnimatedInvoice";
2 | 
3 | export default AnimatedInvoice


--------------------------------------------------------------------------------
/Demo/example_ios.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kapilavaiya/react-native-collapsible-invoice/HEAD/Demo/example_ios.gif


--------------------------------------------------------------------------------
/Demo/example_android.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kapilavaiya/react-native-collapsible-invoice/HEAD/Demo/example_android.gif


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-native-collapsible-invoice",
 3 |   "version": "1.0.2",
 4 |   "description": "Animated collapsible invoice component for react native",
 5 |   "main": "src/index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "https://github.com/avaiyakapil/react-native-collapsible-invoice.git"
12 |   },
13 |   "keywords": [
14 |     "invoice",
15 |     "animated-invoice",
16 |     "collapsible-invoice",
17 |     "react",
18 |     "react-native-invoice",
19 |     "react-component",
20 |     "react-native-collapsible-animated-invoice"
21 |   ],
22 |   "author": "",
23 |   "license": "ISC"
24 | }


--------------------------------------------------------------------------------
/src/AnimatedInvoice/Triangle.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | import {
 3 |     SafeAreaView,
 4 |     ScrollView,
 5 |     StatusBar,
 6 |     StyleSheet,
 7 |     Text,
 8 |     useColorScheme,
 9 |     View,
10 |     Dimensions,
11 |     UIManager,
12 |     LayoutAnimation,
13 |     TouchableOpacity
14 | } from 'react-native';
15 | import MaterialIcons from 'react-native-vector-icons/MaterialIcons'
16 | import Entypo from 'react-native-vector-icons/Entypo'
17 | 
18 | const DEVICE_WIDTH = Dimensions.get('window').width
19 | 
20 | 
21 | export const Triangle = (n, stylesTriangle, triangleHeight, trianglesWidth) => {
22 |     var Trianlge = []
23 |     for (let i = 0; i < n; i++) {
24 |         Trianlge.push(
25 |             <View style={[styles.arrowDown, {
26 |                 borderTopWidth: triangleHeight || DEVICE_WIDTH / (n * 2),
27 |                 borderRightWidth: DEVICE_WIDTH / (n * 2),
28 |                 borderBottomWidth: 0,
29 |                 borderLeftWidth: DEVICE_WIDTH / (n * 2),
30 |                 borderTopColor: stylesTriangle?.backgroundColor || 'white'
31 |             }]} />
32 |         )
33 |     }
34 |     return (
35 |         <View style={{ flexDirection: 'row', width: '100%' }}>
36 |             {Trianlge}
37 |         </View>
38 |     )
39 | }
40 | 
41 | const styles = StyleSheet.create({
42 | 
43 |     triangle: {
44 |         backgroundColor: 'transparent',
45 |         borderStyle: 'solid',
46 |         borderTopWidth: 0,
47 |         borderRightWidth: 5,
48 |         borderBottomWidth: 10,
49 |         borderLeftWidth: 5,
50 |         borderTopColor: 'transparent',
51 |         borderRightColor: 'transparent',
52 |         borderBottomColor: 'red',
53 |         borderLeftColor: 'transparent',
54 |     },
55 |     arrowDown: {
56 |         borderTopColor: "tomato",
57 |         borderRightColor: 'transparent',
58 |         borderBottomColor: 'transparent',
59 |         borderLeftColor: 'transparent',
60 |     },
61 | });


--------------------------------------------------------------------------------
/src/AnimatedInvoice/index.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | import {
 3 |     SafeAreaView,
 4 |     ScrollView,
 5 |     StatusBar,
 6 |     StyleSheet,
 7 |     Text,
 8 |     useColorScheme,
 9 |     View,
10 |     Dimensions,
11 |     UIManager,
12 |     Platform,
13 |     LayoutAnimation,
14 |     TouchableOpacity
15 | } from 'react-native';
16 | import MaterialIcons from 'react-native-vector-icons/MaterialIcons'
17 | import Entypo from 'react-native-vector-icons/Entypo'
18 | import { Triangle } from './Triangle';
19 | 
20 | const DEVICE_WIDTH = Dimensions.get('window').width
21 | 
22 | 
23 | const AnimatedInvoice = ({ triangleNumbers, children, barStyle, triangleStyle, triangleHeight, trianglesWidth, barComponent, iconColor }) => {
24 | 
25 |     const [expand, setExpand] = useState(false)
26 | 
27 |     if (Platform.OS === 'android') {
28 |         UIManager.setLayoutAnimationEnabledExperimental(true);
29 |     }
30 | 
31 |     const toggleExpand = () => {
32 |         LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
33 |         setExpand(!expand)
34 |     }
35 | 
36 |     return (
37 |         <>
38 |             <View style={[barStyle, { width: triangleNumbers ? DEVICE_WIDTH : null, backgroundColor: barStyle?.backgroundColor || 'white', height: 50, flexDirection: 'row', alignItems: 'center' }]}>
39 |                 {barComponent}
40 |                 <TouchableOpacity onPress={toggleExpand} style={{ position: 'absolute', right: 10 }}>
41 |                     <MaterialIcons name={expand ? 'arrow-drop-up' : 'arrow-drop-down'} size={30} color={iconColor} />
42 |                 </TouchableOpacity>
43 |             </View>
44 |             <View style={{ height: expand ? null : 0, width: triangleNumbers ? DEVICE_WIDTH : null, overflow: 'hidden', backgroundColor: 'white' }}>
45 |                 {children}
46 |             </View>
47 |             {Triangle(triangleNumbers, triangleStyle, triangleHeight, trianglesWidth)}
48 |         </>
49 |     )
50 | }
51 | 
52 | export default AnimatedInvoice


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # React Native Collapsible Animated Invoice 🔥
 2 | 
 3 | ![platforms](https://img.shields.io/badge/platforms-Android%20%7C%20iOS-brightgreen.svg?style=for-the-badge&colorB=191A17)
 4 | [![Version](https://img.shields.io/npm/v/@nithinpp69/react-native-animated-button.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-collapsible-invoice)
 5 | 
 6 | 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. 
 7 | 
 8 | ![](https://user-images.githubusercontent.com/20586489/194037825-92efe72b-2e00-407d-8b18-ab949a85e1ea.mp4)
 9 | 
10 | <a href="https://www.buymeacoffee.com/kapilavaiya" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a>
11 | 
12 | 
13 | ## Example
14 | 
15 | ## [Try this exapmple on Expo Snack ❤️](https://snack.expo.dev/@avaiyakapil/react-native-collapsible-animated-invoice)
16 | 
17 | ### --------------- ios ---------------  ------------- Android -------------
18 | ![](Demo/example_ios.gif)
19 | ![](Demo/example_android.gif)
20 | 
21 | ## Prerequisites
22 | 
23 |  ⚠️ Peer Dependencies
24 | 
25 |  * [react-native-vector-icons](https://www.npmjs.com/package/react-native-vector-icons)
26 | 
27 | This component has a peer dependency on react-native-vector-icons has to be installed and linked into your project.
28 | Follow [react-native-vector-icons](https://www.npmjs.com/package/react-native-vector-icons) to install the dependency.
29 | 
30 | ## Installation
31 | 
32 | Supported version: react-native >= 0.59.0
33 | 
34 |   ```bash
35 |   npm install react-native-collapsible-invoice
36 |   ```
37 | 
38 | ## Example
39 | 
40 | #### contains code for one invoice
41 | 
42 | 
43 | ```jsx
44 | ...
45 | import AnimatedInvoice from 'react-native-collapsible-invoice';
46 |  
47 |  const App = () => {
48 |   return (
49 |   ...
50 |       <View>
51 |         <AnimatedInvoice
52 |           triangleNumbers={'20'}
53 |           triangleHeight={10}
54 |           barStyle={{ backgroundColor: 'white', }}
55 |           triangleStyle={{ backgroundColor: 'white' }}
56 |           iconColor={'black'}
57 |           barComponent={ <Your Component/> }
58 |         >
59 |         </AnimatedInvoice>
60 |        </View>
61 |        ...
62 |         )}
63 |        
64 | const styles = StyleSheet.create({
65 | 
66 |   container: {
67 |       flex:1
68 |    }
69 |    
70 | });
71 | 
72 | export default App;
73 | 
74 | ```
75 | 
76 | ## Props
77 | 
78 | | Prop                  | Description                                                                                 | Type                          | Default Value | Required |
79 | | :--------------------:|:-------------------------------------------------------------------------------------------:|:-----------------------------:|:-------------:|:--------:|
80 | | triangleNumbers       | Triangles you want at the bottom of the component                                           | Number                        | 0             | false    |
81 | | triangleHeight        | Triangle Height                                                                             | Number                        | Best Fit  | false    |
82 | | barStyle              | Bar Container Style                                                                         | ViewStyle                     | {}           | false    |
83 | | triangleStyle         | Trianlge Style                                                                              | ViewStyle                     | {}           | false     |
84 | | iconColor             | Color for the arrow up and down icons                                                       | String                        | black     | false    |
85 | | barComponent          | Bar Component                                                                               | React.Component               | null      | false    |
86 | 
87 | 
88 | 
89 | 


--------------------------------------------------------------------------------