// https://www.npmjs.com/package/react-native-picker-select
// npm install react-native-picker-select
//# React Native users
//npm install @react-native-picker/picker
//npx pod-install
//# Expo
//expo install @react-native-picker/picker
import RNPickerSelect from 'react-native-picker-select';
export const Dropdown = () => {
return (
<RNPickerSelect
onValueChange={(value) => console.log(value)}
items={[
{ label: 'Football', value: 'football' },
{ label: 'Baseball', value: 'baseball' },
{ label: 'Hockey', value: 'hockey' },
]}
/>
);
};
// noice library to use with react native paper
import { PaperSelect } from 'react-native-paper-select';
// ...
const [colors, setColors] = useState({
value: '',
list: [
{ _id: '1', value: 'BLUE' },
{ _id: '2', value: 'RED' },
{ _id: '3', value: 'GREEN' },
{ _id: '4', value: 'YELLOW' },
{ _id: '5', value: 'BROWN' },
{ _id: '6', value: 'BLACK' },
{ _id: '7', value: 'WHITE' },
{ _id: '8', value: 'CYAN' },
],
selectedList: [],
error: '',
});
<PaperSelect
label="Select Colors"
value={colors.value}
onSelection={(value: any) => {
setColors({
...colors,
value: value.text,
selectedList: value.selectedList,
error: '',
});
}}
arrayList={[...colors.list]}
selectedArrayList={colors.selectedList}
errorText={colors.error}
multiEnable={true}
textInputMode="flat"
searchStyle={{ iconColor: 'red' }}
/>;