onPress Handler of a button updates the state but screen goes blank - react-native

Question

I am learning react native and trying to build a todo app. In the code below, I have two useState hooks one for keeping track of what user enters and allTodo one for keeping track of all the todos to be rendered, also I'm using FlatList for rendering todos but when I submit the todo, the screen just goes blank and nothing appears again until I refresh it again. Also I'm testing the app on chrome by selecting a device in it. could that be a problem? Please let me know what the problem is. Code is below:
import React, { useState } from "react";
import {
StyleSheet,
Text,
View,
TextInput,
FlatList,
TouchableOpacity,
Button,
} from "react-native";
export default function App() {
const [allTodos, setAllTodos] = useState(["a", "b"]);
const [todo, setTodo] = useState("");
const handleSubmit = () => {
setAllTodos(allTodos.push(todo));
setTodo("");
};
return (
<View style={styles.container}>
<Text>{todo}</Text>
<Text>Todo: </Text>
<TextInput
style={styles.input}
placeholder="E.g. Buy eggs"
onChangeText={(val) => setTodo(val)}
/>
<Button title="Add Todo" onPress={handleSubmit} />
<FlatList
data={allTodos}
// keyExtractor={(item) => item.id}
renderItem={({ item }) => (
<TouchableOpacity>
<Text style={styles.item}>{item}</Text>
</TouchableOpacity>
)}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#FBF4E9",
alignItems: "center",
// justifyContent: "center",
paddingTop: 20,
},
item: {
marginTop: 24,
padding: 30,
backgroundColor: "pink",
fontSize: 24,
marginHorizontal: 10,
marginTop: 24,
},
input: {
borderWidth: 1,
borderColor: "#777",
padding: 8,
margin: 10,
width: 200,
},
});
This is what it looks before submitting the todo:
Image after I submit it:
Thank you

Answer 1

Don't mutate state. In your handleSubmit function, you are mutating the state allTodos.
simply change your handleSubmit function to,
const handleSubmit = () => {
const currentTodos = [...allTodos];
currentTodos.push(todo);
setAllTodos(currentTodos);
setTodo('');
};
Also you might want to pass the value prop of TextInput as todo.
Check this Live Snack to see it in action.