rn-select-option

This package contains React Native component which is like SELECT tag in HTML. It wraps Picker component of '@react-native-picker/picker' package. This package contains two components: Select and Option.

Select component is a replacement for Picker component of '@react-native-picker/picker' package. It's more friendly to the style attributes such as padding, height and border. Some style attributes seem ignored by Picker component. Also, the iOS version has 'dialog' mode like the Android version one. Select component has all Picker's props as described in this documentation. Additionally, Select has two more props: placeholder and placeholderTextColor like TextInput component.

Option component is an alias for Picker.Item component.

How to install

npm i rn-select-option @react-native-picker/picker

@react-native-picker/picker package must be installed explicitly to avoid error even if rn-select-option sets it as a required dependency not peer-dependency.

For iOS, there is one more step:

npx pod-install

Example of usage:

import React from 'react';
import {SafeAreaView} from 'react-native';
import {
    Select,
    Option,
} from 'rn-select-option';
const countries = require('countries-list').countries;
const items = Object.keys(countries).map(item => ({
    key: item,
    value: item,
    label: countries[item].name,
}));
export default function App() {
    const [val, setVal] = React.useState(null);
    
    return <SafeAreaView>
        <Select 
            selectedValue={val}
            onValueChange={setVal}
            placeholder="--please select--"
        >
            {items.map(item => <Option key={item.key} value={item.value} label={item.label} />)}
        </Select>
    </SafeAreaView>;
}