React Navigation with Auth screen in every tab - reactjs

Question

I have an app with this kind of structure
It doesn't matter if user is logged in or not, the TabBar always should be the same. In case user logged in app will open the content of the tab, otherwise Auth screen. How can I create this in react-navigation?
Sorry, slightly confused in react-navigation.

Answer 1

So I think I have a solution.
Create an event emitter that will emit events when the login state changes
Subscribe to the events in the App.js
Pass the updated events via screenProps to the TabNavigator.
These updated screenProps allow toggling between logged in states in each tab.
Store the logged in state in AsyncStorage so that it will be persisted between app closes. Note the AsyncStorage only allows you to store strings.
Send events from the AuthScreen when the user logs in, or from the other screens when the user logs out.
Event Emitter
To create an event emitter we need to use the events dependency. Install it with npm i events. We will create it as a singleton so that we can only have one instance of this running in our app.
import { EventEmitter } from 'events';
class LoginEventEmitter {
constructor () {
this.eventEmitter = new EventEmitter();
}
// create a function to handle the login
// pass the loggedIn value that you want to be emitted
handleLogin = (loggedIn) => {
this.eventEmitter.emit('loggedIn', { loggedIn });
}
}
const EventEmitterController = new LoginEventEmitter();
export default EventEmitterController;
App.js
Subscribe to the events and handle AsyncStorage
import React from 'react';
import { AsyncStorage } from 'react-native';
import AppContainer from './MainNavigation';
import LoginEventEmitter from './LoginEventEmitter';
export default class App extends React.Component {
constructor (props) {
super(props);
this.state = {
loggedIn: false,
loaded: false
};
// subscribe to the events and update the values in state and in AsyncStorage
LoginEventEmitter.eventEmitter.addListener('loggedIn', e => {
this.setState({ loggedIn: e.loggedIn });
let value = e.loggedIn ? 'true' : 'false';
AsyncStorage.setItem('loggedIn', value);
});
}
async componentDidMount () {
// handle the loggedIn value when the component mounts
try {
let loggedIn = await AsyncStorage.getItem('loggedIn');
if (loggedIn) {
this.setState({
loggedIn: loggedIn === 'true',
loaded: true
});
} else {
this.setState({ loaded: true });
}
} catch (error) {
console.warn(error);
}
}
render () {
// wait until asyncstorage has returned a value before showing the App.
// pass the loggedIn value via screen props so every screen in the TabNavigator gets updated with the new value
if (this.state.loaded) {
return (
<AppContainer screenProps={{ loggedIn: this.state.loggedIn }}/>
);
} else {
return null;
}
}
}
Template for Tab Screen
This is a basic template for each TabScreen. I have put a logout button on it so that the user can logout. (This is mainly for testing).
import React from 'react';
import { View, StyleSheet, Text, Button } from 'react-native';
import AuthScreen from './AuthScreen';
import LoginEventEmitter from './LoginEventEmitter';
export default class Screen1 extends React.Component {
logout = () => {
LoginEventEmitter.handleLogin(false);
}
render () {
if (this.props.screenProps.loggedIn) {
return (
<View style={styles.container}>
<Text>Screen 1</Text>
<Button title={'logout'} onPress={this.logout} />
</View>
);
} else {
return <AuthScreen />;
}
}
}
Notice in the render function that we access the screenProps that are passed from the TabNavigator depending on the value that is passed depends on what is rendered.
A sample AuthScreen
Here we perform a "login" when the user taps the button. This emits an event that is caught by the listener in the App.js which in turn updates the state value in the App.js and that value is passed via screenProps to each Tab.
import React from 'react';
import { View, StyleSheet, Text, Button } from 'react-native';
import LoginEventEmitter from './LoginEventEmitter';
export default class Screen1 extends React.Component {
render () {
return (
<View style={styles.container}>
<Text>AuthScreen</Text>
<Button title={'Login'} onPress={() => {
LoginEventEmitter.handleLogin(true);
}}/>
</View>
);
}
}
Sample TabNavigator
Here is a sample TabNavigator.
import Screen1 from './Screen1';
import Screen2 from './Screen2';
import { createBottomTabNavigator, createAppContainer } from 'react-navigation';
const screens = {
Screen1: {
screen: Screen1
},
Screen2: {
screen: Screen2
}
};
const config = {
headerMode: 'none',
initialRouteName: 'Screen1'
};
const MainNavigator = createBottomTabNavigator(screens, config);
export default createAppContainer(MainNavigator);
Snack
Finally here is a snack showing it all working https://snack.expo.io/#andypandy/event-emitter-to-handle-login