Clicked add button but navigate to show page

Issue

I want to add without navigate to show page but when i click an add button, it navigates to show page and after this, it adds. I have a same issue with delete button.

enter image description here

It should run without go to show page and stay index screen.

Solution

Your onPress function in your FlatList item title will be triggered when you add items into the state.

You can get rid of this by lambda expression.

export default function IndexScreen({navigation}){
  const { state, addBlogPost, deleteBlogPost } = useContext(Context);
  return (
    <View>
      <Button title={"Add"} onPress={addBlogPost} />
      <FlatList 
        data={state}
        keyExtractor={(blogPosts) => blogPosts.id}
        renderItem={({item}) => {
          return(
            <View style={StyleSheet.listStyle}>
              <TouchableOpacity onPress={()=> {navigation.navigate("Show")}}>  //Change this onPress method
                <Text style={StyleSheet.title}>{item.title}</Text>
              </TouchableOpacity>
              <TouchableOpacity onPress={()=>{deleteBlogPost(item.id)}}>
                <MaterialIcons name="delete" size={24} color="black" />
              </TouchableOpacity>
            </View>
          );
        }}
      />
    </View>
  );
}

Answered By - kiuQ