React Native Redux conditional LoggedIn render causes race condition - react-native

Question

So I am pretty new to React Native and completely new to redux. I have created an auth flow using a conditional React Navigation render that works apart from giving an error, I believe is causedby a race condition. What happens that it checks if a user is signed in and renders based on if they are or not. But if the user is already logged in, it starts to render the LoginScreen, detects they are logged in, then tries to re-render, causing the following error:
"Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the Icon component."
My main component looks like this:
import React, { Component } from "react";
import { StyleSheet, Text, View, AsyncStorage } from "react-native";
import { connect, Provider } from "react-redux";
import Reactotron from "reactotron-react-native";
import { logIn } from "../actions";
import { SignedIn, SignedOut } from "../components/Nav";
import { isSignedIn } from "../components/Auth";
import LoginScreen from "../containers/LoginScreen";
class RootApp extends Component {
async checkSignedIn() {
res = await isSignedIn();
if (res != false) {
expires = String(res.expires);
this.props.logIn(res.fbToken, expires);
} else {
console.log("Not logged in");
}
}
async componentWillMount() {
await this.checkSignedIn();
}
render() {
if (this.props.auth.signedIn == true) {
return <SignedIn />;
} else {
return <SignedOut />;
}
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
fontSize: 96
}
});
const mapStateToProps = state => {
return {
auth: state.auth
};
};
const mapDispatchToProps = dispatch => {
return {
logIn: fbToken => {
dispatch(logIn(fbToken, expires));
}
};
};
export default connect(mapStateToProps, mapDispatchToProps)(RootApp);
The Nav looks like
import React, { Component } from "react";
import { TabNavigator, StackNavigator } from "react-navigation";
import Tasks from "../screens/Tasks";
import Home from "../screens/Home";
import Message from "../screens/Message";
import Profile from "../screens/Profile";
//import WelcomeScreen from "../screens/WelcomeScreen";
import PhoneContacts from "../screens/PhoneContacts";
import { SimpleLineIcons } from "#expo/vector-icons";
import LoginScreen from "../containers/LoginScreen";
const InviteNavigator = StackNavigator({
DeathMessage: { screen: Message },
PhoneContacts: { screen: PhoneContacts }
});
export const SignedIn = TabNavigator({
Tasks: {
screen: Tasks,
navigationOptions: {
tabBarIcon: ({ tintColor }) =>
<SimpleLineIcons name="list" size={30} />
}
},
Home: {
screen: Home,
navigationOptions: {
tabBarIcon: ({ tintColor }) =>
<SimpleLineIcons name="home" size={30} />
}
},
Message: {
screen: InviteNavigator,
navigationOptions: {
tabBarIcon: ({ tintColor }) =>
<SimpleLineIcons name="envelope-letter" size={30} />
}
},
Profile: {
screen: Profile,
navigationOptions: {
tabBarIcon: ({ tintColor }) =>
<SimpleLineIcons name="user" size={30} />
}
}
});
export const SignedOut = StackNavigator({
SignIn: {
screen: LoginScreen,
navigationOptions: {
title: "Sign In"
}
}
});
LoginScreen looks like:
import { connect } from "react-redux";
import React, { Component } from "react";
import {
Button,
View,
Text,
ActivityIndicator,
Alert,
FlatList
} from "react-native";
import { NavigationActions } from "react-navigation";
import { SocialIcon, Card } from "react-native-elements";
import Reactotron from "reactotron-react-native";
import { AsyncStorage } from "react-native";
import { logIn } from "../actions";
import { signIn } from "../components/Auth";
class SignIn extends Component {
async handleClick() {
res = await signIn();
if (res.type == "success") {
expires = String(res.expires);
AsyncStorage.setItem("fbToken", res.token);
AsyncStorage.setItem("expires", expires);
this.props.logIn(res.token, expires);
} else {
console.log("Login Failed");
}
}
render() {
return (
<View style={{ paddingVertical: 20 }}>
<Card title="finis Requires A Facebook Account To Operate">
<SocialIcon
title="Fred"
button
type="facebook"
onPress={() => this.handleClick()}
/>
</Card>
</View>
);
}
}
const mapDispatchToProps = dispatch => {
return {
logIn: fbToken => {
dispatch(logIn(fbToken, expires));
}
};
};
LoginScreen = connect(null, mapDispatchToProps)(SignIn);
export default LoginScreen;
Any help would be greatly appreciated. Happy to completely redesign if pointed in the right direction.

Answer 1

Sorted by adding an auth.checking prop and rendering an activity spinner until it has checked.
render() {
if (this.props.auth.checking == true) {
return (
<ActivityIndicator
animating={true}
style={styles.activityIndicator}
size="large"
/>
);
} else if (this.props.auth.signedIn == true) {
return <SignedIn />;
} else {
return <SignedOut />;
}
}