0

I am trying to use a button for navigation, so I want the button to be a group of an icon and text that I can click to navigate to a new page. The functionality works by doing this:

<FontAwesome5.Button style={styles.iconButton} name="history" size={10} color={Colors.light.tabBackground} onPress={() => navigation.navigate('TabOneScreen')}>
    <Text style={styles.subText} lightColor={Colors.light.tabBackground}>History</Text>
</FontAwesome5.Button>

...

const styles = StyleSheet.create({
    iconButton: {
        flexDirection: "column",
        justifyContent: 'center',
        alignItems: 'center',
        width: 100,
        backgroundColor: 'red',
      },
  });

This button is rendered like so:

enter image description here

The vertical spacing is fine. However, while the text is centered horizontally, the icon obviously isn't. No matter what styles I have tried, I have been unable to get the icon and text to both be centered horizontally as a button. The background would normally be removed, but I added it here for debug purposes.

Ken White
  • 123,280
  • 14
  • 225
  • 444
figbar
  • 714
  • 12
  • 35

1 Answers1

0

add the style directly to the icon :

<FontAwesome5.Button iconStyle={{ alignSelf: 'center' }}  ...ther props>
...text
</FontAwesome5.Button>
Nader Alfakesh
  • 201
  • 2
  • 5
  • That helped move it along the axis if I changed the values of alignSelf in icon style to either flex-start or flex-end, but it looks the exact same when it is set to center. – figbar Jun 05 '21 at 04:19