Text element has right padding when text wraps - react-native

Question

I have a simple <Text> element in my react-native application and I can't figure out what's going on with this behavior.
When I provide a longer string and the <Text> element wraps the text, it seems to be adding a bunch of padding to the right side of the view.
Note: I've made the <Text> element have a red background just so it's easier to see what's going on in this image.
The left button has the wrapped text, the right button does not. Only when the text wraps do I see the strange padding.
Note that I'm using flexShrink: 1 so that my icon doesn't get stomped out by the text element.
<View style={styles.buttonContainer}>
<View style={styles.buttonContent}>
<Grid fill={'#fff'} style={[styles.buttonIcon, {marginRight: 6}]} />
<Text style={styles.buttonText}>
Something Longer Here
</Text>
</View>
</View>
const styles = StyleSheet.create({
buttonContainer: {
justifyContent: 'center',
paddingVertical: 14,
paddingHorizontal: 12,
borderRadius: 16,
backgroundColor: '#27292d',
opacity: 0.90,
shadowColor: '#000',
shadowOffset: { width: 0, height: 1},
shadowOpacity: 0.8,
shadowRadius: 1,
elevation: 5
},
buttonContent: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center'
},
buttonIcon: {
width: 16,
height: 16,
flexShrink: 1
},
buttonText: {
color: 'white',
fontSize: 14,
lineHeight: 16,
backgroundColor: '#ff0000',
fontFamily: 'GeezaPro',
flexShrink: 1
}
});
Update
I've put together this small example to demonstrate the problem.
https://snack.expo.dev/72_24tf4O
When run on the web it looks like this:
But when run on android, it looks like this: