Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null. React-native, Async Storage

Question

const ListYourPostsStackScreen = ({navigation}) => {
    // const a = await retrieveData() ;
    // console.log(a);
    AsyncStorage.getItem('user')
    .then(value => {
        console.log(value);
        if (value === null) {
            console.log('something');
            return (
                <>
                <ListYourPostsStack.Navigator screenOptions={{
                    headerStyle: {
                        backgroundColor: '#009387',
                    },
                    initialRouteName: 'SignIn',
                    headerTintColor: '#fff',
                    headerTitleStyle: {
                        fontWeight: 'bold'
                    }
                }}>
                    <ListYourPostsStack.Screen name="SignIn" component={SignInScreen} options={{
                        title:'Chi tiết phòng',
                        headerShown:false
                    }} />
                    <ListYourPostsStack.Screen name="SignUp" component={SignUpScreen} options={{
                        title:'Chi tiết phòng',
                        headerShown:false
                    }} />

                </ListYourPostsStack.Navigator>
                </>
            );

        }
        return (
        <>
            <ListYourPostsStacks.Navigator screenOptions={{
                headerStyle: {
                    backgroundColor: '#009387',
                },
                initialRouteName: 'ListYourPostScreen',
                headerTintColor: '#fff',
                headerTitleStyle: {
                    fontWeight: 'bold'
                }
            }}>
                <ListYourPostsStacks.Screen name="ListYourPostScreen" component={ListYourPostScreen} options={{
                    title:'Overview',
                    headerShown:false
                }} />
                <ListYourPostsStacks.Screen name="Details" component={Details2Screen} options={{
                title:'Chi tiết phòng'
                }} />
                <ListYourPostStacks.Screen name="AddPostScreen" component={AddPostScreen} options={{
                title:'Thêm bài đăng'
                }} />
                <ListYourPostsStacks.Screen name="AddPostScreen2" component={AddPostScreen2} options={{
                title:'Thêm hỉnh ảnh'
                }} />
                <ListYourPostsStacks.Screen name="SignIn" component={SignInScreen} options={{
                    title:'Chi tiết phòng',
                    headerShown:false
                }} />
                <ListYourPostsStacks.Screen name="SignUp" component={SignUpScreen} options={{
                    title:'Chi tiết phòng',
                    headerShown:false
                }} />
                <ListYourPostsStack.Screen name="EditPostScreen" component={EditPostScreen} options={{
                    title:'Sửa bài đăng',
                }} />
                <ListYourPostsStack.Screen name="EditPostScreen2" component={EditPostScreen2} options={{
                    title:'Sửa ảnh',
                }} />
            </ListYourPostsStack.Navigator>
            </>
        )
    }).catch(e => {
        console.log(e);
    })
};

Hello. I'm a newbie at React-native. I'm Vietnamese so don't pay attention to the language. This code is about checking user. If user is exist it will return Homepage screen, else it will return login/signup screen. I'm doing my project at University. I don't know why I am wrong. Although I return all things in "then function". The value is null then I do console.log("something") and I receive it on console, but the return does not run. Please help me. Sorry beacause of my bad english.

Answer 1

Return must be outside of any conditional statements or asynchronous operations. A minimalist example of your code.

const ListYourPostsStackScreen = ({navigation}) => {
   const [user, setUser] = useState([]);

   useEffect(() => {
     AsyncStorage.getItem('user').then(value => {
        setUser(value);
     });
   }, [user]);

   return (
     <>
       {/* Your HTML markup */}
       {
          user.map((person, index) => <p> { person.name }</p>
       }
     </>
   )
}