When I click on the button “Back” in the header or on the button “go home” in the details page my app close. So I need Why?

app.jsx file – only navigation

// Screens
import MainNavigation from "./src/routes/MainNavigation";


export default function App() {

  return (
    <MainNavigation />
  );
}

Navigation is like in documentation
MainNavigation.tsx

// Navigation
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

// Screens
import HomeScreen from "../screens/HomeScreen/HomeScreen";
import TodoDetailsScreen from "../screens/TodoDetailsScreen/TodoDetailsScreen";
import { Button } from "react-native";

// Keep the splash screen visible while we fetch resources
const Stack = createNativeStackNavigator();

const MainNavigation = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen
          name="Details"
          component={TodoDetailsScreen}
          options={
            {
              // headerBackVisible: false,
            }
          }
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default MainNavigation;

HomeScreen.tsx – just simple scrin with one redirection

import { Button, SafeAreaView, Text, View } from "react-native";
import { NavigationProp, RouteProp } from "@react-navigation/native";

const HomeScreen = ({
  navigation,
}: {
  navigation: NavigationProp<any, any>;
}) => {
  return (
    <SafeAreaView>
      <Text>Home screen</Text>
      <Button
        onPress={() => {
          navigation.navigate("Details", { _id: "123" });
        }}
        title="go to details TODO"
      />
    </SafeAreaView>
  );
};

export default HomeScreen;

TodoDetailsScreen.tsx – simple screen

import { NavigationProp, RouteProp } from "@react-navigation/native";
import { Button, Text, View } from "react-native";

const TodoDetailsScreen = ({
  navigation,
  route,
}: {
  route: RouteProp<any, any>;
  navigation: NavigationProp<any, any>;
}) => {
  const { _id } = route.params;
  console.log("_id", _id);
  return (
    <View>
      <Text>TodoDetailsScreen</Text>
      <Button
        onPress={() => {
          navigation.navigate("Home");
        }}
        title="go home"
      />
    </View>
  );
};

package.json

{
  "name": "reactnative-ts",
  "version": "1.0.0",
  "main": "expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@react-navigation/native": "^6.1.17",
    "@react-navigation/native-stack": "^6.9.26",
    "expo": "~51.0.2",
    "expo-font": "^12.0.4",
    "expo-splash-screen": "^0.27.4",
    "expo-status-bar": "~1.12.1",
    "react": "18.2.0",
    "react-native": "0.74.1",
    "react-native-safe-area-context": "^4.10.1",
    "react-native-screens": "^3.31.1"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@types/react": "~18.2.45",
    "typescript": "^5.1.3"
  },
  "private": true
}