Load custom header with StackNavigator on React Native

Question

I had a Header component that I used as a static appbar in React Native. Now I'm trying to include a StackNavigator to be easier to manage the transitions between screens.

My problem is that I can't include my Header component in the StackNavigator header. My current code and result are shown below:

const APPBAR_HEIGHT = Platform.OS === 'ios' ? 44 : 56;

const GiftNavigator = StackNavigator(
{
  All: {
    screen: GiftListSection,
    navigationOptions: {
      tabBarLabel: 'All',
    }
  },
  Reclaim: {
    screen: GiftReclaimSection,
    navigationOptions: {
      tabBarLabel: 'Reclaim',
    }
  }
}, {
  headerMode: 'float',
    header: (
        <View style={{ height: APPBAR_HEIGHT }}>
            <Header />
        </View>
    )
});

Note that the Header is not loaded. It is just a blank space. How can I load my Header component to the StackNavigator header? If I load my own Header, will it contain the back button from the default Navigator header?

木大白易 · Accepted Answer · 2017-12-29 09:57:50Z

5

You can try like this:

export default class YourScreen extends Component {

  static navigationOptions = {
    header: <YourHeader/>,
  };
  ...
}

or:

const GiftNavigator = StackNavigator(
{
  All: {
    screen: GiftListSection,
    navigationOptions: {
      tabBarLabel: 'All',
      header: <YourHeader/>,
    }
  },
  Reclaim: {
    screen: GiftReclaimSection,
    navigationOptions: {
      tabBarLabel: 'Reclaim',
      header: <YourHeader/>,
    }
  }
}

Hope this can help you!

answered Dec 29, 2017 at 9:57

木大白易

6921 gold badge8 silver badges17 bronze badges

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

Comments

Sarantis Tofas · Accepted Answer · 2017-12-28 19:32:54Z

3

You can hide the default react navigation header entirely by using the headerMode: 'none' option and handle header on your own for each component.

Or you could use the header property and load your own custom header component:

navigationOptions: {
  header: props => <CustomHeader {...props} />,
},

answered Dec 28, 2017 at 19:32

Sarantis Tofas

5,1871 gold badge26 silver badges36 bronze badges

Collectives™ on Stack Overflow

Load custom header with StackNavigator on React Native

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related