Develop Reference

useEffect doesn't work when switching screens

Hi I am still new to react-native and has been trying to create an app.
My stuck is that I don't know why useEffect doesn't work when switching screens by react-navigation-bottom-tab.
Below is my HomeScreen.js where I wrot useEffect to fetch all data from Firestore.
As you can see I wrote two useEffects because I thought it'd work.
The first one was thought to fetch data when I switch to Home from like ProfileScreen.
import {
View,
FlatList,
StyleSheet,
} from "react-native";
import { RideCard } from "./RideCard";
import { OneTouchFilter } from "./OneTouchFilter";
import { useFirestoreContext } from "../../contexts/FirestoreContext";
import { useEffect } from "react";
export const HomeScreen = ({ navigation }) => {
console.log("HomeScreen.js useEffect");
const { selectedBoardType, cityFromText, cityToText, fetchRides, rides } =
useFirestoreContext();
useEffect(() => {
fetchRides();
}, []);
useEffect(() => {
fetchRides();
}, [selectedBoardType, cityFromText, cityToText]);
return (
<View style={styles.inner}>
<OneTouchFilter />
<FlatList
data={rides}
renderItem={(itemData) => (
<RideCard
ride={itemData.item}
index={itemData.index}
id={itemData.item.id}
numOfRides={rides.length}
/>
)}
/>
</View>
);
};
App.js
this is a file where react-navigation-bottom-tab placed in.
import React, { useContext } from "react";
import { StyleSheet } from "react-native";
import { NavigationContainer, DefaultTheme } from "#react-navigation/native";
import { createStackNavigator } from "#react-navigation/stack";
import { createBottomTabNavigator } from "#react-navigation/bottom-tabs";
import { HomeScreen } from "./screens/Home/HomeScreen";
import { PostScreen } from "./screens/Post/PostScreen";
import { ProfileScreen } from "./screens/Profile/ProfileScreen";
import Ionicons from "react-native-vector-icons/Ionicons";
import { NativeBaseProvider } from "native-base";
// create another file for contexts Provider
import { AuthContextProvider } from "./contexts/AuthContext";
import { FirestoreContextProvider } from "./contexts/FirestoreContext";
import { FormContextProvider } from "./contexts/FormContext";
const MyTheme = {
...DefaultTheme,
colors: {
...DefaultTheme.colors,
background: "white",
},
};
export default function App() {
const Stack = createStackNavigator();
// タブ移動の設定を新規追加
// createBottomTabNavigator ... タブ移動を設定する関数
const Tab = createBottomTabNavigator();
// 新規追加
// - 移動を関数に持たせて、タブ移動の設定で利用
// - 意図 ... タブ移動の箇所のコードが読みにくくなるため
const Home = () => {
return (
<Stack.Navigator>
<Stack.Screen
options={{ headerShown: false }}
name="Home"
component={HomeScreen}
/>
</Stack.Navigator>
);
};
const Post = () => {
return (
<Stack.Navigator
headerMode="screen"
screenOptions={{ headerShown: false }}
>
<Stack.Screen name="Post" component={PostScreen} />
{/* <Stack.Screen name="詳細" component={DetailsScreen} /> */}
</Stack.Navigator>
);
};
const Profile = () => {
return (
<Stack.Navigator
headerMode="screen"
screenOptions={{ headerShown: false }}
>
<Stack.Screen name="Profile" component={ProfileScreen} />
{/* <Stack.Screen name="詳細" component={DetailsScreen} /> */}
</Stack.Navigator>
);
};
return (
<AuthContextProvider>
<FirestoreContextProvider>
<FormContextProvider>
<NativeBaseProvider>
<NavigationContainer theme={MyTheme}>
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
let iconName;
// icon swithcer which depends on the route name
if (route.name === "Home") {
iconName = focused ? "ios-home" : "ios-home";
} else if (route.name === "Post") {
iconName = focused ? "ios-add" : "ios-add";
} else if (route.name === "Profile") {
iconName = focused ? "md-person" : "md-person";
}
return (
<Ionicons name={iconName} size={size} color={color} />
);
},
})}
tabBarOptions={{
activeTintColor: "rgb(0, 110, 182)",
inactiveTintColor: "gray",
}}
>
<Tab.Screen name="Home" component={Home} />
<Tab.Screen name="Post" component={Post} />
<Tab.Screen name="Profile" component={Profile} />
</Tab.Navigator>
</NavigationContainer>
</NativeBaseProvider>
</FormContextProvider>
</FirestoreContextProvider>
</AuthContextProvider>
);
}

