Issue
I want to start showing the text inside the picker component from the start without any padding applied. I researched but couldn't find a solution. I'm debugging in android.
My code:
<View style={[styles.pickerContainer]}>
<Picker
selectedValue={this.state.phoneCountryCode}
style={[styles.pickerText(text),{backgroundColor:'transparent', width: 80 }]}
itemStyle={{padding:0, backgroundColor:'yellow'}}
mode="dropdown"
onValueChange={(itemValue, itemIndex) =>
this.setState({ phoneCountryCode: itemValue })
}>
{Constants.CountryCodes.map((item, index) => (
<Picker.Item key={item} label={item.label} value={item.value} />
))}
</Picker>
</View>
Style:
pickerContainer:{
marginTop: 10,
position: 'absolute', left:0, bottom:0, zIndex:10,
},
pickerText:(text)=>({
color:'gray',
height: 40,
textAlign: 'left',
padding:0,
margin: 0,
}),
Solution
I had same issue with Picker component, it's quite tricky to style it correctly, I'm leaving some of my findings.
use negative marginLeft
to remove padding on the left.
use width
and wrapper view to manage padding on right.
use height
to fix vertical padding.
Just in case you can afford one dependency check some third-party components like this it's highly customizable
PS: You may have figured it by now, but I'm still leaving a remark for anyone else.
Answered By - AviKKi
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.