Develop Reference

useEffect doesn't work when switching screens

Hi I am still new to react-native and has been trying to create an app.
My stuck is that I don't know why useEffect doesn't work when switching screens by react-navigation-bottom-tab.
Below is my HomeScreen.js where I wrot useEffect to fetch all data from Firestore.
As you can see I wrote two useEffects because I thought it'd work.
The first one was thought to fetch data when I switch to Home from like ProfileScreen.
import {
View,
FlatList,
StyleSheet,
} from "react-native";
import { RideCard } from "./RideCard";
import { OneTouchFilter } from "./OneTouchFilter";
import { useFirestoreContext } from "../../contexts/FirestoreContext";
import { useEffect } from "react";
export const HomeScreen = ({ navigation }) => {
console.log("HomeScreen.js useEffect");
const { selectedBoardType, cityFromText, cityToText, fetchRides, rides } =
useFirestoreContext();
useEffect(() => {
fetchRides();
}, []);
useEffect(() => {
fetchRides();
}, [selectedBoardType, cityFromText, cityToText]);
return (
<View style={styles.inner}>
<OneTouchFilter />
<FlatList
data={rides}
renderItem={(itemData) => (
<RideCard
ride={itemData.item}
index={itemData.index}
id={itemData.item.id}
numOfRides={rides.length}
/>
)}
/>
</View>
);
};
App.js
this is a file where react-navigation-bottom-tab placed in.
import React, { useContext } from "react";
import { StyleSheet } from "react-native";
import { NavigationContainer, DefaultTheme } from "#react-navigation/native";
import { createStackNavigator } from "#react-navigation/stack";
import { createBottomTabNavigator } from "#react-navigation/bottom-tabs";
import { HomeScreen } from "./screens/Home/HomeScreen";
import { PostScreen } from "./screens/Post/PostScreen";
import { ProfileScreen } from "./screens/Profile/ProfileScreen";
import Ionicons from "react-native-vector-icons/Ionicons";
import { NativeBaseProvider } from "native-base";
// create another file for contexts Provider
import { AuthContextProvider } from "./contexts/AuthContext";
import { FirestoreContextProvider } from "./contexts/FirestoreContext";
import { FormContextProvider } from "./contexts/FormContext";
const MyTheme = {
...DefaultTheme,
colors: {
...DefaultTheme.colors,
background: "white",
},
};
export default function App() {
const Stack = createStackNavigator();
// タブ移動の設定を新規追加
// createBottomTabNavigator ... タブ移動を設定する関数
const Tab = createBottomTabNavigator();
// 新規追加
// - 移動を関数に持たせて、タブ移動の設定で利用
// - 意図 ... タブ移動の箇所のコードが読みにくくなるため
const Home = () => {
return (
<Stack.Navigator>
<Stack.Screen
options={{ headerShown: false }}
name="Home"
component={HomeScreen}
/>
</Stack.Navigator>
);
};
const Post = () => {
return (
<Stack.Navigator
headerMode="screen"
screenOptions={{ headerShown: false }}
>
<Stack.Screen name="Post" component={PostScreen} />
{/* <Stack.Screen name="詳細" component={DetailsScreen} /> */}
</Stack.Navigator>
);
};
const Profile = () => {
return (
<Stack.Navigator
headerMode="screen"
screenOptions={{ headerShown: false }}
>
<Stack.Screen name="Profile" component={ProfileScreen} />
{/* <Stack.Screen name="詳細" component={DetailsScreen} /> */}
</Stack.Navigator>
);
};
return (
<AuthContextProvider>
<FirestoreContextProvider>
<FormContextProvider>
<NativeBaseProvider>
<NavigationContainer theme={MyTheme}>
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
let iconName;
// icon swithcer which depends on the route name
if (route.name === "Home") {
iconName = focused ? "ios-home" : "ios-home";
} else if (route.name === "Post") {
iconName = focused ? "ios-add" : "ios-add";
} else if (route.name === "Profile") {
iconName = focused ? "md-person" : "md-person";
}
return (
<Ionicons name={iconName} size={size} color={color} />
);
},
})}
tabBarOptions={{
activeTintColor: "rgb(0, 110, 182)",
inactiveTintColor: "gray",
}}
>
<Tab.Screen name="Home" component={Home} />
<Tab.Screen name="Post" component={Post} />
<Tab.Screen name="Profile" component={Profile} />
</Tab.Navigator>
</NavigationContainer>
</NativeBaseProvider>
</FormContextProvider>
</FirestoreContextProvider>
</AuthContextProvider>
);
}

