How to wrap the react-native <picker /> for the lengthy item text? #23887
Description
🐛 Bug Report
I have designed a picker using react native-base, and I'm trying to style it using styles.XML BUT its not working. I want my drop down items to wrap in second line when the length of the text exceeds the width.
Current Behavior
Expected Behavior
instead of dots text should come to next line
Code Example
class PickerExample extends Component {
state = {link: ''}
updateLink = (link) => {
this.setState({ link: link })
}
render() {
return (
<View>
<Picker selectedValue = {this.state.link} onValueChange = {this.updateLink}>
<Picker.Item label = "25 best small-business apps in 2018 - nerdwallet" value = "one" />
<Picker.Item label = "Top business apps, best apps for small business" value = "two" />
<Picker.Item label = "Collaboration & productivity apps for business" value = "three" />
</Picker>
<Text style = {styles.text}>{this.state.link}</Text>
</View>
)
}
}
export default PickerExample;
Styles.xml
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:spinnerItemStyle">@style/SpinnerItem</item>
<item name="android:spinnerDropDownItemStyle">@style/SpinnerDropDownItem</item>
</style>
<style name="SpinnerItem" parent="Theme.AppCompat.Light.NoActionBar">>
<item name="android:fontFamily">segoe-ui</item>
</style>
<style name="SpinnerDropDownItem" parent="Theme.AppCompat.Light.NoActionBar">>
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:singleLine">false</item>
</style>
Environment
Environment:
OS: Windows 10
Node: 11.9.0
Yarn: 1.13.0
npm: 6.5.0
Watchman: Not Found
Xcode: N/A
Android Studio: Version 3.3.0.0 AI-182.5107.16.33.5314842
Packages: (wanted => installed)
react: 16.3.2 => 16.3.2
react-native: 0.59.0 => 0.59.0