Nativebase: How to display Icon and text
I want to display a Icon on the Left and a Text on the Right But it always look false Like the Text is not on the same level as as the icon.
I Use:
<Text>
<Icon ios='ios-mail-outline' android='ios-mail-outline'/>
<Text> {this.store.user.email}</Text>
</Text>
awaiting response
ZeroSoulEater
All 6 comments
FWIW, I tried using a flexbox referring to Layout with Flexbox.
<View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
<Icon ios='ios-mail-outline' android='ios-mail-outline'/>
<Text>[email protected]</Text>
</View>
android:
ios:
horiuchie
on 22 Nov 2017
👍14
❤2
😕2
Thats cool thank you!!
ZeroSoulEater
on 22 Nov 2017
@ZeroSoulEater Thats happening with React Native <Text> also
@horiuchie 's workaround runs fine
Also that you can try wrapping <Icon and <Text> with NativeBase's <ListItem>
that gives proper spacing between icon and text with appropriate lineHeight
akhil-geekyants
on 22 Nov 2017
👍1
@akhil-geekyants With ListItem I got this Line
<ListItem icon>
<Left>
<Icon name="plane" />
</Left>
<Body>
<Text>Airplane Mode</Text>
</Body>
<Right/>
</ListItem>
🎉1
@ZeroSoulEater just set style={{ borderBottomColor: 'transparent' }} for <Body/> component and remove <Right/> if it don't have any children
<ListItem icon>
<Left>
<Icon name="plane" />
</Left>
<Body style={{ borderBottomColor: 'transparent' }}>
<Text>Airplane Mode</Text>
</Body>
</ListItem>
Closing this issue due to no response
akhil-geekyants
on 4 Dec 2017
Was this page helpful?
0 / 5 - 0 ratings
Related issues
bsiddiqui
路
3Comments
aloifolia
路
3Comments
maphongba008
路
3Comments
natashache
路
3Comments
muthuraman007
路
3Comments
Most helpful comment
FWIW, I tried using a flexbox referring to Layout with Flexbox.
android:
ios:
