The back button changes the position of my custom header in React Navigation

Question

I got this Custom Header:

export const HeaderBar = (props) => {
  return (
    <View style={styles.containerHeader}>
      <View style={styles.containerImage}>
        <Image source={logo} style={styles.logo} />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  logo: {
    width: 90,
    resizeMode: "contain",
    alignSelf: "center",
  },
});

This shows a header bar with a logo in the center of the bar.

My app.js

<HomeStack.Screen
  name="TitleDetails"
  component={TitleDetails}
  options={{
    headerTitle: (props) => <HeaderBar />,
    headerStyle: { backgroundColor: "#3B9B88" },
  }}
/>

The problem is that when I use the back button of React Navigation, the header moves a little to the right and therefore the logo is off-center.

How can I fix this?

add back button in your custom header instead of back button of react navigation — nazmul
– nazmul, Commented Oct 13, 2020 at 11:30

Vaibhav C · Accepted Answer · 2020-10-13 11:30:32Z

1

When you add the back button, your logo is get center of the remaining width. You can remove the center align css and use the position and set it by yourself at the center

answered Oct 13, 2020 at 11:30

Vaibhav C

195 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

The back button changes the position of my custom header in React Navigation

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related