1.0.2 • Published 1 year ago

react-native-collapsible-invoice v1.0.2

Weekly downloads
-
License
ISC
Repository
github
Last release
1 year ago

React Native Collapsible Animated Invoice 🔥

platforms Version

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 -------------

npm.io npm.io

Prerequisites

⚠️ Peer Dependencies

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

PropDescriptionTypeDefault ValueRequired
triangleNumbersTriangles you want at the bottom of the componentNumber0false
triangleHeightTriangle HeightNumberBest Fitfalse
barStyleBar Container StyleViewStyle{}false
triangleStyleTrianlge StyleViewStyle{}false
iconColorColor for the arrow up and down iconsStringblackfalse
barComponentBar ComponentReact.Componentnullfalse