CODEWITHSUNDEEP
react-nativereact-navigation
Fran Blázquez Matías
Fran Blázquez Matías

Reputation: 47

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

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?

Upvotes: 0

Views: 774

Answers (1)

Vaibhav C
Vaibhav C

Reputation: 19

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

Upvotes: 1

Related Questions