'Can we customise Picker for ios from roler type to alert type in React-Native?

This is in android looks like ,i want to display like this in Ios also
[2]: https://i.stack.imgur.com/DiY4m.png
This is Ios screen City picker i want change this like android one

i am using @react-native-picker/picker this library for that

<Text style={styles.keyText}>City*</Text>
          <View style={styles.pickerborder}>
            <Picker
              selectedValue={city}
              style={{ height: 42, justifyContent: 'center' }}
              itemStyle={{ fontSize: 12 }}
              onValueChange={(itemValue) => setCity(itemValue)}>
              <Picker.Item style={{ fontSize: 12 }} label="Choose City" value="" />
              <Picker.Item style={{ fontSize: 12 }} label="Noida" value="Noida" />
              <Picker.Item style={{ fontSize: 12 }} label="Lucknow" value="Lucknow" />
              <Picker.Item style={{ fontSize: 12 }} label="Delhi" value="Delhi" />
            </Picker>
          </View>

Looking for helpful answers..



Solution 1:[1]

In ios it's opens always and never closed it have some issue which should be resolved by React Native Team.

But now you can use react-native-picker-select

Basic Use

 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' },
             ]}
         />
     );
 };

It can be styled via native android. See HERE and HERE.

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:spinnerItemStyle">@style/SpinnerItem</item>
<item name="android:spinnerDropDownItemStyle">@style/SpinnerDropDownItem</item>
</style>

<style name="SpinnerItem" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:fontFamily">sans-serif-light</item>
<item name="android:textSize">18dp</item>
</style>

<style name="SpinnerDropDownItem" parent="Theme.AppCompat.Light.NoActionBar">
 <item name="android:textColor">#ffffff</item>
 <item name="android:textSize">18dp</item>
 <item name="android:fontFamily">sans-serif-light</item>
 <item name="android:gravity">center</item>
 <item name="android:background">@drawable/mydivider</item>
</style>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Talha Akbar