npm.io
1.0.3 • Published 8 years ago

react-native-togglebox

Licence
MIT
Version
1.0.3
Deps
2
Vulns
0
Weekly
0
Stars
1

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 a ScrollView to allow the page to grow as the toggle opens
  • PRs welcome

Demo

Showtime

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

Keywords