react-native-togglebox
v1.0.3
Published
React Native Component for displaying content in an animated accordian style container. Based on https://github.com/jvaclavik/react-native-show-hide-toggle-box
Downloads
39
Maintainers
Readme
react-native-togglebox
React Native Toggle Box for showing/hiding content with sliding effect. Should looks like classical slideToggle() from jQuery.
- The
ToggleBox
scene should be wrapped in aScrollView
to allow the page to grow as the toggle opens - PRs welcome
Demo
Installation
npm i react-native-togglebox --save
or
yarn add react-native-togglebox --save
Use
import ToggleBox from 'react-native-show-hide-toggle-box'
...
<ScrollView style={styles.container}>
<ToggleBox label='Toggle this box' value='Tap Me' style={{backgroundColor: '#ddd', borderBottomWidth: 1}}>
<View style={{height: 300, alignItems: 'center', justifyContent: 'center', backgroundColor: '#eee'}}>
<Text>Hello, world!</Text>
</View>
</ToggleBox>
</ScrollView>
Props
|Prop name | Default prop | Required | Note
| --- | --- | --- | --- |
| arrowColor
| rgb(178, 178, 178)
| - | - |
| arrowSize
| 30
| - | - |
| arrowDownType
| 'keyboard-arrow-down'
| - | Icon name fromreact-native-vector-icons/MaterialIcons
|
| arrowUpType
| 'keyboard-arrow-up'
| - | Icon name fromreact-native-vector-icons/MaterialIcons
|
| children
| - | Yes | Element which you want to show inside of the box |
| expanded
| false
| - | Boolean if box should be expanded or not |
| label
| - | Yes | Left label on the left of title |
| style
| {}
| - | Custom styles |
| value
| null
| - | Value on the right title |