It's because, even though you switch screens, the other screen is not unmounted --- it's still in memory but not visible. This is a design decision of react-navigation intended for better performance (it doesn't have to reload the screen when you go back, as it's already there). Since it is not unmounted, when the user returns to it, it just triggers a rerender of the already-instantiated component, so the effect does not run.
What you need to use instead is useFocusEffect which is an effect bound to if the screen is in focus.

Can't use Swipeable with Bottom tabs, React Navigator

I have a FlatList with some swipeable components inside of it, using Swibepeable from react-native-gesture-handler. My current navigation structure goes as follows:
I have a routes folder with a bottom tabs navigator file and a stack navigator file. The stack navigator is nested inside of the tabs navigator, which looks like this:
TabsNavigator:
import { createBottomTabNavigator } from "#react-navigation/bottom-tabs";
import HomeStack from "./HomeStack";
export default function TabsNavigator() {
const Tab = createBottomTabNavigator();
return (
<Tab.Navigator screenOptions={{ headerShown: false }}>
<Tab.Screen
name="List"
component={HomeStack}
options={{
tabBarIcon: ({ focused }) => (
<FontAwesomeIcon
icon={faList}
style={{ color: focused ? "#104543" : "#CCC" }}
/>
),
}}
/>
</Tab.Navigator>
);
}
HomeStack:
import { createStackNavigator } from "#react-navigation/stack";
import { Home } from "../screens/Home";
export default function StackNavigator() {
const Stack = createStackNavigator();
return (
<Stack.Navigator>
<Stack.Screen
options={{ headerShown: false }}
name="Home"
component={Home}
/>
</Stack.Navigator>
);
}
However, since the app changed the StackNavigator (HomeStack) has become irrelevant. Thus I've tried to insert the {Home} screen into the Tab.Screen's component, thinking this would do the trick. It did do the trick, except that I can't swipe any of the rows in the FlatList anymore. I'm still able to open the Accordion ListItem inside of the FlatList however. For extra clarity I'll add the Home screen as well.
Home:
export const Home = ({ navigation }) => {
const dispatch = useDispatch();
useEffect(() => {
const fetchUserData = async () => {
const data = await axios.get(
`http://192.168.****`,
{
auth: {
username: "****",
password: "***",
},
}
);
dispatch(setUsersData(data.data));
};
return navigation.addListener("focus", async () => {
await fetchUserData();
});
}, [navigation]);
return (
<View style={styles.container}>
<SearchBarHeader/>
<FlatListComponent />
</View>
);
};
I haven't seen any similar issue online yet. Does anyone have an idea what could cause this?

How can I edit -add margin between the string and the icon? REACT-NATIVE - DRAWER

Im building a sidebar menu, and im using react-navigation-drawer, heres the code:
const drawer = createDrawerNavigator({ //hooks
Home: { screen: Home_Stack, navigationOptions: {drawerIcon: <Entypo name = "home" size = {24} color = {"black"}></Entypo>}},
About: { screen: Slide_menu_stack}
});
export default createAppContainer(drawer);
and it looks like this:
I want home to be more closer to the icon, how can I do that?

you can create a custom drawer component like think
import { NavigationContainer } from '#react-navigation/native';
import {createDrawerNavigator,} from '#react-navigation/drawer';
const Drawer = createDrawerNavigator();
export function MyDrawer() {
return (
<NavigationContainer>
<Drawer.Navigator drawerContent={props => <CustomDrawerContent {...props} />}>
<Drawer.Screen name="Home" component={Home_Stack} />
<Drawer.Screen name="About" component={Slide_menu_stack} />
</Drawer.Navigator>
</NavigationContainer>
);
}
and coustomdrawer like this which I created
function CustomDrawerContent(props) {
return (
<View style={styles.container}>
<ScrollView>
{here you can style your drawer as you want}
</ScrollView>
</View>
)
}

Resetting screen to first Parent screen, from a nested screen (React navigation & React Native)

