Received warning when Hide Bottom Tab Navigation in React Native

Question

I received warning when tried to hide bottom nav in specific screen. The warning is 'Cannot update a component from inside the function body of a different component' , So what I'm trying to do is that I've a home screen and when I navigate to detail screen the bottom nav is going to disappear/hidden. my code as below:

ProductNavigation.js my stack navigation

import 'react-native-gesture-handler';
import React, {useState, useEffect} from 'react'
import { StyleSheet, Text, View } from 'react-native'
import { createStackNavigator } from '@react-navigation/stack'
import MainScreen from '../screen/MainScreen'
import DetailScreen from '../screen/DetailScreen'

  const Stack = createStackNavigator();

  const ProductNavigation = ({navigation, route}) => {
    if (route.state) {
    navigation.setOptions({
        tabBarVisible: route.state.index > 0 ? false: true
      })
    }

    return (
      <Stack.Navigator>
        <Stack.Screen name="Home" component={MainScreen} />
        <Stack.Screen name="Detail" component={DetailScreen} options = {({ route }) => ({title: 
          route.params.productName })}/>
      </Stack.Navigator>
        )
      }

       export default ProductNavigation;

BottomTabNav.js my bottom navigation

import React from 'react'
import { StyleSheet, Text, View } from 'react-native'
import Ionicons from 'react-native-vector-icons/Ionicons'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import ProductNavigation from './ProductNavigation'
import SettingScreen from '../screen/SettingScreen'



  const BottomTab = createBottomTabNavigator();

  const BottomTabNav = ({ navigation, route }) => {

   return (
    <BottomTab.Navigator>
        <BottomTab.Screen 
        name="Home" 
        component={ProductNavigation} 
        options={{
            tabBarLabel: "Home",
            tabBarIcon:({color, size}) => (
                <Ionicons name="home-outline" color={color} size={size} />)
            }} />

        <BottomTab.Screen 
        name="Settings" 
        component={SettingScreen}
        options={{
            tabBarLabel: "Settings",
            tabBarIcon: ({color, size}) => (
                <Ionicons name="settings-outline" color={color} size={size} />)
            
        }} />
    </BottomTab.Navigator>
   )
  }

   export default BottomTabNav

yes it got hidden in detail screen, but why there is a warning? where should I edit or change my code?

Answer 1

Looking at the docs for navigation.setOptions ( https://reactnavigation.org/docs/navigation-prop/#setoptions ) there they put the logic in the useLayoutEffect hook.

try changing:

import React from 'react'

...

  if (route.state) {
    navigation.setOptions({
      tabBarVisible: route.state.index > 0 ? false: true
    })
  }

to

import React, { useLayoutEffect } from 'react'

...

...

  useLayoutEffect(() => {
    if (route.state) {
      navigation.setOptions({
        tabBarVisible: route.state.index > 0 ? false: true
      })
    }
  }, [navigation, route])