FeelRightz
FeelRightz

Reputation: 2999

Native base icon button on top

enter image description here

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

Answers (2)

Mike Victoria
Mike Victoria

Reputation: 256

Or you can use vertical

vertical - true - boolean - Use this prop to vertically align footer elements like icons and text

example

enter image description here

Upvotes: 0

FeelRightz
FeelRightz

Reputation: 2999

I found flexDirection: 'column' for button fixed this. =)

Upvotes: 3

Related Questions