CODEWITHSUNDEEP
react-nativereact-navigation
Lukáš Šálek
Lukáš Šálek

Reputation: 1336

I don't have headers on my screens but i want to have header only on one screen

I use reactnavigation for navigation. I don't have headers on my screens but i want to have header only on one screen (especially back button). This is my root navigator: 

...
class RootNavigation extends Component {
  props: Props;

  render() {
    const { isProfileSelect } = this.props;
    const initialRouteName = currentRoute(isProfileSelect);

    const RootStackNav = StackNavigator(
      {
        AppHome: { screen: TabBarNavigator },
        SwitchProfile: { screen: SwitchProfileScreen },
        Pin: { screen: PinScreen },
      },
      {
        initialRouteName,
        headerMode: 'none',
      },
    );

    return <RootStackNav />;
  }
}
...

there is headerMode: 'none', it does mean i haven't any header navigator it is good for screens AppHome,SwitchProfile but not for Pin i need back button on header. Because I have to go on SwitchScreen and there i can continue on Pin screen and from Pin screen i sometime need go back to SwitchScreen And i have no back button on IOS. I need set header only in pin screen.

this is navigationOptions for pin screen:

...
  static navigationOptions = {
    title: I18n.t('screens.pinScreen.navigationOptions.title'),
  };
...

but changes haven't any effect

Can you help me to add header only on Pin screen? Thank you

update: SOLUTION

const RootStackNav = StackNavigator(
  {
    AppHome: {
      screen: TabBarNavigator,
      navigationOptions: {
        title: 'Header title',
        headerMode: 'screen',
        header: null,
      },
     },
    SwitchProfile: {
      screen: SwitchProfileScreen,
      navigationOptions: {
        title: 'Header title',
        headerMode: 'screen',
        header: null,
      },
    },
    Pin: {
      screen: PinScreen,
      navigationOptions: {
        title: 'Header title',
        headerMode: 'screen',
        // header: null,
      },
    },
  },
  {
    initialRouteName,
    // headerMode: 'none',
  },
);

Upvotes: 1

Views: 138

Answers (1)

Dpkstr
Dpkstr

Reputation: 1659

My case was reverse of yours... I wanted to disable the header on one screen so I added the following code in that particular screen.

export default class NoHeaderView extends Component {
static navigationOptions = { header: null }
...
//your constructor, render and other stuff
...
}//

Let me know if it works.

Upvotes: 1

Related Questions