'Text element has right padding when text wraps

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
    }
});