#go to the wesite and read the docs
Web_link: https://hossein-zare.github.io/react-native-dropdown-picker-website/docs/
#sample:
#installation
npm install react-native-dropdown-picker
const [facultyOpen, setFacultyOpen] = useState(false);
const [facultyValue, setFacultyValue] = useState('electrical');
const [faculty, setFaculty] = useState([
{ label: 'Electrical & Computer Engineering', value: 'electrical' },
{ label: 'Civil Engineering', value: 'civil' },
{ label: 'Mechanical Engineering', value: 'mechanical' },
]);
#after-return
#used tailwind for style. delete all tw`` part if you don't use tailwind css
<View style={[tw`mb-3 z-50`]}>
<Text
style={[
tw`font-semibold text-purple-600 ml-1 mb-1`,
{ fontSize: 18 },
]}
>
Faculty
</Text>
<DropDownPicker
open={facultyOpen}
value={facultyValue}
items={faculty}
setValue={setFacultyValue}
setItems={setFaculty}
setOpen={setFacultyOpen}
style={[tw`bg-gray-200 w-full px-4 py-3 border-0`]}
containerStyle={[tw`border-0 bg-gray-200 rounded-lg`]}
dropDownContainerStyle={[
tw``,
{
backgroundColor: '#E5E7EB',
borderRadius: 10,
zIndex: 1,
borderWidth: 0,
},
]}
/>
</View>
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:spinnerItemStyle">@style/SpinnerItem</item>
<item name="android:spinnerDropDownItemStyle">@style/SpinnerDropDownItem</item>
</style>
<!-- Item selected font. -->
<style name="SpinnerItem" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:fontFamily">casual</item>
</style>
<!-- Dropdown options font. -->
<style name="SpinnerDropDownItem" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:fontFamily">casual</item>
<item name="android:padding">8dp</item>
</style>
<resources>