Can't align 2 views vertically and horizontally in React-Native - react-native

Question

I have 2 Views One view on the left that have 2 items aligned next to each other, and the other is on the right like this, and on IOS it's worse
The problem as you can see here the name is not align to the arrow, I can't figure what the reason is. Here is my code:
<View style={styles.header}>
<View style={styles.leftHeader}>
<TouchableOpacity onPress={() => navigation.goBack()}>
<ArrowLeft />
</TouchableOpacity>
<View>
<Text style={styles.username}>{user && user.username}</Text>
</View>
<TouchableOpacity
onPress={() => setMoreModalVisible(true)}
style={styles.twoDots}>
<TwoDots />
</TouchableOpacity>
</View>
and here is the styling:
header: {
paddingHorizontal: wp(3),
flexDirection: 'row',
marginTop: hp(2.5),
marginBottom: hp(1),
justifyContent: 'space-between',
alignItems: 'center',
},
leftHeader: {
flexDirection: 'row',
justifyContent: 'flex-start',
textAlignVertical: 'center',
},
username: {
fontFamily: semiBoldFont,
fontSize: 15,
paddingLeft: wp(3),
},

Answer 1

Check the style of <ArrowLeft /> component. There might be some padding or margin applied there.
Or provide us with a snack for you code so we can be able to help you.

Answer 2

You can't change the height of the header because the headerStyle prop doesn't have a height prop.
You can follow the docs reference on this link:
https://reactnavigation.org/docs/headers#adjusting-header-styles
Another way to modify the header style you can set the headerShown prop to false and build your own header in the component where you can define the view height of your custom header, but be carefully because if you turn of the header in react-navigation then you have to use the safeareaview from react-native-safe-area-context because your screen will be slip up. On Android you don't take care about this.
A little code snipett for the example:
<Stack.Screen
name="example"
component={Component}
options={{headerShown: false}}
/>
function Component() {
const headerHeight = Platform.OS === 'ios' ? 44 : 20
return (
<SafeAreaView edges={["top"]}>
<View style={{height: headerHeight}}>
// your custom header content
</View>
</SafeAreaView>
)
}