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

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),
  },

CodePudding user response：

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.

CodePudding user response：

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>
  )
}