I've followed the documentation for creating bottom tab navigation with react-navigation v5 ("#react-navigation/native": "^5.2.3")
Currently is partially used this example in my project from docs https://reactnavigation.org/docs/bottom-tab-navigator/ to fit the needs of version 5.
Example might be following
// Navigation.tsx
import { BottomTabBarProps } from '#react-navigation/bottom-tabs';
import { TabActions } from '#react-navigation/native';
import * as React from 'react';
function Navigation({ state, descriptors, navigation }: BottomTabBarProps) {
return (
<View>
{state.routes.map((route, index) => {
const { options } = descriptors[route.key];
const isFocused = state.index === index;
const onPress = () => {
const event = navigation.emit({
type: 'tabPress',
target: route.key,
canPreventDefault: true,
});
if (!isFocused && !event.defaultPrevented) {
const jumpToAction = TabActions.jumpTo(options.title || 'Home');
navigation.dispatch(jumpToAction);
}
};
return (
<TouchableOpacity
key={options.title}
accessibilityLabel={options.tabBarAccessibilityLabel}
accessibilityRole="button"
active={isFocused}
activeOpacity={1}
testID={options.tabBarTestID}
onPress={onPress}
>
{route.name}
</TouchableOpacity>
);
})}
</View>
);
}
export default Navigation;
However, I have a couple of nested StackNavigators as described in AppNavigator.tsx
AppNavigator.tsx
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import React from 'react';
import { AppState, AppStateStatus } from 'react-native';
import Navigation from '../components/navigation/Navigation';
import AccountScreen from '../screens/account';
import SettingsScreen from '../screens/settings';
import SupportScreen from '../screens/support';
import HomeNavigator from './HomeNavigator';
import TransactionNavigator from './TransactionNavigator';
const { Navigator, Screen } = createBottomTabNavigator();
const AppNavigator = () => {
return (
<View>
<Navigator tabBar={(props) => <Navigation {...props} />}>
<Screen
component={HomeNavigator}
name="Home"
options={{ title: 'Home' }}
/>
<Screen
component={TransactionNavigator}
name="Transactions"
options={{
title: 'Transactions' }}
/>
<Screen
component={AccountScreen}
name="Account"
options={{ title: 'Account' }}
/>
<Screen
component={SupportScreen}
name="Support"
options={{ title: 'Support' }}
/>
<Screen
component={SettingsScreen}
name="Settings"
options={{
title: 'Settings' }}
/>
</Navigator>
</View>
);
};
export default AppNavigator;
And I am aiming for resetting the nested StackNavigator each time user leaves it. So example can be HOME -> TRANSACTIONS -> TRANSACTION_DETAIL (which is part of a nested navigator) -> HOME -> TRANSACTIONS
currently, I see a TRANSACTION_DETAIL after the last step of the "walk through" path. Nevertheless, I want to see TRANSACTIONS instead. I found that if I change
if (!isFocused && !event.defaultPrevented) {
const jumpToAction = TabActions.jumpTo(options.title || 'Home');
navigation.dispatch(jumpToAction);
}
to
if (!isFocused && !event.defaultPrevented) {
navigation.reset({ index, routes: [{ name: route.name }] });
}
it more or less does the thing. But it resets the navigation, so it is unmounted and on return back, all data are lost and need to refetch.
In navigation is PopToTop() function that is not available in this scope.
Also I tried to access all nested navigators through descriptors, yet I have not found how to correctly force them to popToTop.
And the idea is do it on one place so it will be handled automatically and there would not be any need to implement it on each screen.

I have tried with navigator.popToTop() but it was not working. It may be stackNavigator and TabNavigator having a different history with the routes. I have fixed the issue with the below code. "Home" is my stack navigator name and another "Home" is screen name (Both are same for me)
tabBarButton: props => (
<TouchableOpacity
{...props}
onPress={props => {
navigation.navigate('Home', {
screen: 'Home'
})
}}
/>
),

React Navigation V5 Hide Bottom Tabs

I would like to be able to hide the tabs on a screen using React Native Navigation v5.
I've been reading the documentation but it doesn't seem like they've updated this for v5 and it refers to the < v4 way of doing things.
here is my code:
import Home from './components/Home';
import SettingsScreen from './components/Settings';
import * as React from 'react';
import { NavigationContainer } from '#react-navigation/native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import { createStackNavigator } from '#react-navigation/stack';
const SettingsStack = createStackNavigator();
const ProfileStack = createStackNavigator();
function SettingsStackScreen() {
return (
<SettingsStack.Navigator>
<SettingsStack.Screen name="Settings" component={SettingsScreen} />
</SettingsStack.Navigator>
)
}
function ProfileStackScreen() {
return (
<ProfileStack.Navigator>
<ProfileStack.Screen name="Home" component={Home} />
</ProfileStack.Navigator>
)
}
const Tab = createBottomTabNavigator();
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="Home" component={ProfileStackScreen} />
<Tab.Screen name="Settings" component={SettingsStackScreen} />
</Tab.Navigator>
</NavigationContainer>
);
}
Things I have tried:
Accessing the options of the function and hiding that way.
Passing tabBarVisible as a prop to the Screen.
What I am asking for is, what is the correct way of hiding tabs on screens in React Navigation v5.

