A React Native Android module to work around the 'Android Picker not consistently firing onValueChange()' issue.
We aren't on the NPM registry yet so:
npm install github:tombailey/react-native-fixed-android-picker --saveLink the native modules:
react-native linkimport React, {
Component,
} from 'react';
import Picker from 'react-native-fixed-android-picker';
class SomeComponent extends Component {
constructor(props) {
super(props);
this.fruitItems = [{
label: 'Apples',
value: 'app',
}, {
label: 'Bananas',
value: 'ban',
}, {
label: 'Mangos',
value: 'man',
}];
this.state = {
selectedValue: fruitItems[0].value,
};
}
render() {
<Picker
selectedValue={this.state.selectedValue}
items={this.fruitItems}
onValueChange={(fruitItem, index) => {
this.setState({
selectedValue: fruitItem.value,
})
}} />
}
}This picker is made of a few components which makes it difficult to support custom styling since:
- you would need to know what each component does
- you would likely need to pass style props for each of those components
- the native Android dialog shown with the picker's options needs to be themed natively
We have provided support for passing a styles prop which can change how the label and icon for the picker look:
<Picker
items={this.fruitItems}
...
styles={{
label: {
backgroundColor: '#FF0000',
fontSize: 20,
},
icon: {
backgroundColor: '#00FF00',
marginLeft: 100,
},
}} />We have also provided support for two predefined themes (Themes.DARK or Themes.LIGHT):
import Picker, {
Themes,
} from 'react-native-fixed-android-picker';
...
<Picker
items={this.fruitItems}
...
theme={Themes.DARK} />If neither of these options work for you, feel free to take a fork of this library and change it how you wish.
MIT