Troubleshooting Navigation Issues on the Onboarding to HomeScreen Transition - react-native

Question

Hello I couldn't navigate from Onboarding to HomeScreen. I'm not sure what I do wrong. It gives error such as The 'navigation' object hasn't been initialized yet. This might happen if you don't have a navigator mounted, or if the navigator hasn't finished mounting. See https://reactnavigation.org/docs/navigating-without-navigation-prop#handling-initialization
for more details.
//AppRoot.js
const [isFirstLaunch, setFirstLaunch] = useState(null);
useEffect(() => {
AsyncStorage.getItem("onboardingCompleted").then((value) => {
if (value == null) {
setFirstLaunch(true);
} else {
setFirstLaunch(false);
}
});
}, []);
return (
<NavigationContainer
ref={navigationRef}
onReady={() =>
(routeNameRef.current =
navigationRef?.current?.getCurrentRoute()?.name ?? "")
}
onStateChange={() => {
const previousRouteName = routeNameRef.current;
const currentRouteName =
navigationRef?.current?.getCurrentRoute()?.name;
trackScreenView(previousRouteName, currentRouteName);
console.log(previousRouteName, " -> ", currentRouteName);
// Save the current route name for later comparison
routeNameRef.current = currentRouteName;
}}
theme={themeToSet === "dark" ? DarkModeTheme : LightModeTheme}
>
<Loader visible={isLoading} />
{isFirstLaunch == false ? <HomeScreen /> : <OnboardingScreen />}
</NavigationContainer>
);
// Onboarding
const OnboardingScreen = () => {
const navigation = useNavigation();
const [currentPage, setCurrentPage] = useState(0);
const pages = [
<WelcomeScreen onGetStarted={() => setCurrentPage(1)} />,
<PersonalizationScreen1 />,
<PersonalizationScreen2 />,
<NotificationScreen />,
<WidgetScreen />,
<PaywallScreen />,
<EndScreen />,
];
const onContinue = () => {
if (currentPage === pages.length - 1) {
AsyncStorage.setItem("onboardingCompleted", "true");
} else {
setCurrentPage(currentPage + 1);
}
};
return <View>{React.cloneElement(pages[currentPage], { onContinue })}</View>;
};
export default OnboardingScreen;
//HomeScreen
const Tab = createBottomTabNavigator();
const HomeBottomNavigation = () => {
const { colors } = useTheme();
const { t } = useTranslation();
return (
<Tab.Navigator
id="BottomNavigation"
initialRouteName="Users"
screenOptions={({ route, navigation }) => ({
headerShown: false,
tabBarIcon: ({ focused, color, size }) => {
let iconName;
if (route.name === "UsersStack") {
iconName = focused ? "people" : "people-outline";
} else if (route.name === "SettingsStack") {
iconName = focused ? "settings" : "settings-outline";
} else if (route.name === "Feedback") {
iconName = focused ? "newspaper" : "newspaper-outline";
} else if (route.name === "More") {
iconName = focused ? "apps" : "apps-outline";
}
return <Icon name={iconName} size={size} color={color} />;
},
tabBarActiveTintColor: colors.text,
tabBarInactiveTintColor: "gray",
unmountOnBlur: true,
})}
>
<Tab.Screen
name="UsersStack"
component={UsersStackScreen}
options={{ headerShown: false, title: t("users") }}
/>
<Tab.Screen
name="SettingsStack"
component={SettingsStackScreen}
options={{ headerShown: false, title: t("settings") }}
/>
<Tab.Screen
name="Feedback"
component={FeedbackScreen}
options={{ headerShown: false, title: t("feedback") }}
/>
<Tab.Screen
name="More"
component={MoreScreen}
options={{ headerShown: false, title: t("more") }}
/>
</Tab.Navigator>
);
};
export default HomeBottomNavigation;
//Onboarding Stack
const Stack = createNativeStackNavigator();
const OnboardingStackNavigation = () => {
return (
<Stack.Navigator
id="OnboardingNavigation"
initialRouteName="Onboarding"
screenOptions={({ route, navigation }) => {
({ headerShown: false });
}}
>
<Stack.Screen
name="Onboarding"
component={OnboardingScreen}
options={{ headerShown: false }}
/>
<Stack.Screen
name="Home"
component={UsersScreen}
options={{ headerShown: false }}
/>
</Stack.Navigator>
);
};
I have tried passing setFirstLaunch to onboarding screen and tried to manage that.
I have tried navigating inside Onboarding.
I have tried button triggered navigation.