I'm having trouble centering a Text component in React-Native - react-native

Question

I'm creating a custom Header for my Screens and I'm trying to center the route name.
The problem is that there exist another component for my back button and it's making the centering really difficult.
Here is my component;
export default function Header({ navigation }) {
const route = useRoute()
console.log(route)
return (
<SafeAreaView>
<View style={styles.container}>
<TouchableOpacity
style={styles.paddedContainer}
onPress={() => navigation.goBack()}>
<Icon name="left" size={25} color={'black'} />
</TouchableOpacity>
<Text style={styles.routeName}>{route.params.title}</Text>
</View>
</SafeAreaView>
)
}
const styles = StyleSheet.create({
container: {
width: '100%',
flexDirection: 'row',
backgroundColor: '#fff',
paddingBottom: 10,
elevation: 5,
zIndex: 5,
textAlign: 'center',
},
paddedContainer: {
marginLeft: SIZES.width * 0.05,
marginTop: SIZES.height * 0.02,
},
routeName: {
left: '50%',
fontSize: 22,
fontWeight: 'bold',
color: 'black',
marginTop: SIZES.height * 0.02,
},
})
I've tried textAlign, justifyContent, alignContent and all seems to be not working for my example.

Answer 1

First of all, your container need to have display:flex.
Second, there are two element inside container, so your title cannot be perfectly center.
Considered this, separate the component if you need another behaviour.
Here is the style that you need for center title element, but the <Icon/> will stay on the right. Play with flex-direction to make them in the way you want.
const styles = StyleSheet.create({
container: {
width: '100%',
display:'flex',
flexDirection: 'row',
justifyContent: 'center',
backgroundColor: '#fff',
paddingBottom: 10,
elevation: 5,
zIndex: 5,
textAlign: 'center',
},
paddedContainer: {
marginLeft: SIZES.width * 0.05,
marginTop: SIZES.height * 0.02,
},
routeName: {
left: '50%',
fontSize: 22,
fontWeight: 'bold',
color: 'black',
marginTop: SIZES.height * 0.02,
},
})

Answer 2

Please find below Code:
export default function Header({ navigation }) {
const route = useRoute()
console.log(route)
return (
<SafeAreaView style={{flex:1,justifyContent:'center'}}>
<View style={styles.container}>
<TouchableOpacity
style={styles.paddedContainer}
onPress={() => navigation.goBack()}>
<Icon name="left" size={25} color={'black'} />
</TouchableOpacity>
<Text style={styles.routeName}>{route.params.title}</Text>
</View>
</SafeAreaView>
)
}
const styles = StyleSheet.create({
container: {
width: '100%',
display:'flex',
flexDirection: 'row',
justifyContent: 'center',
backgroundColor: '#fff',
paddingBottom: 10,
elevation: 5,
zIndex: 5,
textAlign: 'center',
},
paddedContainer: {
marginLeft: SIZES.width * 0.05,
marginTop: SIZES.height * 0.02,
},
routeName: {
left: '50%',
fontSize: 22,
fontWeight: 'bold',
color: 'black',
marginTop: SIZES.height * 0.02,
},
})
Hope it will work!

Answer 3

I came up with an answer since the components of React-Native emit an onLayout prop, We could use it to get the width of an element. Then we can set the initial position of the object as absolute. Then set set the margin to device displays width and then get the width from the onLayout prop like so
<Text onLayout={(e) => setWidth(e.nativeEvent.layout.width)} />
Now that we have the width it's trivial matters to center the text. Just using the style from styleSheet and adding the margin. It would look something like this.
<Text style={{...styles.routeName, marginLeft: SIZES.width / 2 - width / 2}} onLayout={(e) => setWidth(e.nativeEvent.layout.width)} />
This centers it perfectly but with a couple of drawbacks. Since the event is emitted after the component is mounted the component sometimes jumps to place I've yet to come up with a better solution. Hope it helps some lost soul who comes across this.