npm.io
1.0.2 • Published 9 years ago

react-native-toggle-picker

Licence
MIT
Version
1.0.2
Deps
1
Vulns
0
Weekly
0
Stars
3

react-native-toggle-picker

React Native Toggle Picker is easy wrapper for React Native Picker. It has better user experience on iOS.

  • TogglePicker must be surrounded with ScrollView (not as the closest parent)
  • Works also on Android but there are no toggle effect (it's not according UX guidelines)
  • PRs welcome

Demo

Showtime

Installation

npm i react-native-toggle-picker --save

or

yarn add react-native-toggle-picker --save

Use

import TogglePicker from 'react-native-toggle-picker'

...

<ScrollView style={styles.container}>
  <View style={{flex: 1, marginTop: 20}}>
    <ScrollView style={styles.container}>
      <TogglePicker
        selectedValue='CZ'
        label='Set you favorite country'
        onValueChange={() => {this.handleChange}}
      >
        <Picker.Item label='Austria' value='A' />
        <Picker.Item label='Czechia' value='CZ' />
        <Picker.Item label='Germany' value='DE' />
        <Picker.Item label='Poland' value='PL' />
        <Picker.Item label='Slovakia' value='SLO' />
      </TogglePicker>
    </ScrollView>
  </View>
</ScrollView>

Props

Prop name Default prop Required Note
androidBoxStyle {} - Custom styles
androidPickerStyle {} - Custom styles
androidPickerWrapperStyle {} - Custom styles
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
expanded false - Boolean if box should be expanded or not
iosBoxStyle {} - Custom styles
iosPickerStyle {} - Custom styles
iosPickerWrapperStyle {} - Custom styles
onValueChange - Yes Prop from RNPicker (expects func)
label - Yes Left label on the left of title
selectedValue - Yes Prop from RNPicker (expects any)
value null - Value on the right title