React Native - Align text in centre - css

Question

import React from 'react'
import { View, StyleSheet, Image, Text } from 'react-native'
function RecentlyJoinedProfileCard({title, image}) {
return (
<View style={styles.container}>
<View>
<Image style={styles.image} source={{uri: image}} />
<Text styles={styles.name}>{title}</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
paddingBottom:55
},
image: {
width:100,
height:100,
borderRadius: 75,
marginHorizontal:10,
marginVertical:10
},
name: {
fontSize: 15,
fontWeight: "bold",
alignSelf: 'center'
}
})
export default RecentlyJoinedProfileCard
This gives me the following:
The text is not aligning in the center of each image:
I've tried alignSelf: 'center' style in the text
I've also tried applying the following to the container
justifyContent: 'center',
alignItems: 'center',
Any idea on how to centre the name so its aligned in the centre rather than to the left.

Answer 1

Try this ->
<View style={{alignItems:'center'}}>
<Image style={styles.image} source={{uri: image}} />
<Text styles={styles.name}>{title}</Text>
</View>

Answer 2

Why are you nesting View inside View?
Okay for your style to be applied on the child elements you need to give the style to the nested View and use alignItems instead of alignSelf
E.g
<View style={styles.subContainer}>
<Image style={styles.image} source={{uri: image}} />
<Text styles={styles.name}>{title}</Text>
</View>
const styles = StyleSheet.create({
...
subContainer: {
justifyContent: 'center',
alignItems: 'center'
}
})

Answer 3

Just add alignItems && justifyContent "center" to parent View to align your items in center
just update your styles code like this:
const styles = StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: 'center'
paddingBottom:55
},
})

Answer 4

Change the alignSelf to textAlign: 'center'
name: {
//...
textAlign: 'center'
}