1.0.5 • Published 6 years ago
react-native-smart-picker v1.0.5
react-native-smart-picker
React Native Smart Picker is easy wrapper for React Native Picker. Allows toggling the picker open and closed on iOS and native behaviour on Android.
- The
SmartPicker
scene should be wrapped in aScrollView
to allow the page to grow as the toggle opens - Works on Android but there are no toggle effect (follows native UX guidelines)
- PRs welcome
Demo
Installation
npm i react-native-smart-picker --save
or
yarn add react-native-smart-picker --save
Use
import SmartPicker from 'react-native-smart-picker'
...
this.state = {
selected: "A",
};
handleChange(value: string) {
this.setState({
selected: value
});
}
<ScrollView style={"Your custom styles here"}>
<View style={{flex: 1, marginTop: 20}}>
<ScrollView style={styles.container}>
<SmartPicker
selectedValue={this.state.selected}
label='Set you favorite country'
onValueChange={this.handleChange.bind(this)}
>
<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' />
</SmartPicker>
</ScrollView>
</View>
</ScrollView>
Props
Prop name | Default prop | Required | Note |
---|---|---|---|
androidBoxStyle | {} | - | Custom styles |
androidPickerTitle | true | No | Enable or disable title in android picker box |
androidPickerStyle | {} | - | Custom styles |
androidPickerWrapperStyle | {} | - | Custom styles |
androidBoxStyle | {} | - | 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 |