react-native-picker / picker

Picker is a cross-platform UI component for selecting an item from a list of options.
MIT License
1.5k stars 279 forks source link

It's really hard to figure out styling #515

Open korayerdem89 opened 1 year ago

korayerdem89 commented 1 year ago

I think docs should be updated to be more clear how we can style the picker container, item vs. Its really, really hard to make it

speedhawk21 commented 9 months ago

Here is the styling I was able to use for basic single inline selection:

<Picker
  style={{
    flex: 1,
    fontSize: 23,
    height: 48,
    justifyContent: "center",
    overflow: "hidden",
  }}
  selectedValue={selectedLanguage}
  numberOfLines={1}
  onValueChange={(itemValue, itemIndex) =>
    setSelectedLanguage(itemValue)
  }
>
  <Picker.Item style={styles.pickerItem} label="EN" value="EN" />
  <Picker.Item label="ES" value="ES" />
  <Picker.Item label="DE" value="DE" />
  <Picker.Item label="IT" value="IT" />
  <Picker.Item label="FR" value="FR" />
</Picker>