I am trying to do something very simple in my react native log in screen. I first try and get the userId of a user and if it's not set I want to redirect to the user's login page. When the userId is not set I console out and get a null value for it. But when I create a if statement to check if the userId === null it doesn't work. Any ideas on what I am doing wrong?
const userId = await AsyncStorage.getItem('userId');
console.warn(userId);
console.warn("When userId is not set I get a value of null");
if (userId === null) {
console.warn("However this check for null is not working");
navigation.navigate("UserLoginWeb");
}
This is a common issue with AsyncStorage in React Native. The potential issues here could be:
AsyncStorage always returns strings or null. Sometimes it might return the string "null" instead of actual null, which would make === null fail.
The check should handle both cases:
if (userId == null || userId === 'null')
It's important to wrap AsyncStorage operations in try-catch blocks since they can fail.
The code below is a proper way to handle this:
import React, { useEffect } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
const CheckUserAuth = ({ navigation }) => {
useEffect(() => {
const checkUserId = async () => {
try {
const userId = await AsyncStorage.getItem('userId');
console.warn('userId value:', userId);
// Correct way to check for null/undefined
if (userId == null || userId === 'null') {
console.warn('User is not logged in');
navigation.navigate('UserLoginWeb');
} else {
console.warn('User is logged in with ID:', userId);
}
} catch (error) {
console.error('Error reading userId from AsyncStorage:', error);
navigation.navigate('UserLoginWeb');
}
};
checkUserId();
}, [navigation]);
return null; // Or your loading component
};
export default CheckUserAuth;
The above code uses proper error handling, handles both null and "null" cases, and wrapped in useEffect to properly handle the async operation. It also includes proper TypeScript/Flow-friendly type checking.
Make sure you're awaiting the check in a proper async context. If the code is directly in your component body rather than in a useEffect or async function, it won't work correctly. I hope this helps.