Revision history [back]

There are two ways to adjust the width of a label in a React Native Picker:

1. Use the "labelStyle" prop:

You can set the "labelStyle" prop of the Picker component to adjust the style of the label, including its width.

Example:

<Picker
  label="Select an option:"
  labelStyle={{ width: 150 }}
>
  <Picker.Item label="Option 1" value="option1" />
  <Picker.Item label="Option 2" value="option2" />
  <Picker.Item label="Option 3" value="option3" />
</Picker>

1. Use a custom label component:

You can create your own custom label component and use it in the Picker component to adjust its width. You can set the style of the custom label component to adjust its width.

Example:

const CustomLabel = ({ label }) => (
  <View style={{ width: 150 }}>
    <Text>{label}</Text>
  </View>
);

<Picker
  label="Select an option:"
  mode="dropdown"
  dropdownIconColor="black"
  selectedValue={selectedValue}
  onValueChange={onValueChange}
  itemStyle={{ fontSize: 20 }}
  labelStyle={{ fontSize: 20 }}
  pickerStyle={{ borderWidth: 2 }}
  >
  <Picker.Item label={<CustomLabel label="Option 1" />} value="option1" />
  <Picker.Item label={<CustomLabel label="Option 2" />} value="option2" />
  <Picker.Item label={<CustomLabel label="Option 3" />} value="option3" />
</Picker>