How to center text inside a component?

Question

I tried anything but I couldn't get the text to center without effecting the all compoenent, textAlign does not work, alignItems: 'center' just make the all component take the all line of space and center the component.

how could I center the text without effecting the component behavior?

const UserCard = ({ user }) => {
    return <View style={styles.container}>
        <Image style={styles.image} source={{ uri: user.image_uri }} />
        <Text style={styles.name}>{user.name}</Text>
    </View>
}

const styles = StyleSheet.create({
    container: {
        borderWidth: 1
    },
    image: {
        width: 85,
        height: 70,
        borderRadius: 4,
        marginBottom: 5
    },
    name: {
        fontWeight: 'bold',
        fontSize: 12
    }
});

export default UserCard;

Answer 1

const styles = StyleSheet.create({
    container: {
        borderWidth: 1,
        display: flex,
        flexDirection: column
    },
    image: {
        width: 85,
        height: 70,
        borderRadius: 4,
        marginBottom: 5
    },
    name: {
        fontWeight: 'bold',
        fontSize: 12,
        alignSelf: center //or whatever you want the alignment to be
    }
});

Align items will center all children, but align-self will just center the one child (the text).