It's because, even though you switch screens, the other screen is not unmounted --- it's still in memory but not visible. This is a design decision of react-navigation intended for better performance (it doesn't have to reload the screen when you go back, as it's already there). Since it is not unmounted, when the user returns to it, it just triggers a rerender of the already-instantiated component, so the effect does not run.
What you need to use instead is useFocusEffect which is an effect bound to if the screen is in focus.

React Native Navigator always displays the same page

I am using Stack based navigation.
My Navigator looks like this:
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="AddItemsScreen" component={AddItemsScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
The Home screen is rendered by default. At the bottom of the following component, there is a button to navigate to the AddItemsScreen:
function EntriesList({db, setDb, path, entries}) {
const AddButtonPress = (event) => {
navigation.navigate('AddItemsScreen', { db: db, setDb: setDb, path: path, entries: entries })
}
const entryListItems = [];
for (const [idx, entry] of entries.entries()) {
if (entry.type == "container") {
entryListItems.push(<li key={idx}><EntryListItem_ContainerType entry={entry}></EntryListItem_ContainerType></li>)
} else if (entry.type == "item") {
entryListItems.push(<li key={idx}><EntryListItem_ItemType entry={entry}></EntryListItem_ItemType></li>)
}
}
return (
<div>
<ul>{entryListItems}</ul>
<Button onPress={AddButtonPress} title="Add Items"></Button>
</div>
)
}
The AddItemScreen itself is very simple right now:
function AddItemsScreen(props) {
const BackButtonPress = () => {
navigation.navigate('HomeScreen', { name: 'Jane' })
}
return (
<div>
<Button onPress={BackButtonPress} title={props.route.params.path}></Button>
<Text>Items screen</Text>
</div>
)
}
The problem is, when I click the "Add Items" button, the Home page is still getting rendered. The URL changes to "/AddItemsScreen" but the content never actually shows. Not sure what I need to fix, and appreciate any help.

Figured this out using question React-navigation change url but not view
I needed to add linking attribute like so:
const linking = {
prefixes: ['http://localhost:19006/']
};
function App() {
return (
<NavigationContainer linking={linking}>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="AddItemsScreen" component={AddItemsScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
Not sure if this is just needed because I'm developing on web.

React Navigation after login navigate problem

I'm using useNavigation in React Navigation. After logging in with AsyncStorage, I want to redirect to the home page, but I cannot go back to the App function. When I want to go to HomePage, Navigate cannot find it and returns an error.
How can I trigger a function named app?
Navigate Error (console)
The action 'NAVIGATE' with payload {"name":"HomeScreen"} was not
handled by any navigator
Login Code
await AsyncStorage.setItem("userData", JSON.stringify(data.data));
navigation.navigate('HomeScreen');
App.js
const App = () => {
const [signedIn, setSignedIn] = useState([]);
useEffect(() => {
_checkUser();
}, []);
async function _checkUser(){
let responseUser = await AsyncStorage.getItem("userData");
setSignedIn(responseUser);
}
if(signedIn != null) {
return (
<NavigationContainer>
<Stack.Navigator screenOptions={{headerShown: false}}>
<Stack.Screen name="HomeScreen" component={_homeScreen} />
</Stack.Navigator>
</NavigationContainer>
)
} else {
return (
<NavigationContainer>
<Stack.Navigator screenOptions={{headerShown: false}}>
<Stack.Screen name="WelcomeScreen" component={_welcomeScreen} />
<Stack.Screen name="RegisterScreen" component={_registerScreen} />
<Stack.Screen name="LoginScreen" component={_loginScreen} />
<Stack.Screen name="ForgotScreen" component={_forgotScreen} />
<Stack.Screen name="EmailCodeScreen" component={_emailCodeScreen} />
</Stack.Navigator>
</NavigationContainer>
)
}
}
When I try to do it with MOBX..
let signedIn = userStore.isLogin;
return (
<NavigationContainer>
<Stack.Navigator screenOptions={{headerShown: false}}>
{
signedIn ? (
<Stack.Screen name="HomeScreen" component={_homeScreen} />
) : (
<>
<Stack.Screen name="WelcomeScreen" component={_welcomeScreen} />
<Stack.Screen name="RegisterScreen" component={_registerScreen} />
<Stack.Screen name="LoginScreen" component={_loginScreen} />
<Stack.Screen name="ForgotScreen" component={_forgotScreen} />
<Stack.Screen name="EmailCodeScreen" component={_emailCodeScreen} />
</>
)
}
</Stack.Navigator>
</NavigationContainer>
)
Router
let data = await axios.post(baseURL+"users_checkMail", sendData);
uaStore.userStore.userData = data.data;
uaStore.userStore.isLogin = true;
await AsyncStorage.setItem("userData", JSON.stringify(data.data));
console.log(userStore.isLogin); // LOG: TRUE
setLoader(false);
navigation.navigate('HomeScreen');

If you are using mobx for state management, create and manage signedIn state in your mobx state tree. when user logs in , you just have to set signedIn state to true. When user logs out, set signedIn to false. No need to use navigation props. When you change your signedIn state, react-navigation component will rerender.

From the docs:
It's important to note that when using such a setup, you don't need to manually navigate to the Home screen by calling navigation.navigate('Home') or any other method. React Navigation will automatically navigate to the correct screen when isSigned in changes - Home screen when isSignedIn becomes true, and to SignIn screen when isSignedIn becomes false. You'll get an error if you attempt to navigate manually.
https://reactnavigation.org/docs/auth-flow/
So just remove the line:
navigation.navigate('HomeScreen');
And replace it with:
setSignedIn(true)
Or the MobX equivalent if you use MobX.

You can try like this
return (
<NavigationContainer>
{signedIn != null ? (
<Stack.Navigator screenOptions={{headerShown: false}}>
<Stack.Screen name="HomeScreen" component={_homeScreen} />
</Stack.Navigator>
) : (
<Stack.Navigator screenOptions={{headerShown: false}}>
<Stack.Screen name="WelcomeScreen" component={_welcomeScreen} />
<Stack.Screen name="RegisterScreen" component={_registerScreen} />
<Stack.Screen name="LoginScreen" component={_loginScreen} />
<Stack.Screen name="ForgotScreen" component={_forgotScreen} />
<Stack.Screen name="EmailCodeScreen" component={_emailCodeScreen} />
</Stack.Navigator>
)}
</NavigationContainer>
);

First of all you cant use NavigationContainer twice..I would suggest make two Navigator like this one Login and another AppStack like this! I would just use redux and redux persist with async storage,makes life easier
const App = () => {
useEffect(() => {
setTimeout(() => {
RNBootSplash.hide({fade: true});
}, 1000);
}, []);
const LoginStack = () => {
return (
<Stack.Navigator>
<Stack.Screen
name="Login"
component={Login}
options={{
headerTransparent: true,
cardStyle: {backgroundColor: colors.BACKGROUND},
...TransitionPresets.ModalSlideFromBottomIOS,
headerTitleStyle: {color: 'transparent'},
}}
/>
<Stack.Screen
name="Terms"
component={Terms}
options={{
headerTransparent: true,
cardStyle: {backgroundColor: colors.BACKGROUND},
...TransitionPresets.ModalPresentationIOS,
headerTitleStyle: {color: 'transparent'},
}}
/>
</Stack.Navigator>
);
};
const AppStack = () => {
return (
<Stack.Navigator>
{screens.map((screen, i) => (
<Stack.Screen
name={screen.name}
component={screen.screenname}
key={i}
options={{
headerTransparent: true,
cardStyle: {backgroundColor: colors.BACKGROUND},
...TransitionPresets.ModalSlideFromBottomIOS,
headerTitleStyle: {color: 'transparent'},
}}
/>
))}
</Stack.Navigator>
);
};
const AppState = () => {
const checkLoggedIn = useSelector((state) => state.AuthReducer.loggedIn);
return <>{checkLoggedIn === false ? <LoginStack /> : <AppStack />}</>;
};
return (
<Provider store={store}>
<NavigationContainer>
<AppState />
</NavigationContainer>
</Provider>
);
};
store.js
import {applyMiddleware, createStore} from 'redux';
import thunk from 'redux-thunk';
import AsyncStorage from '#react-native-async-storage/async-storage';
import {persistStore, persistReducer} from 'redux-persist';
import rootReducer from './index';
// Middleware: Redux Persist Config
const persistConfig = {
// Root
key: 'root',
// Storage Method (React Native)
storage: AsyncStorage,
// Whitelist (Save Specific Reducers)
whitelist: ['StickerReducer', 'AuthReducer'],
// Blacklist (Don't Save Specific Reducers)
blacklist: [''],
};
// Middleware: Redux Persist Persisted Reducer
const persistedReducer = persistReducer(persistConfig, rootReducer);
const middleware = [thunk];
const store = createStore(persistedReducer, applyMiddleware(...middleware));
// Middleware: Redux Persist Persister
let persistor = persistStore(store);
// Exports
export {store, persistor};
Auth Reducer
import {ADD_DEVICE_TOEKN, LOGGED_IN} from './types';
const initialState = {
loggedIn: false,
user_Id: '',
device_token: '',
};
export default AuthReducer = (state = initialState, action) => {
switch (action.type) {
case LOGGED_IN:
const paylodLoggedIn = action.payload;
return {
...state,
loggedIn: paylodLoggedIn.loggedIn,
user_Id: paylodLoggedIn.loggedIn,
};
case ADD_DEVICE_TOEKN:
const paylodToken = action.payload;
return {
...state,
device_token: paylodToken,
};
default:
return state;
}
};
import {combineReducers} from 'redux';
import AuthReducer from './AuthReducer';
import StickerReducer from './StickerReducer';
export default combineReducers({
AuthReducer: AuthReducer,
StickerReducer: StickerReducer,
});
Authaction.js
import {LOGGED_IN} from '../types';
export const LoginAction = (userData) => {
return (dispatch) => {
dispatch({
type: LOGGED_IN,
payload: userData,
});
};
};
Finally login dispacther
import {useDispatch} from 'react-redux';
import {LoginAction} from '../../../redux/actions/LoginAction';
const Login = ({navigation}) => {
const dispatch = useDispatch();
return (
<Pressable onPress={() =>dispatch(LoginAction(data))}>
</Pressable>
);
};

If you wanna trigger the App.js after successfull login ... then You need to wrap your NavigationContainer with React.Context
Your signedIn user is an object I think ... not an array
so by initalizing it in state with [] ... if(signedIn != null) will never evaluate to true ++ Make sure you JSON.parse your object after fetching it from AsyncStorage ...
const AuthContext = React.createContext({
signedIn,
_checkUser: () => {},
});
export const useAuth = () => React.useContext(AuthContext);
const defaultValue = {
signedIn,
_checkUser,
};
return (
<AuthContext.Provider value={defaultValue}>
<NavigationContainer>
<Stack.Navigator screenOptions={{ headerShown: false }}>
{signedIn ? (
<Stack.Screen name="HomeScreen" component={_homeScreen} />
) : (
<>
<Stack.Screen name="WelcomeScreen" component={_welcomeScreen} />
<Stack.Screen name="RegisterScreen" component={_registerScreen} />
<Stack.Screen name="LoginScreen" component={_loginScreen} />
<Stack.Screen name="ForgotScreen" component={_forgotScreen} />
<Stack.Screen
name="EmailCodeScreen"
component={_emailCodeScreen}
/>
</>
)}
</Stack.Navigator>
</NavigationContainer>
</AuthContext.Provider>
);
In LoginScreen
// Then you refresh you auth user in LoginScreen like
const { _checkUser } = useAuth();
_checkUser();

I had the same error when trying to use the useNavigation hook... I was able to resolve it using the dispatch method...
import { CommonActions } from '#react-navigation/native';
navigation.dispatch(
CommonActions.navigate({ name: 'Profile', params: { user: 'jane' }})
);
I created a utility function for less repetition...
const handleNavigate = (key: string) => {
navigation.dispatch(CommonActions.navigate({ name: key }));
};
// Usage
handleNavigate("Home")
This got rid of the error for me. Hope this helps

Using Firebase Custom Claims to conditionally render a UI in React Native

I'm currently building a react native project with firebase and I would like to use the custom claims to conditionally render a Navigator.
Looking at the firebase documentation the example they give is:
firebase.auth().currentUser.getIdTokenResult()
.then((idTokenResult) => {
// Confirm the user is an Admin.
if (!!idTokenResult.claims.admin) {
// Show admin UI.
showAdminUI();
} else {
// Show regular user UI.
showRegularUI();
}
})
.catch((error) => {
console.log(error);
});
So trying to convert it to react native this is what I came up with:
export default function UINav () {
return firebase
.auth()
.currentUser.getIdTokenResult()
.then((tokenResult) => {
if (tokenResult.claims.admin) {
return (
<NavigationContainer>
<Stack.Navigator
mode="modal"
>
<Stack.Screen
name="Admin"
component={AdminNavigator}
/>
</Stack.Navigator>
</NavigationContainer>
)
} else {
return (
<NavigationContainer>
<Stack.Navigator
mode="modal"
>
<>
<Stack.Screen
name="User"
component={UserNavigator}
/>
</>
</Stack.Navigator>
</NavigationContainer>
)
}
})
}
The error I'm getting is:
Error: Objects are not valid as a React child (found: object with keys {_U, _V, _W, _X}). If you meant to render a collection of children, use an array instead.
Any help would be appreciated :)

Try doing it like this
const Display = () => {
const [toDisplay, setToDisplay] = useState(
<NavigationContainer>
<Stack.Navigator mode="modal">
<>
<Stack.Screen name="User" component={UserNavigator} />
</>
</Stack.Navigator>
</NavigationContainer>,
);
useEffect(() => {
firebase
.auth()
.currentUser.getIdTokenResult()
.then((tokenResult) => {
if (tokenResult.claims.admin) {
setToDisplay(
<NavigationContainer>
<Stack.Navigator mode="modal">
<Stack.Screen name="Admin" component={AdminNavigator} />
</Stack.Navigator>
</NavigationContainer>,
);
}
});
}, []);
return toDisplay;
};
export default function UINav() {
return <Display />;
}
Don't forget to import useEffect & useState from React.

Passing React Navigation v5 authentication errors back to signup/in screen

I am using React Navigation v5. I have an auth setup like their example in the docs. My problem is that I cannot work out how to pass error messages back to the component when there is a problem with signup/in.
The validation is done on the server and returned in the response object.
Currently the page just sits there with the loading spinner spinning while it waits for a response which it never receives.
Im going to try to cut down the amount of code I include here because it is basically a copy paste job from the docs
// Login.tsx
const loginUser = async () => {
setIsLoading(true);
signIn({ email, password });
};
return (
<View>
<TextInput
label='Email'
onChangeText={(text: string) => setEmail(text)}
value={email}
/>
<TextInput
label='Password'
onChangeText={(text: string) => setPassword(text)}
value={password}
secureTextEntry
/>
{errorMessage && <Text>{errorMessage}</Text>}
<Button mode='contained' disabled={showButton()} onPress={loginUser}>
{isLoading ? <ActivityIndicator color='white' /> : 'Submit'}
</Button>
<Button mode='outlined' onPress={() => navigation.navigate('SignUp')}>
Go to sign up
</Button>
</View>
);
// AuthStackNavigator.tsx
import React from 'react';
import { createStackNavigator } from '#react-navigation/stack';
import SignupScreen from '../Screens/SignupScreen';
import LoginScreen from '../Screens/LoginScreen';
const AuthStack = createStackNavigator();
export const AuthStackScreen = () => {
return (
<AuthStack.Navigator screenOptions={{ headerLeft: null }}>
<AuthStack.Screen name='SignUp' component={SignupScreen} />
<AuthStack.Screen name='SignIn' component={LoginScreen} />
</AuthStack.Navigator>
);
};
export default AuthStackScreen;
// Navigation.tsx
const authContext = useMemo(
() => ({
signIn: async ({ email, password }: SignInTypes) => {
const userData = {
email,
password,
};
API.post
.userLogin(userData)
.then((result) => {
if (
result.data.status === 'fail' ||
result.data.status === 'error'
) {
setIsLoading(false);
// I NEED TO DO SOMETHING HERE I THINK BUT ICANT WORK OUT WHAT I NEED TO DO
}
const accessToken = [
'accessToken',
result.data.data.tokens.accessToken.jwtToken,
];
const refreshToken = [
'refreshToken',
result.data.data.tokens.refreshToken.token,
];
addUser({
id: result.data.data.user._id,
email: result.data.data.user.email,
profileName: result.data.data.user.profileName,
balance: result.data.data.user.balance,
});
try {
AsyncStorage.multiSet([accessToken, refreshToken]);
setIsLoading(false);
return dispatch({ type: 'SIGN_IN', token: accessToken[1] });
} catch (e) {
return console.log('ASYNC STORAGE ERROR', e);
}
})
.catch((e) => {
console.log('Sign in error', e);
});
}
}),
[],
);
const navigationOptions = () => {
if (isLoading) {
return <LoadingScreen />;
}
return !state.userToken ? (
<AuthStackScreen />
) : (
<AppStackScreen />
);
};
return (
<AuthContext.Provider value={authContext}>
<NavigationContainer>{navigationOptions()}</NavigationContainer>
</AuthContext.Provider>
);

Create two separate Stack navigators. AuthStack and MainStack. Like you have.
Conditionally render those stacks based on auth Status. Like you have.
// AuthStack containing the Login and SignUp screens.
export const AuthStack = () => {
return (
<Stack.Navigator headerMode="none">
<Stack.Screen name="SignIn" component={SignInScreen} />
<Stack.Screen name="SignUp" component={SignUpScreen} />
</Stack.Navigator>
);
};
// Main Stack that contains The rest of the screens and other navigation components.
export const MainStack = () => {
return (
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={TabNavigator} />
<Stack.Screen name="Ledger" component={LedgerScreen} />
<Stack.Screen name="CustomerProfile" component={CustomerProfileScreen} />
</Stack.Navigator>
// App.tsx or which ever file you choose to wrap your Stacks in the Navigation container.
const App = (props) => {
const isAuth = useSelector((state) => !!state.auth.token); // Comes from the redux store
return (
<NavigationContainer>
{isAuth && <MainStack />}
{!isAuth && <AuthStack />}
</NavigationContainer>
);
};
export default App
Here, I'm using react-redux to get the isAuth variable that holds the token which verifies if the user is authenticated or not. But, you can use the useContext hook to achieve this as well.
Based on the user's login status the appropriate stacks are rendered.
You can now make your calls to API (the ones you are making in Navigation.tsx) from within the particular screen components itself inside the useEffect and useCallback hooks and get back the responses within the same component, which can include error messages.
Store those error messages in useState or useReducer hooks and display these errors to the user under the appropriate TextInputs or use an Alert Box to display them.
There is no need to pass props between the screen components and React Navigation 5 to get the error messages, if you make your api calls in the screen component itself.