tabbarvisible-option-is-no-longer-present in react navigation v5 upwards. You can achieve the same behavior by specifying
tabBarStyle: { display: 'none' } in options of the screen you want to hide bottom tab
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="Home" component={ProfileStackScreen} />
<Tab.Screen options={{tabBarStyle:{display:'none'}}} name="Settings" component={SettingsStackScreen} />
</Tab.Navigator>
</NavigationContainer>
);
}

Let's suppose that you want to hide tabs when you are entering Settings. Just add navigation in your constructor:
function SettingsStackScreen({ navigation }) {
navigation.setOptions({ tabBarVisible: false })
return (
<SettingsStack.Navigator>
<SettingsStack.Screen name="Settings" component={SettingsScreen} />
</SettingsStack.Navigator>
)
}
This code should work.

You will have to restructure your navigation by having your Tab Navigator nested in the Stack Navigator. Following the details here hiding-tabbar-in-screens
This way it's still also possible to have a Stack Navigator nested in yourTab Navigator. SettingsStack
With this when the user is on the Setting screen and also the Update detail screen, the tab bar is visible but on the Profile screen, the tab bar is not.
import Home from './components/Home';
import Settings from './components/Settings';
import UpdateDetails from './components/UpdateDetails';
import Profile from './components/Profile';
import * as React from 'react';
import { NavigationContainer } from '#react-navigation/native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import { createStackNavigator } from '#react-navigation/stack';
const Stack = createStackNavigator();
const StackSettings = createStackNavigator();
const Tab = createBottomTabNavigator();
function SettingsStack() {
return (
<StackSettings.Navigator>
<StackSettings.Screen name="Settings" component={Settings} />
<StackSettings.Screen name="UpdateDetails" component={UpdateDetails} />
</StackSettings.Navigator>
)
}
function HomeTabs() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={Home} />
<Tab.Screen name="Settings" component={SettingsStack} />
</Tab.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeTabs} />
<Stack.Screen name="Profile" component={Profile} />
</Stack.Navigator>
</NavigationContainer>
);
}

I had this issue and couldn't find solution even in official docs ( the issues in github resulted to broken links) after some trials and research I found a solution for me To make it happen from the bottom tab navigator component
<Tab.Navigator tabBarOptions={stackOptions} >
<Tab.Screen
name={"market"}
component={MarketNavigator}
options={navigation => ({
// tabBarIcon: ,
tabBarVisible: navigation.route.state.index > 0 ? false : true
})}
/>
</Tab.Navigator>
Hope it helps someone!

2022 Answer - How to hide Bottom Tabs in React Navigation V6
Step 1 - Hiding tab bar in specific screens
Sometimes we may want to hide the tab bar in specific screens in a native stack navigator nested in a tab navigator. Let's say we have 5 screens: Home, Feed, Notifications, Profile and Settings, and your navigation structure looks like this:
function HomeStack() {
return (
<Stack.Navigator>
<Stack.Screen name="Home" component={Home} />
<Stack.Screen name="Profile" component={Profile} />
<Stack.Screen name="Settings" component={Settings} />
</Stack.Navigator>
);
}
function App() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeStack} />
<Tab.Screen name="Feed" component={Feed} />
<Tab.Screen name="Notifications" component={Notifications} />
</Tab.Navigator>
);
}
With this structure, when we navigate to the Profile or Settings screen, the tab bar will still stay visible over those screens.
Step 2 - Solution to Hide Bottom Tabs
Now if we want to show the tab bar only on the Home, Feed and Notifications screens, but not on the Profile and Settings screens, we'll need to change the navigation structure. The way to achieve this is to nest the BottomTabs() as the first route of the stack.
Move your Tabs into a separate function BottomTabs()...
Other routes should be in the main App.js return function...
Make "BottomTabs" the First Route as seen below under the App() return function...
<Stack.Screen name="BottomTabs" component={BottomTabs} />
function BottomTabs() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={Home} />
<Tab.Screen name="Feed" component={Feed} />
<Tab.Screen name="Notifications" component={Notifications} />
</Tab.Navigator>
);
}
function App() {
return (
<Stack.Navigator>
<Stack.Screen name="BottomTabs" component={BottomTabs} />
<Stack.Screen name="Profile" component={Profile} />
<Stack.Screen name="Settings" component={Settings} />
</Stack.Navigator>
);
}
After re-organizing the navigation structure, now if you navigate to the Profile or Settings screens, the bottom tab bar won't be visible over the screen anymore.

