Received warning when Hide Bottom Tab Navigation in React Native - 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])