React Native navigation error only when user is logged in - react-native

Question

I have an option to browse a welcome screen not logged in, or logged in (and it shows more features). I thought I had the navigation configured correctly but I guess not. The error "The action NAVIGATE with payload... was not handled by any navigator" is leading me to believe it's because i'm using one navigator nested within another, BUT the weird thing is I do NOT get this error at all if the user is not logged in. It only happens when they are. The main button calls this signOut() function to either log them out and return to the main screen, or just return to the main screen if they aren't logged in. Did I not do this correctly? Or is it still likely to be my nested navigation problem in which case, why would it only give the error if the user is logged in?
function signOut(){
if (user){
auth
.signOut()
.then(() => navigation.navigate('StartScreen'));
} else {
navigation.navigate('StartScreen');
}
}
here is my AuthNavigator:
const Stack = createStackNavigator();
export default function AuthNavigator(){
// Set an initializing state whilst Firebase connects
const [initializing, setInitializing] = useState(true);
const [user, setUser] = useState();
// Handle user state changes
function onAuthStateChanged(user) {
setUser(user);
if (initializing) setInitializing(false);
}
useEffect(() => {
const subscriber = auth.onAuthStateChanged(onAuthStateChanged);
return subscriber; // unsubscribe on unmount
}, []);
if (initializing) return null;
if (user) {
return (
<MainHeader />
);
}
return (
<Stack.Navigator>
<Stack.Screen name="StartScreen" component={StartScreen} options={{ headerShown: false }} />
<Stack.Screen name="SignIn" component={SignIn} options={{ headerShown: false }} />
<Stack.Screen name="SignUp" component={SignUp} options={{ headerShown: false }} />
<Stack.Screen name="MainHeader" component={MainHeader} options={{ headerShown: false }} />
<Stack.Screen name="ForgotPassword" component={ForgotPassword} options={{ headerShown: false }} />
</Stack.Navigator>
)
}
And here is my nested Tab Navigator within the MainHeader screen. The WelcomeScreen has the logout button that performs the signOut() function I first listed:
export default function MainHeader() {
var user = auth.currentUser;
return (
<>
<View style={styles.headerContainer}>
<Image
style={styles.image}
source={require("../assets/newheader4.png")}
/>
</View>
<Tab.Navigator
tabBarOptions={{
activeTintColor: "blue",
inactiveTintColor: "black",
style: {},
tabStyle: {
width: "auto",
backgroundColor: "#e0d5f3",
borderTopWidth: 3,
borderBottomWidth: 3,
borderRightColor: "gray",
},
labelStyle: {
fontSize: 14,
fontWeight: "bold",
},
scrollEnabled: true,
}}
>
<Tab.Screen name="Home" component={WelcomeScreen} />
<Tab.Screen name="All Deals" component={MessagesScreen} />
<Tab.Screen name="My Favs" component={FavoritesScreen} />
<Tab.Screen name="Notifications" component={Notifications} />
<Tab.Screen name="Free Samples" component={FreeScreen} />
<Tab.Screen name="Who We Are" component={WhoWeAreScreen} />
</Tab.Navigator>
</>
);
}

Answer 1

Solution: remove the navigation line completely from the then() after auth.signOut. It does it by default and redirects to the StartScreen perfectly without it.
New signOut function:
function signOut(){
if (user){
auth
.signOut()
.then();
} else {
navigation.navigate('StartScreen');
}
}