如何使按钮中的图标居中？

Question

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:

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.

Answer 1

add the style directly to the icon:

<FontAwesome5.Button iconStyle={{ alignSelf: 'center' }}  ...ther props>
...text
</FontAwesome5.Button>