react-native-picker / picker

Picker is a cross-platform UI component for selecting an item from a list of options.
MIT License
1.53k stars 289 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 11 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>