You have API reference exactly for this.
Read: tabBarVisible

The above answer will help you to remove the bottom tabs from the root navigation.If you want to remove bottom tabs from a specific screen like Home Screen or Settings Screen you need to change navigation options dynamically.
For changing navigation options dynamically you will need the concept of:
React.Context
useNavigationState
Context - will dynamically change the navigationOption value i.e. either to hide the bottom Tabs or not. We can choose MobX or Redux to do the same.
UseNavigationState - will help context to know at which screen the user is.
We need to create Context in a separate .js file so that Home.js and Settings.js can access it in all the other screens.
import * as React from 'react';
import { View, Text } from 'react-native'
import { NavigationContainer, useNavigationState, useRoute } from '#react-navigation/native';
const Tab = createBottomTabNavigator();
const Context = React.createContext();
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import { createStackNavigator } from '#react-navigation/stack';
import { TouchableOpacity } from 'react-native-gesture-handler';
const SettingsStack = createStackNavigator();
const ProfileStack = createStackNavigator();
function SettingsScreen({ navigation }) {
return (
<View>
<Text>
Setting
</Text>
</View>
);
}
function Home({ navigation }) {
const rout = useNavigationState(state => state);
const { screen, setScreen } = React.useContext(Context);
setScreen(rout.index);
return (
<View>
<TouchableOpacity
onPress={() => {
navigation.navigate("Settings");
}}
>
<Text>
Home
</Text>
</TouchableOpacity>
</View>
);
}
function SettingsStackScreen({ navigation }) {
return (
<SettingsStack.Navigator>
<SettingsStack.Screen name="Settings" component={SettingsScreen} />
</SettingsStack.Navigator>
)
}
function ProfileStackScreen({ navigation }) {
const { screen, setScreen } = React.useContext(Context)
if (screen == 0) {
navigation.setOptions({ tabBarVisible: true })
} else {
navigation.setOptions({ tabBarVisible: false })
}
return (
<ProfileStack.Navigator>
<ProfileStack.Screen name="Home" component={Home} />
<ProfileStack.Screen name="Settings" component={SettingsScreen} />
</ProfileStack.Navigator>
)
}
function BottomNav({ navigation }) {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={ProfileStackScreen} />
<Tab.Screen name="Settings" component={SettingsStackScreen} />
</Tab.Navigator>
);
}
export default function App() {
const [screen, setScreen] = React.useState(0);
return (
<Context.Provider value={{ screen, setScreen }}>
<NavigationContainer>
<BottomNav />
</NavigationContainer>
</Context.Provider>
);
}
Here the screen is a flag that checks the index of the navigation and removes the bottom navigation for all the screen stacked in ProfileStackScreen.

Use You Looking for Nested Screen Visible then Tab Bar Options Should be hide than Use this Simple Condition in StackNavigator Funtions.
function HistoryStack({navigation, route}) {
if (route.state.index === 0) {
navigation.setOptions({tabBarVisible: true});
} else {
navigation.setOptions({tabBarVisible: false});
}
return (
<Historys.Navigator initialRouteName={Routes.History}>
<Historys.Screen
name={Routes.History}
component={History}
options={{headerShown: false}}
/>
<Historys.Screen
name={Routes.HistoryDetails}
component={HistoryDetails}
options={{headerShown: false}}
/>
</Historys.Navigator>
);
}

import { createBottomTabNavigator } from "#react-navigation/bottom-tabs"; // version 5.6.1
import { createStackNavigator } from "#react-navigation/stack"; // version 5.6.2
From my inspection navigation.routes.state.index will have a value when you navigation/push to a second screen so I create a function
const shouldTabBarVisible = (navigation) => {
try {
return navigation.route.state.index < 1;
} catch (e) {
return true;
}
};
and call it in BottomTab.Screen options
<BottomTab.Navigator
initialRouteName='Home'
tabBarOptions={{
activeTintColor: "#1F2B64",
showLabel: false,
}}
>
<BottomTab.Screen
name='Home'
component={HomeNavigator}
options={(navigation) => ({
tabBarIcon: ({ color }) => <TabBarIcon name='home' color={color} />,
tabBarVisible: shouldTabBarVisible(navigation),
})}
/>
</BottomTab.Navigator>

just follow as what the documentation suggests: https://reactnavigation.org/docs/hiding-tabbar-in-screens/