How can I simultaneously switch tab and push screen? When the button is pressed, I would like to switch to another tab and push a new screen. Is it possible?

class Example extends Component {
      buttonHandler = () => {
        this.props.navigator.switchToTab({
          tabIndex: 0
        });
        this.props.navigator.push({  // actually this navigator's tabIndex is 0 
          screen: "dc.Examplecreen",
          title: "Exampe", 
          passProps: {
            lesson : this.props
          }    
       });
   }
}

How can I simultaneously switch tab and push screen? When the button is pressed, I would like to switch to another tab and push a new screen. Is it possible?

class Example extends Component {
      buttonHandler = () => {
        this.props.navigator.switchToTab({
          tabIndex: 0
        });
        this.props.navigator.push({  // actually this navigator's tabIndex is 0 
          screen: "dc.Examplecreen",
          title: "Exampe", 
          passProps: {
            lesson : this.props
          }    
       });
   }
}

• javascript
• react-native
• react-native-navigation

• Did you found a solution for it? I'm having the same need. – Cassio Seffrin Commented Dec 27, 2018 at 12:55

2 Answers 2

You can switch the tab using the following code

Navigation.mergeOptions(this.props.ponentId, {
  bottomTabs: {
    currentTabId: this.props.ponentId
  }
});

and push using

Navigation.push(this.props.ponentId, {
  ponent: {
    name: 'example.PushedScreen',
    passProps: {
      text: 'Pushed screen'
    },
    options: {
      topBar: {
        title: {
          text: 'Pushed screen title'
        }
      }
    }
  }
});

You can make a function bining these 2 codes. Not the best solution i know, but works!

There is no any way to passProps with switchToTab. also i found in react-native-navigation but not get any solution. change tab and push using a global variable.

i am using react-native-navigation version 1.1.463

Change tab switchToTab

global.isComeFromBooking = true
this.props.navigator.switchToTab({
   tabIndex: 2,
});

in tab on index 2 setOnNavigatorEvent

ponentDidMount() {
    this.props.navigator.setOnNavigatorEvent((e) => {
      if (e.id == 'willAppear' && global.isComeFromBooking) {
        this.props.navigator.push({
          screen: 'Reservations',
          title: 'Bookings',
          animated: true,
          style: {
            backgroundColor: 'black',
          },
          backButtonTitle: '',
        });
        global.isComeFromBooking = false
      }
    });
}