CODEWITHSUNDEEP
react-native
Minoru
Minoru

Reputation: 1730

Load custom header with StackNavigator on React Native

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

Screenshot from the Header loaded

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?

Upvotes: 1

Views: 7264

Answers (2)

木大白易
木大白易

Reputation: 692

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!

Upvotes: 5

Sarantis Tofas
Sarantis Tofas

Reputation: 5167

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

Upvotes: 3

Related Questions