AsyncStorage not functioning, errors and database input buttons freezing - node.js

Question

So, I am currently working on a program that is supposed to be a mock-up of a Student Educational Plan for a school. The basic gist of it is that it displays a home page with buttons to a form to submit information (text input has buttons to submit or clear the information entered into the to an AsyncStorage database and a page that displays reports of information collected from the form. All pages display somewhat normally, but for some reason, when I press the submit button, the page freezes and does not submit the info. Here is the code I have as of right now. I am stuck trying to figure out how to use AsyncStorage in the context, which is why I don't have it added here. Another thing to add is that the names in the StyleSheet are the way they are is because I had originally based the code from a previous program (mock-up Music Player) I had worked on. Please explain everything as simply as possible.
Edit: I have tried to do more with the AsyncStorage, but the buttons don't work properly. Below is the edited version of the previous code.
import { Image, ScrollView, StyleSheet, Text, View, Button, TextInput,} from 'react-native';
//import {AsyncStorage} from '#react-native-async-storage/async-storage';
import { NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
const Stack = createNativeStackNavigator();
const MyStack = () => {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={HomeScreen}
options={{ title: 'Welcome' }}
/>
<Stack.Screen name="SEP Form" component={SEPScreen} />
<Stack.Screen name="SEP Database" component={SEPInfo} />
</Stack.Navigator>
</NavigationContainer>
);
};
const HomeScreen = ({ navigation }) => {
return (
<View style={styles.container}>
<Button
title="Your Student Educational Plan"
onPress={() =>
navigation.navigate('SEP Form')
}
/>
<Button
title="All Student Educational Plans"
onPress={() =>
navigation.navigate('SEP Database')
}
/>
</View>
);
};
const SEPScreen = ({ navigation, route }) => {
const[SEPInfo, setForm] = useState({});
const save = async() => {
try{
await AsyncStorage.setItem(SEPInfo)
if (SEPInfo.name == null || SEPInfo.name == '') {
alert("Please Enter your Name");
}
else if (SEPInfo.id == null || SEPInfo.id == '') {
alert("Please Enter your ID");
}
else if (SEPInfo.major == null || SEPInfo.major == '') {
alert("Please Enter your Major");
}
else if (SEPInfo.goal == null || SEPInfo.goal == '') {
alert("Please Enter your Goal");
}
else {
await AsyncStorage.setItem("form", JSON.stringify(SEPInfo));
alert(`Form Saved! Name: ${SEPInfo.name}\nID: ${SEPInfo.id}\nMajor: ${SEPInfo.major}\nGoal: ${SEPInfo.goal}`)
}
}
catch (error) {
alert(error);
};
/* const clear = async() => {
try{
await AsyncStorage.removeItem(SEPInfo);
setForm({});
alert('Form Cleared');
}
catch (error){
alert(error);
}
}; */
const load = async () => {
try {
let form = JSON.parse (await AsyncStorage.getItem(form));
if (form !== null) {
setForm(SEPInfo);
}
}
catch (error) {
alert(error);
}
};
}
function clear () {
setState({name:'', id:'', major:'', goal:''});
alert('Form has been cleared!');
}
return (
<View style={styles.container}>
<Text style={styles.sectionTitle}>Enter your info here:</Text>
<TextInput style={styles.input} name="name" label="StudentName " placeholder="Name" onChangeText={(text) => setForm({...SEPInfo, name: text})} />
<TextInput style={styles.input} name="id" label="StudentID " placeholder="ID" onChangeNumber={(number) => setForm({...SEPInfo, id: number})} />
<TextInput style={styles.input} name="major" label="Major " placeholder="Major" onChangeText={(text) => setForm({...SEPInfo, major: text})} />
<TextInput style={styles.input} name="goal" label="Goal " placeholder="Goal" onChangeText={(text) => setForm({...SEPInfo, goal: text})} />
<Button title="Submit"
onPress={() => save()
}
></Button>
<Button title="Clear"
onPress={clear}
></Button>
</View>
);
};
const SEPInfo = ({navigation, route}) => {
return(
<View style={styles.container}>
<Text style={styles.sectionTitle}>SEP Database</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#CFEAF1'
},
listWrapper: {paddingTop: 80, paddingHorizontal: 20},
sectionTitle: {fontWeight: 'bold', fontSize: 30, margin: 5, color: '#2E2090', alignSelf: 'center'},
sectionTitleTwo: {fontWeight: 'bold', fontSize: 25, margin: 5, color: '#206290', alignSelf: 'center'},
flexContainerWaiting: {backgroundColor: '#20BD57', padding: 15, borderRadius: 10, flexDirection: 'row', alignItems: 'center', marginTop: 5, marginBottom: 5, justifyContent: 'space-evenly'},
flexContainerOne: {backgroundColor: '#0B97B0', fontSize: 16, flex: 0.5, padding: 15, borderRadius: 10, flexDirection: 'row', alignItems: 'center', marginTop: 2.5, marginBottom: 2.5, justifyContent: 'space-evenly'},
flexContainerTwo: {backgroundColor: '#D773EB', fontSize: 16, flex: 0.5, padding: 15, borderRadius: 10, flexDirection: 'row', alignItems: 'center', marginTop: 2.5, marginBottom: 2.5, justifyContent: 'space-evenly'},
input: {
height: 40,
margin: 12,
borderWidth: 1,
padding: 10,
},
});
export default MyStack;

Answer 1

Looking at the AsyncStorage docs (https://reactnative.dev/docs/asyncstorage#setitem), it says that when using setItem(), you need to pass a key: string and a value: string. In your code, you only seem to pass a value: AsyncStorage.setItem(TextInput). Furthermore, you pass the value TextInput into setItem(), but you don't seem to define TextInput anywhere. What you should do is use the value prop and onChangeText prop to store the value of the TextInput in a state variable, as is shown on the docs: https://reactnative.dev/docs/textinput. Then, pass that state variable into setItem() as they value and pass another item as its key.

Answer 2

for saving an item in async storage:-
AsyncStorage.setItem('usertoken', token);
for fetching an item from async storage:-
// need to be called inside an async function
let token = await AsyncStorage.getItem('userToken');