Problems with AsyncStorage in React Native - reactjs

Question

I am building my first React Native app. I am in the process of making the automatic login with AsyncStorage. I already got the login page figured out and I managed to store the user in AsyncStorage. But in the
App.js
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import Login from './components/login'
import Signup from './components/signup'
import Home from './components/home'
import Profile from './components/profile';
const getData = async (user) => {
try {
const value = await AsyncStorage.getItem('#userauthkey')
if (value !== null) {
return value
} else {
return false
}
} catch (e) {
console.log(e)
}
}
const c = async () => {
const ch = await getData('#userauthkey')
return ch
}
console.log(c())
const AppNavigator = createStackNavigator({
Login: {screen: Login},
Signup: {screen: Signup},
Home: {screen: Home},
Profile: {screen: Profile},
})
const AppNavigator2 = createStackNavigator({
Home: {screen: Home},
Login: {screen: Login},
Signup: {screen: Signup},
Home: {screen: Home},
Profile: {screen: Profile},
})
const App = createAppContainer(c() == false ? AppNavigator : AppNavigator2)
export default App;
I get "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." How can I fix it to make it sign the user in automatically?
login screen
import { StatusBar } from 'expo-status-bar'
import React, { useState, useEffect } from 'react'
import { TextInput } from 'react-native-gesture-handler';
import AsyncStorage from '#react-native-async-storage/async-storage';
import { StyleSheet, Text, View, FlatList, Image, Button, Pressable, ScrollView } from 'react-native';
export default function Login(props) {
const message = props.navigation.getParam('message', null)
const [username, setUsername] = useState("")
const [password, setPassword] = useState("")
const setStringValue = async (value, user) => {
try {
await AsyncStorage.setItem(user, value)
} catch (e) {
console.log(e)
}
}
const getData = async (user) => {
try {
const value = await AsyncStorage.getItem('#userauthkey')
if (value !== null) {
return value
} else {
return false
}
} catch (e) {
console.log(e)
}
}
const log = () => {
fetch(`http://192.168.5.223:8000/home/login/`, {
method: 'POST',
headers: {
"Content-Type": 'application/json'
},
body: JSON.stringify({ username: username, password: password }),
})
.then(res => res.json())
.then(async (res) => {
console.log(res)
if (res.valid === true) {
await setStringValue(username, '#userauthkey')
let ch = await getData(username)
console.log(ch)
if (res.set === true) {
props.navigation.navigate("Home", { "user": username })
} else {
props.navigation.navigate("Profile", { "user": username })
}
} else {
props.navigation.navigate("Login", { 'message': "username/password are incorrect" })
}
})
.catch(error => console.log(error))
}
const sign = () => {
props.navigation.navigate("Signup")
}
return (
<View style={styles.container} >
<ScrollView style={styles.scroll} >
<View style={styles.main}>
<Text style={styles.error}> {message} </Text>
< Text style={styles.label} >
Username:
</Text>
<TextInput style={styles.input} placeholder="Username"
onChangeText={text => setUsername(text)} value={username}
autoCapitalize={'none'}
/>
<Text style={styles.label}> Password: </Text>
<TextInput style={styles.input} placeholder="Password" onChangeText={text => setPassword(text)}
value={password} secureTextEntry={true} autoCapitalize={'none'}
/>
<Button onPress={() => log()} title="Login" > </Button>
</View>
</ScrollView>
< View style={styles.footer} >
<Button onPress={() => sign()} title="Don't have an acount? Sign up now" />
</View>
< StatusBar style="auto" />
</View>
)
}
Login.navigationOptions = screenProps => ({
headerLeft: () => null,
gestureEnabled: false,
headerStyle: {
backgroundColor: 'black'
},
headerTintColor: 'white',
})
const styles = StyleSheet.create({
error: {
textAlign: 'center',
color: 'red',
},
main: {
paddingTop: 145,
paddingHorizontal: 5,
},
container: {
flex: 1,
backgroundColor: 'black',
},
scroll: {
backgroundColor:'#'
},
footer: {
borderTopColor: '#fff',
padding:35,
},
label: {
fontSize: 24,
color: "white",
padding: 10,
},
input: {
fontSize: 24,
backgroundColor: "white",
padding: 10,
margin: 10,
borderRadius: 5,
},
});

Answer 1

Did you imported AsyncStorage in your app.js?
import AsyncStorage from '#react-native-async-storage/async-storage';
You used it but didn't import it, in the code shown. Try to import it and recompile