Reputation: 2999
Native base is really a great library for styling react / react-native. I only have one question for icon button, I wish the icon on top and text in the bottom, not align together. I have tried to alignSelf:'center'
for the icon and text but it doesn't work. Anyone can help ? Thanks a lot.
<Button transparent style={styles.capturebtn}>
<Icon name="camera" type="MaterialCommunityIcons" style={styles.capturebtnicon}/>
<Text style={styles.capturebtntxt} uppercase={false}>Open Camera</Text>
</Button>
capturebtntxt:{
alignSelf:'center',
fontSize:15,
fontFamily:'Gotham-Medium',
color:'#AAAAAA'
},
capturebtnicon:{
alignSelf:'center',
color:'#E3E3E3',
fontSize:35
},
capturebtn:{
elevation:0,
borderColor:'#e5e5e5',
borderWidth:1,
borderRadius:7,
justifyContent:'center',
alignItems:'center',
width:((Dimensions.get('window').width - 150 - 60) / 2) - 10
},
Upvotes: 1
Views: 2955
Reputation: 256
Or you can use vertical
vertical - true - boolean - Use this prop to vertically align footer elements like icons and text
example
Upvotes: 0