React Native Elements: How do I display header component in navigation bar?

Question

I'm trying to display the header component in the navigation header but it's being displayed outside of it. The bar in blue is supposed to replace the white rectangular space at the top.

 render() {
    return (
      <View>
        <View
          style={{
            paddingTop: Constants.statusBarHeight
          }}
        >
          <Header leftComponent={{ text: "Delete Account" }} />
        </View>
        <ScrollView
          style={{ marginTop: 20 }}
          keyboardShouldPersistTaps="always"
        >
          <View
            style={{
              flex: 1,
              alignItems: "center",
              justifyContent: "center"
            }}
          >
          ...
          </View>
        </ScrollView>
      </View>
    );
  }

@Thinker It removes the spaces in between but doesn't bring it up. — Wes, Nov 16 '19 at 09:41
@Auticcat I was using react navigation stack but I ended up fixing the issue by setting the header to null. — Wes, Nov 16 '19 at 11:26

Junius L · Accepted Answer · 2019-11-16T11:05:55.230

3

You are adding marginTop to the view that contains the header, which moves the header 50 margins down, remov marginTop from the view

<View>
  <Header leftComponent={{ text: 'Delete Account' }} />
</View>

You also need to use centerComponent with placement property to move the title to the left, and hide header in your stackNavigator

class AccountScreen extends React.Component {
  render() {
    return (
      <View style={{ marginTop: Constants.statusBarHeight }}>
        <Header placement="left" centerComponent={{ text: 'Delete Account' }} />
        <Text>Account Screen</Text>
      </View>
    );
  }
}

const RootStack = createStackNavigator(
  {
    Account: {
      screen: AccountScreen,
      navigationOptions: {
        header: null,
      },
    },
    Details: DetailsScreen,
  },
  {
    initialRouteName: 'Account',
  }
);

DEMO

edited Nov 16 '19 at 11:05

answered Nov 16 '19 at 09:19

Junius L

15,881
6
52
96

I removed marginTop from the scrollview and added the exact code you have which removed the white space in between the nav bar and the header component but it's not at the top. https://pasteboard.co/IGVV3Jz.png – Wes Nov 16 '19 at 09:40
there's two headers, the one from rn-elements and another from rn-navigation – Junius L Nov 16 '19 at 09:42
I'm using the react navigation stack on App.js to handle navigations but I don't have any navigationOptions on that screen. – Wes Nov 16 '19 at 09:56
Of what i remember you can put it directly inside your navigationOptions. Instead of header: null just put your component in it : header:
– Auticcat Nov 16 '19 at 11:34

score 1 · Answer 2 · answered Nov 16 '19 at 10:17

1

If you want to create your own header bar (React native elements), you have to hide the header from React navigation stack totally from app setup or hide it on specific screen Hide header in stack navigator React navigation

answered Nov 16 '19 at 10:17

doubles

71
4

I ended up setting the header to null to hide it. – Wes Nov 16 '19 at 11:23

score 0 · Answer 3 · answered Dec 03 '21 at 01:44

The proper way to do this in React Navigation v6 and in addition to disabling the default header from React Navigation (as doubles mentioned) is to have the navigation header property return the Header component, all under useLayoutEffect . Like this:

  useLayoutEffect(() => {
    navigation.setOptions({
      header: () => (
        <Header
          leftComponent={...}
          centerComponent={...}
          rightComponent={...}
        />
      ),
    });
  }, [navigation]);

This will create a custom header for that screen component, of course, you can set the header property in the parent/stack level too.

React Native Elements: How do I display header component in navigation bar?

3 Answers3