Skip to content

Latest commit

 

History

History
36 lines (25 loc) · 3.18 KB

README.md

File metadata and controls

36 lines (25 loc) · 3.18 KB

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