'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 |
