0.1.3 • Published 5 years ago
react-native-da-expandable v0.1.3
react-native-da-expandable
You have two main elements
- CONTAINER
The container goal is for you to wrapp the collapsible elements inside of it. THis element allows you to scroll and collapse its children
- COLLAPSIBLE
The collapsible element itself
Properties
Container
| prop | default | type | isRequired | description | example |
|---|---|---|---|---|---|
| separator | null | Object | false | One react component to use as separator between the container childs | () => <View style={{marginVertical: 10}}> |
| footer | Object | Object | false | One react component to use as the container footer | () => FOOTER |
| listRef | null | Object | false | You can get the reference for the Container in order to scroll for ex | ref => this.containerRef = ref |
| changedLayouts | Object | Object | false | This property lets you get all the layouts of the container childs. Then you can perform your logic and scroll to where you want |
Collapsible
| prop | default | type | isRequired | description | example |
|---|---|---|---|---|---|
| id | null | Object | false | One react component to use as separator between the container childs | 'myid' |
| namespace | undefined | string | false | The collapsible element can have one namespace. The container will then make sure only one element on the same namespace is expanded | 'expandall' |
| renderHeader | Object | true | One component to be rendered has the header. Here you will get toggle one function to toggle manually and one boolean indicating if it is expanded | (toggle, isExpanded) => HEADER | |
| renderContent | Object | true | One component to be rendered has the content. | () => HEADER |
TODO
- Animate the while toggling expandable state
- Add JSDOcs