1.0.1 • Published 7 years ago
react-native-show-hide-toggle-box v1.0.1
react-native-show-hide-toggle-box
React Native Toggle Box for showing/hiding content with sliding effect. Should looks like classical slideToggle() from jQuery.
ToggleBox
must be surrounded withScrollView
(not as the closest parent)- PRs welcome
Demo
Installation
npm i react-native-show-hide-toggle-box --save
or
yarn add react-native-show-hide-toggle-box --save
Use
import ToggleBox from 'react-native-show-hide-toggle-box'
...
<ScrollView style={styles.container}>
<ToggleBox label='Show me something' value='asd' style={{backgroundColor: '#ddd', borderBottomWidth: 1}}>
<View style={{height: 300, alignItems: 'center', justifyContent: 'center', backgroundColor: '#eee'}}>
<Text>Hello, how are you?</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 |