Best practices when using react navigation and firebase auth together

Expo SDK
1

Curious what the rest of the community does in terms of structuring apps that use both Firebase auth and React Navigation. Specifically, how do put both your navigator and auth listener in App.js. Ideally, I’d like to do the following:

export default class App extends React.Component {

  componentWillMount() {
    firebase.initializeApp(FIREBASE_CONFIG);
    this.authListener = firebase.auth().onAuthStateChanged(user => {
      if (user) {
        this.props.navigation.navigate('loggedInScreen');
      } else {
        this.props.navigation.navigate('loggedOutScreen');
      }
    });
  }

  render() {
    return (
      <Provider store={store}>
        <AppNavigator onNavigationStateChange={null} />
      </Provider>
    );
  }
}

The problem with this is that there’s no “this.props.navigation”. So I usually load a second “splash” screen first within the navigator and put my firebase auth listener there (it never gets unmounted if it’s the first screen of a stack navigator). But that seems kludgy. How all do you handle this?

1 Like