CODEWITHSUNDEEP
react-nativereact-native-ios
Picolo
Picolo

Reputation: 55

How to break line of label on "react-native-picker-select"

I'm using react-native-picker-select from this repository: https://www.npmjs.com/package/react-native-picker-select. The labels I'm using are to big to fit the screen, so the text isn't completely displayed. I've tried some styling on the text but not seems to work.

This is my component:

<View
  style={[styles.flex1, styles.row, {justifyContent: aligned ? aligned : 'flex-start'}]}
>
  <TouchableOpacity style={[styles.dropdownView, styles.shadowView, {width: this.props.dropdownWidth}]}>
     <RNPickerSelect
       value={this.props.value ? this.props.value : ''}
       placeholderTextColor={'black'}
       placeholder={placeholder}
       items={this.props.options}
       onValueChange={value => this.onDropdownChange(value)}
     />
  </TouchableOpacity>
</View>

This is how I'm using it:

<Dropdown
  value={options.values![1]}
  dropdownWidth={'100%'}
  aligned={'center'}
  placeholder={'Atividade e evidência de doença:'}
  options={
    {label: 'Atividade normal e trabalho; sem evidências de doença.', value: 0, key: 1},
    {label: 'Atividade normal e trabalho; alguma evidência de doença.', value: 1, key: 0.5},
    {label: 'Atividade normal com esforço; alguma evidência de doença.', value: 2, key: 0.5},
    {label: 'Incapaz para o trabalho. Doença significativa.',  value: 3, key: 0.5},
    {label: 'Incapaz para os hobbies/trabalho doméstico. Doença significativa.', value: 4, key: 0.5},
  }
  onDropdownSelect={(value) => null}
/>

I expected a line break when the text gets to big to fit on the line.

Upvotes: 3

Views: 5187

Answers (3)

JTan
JTan

Reputation: 209

Using RNPickerSelect 8.0.4, you can do:

<RNPickerSelect
    textInputProps={{multiline: true}}
    pickerProps={{numberOfLines: 10}}
    style={styles.pickerStyle}
    useNativeAndroidPickerStyle={false}
    onValueChange={handleChange}
    Icon={() => {return <Icon name='arrow-drop-down' size={25}/>}}
    items={props.items}
/>

textInputProps={{multiline: true}} will allow the picker's selected value to be wrapped.
Note that you will need useNativeAndroidPickerStyle={false} for this to work on Android - which means you will need to style the picker manually with inputAndroid and inputAndroidContainer in your styles.

pickerProps={{numberOfLines: 10}} will allow for the text in each label to be wrapped when in selecting mode for Android. You do not need useNativeAndroidPickerStyle={false} for this to work on Android.
For ios, this feature was actually added to the library that this library wraps around in version 2.2.0.
However, at least in Expo, react-native-picker-select library currently only supports 2.1.0.

Upvotes: 4

drohden
drohden

Reputation: 11

In case you are still looking for a solution. If it is just to display the picked item on the screen (and not to have a multiline item in the picker itself), you can add a child to the RNPickerSelect component.

So in your case just update your component to:

<View style={[styles.flex1, styles.row, {justifyContent: aligned ? aligned : 'flexstart'}]}>
  <TouchableOpacity style={[styles.dropdownView, styles.shadowView, {width: this.props.dropdownWidth}]}>
    <RNPickerSelect
     value={this.props.value ? this.props.value : ''}
     placeholderTextColor={'black'}
     placeholder={placeholder}
     items={this.props.options}
     onValueChange={value => this.onDropdownChange(value)}
   >
     <Text style={{...}}>{this.props.value != null ? this.props.items[this.props.value].label : this.props.items[0].label}</Text>
    </RNPickerSelect>
  </TouchableOpacity>
</View>

Upvotes: 1

lfkwtz
lfkwtz

Reputation: 1017

Unfortunately, that's a limitation of the native picker module on iOS. On Android, there may be a way to handle this, but I haven't tested it.

Upvotes: 0

Related Questions