I am working on an e-commerce mobile application with Node.JS backend and React-Native front end. I have an auth state called isLogged. Also a material-bottom-tab navigator for navigating between screens. In order to use different navigators in a specific tab(in my case to use account tab for both AccountScreen and LoginScreen) inside my tab navigator I try to reach redux store using useSelector hook.
const loginState = useSelector((state) => state.auth.isLogged);
If the user is logged I dispatch actions and set a specific token. If he/she wants to logout I delete the token and make the navigations.
I wanted to switch between these two navigators by checking the condition below.
ACCOUNT: {
...(loginState
? { screen: AccountNavigator }
: { screen: LoginNavigator }),
navigationOptions: {
tabBarIcon: (tabInfo) => {
return (
<Ionicons
name={
Platform.OS === "android"
? "md-person-circle-sharp"
: "ios-person-circle-sharp"
}
size={27}
color={tabInfo.tintColor}
/>
);
},
},
},
In my first login attemp, I get a memory leak and warns me to use useEffect cleanup functions. I can logout and re-login without any memory leaks afterwards.
How can I fix this issue ?
Please let me know if I can provide more information to help clarify the problem.
Thanks
Here is my full navigation code:
import React, { useEffect, useState } from "react";
import { createSwitchNavigator, createAppContainer } from "react-navigation";
import { Ionicons } from "@expo/vector-icons";
import { createStackNavigator } from "react-navigation-stack";
import { createMaterialBottomTabNavigator } from "react-navigation-material-bottom-tabs";
import { Platform } from "react-native";
import ProductsOverviewScreen from "../screens/shop/ProductsOverviewScreen";
import ProductDetailScreen from "../screens/shop/ProductDetailScreen";
import CartScreen from "../screens/shop/CartScreen";
import CategoriesScreen from "../screens/shop/CategoriesScreen";
import SubCategoriesScreen from "../screens/shop/SubCategoriesScreen";
import SubCategoriesOverviewScreen from "../screens/shop/SubCategoriesOverviewScreen";
import LoginScreen from "../screens/user/LoginScreen";
import SignScreen from "../screens/user/SignUpScreen";
import AccountScreen from "../screens/user/AccountScreen";
import Colors from "../constants/Colors";
import { useSelector } from "react-redux";
export default () => {
const loginState = useSelector((state) => state.auth.isLogged);
const defaultNavOptions = {
headerStyle: {
backgroundColor: Platform.OS === "android" ? Colors.header : "",
},
headerTitleStyle: {
fontFamily: "open-sans-bold",
},
headerBackTitleStyle: {
fontFamily: "open-sans",
},
headerTintColor: Platform.OS === "android" ? "black" : Colors.primary,
};
const ProductsNavigator = createStackNavigator(
{
ProductsOverview: ProductsOverviewScreen,
ProductDetail: ProductDetailScreen,
Cart: CartScreen,
},
{
defaultNavigationOptions: defaultNavOptions,
}
);
const CategoriesNavigator = createStackNavigator(
{
Categories: CategoriesScreen,
SubCategories: SubCategoriesScreen,
SubCategoriesOverview: SubCategoriesOverviewScreen,
Cart: CartScreen,
ProductDetail: ProductDetailScreen,
},
{
defaultNavigationOptions: defaultNavOptions,
}
);
const CartNavigator = createStackNavigator(
{
Cart: CartScreen,
},
{
defaultNavigationOptions: defaultNavOptions,
}
);
const LoginNavigator = createStackNavigator(
{
Login: LoginScreen,
Sign: SignScreen,
},
{
defaultNavigationOptions: defaultNavOptions,
}
);
const AccountNavigator = createStackNavigator(
{
Account: AccountScreen,
Cart: CartScreen,
},
{
defaultNavigationOptions: defaultNavOptions,
}
);
const TabNavigator = createMaterialBottomTabNavigator(
{
HOME: {
screen: ProductsNavigator,
navigationOptions: {
tabBarIcon: (tabInfo) => {
return (
<Ionicons
name={
Platform.OS === "android" ? "md-home-sharp" : "ios-home-sharp"
}
size={25}
color={tabInfo.tintColor}
/>
);
},
},
},
CATEGORIES: {
screen: CategoriesNavigator,
navigationOptions: {
tabBarIcon: (tabInfo) => {
return (
<Ionicons
name={
Platform.OS === "android" ? "md-menu-sharp" : "ios-menu-sharp"
}
size={30}
color={tabInfo.tintColor}
/>
);
},
},
},
ACCOUNT: {
...(loginState
? { screen: AccountNavigator }
: { screen: LoginNavigator }),
navigationOptions: {
tabBarIcon: (tabInfo) => {
return (
<Ionicons
name={
Platform.OS === "android"
? "md-person-circle-sharp"
: "ios-person-circle-sharp"
}
size={27}
color={tabInfo.tintColor}
/>
);
},
},
},
},
{
activeTintColor: "white",
activeColor: "black",
inactiveColor: "gray",
shifting: true,
labeled: false,
barStyle: { backgroundColor: "#D9D9D9" },
}
);
const MainNavigator = createSwitchNavigator({
Tabs: TabNavigator,
ShopScreen: ProductsNavigator,
Login: LoginNavigator,
Account: AccountNavigator,
});
AppContainer = createAppContainer(MainNavigator);
return <AppContainer />;
};