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

Question

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.

Answer 1

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.