When it presses the same tab or return button the mobile app it closed

Question

The initial navigation works fine, but when I press return or press the same tab (to go back), the app is closed.

I use React Navigation v6+ and navigators like Stack and Material Bottom Tabs.

Main Navigation

<Tab.Navigator
  initialRouteName='TabMovie'
  activeColor="#f0edf6"
  keyboardHidesNavigationBar={true}
  inactiveColor="#000000"
  shifting={true}
  barStyle={{
    borderWidth: 0,
    elevation: 0,
    height: (Platform.OS == 'ios') ? 80 : 54
  }}
>
  <Tab.Screen
    name="TabMovie"
    component={TabMovie}
    options={{
      tabBarLabel: 'Cine',
      tabBarColor: '#EC9B45',
      tabBarIcon: (({ color }) => (
        <Icon color={color} size={25} name="videocam-outline" />
      ))
    }}
  />

  <Tab.Screen
    name="TabsTvShow"
    component={TabsTvShow}
    options={{
      tabBarLabel: 'TV Shows',
      tabBarColor: '#58149C',
      tabBarIcon: (({ color }) => (
        <Icon color={color} size={25} name="desktop-outline" />
      ))
    }}
  />

  <Tab.Screen
    name="TabTopRated"
    component={TabTopRated}
    options={{
      tabBarLabel: 'Top Rated',
      tabBarColor: '#135990',
      tabBarIcon: (({ color }) => (
        <Icon color={color} size={25} name="star-half-outline" />
      ))
    }}
  />

  <Tab.Screen
    name="TabSearch"
    component={TabSearch}
    options={{
      tabBarLabel: 'Search',
      tabBarColor: '#A62349',
      tabBarIcon: (({ color }) => (
        <Icon color={color} size={25} name="search-outline" />
      ))
    }}
  />
</Tab.Navigator>

One of stack navigators

<Stack.Navigator
  initialRouteName='HomeScreen'
  screenOptions={{
    headerShown: false,
    cardStyle: {
      backgroundColor: 'white'
    }
  }}
>
  <Stack.Screen name="HomeScreen" component={HomeScreen} />
  <Stack.Screen name="MovieDetailScreen" component={MovieDetailScreen} />
</Stack.Navigator>

Another stack navigator

<Stack.Navigator
  initialRouteName="TvShowsScreen"
  screenOptions={{
    headerShown: false,
    cardStyle: {
      backgroundColor: 'white'
    }
  }}
>
  <Stack.Screen name="TvShowsScreen" component={TvShowsScreen} />
  <Stack.Screen name="TvShowDetailScreen" component={TvShowDetailScreen} />
</Stack.Navigator>

I use the navigation hook to navigate between views, and i do not have any button to return. I hope to use the button return that each mobile has, and the nativation tab (material tab button) to return to the previous view

This is a shared component when I use the navigation

    <TouchableOpacity
  onPress={() => navigation.navigate('MovieDetailScreen', movie)}
  activeOpacity={0.95}
  style={{ width, height, ...moviePosterStyles.card }}>
  <View style={moviePosterStyles.imageContainer}>
    <Image
      source={
        (poster_path)
          ? { uri }
          : require('../assets/images/no-movie.jpg')
      }
      style={moviePosterStyles.image}
    />
  </View>
</TouchableOpacity>

Screen where I press return

    <ScrollView>
  <View style={detailStyles.imageContainer}>
    <View style={detailStyles.imageBorder}>
      <Image
        source={{ uri }}
        style={detailStyles.posterImage}
      />
    </View>
  </View>

  <View style={detailStyles.titlesContainer}>
    <Text style={detailStyles.subTitle}>{original_title}</Text>
    <Text style={detailStyles.title}>{title}</Text>
  </View>

  <MovieDetails movieFull={movieFullDetails!} cast={cast} similarMovies={similarMovies!} />
</ScrollView>

Package.json

"dependencies": {
"@react-native-masked-view/masked-view": "^0.2.7",
"@react-navigation/material-bottom-tabs": "^6.2.3",
"@react-navigation/native": "^6.0.11",
"@react-navigation/stack": "^6.2.2",
"axios": "^0.27.2",
"intl": "^1.2.5",
"react": "18.0.0",
"react-native": "0.69.3",
"react-native-gesture-handler": "^2.5.0",
"react-native-image-colors": "^1.3.1",
"react-native-linear-gradient": "^2.6.2",
"react-native-paper": "^4.12.4",
"react-native-reanimated": "^2.9.1",
"react-native-reanimated-carousel": "^3.0.3",
"react-native-safe-area-context": "^4.3.1",
"react-native-screens": "^3.15.0",
"react-native-snap-carousel": "^1.3.1",
"react-native-splash-screen": "^3.3.0",
"react-native-vector-icons": "^9.2.0",
"react-native-webview": "^11.23.0",
"react-native-youtube-iframe": "^2.2.2"

},

Answer 1

There is no have a problem with the navigation.

I use a package: react-native-youtube-ifram to show YouTube videos, and the component was needs an additional attr

              <YoutubePlayer
            videoId={trailerYoutubeKey}
            playList={trailersYoutubeList}
            height={screenDimensions * 0.30}
            webViewStyle={{ opacity: 0.99 }} // This attr
             />

Now, the navigation works correctly