CODEWITHSUNDEEP
react-nativereact-navigation
B. Mohammad
B. Mohammad

Reputation: 2464

How to check condition before loading a tab in bottomTabNavigator react-navigation

As stated in the title, i want to check first if some data is loaded before showing a clicked tab, if the data is not there show alert and don't show tab. I need to know where to implement this logic. THANKS!

Upvotes: 0

Views: 245

Answers (1)

abhikumar22
abhikumar22

Reputation: 1814

You can add a listner for the same, in the tab screen, whenever you tab is clicked then 

import { NavigationActions, StackActions, NavigationEvents } from 'react-navigation'

<NavigationEvents
  onWillFocus={payload => {
    this.checkIfUserRegistered();
  }}
//onDidFocus={payload => console.log('did focus', payload)}
//onWillBlur={payload => console.warn('will blur', payload)}
//onDidBlur={payload => console.log('did blur', payload)}
/>

Your render funtion looks like this,

render() {
  return (
    <View style={styles.container}>
      <NavigationEvents
        onWillFocus={payload => {
          this.checkIfUserRegistered(); 
           # common component, if unregistered then you can go back to the screen which you want to display
        }}
      //onDidFocus={payload => console.log('did focus', payload)}
      //onWillBlur={payload => console.warn('will blur', payload)}
      //onDidBlur={payload => console.log('did blur', payload)}
      />
    </View >
  );

}

More you can read here for navigation events ..

I hope it helps thanks .... :)

Upvotes: 2

Related Questions