I have getting this warning after updating React native Navigation 5 stack and bottom tabs to
"@react-navigation/bottom-tabs": "^5.11.2",
"@react-navigation/native": "^5.8.10",
"@react-navigation/stack": "^5.12.8",
The warning is :
Accessing the 'state' property of the 'route' object is not supported. If you want to get the focused route name, use the 'getFocusedRouteNameFromRoute' helper instead: https://reactnavigation.org/docs/screen-options-resolution/#setting-parent-screen-options-based-on-child-navigators-state
So what I want is to hide bottom tab and Add Plus Botton because it is a component, what i've done is the following and it was working fine. I know it's messy but it worked.
So I have
MainStackNavigator
import React from "react";
import { createStackNavigator } from "@react-navigation/stack";
import TabsNavigator from "./TabNavigator";
const MainStack = createStackNavigator();
export function MainStackNavigator() {
return (
<MainStack.Navigator
screenOptions={{
headerShown: false,
}}
>
<MainStack.Screen name={"Home"} component={TabsNavigator} />
</MainStack.Navigator>
);
}
And I have TabsNavigator:
import React from "react";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { HomeStackScreens } from "./HomeStack";
import { ProfileStackScreens } from "./ProfileStack";
import SplashScreen from "../screens/SplashScreen/SplashScreen";
import AddButton from "../components/BottomTabCompnents/AddButton/AddButton";
import UserIconTab from "../components/BottomTabCompnents/UserIcon/UserIconTab";
import { Entypo } from "@expo/vector-icons";
import { useNavigation } from "@react-navigation/native";
const Tabs = createBottomTabNavigator();
const TabsNavigator = ({ navigation, route }) => {
const { dangerouslyGetState } = useNavigation();
const { index, routes } = dangerouslyGetState();
return (
<Tabs.Navigator
tabBarOptions={{
style: {
backgroundColor: "#fff",
height: 60,
borderTopRightRadius: 20,
borderTopLeftRadius: 20,
borderTopColor: "#fff",
borderTopWidth: 0.5,
shadowColor: "#909090",
shadowRadius: 20,
shadowOffset: { height: 10, width: 0 },
shadowOpacity: 0.5,
},
}}
>
<Tabs.Screen
name="Home"
component={HomeStackScreens}
tabBarOptions={{
showLabel: false,
}}
options={{
tabBarIcon: () => {
return (
<Entypo
name="home"
size={40}
color="#999999"
style={{ position: "absolute", top: 5 }}
/>
);
},
tabBarLabel: "",
}}
/>
<Tabs.Screen
name="SplashScreen"
component={SplashScreen}
tabBarOptions={{
showLabel: false,
}}
options={{
tabBarIcon: () => {
if (routes[index].state && routes[index].state.routes) {
const screenName = routes[index].state.routes;
if (screenName[index]?.state) {
if (screenName[index].state?.routes) {
const ree = screenName[index].state.routes;
if (
ree[ree.length - 1].name === "WhereAreYou" ||
ree[ree.length - 1].name === "AddTextPostScreen" ||
ree[ree.length - 1].name === "AddPhotoPostScreen" ||
ree[ree.length - 1].name === "AddMusicPostScreen" ||
ree[ree.length - 1].name === "AddMoviePostScreen" ||
ree[ree.length - 1].name === "PreviewMusicPostScreen" ||
ree[ree.length - 1].name === "ChatScreen" ||
ree[ree.length - 1].name === "SettingScreen" ||
ree[ree.length - 1].name === "AccountSettingScreen" ||
ree[ree.length - 1].name === "FriendsListScreen" ||
ree[ree.length - 1].name === "UserFriendsScreen" ||
ree[ree.length - 1].name === "HereNowScreen" ||
ree[ree.length - 1].name === "PostDetailsScreen" ||
ree[ree.length - 1].name === "PostPlaceDetailsScreen" ||
ree[ree.length - 1].name === "MessagesScreen" ||
ree[ree.length - 1].name === "ProfileFriendsScreen" ||
ree[ree.length - 1].name === "UserProfileScreen" ||
ree[ree.length - 1].name === "PreviewMoviePostScreen" ||
ree[ree.length - 1].name === "SearchFriendsScreen" ||
ree[ree.length - 1].name === "NotificationsScreen"
) {
return null;
}
}
}
if (screenName[screenName.length - 1].state) {
if (screenName[screenName.length - 1].state.index > 0) {
return null;
}
}
}
return <AddButton />;
},
tabBarLabel: "",
}}
listeners={{
tabPress: (event) => {
event.preventDefault();
},
}}
/>
<Tabs.Screen
name="Profile"
component={ProfileStackScreens}
tabBarOptions={{
showLabel: false,
}}
options={{
tabBarIcon: () => {
return <UserIconTab />;
},
tabBarLabel: "",
}}
/>
</Tabs.Navigator>
);
};
export default TabsNavigator;
And HomeStackScreens
import React, { useEffect } from "react";
import { createStackNavigator } from "@react-navigation/stack";
import Home from "../screens/HomeScreen/HomeScreen";
import NotificationsScreen from "../screens/NotificationsScreen/NotificationsScreen";
import ProfileScreen from "../screens/ProfileScreen/ProfileScreen";
import MessagesScreen from "../screens/MessagesScreen/MessagesScreen";
import SearchFriendsScreen from "../screens/SearchFriendsScreen/SearchFriendsScreen";
import SettingScreen from "../screens/SettingScreen/SettingScreen";
import AccountSettingScreen from "../screens/SettingScreen/AccountSettingScreen/AccountSettingScreen";
import FriendsListScreen from "../screens/MessagesScreen/FriendsListScreen/FriendsListScreen";
import ProfileFriendsScreen from "../screens/UserProfileScreen/ProfileFriendsScreen/ProfileFriendsScreen";
import ChatScreen from "../screens/MessagesScreen/ChatScreen";
import UserFriendsScreen from "../screens/UserFriendsScreen/UserFriendsScreen";
import UserProfileScreen from "../screens/UserProfileScreen/UserProfileScreen";
import PostDetailsScreen from "../screens/PostDetailsScreen/PostDetailsScreen";
import PostPlaceDetailsScreen from "../screens/PostPlaceDetailsScreen/PostPlaceDetailsScreen";
import HereNowScreen from "../screens/HereNowScreen/HereNowScreen";
import WhereAreYou from "../screens/WhereAreYouScreen/WhereAreYou";
import AddTextPostScreen from "../screens/AddTextPostScreen/AddTextPost";
import AddPhotoPostScreen from "../screens/AddPhotoPostScreen/AddPhotoPost";
import AddMusicPostScreen from "../screens/AddMusicPostScreen/AddMusicPostScreen";
import AddMoviePostScreen from "../screens/AddMoviePostScreen/AddMoviePostScreen";
import PreviewMusicPostScreen from "../screens/AddMusicPostScreen/PreviewMusicPostScreen";
import PreviewMoviePostScreen from "../screens/AddMoviePostScreen/PreviewMoviePostScreen";
const HomeStack = createStackNavigator();
export function HomeStackScreens({ navigation, route }) {
useEffect(() => {
if (route.state && route.state.index > 0) {
if (route.state.routes) {
const aa = route.state.routes;
if (aa[aa.length - 1].params?.post) {
navigation.setOptions({ tabBarVisible: true });
return;
}
const rn = aa[aa.length - 1].name;
if (rn === "Profile") {
navigation.setOptions({ tabBarVisible: true });
return;
}
}
navigation.setOptions({ tabBarVisible: false });
} else {
navigation.setOptions({ tabBarVisible: true });
}
}, [route.state]);
return (
<HomeStack.Navigator
initialRouteName="Home"
screenOptions={{
headerShown: false,
}}
>
<HomeStack.Screen name="Home" component={Home} />
<HomeStack.Screen
name="NotificationsScreen"
component={NotificationsScreen}
/>
<HomeStack.Screen name="Profile" component={ProfileScreen} />
<HomeStack.Screen name="SettingScreen" component={SettingScreen} />
<HomeStack.Screen
name="AccountSettingScreen"
component={AccountSettingScreen}
/>
<HomeStack.Screen name="WhereAreYou" component={WhereAreYou} />
<HomeStack.Screen
name="AddMoviePostScreen"
component={AddMoviePostScreen}
/>
<HomeStack.Screen
name="AddMusicPostScreen"
component={AddMusicPostScreen}
/>
<HomeStack.Screen
name="AddTextPostScreen"
component={AddTextPostScreen}
/>
<HomeStack.Screen
name="AddPhotoPostScreen"
component={AddPhotoPostScreen}
/>
<HomeStack.Screen
name="PreviewMusicPostScreen"
component={PreviewMusicPostScreen}
/>
<HomeStack.Screen
name="PreviewMoviePostScreen"
component={PreviewMoviePostScreen}
/>
<HomeStack.Screen name="MessagesScreen" component={MessagesScreen} />
<HomeStack.Screen
name="SearchFriendsScreen"
component={SearchFriendsScreen}
/>
<HomeStack.Screen
name="FriendsListScreen"
component={FriendsListScreen}
/>
<HomeStack.Screen name="ChatScreen" component={ChatScreen} />
<HomeStack.Screen
name="UserFriendsScreen"
component={UserFriendsScreen}
/>
<HomeStack.Screen
name="UserProfileScreen"
component={UserProfileScreen}
/>
<HomeStack.Screen
name="ProfileFriendsScreen"
component={ProfileFriendsScreen}
/>
<HomeStack.Screen
name="PostDetailsScreen"
component={PostDetailsScreen}
/>
<HomeStack.Screen
name="PostPlaceDetailsScreen"
component={PostPlaceDetailsScreen}
/>
<HomeStack.Screen name="HereNowScreen" component={HereNowScreen} />
</HomeStack.Navigator>
);
}
and ProfileStackScreens
import React, { useEffect } from "react";
import { createStackNavigator } from "@react-navigation/stack";
import ProfileScreen from "../screens/ProfileScreen/ProfileScreen";
import UserProfileScreen from "../screens/UserProfileScreen/UserProfileScreen";
import ProfileFriendsScreen from "../screens/UserProfileScreen/ProfileFriendsScreen/ProfileFriendsScreen";
import SettingScreen from "../screens/SettingScreen/SettingScreen";
import AccountSettingScreen from "../screens/SettingScreen/AccountSettingScreen/AccountSettingScreen";
import PostDetailsScreen from "../screens/PostDetailsScreen/PostDetailsScreen";
import PostPlaceDetailsScreen from "../screens/PostPlaceDetailsScreen/PostPlaceDetailsScreen";
import SearchFriendsScreen from "../screens/SearchFriendsScreen/SearchFriendsScreen";
import FriendRequestsScreen from "../screens/FriendRequestsScreen/FriendRequestsScreen";
import UserFriendsScreen from "../screens/UserFriendsScreen/UserFriendsScreen";
import HereNowScreen from "../screens/HereNowScreen/HereNowScreen";
import MessagesScreen from "../screens/MessagesScreen/MessagesScreen";
import FriendsListScreen from "../screens/MessagesScreen/FriendsListScreen/FriendsListScreen";
import ChatScreen from "../screens/MessagesScreen/ChatScreen";
import AddMusicPostScreen from "../screens/AddMusicPostScreen/AddMusicPostScreen";
import AddMoviePostScreen from "../screens/AddMoviePostScreen/AddMoviePostScreen";
import AddTextPostScreen from "../screens/AddTextPostScreen/AddTextPost";
import AddPhotoPostScreen from "../screens/AddPhotoPostScreen/AddPhotoPost";
import PreviewMusicPostScreen from "../screens/AddMusicPostScreen/PreviewMusicPostScreen";
import PreviewMoviePostScreen from "../screens/AddMoviePostScreen/PreviewMoviePostScreen";
import WhereAreYou from "../screens/WhereAreYouScreen/WhereAreYou";
import Home from "../screens/HomeScreen/HomeScreen";
const ProfileStack = createStackNavigator();
export function ProfileStackScreens({ navigation, route }) {
useEffect(() => {
if (route.state && route.state.index > 0) {
navigation.setOptions({ tabBarVisible: false });
} else {
navigation.setOptions({ tabBarVisible: true });
}
}, [route.state]);
return (
<ProfileStack.Navigator
initialRouteName="Profile"
screenOptions={{
headerShown: false,
}}
>
<ProfileStack.Screen name="Profile" component={ProfileScreen} />
<ProfileStack.Screen name="Home" component={Home} />
<ProfileStack.Screen
name="UserProfileScreen"
component={UserProfileScreen}
/>
<ProfileStack.Screen name="WhereAreYou" component={WhereAreYou} />
<ProfileStack.Screen
name="AddTextPostScreen"
component={AddTextPostScreen}
/>
<ProfileStack.Screen
name="AddPhotoPostScreen"
component={AddPhotoPostScreen}
/>
<ProfileStack.Screen
name="AddMusicPostScreen"
component={AddMusicPostScreen}
/>
<ProfileStack.Screen
name="AddMoviePostScreen"
component={AddMoviePostScreen}
/>
<ProfileStack.Screen
name="PreviewMusicPostScreen"
component={PreviewMusicPostScreen}
/>
<ProfileStack.Screen
name="PreviewMoviePostScreen"
component={PreviewMoviePostScreen}
/>
<ProfileStack.Screen
name="ProfileFriendsScreen"
component={ProfileFriendsScreen}
/>
<ProfileStack.Screen name="SettingScreen" component={SettingScreen} />
<ProfileStack.Screen
name="AccountSettingScreen"
component={AccountSettingScreen}
/>
<ProfileStack.Screen
name="UserFriendsScreen"
component={UserFriendsScreen}
/>
<ProfileStack.Screen
name="SearchFriendsScreen"
component={SearchFriendsScreen}
/>
<ProfileStack.Screen
name="FriendRequestsScreen"
component={FriendRequestsScreen}
/>
<ProfileStack.Screen
name="PostDetailsScreen"
component={PostDetailsScreen}
/>
<ProfileStack.Screen
name="PostPlaceDetailsScreen"
component={PostPlaceDetailsScreen}
/>
<ProfileStack.Screen name="HereNowScreen" component={HereNowScreen} />
<ProfileStack.Screen name="MessagesScreen" component={MessagesScreen} />
<ProfileStack.Screen
name="FriendsListScreen"
component={FriendsListScreen}
/>
<ProfileStack.Screen name="ChatScreen" component={ChatScreen} />
</ProfileStack.Navigator>
);
}
As you can see it is messy navigator. So I am trying to access the navigator state to control when the bottom tab and the plus icon to hide because the position of the icon is absolute so when i hide the bottom tabs the icon still showing.
Any Ideas to how fix this.
Thanks.