Nativebase: How can I target the Picker text alignment on Android?
Hi. I'd like to justifyContent: 'flex-end' for the text inside a picker but it seems to have no affect on Android.
I'm trying to move 3 hours and Yes right justified next to the dropdown.
Thanks for any help!
GollyJer
All 6 comments
@GollyJer Take a look at NativeBase-KitchenSink for examples
https://github.com/GeekyAnts/NativeBase-KitchenSink/blob/master/src/screens/list/list-icon.js
SupriyaKalghatgi
on 23 Mar 2018
eh didnt answer question. Im not sure how to do this either
stokesbga
on 27 Mar 2018
@stokesbga I shared source code of similar use case
I am sorry if you cant do this either
SupriyaKalghatgi
on 27 Mar 2018
The use case is to put the picker in <Right></Right>? That didnt work for me
stokesbga
on 27 Mar 2018
@stokesbga Yeah, the answer here wasn't helpful but we figured it out on our own.
Here's the component code from the screenshot above.
<View style={rowContainer}>
<Text style={rowLabelText}>Timeline Interval</Text>
<Picker
style={internalPickerContainer}
mode="dropdown"
iosHeader="Select Interval"
selectedValue={timeInterval}
onValueChange={setTimeInterval}
//
itemStyle={pickerIosListItemContainer}
itemTextStyle={pickerIosListItemText}
>
<Picker.Item label="1 hour" value={1} />
<Picker.Item label="2 hours" value={2} />
<Picker.Item label="3 hours" value={3} />
</Picker>
</View>
The row with the title and the picker need to be space-between justified to push the title to the left and the picker to the right.
rowContainer: {
height: 64,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingLeft: 16,
},
Then, to "align" the text to the right you actually have to resize the picker on Android.
internalPickerContainer: {
flex: Platform.OS === 'ios' ? 1 : null, // for Android, not visible otherwise.
width: Platform.OS === 'ios' ? undefined : 120,
},
And for completeness here's the remaining css.
javascript
pickerIosListItemContainer: {
flex: 1,
height: 60,
justifyContent: 'space-between',
alignItems: 'center',
},
pickerIosListItemText: {
fontSize: 16,
},
Hopefully that helps.
GollyJer
on 27 Mar 2018
As per my comment here https://github.com/GeekyAnts/NativeBase/issues/1716#issuecomment-375538617
Here is the code snippet
<ListItem icon>
<Left>
<Button style={{ backgroundColor: "#4CDA64" }}>
<Icon name="arrow-dropdown" />
</Button>
</Left>
<Body>
<Text>Pick SIM</Text>
</Body>
<Right>
<Picker
note
iosHeader="Select Your Sim"
iosIcon={<Icon name="ios-arrow-down-outline" />}
mode="dropdown"
selectedValue={this.state.selected1}
onValueChange={this.onValueChange.bind(this)}
>
<Item label="TATA" value="key0" />
<Item label="AIRTEL" value="key1" />
</Picker>
</Right>
</ListItem>
Here is the screenshot for this
@stokesbga i hope your query is addressed appropriately
The use case is to put the picker in
<Right></Right>
SupriyaKalghatgi
on 28 Mar 2018
Related issues
mcpracht
路
3Comments
agersoncgps
路
3Comments
Bundas
路
3Comments
bsiddiqui
路
3Comments
natashache
路
3Comments
Most helpful comment
@stokesbga Yeah, the answer here wasn't helpful but we figured it out on our own.
Here's the component code from the screenshot above.
The row with the title and the picker need to be
space-betweenjustified to push the title to the left and the picker to the right.Then, to "align" the text to the right you actually have to resize the picker on Android.
And for completeness here's the remaining css.
javascript pickerIosListItemContainer: { flex: 1, height: 60, justifyContent: 'space-between', alignItems: 'center', }, pickerIosListItemText: { fontSize: 16, },Hopefully that helps.