View won't wrap around Text

Question

I'm trying to build an app using React Native, I want to create a Chip component, but I'm having trouble making the parent view around the child view so each chip would be different in size (according to the text).

I tried to search, saw few answers, but nothing works for some reason. This is what I have:

return (
    <View style={styles.chip}>
        <Text style={styles.chipTitle}>{Categories.SelfImprovment}</Text>
    </View>
)

This is the styles:

const styles = StyleSheet.create({
    chip: {
        height: 32,
        margin: 8,
        padding: 8,
        borderRadius: 16,
        backgroundColor: Colors.black,
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        flexWrap: 'wrap',
    },
    chipTitle: {
        color: '#fff',
        flex: 1,
    }
});

This is what I get:

What am I doing wrong here? according to the posts I saw, this looks like the correct way to make the parent view wrap around the child view.