CODEWITHSUNDEEP
reactjsreact-nativereact-navigationreact-navigation-v5react-navigation-v6
user6377312
user6377312

Reputation:

React navigation 6 - navigating from one stack A to stack screen B - why screen B wont call useEffect (but renders)?

I have a nested tabs navigator inside a stack navigator.

I use in both cases same:

 <Button title="goTo" onPress={() => props.navigation.navigate('SearchResults', {id: id})}/>

I also tried to use useIsFocused and useFocusEffect, but its also not called when I navigate from stack screen C. What am I doing wrong?

EDIT: It seems that the problem is with navigating to Screen C (from which I try to navigate to Screen B (that doesnt mount) is that I defined it in the header of Tab Navigator. If I wouldnt, I could navigate to C and C would mount. But I dont understand why that is or what to do. So In my code : When I navigate from NotificationsScreen to SearchResultsScreen, SearchScreen wont mount (as it seems its because I access NotificationsScreen from header of tabs navigator)

const MyTabs = (props) => {
    return (
        <Tab.Navigator
            screenOptions={{
                headerRight: (props) => (
                        <TouchableOpacity onPress={() => navigation.navigate("Notifications")}>
                            <Icon name="notifications"/>
                        </TouchableOpacity>
                )
            }}
        >    
            <Tab.Screen
                name="Home"
                component={HomeScreen}
            />  
            <Tab.Screen 
          // when I navigate from SearchScreen to SearchResultsScreen, SearchResultsScreen useEffect is called
                name="Search"
                component={SearchScreen}
            />     
        </Tab.Navigator>
    );
}

const MyStack = () => {
    return (
        <Stack.Navigator>
                <Stack.Screen name="Tabs">
                    {(props) => <MyTabs {...props}  />}
                </Stack.Screen>
            <Stack.Screen
                    name="SearchResults"
                    component={SearchResultsScreen}
                />
            <Stack.Screen
                    name="Notifications"
                    component={NotificationsScreen}
            // when I navigate from NotificationsScreen to SearchResultsScreen, SearchResultsScreen useEffect is NOT called
                />
    </Stack.Navigator>

Upvotes: 3

Views: 604

Answers (3)

Engr.Aftab Ufaq
Engr.Aftab Ufaq

Reputation: 6272

use **useFocusEffect** on screen B to rerender every time the screen is focused Here is the link https://reactnavigation.org/docs/use-focus-effect/

import { useFocusEffect } from '@react-navigation/native';

function Profile({ userId }) {
  const [user, setUser] = React.useState(null);

  useFocusEffect(
    React.useCallback(() => {
      const unsubscribe = API.subscribe(userId, user => setUser(user));

      return () => unsubscribe();
    }, [userId])
  );

  return <ProfileContent user={user} />;
}

Upvotes: 1

NAZIR HUSSAIN
NAZIR HUSSAIN

Reputation: 1

because Stack screen B component is mounted when you first navigate to it and it calls useEffect, then you navigate to screen C, here B is not unmounted that's why when you navigate to Screen B again it is already mounted so useEffect does not executes. you just need to unmount Screen B like following

useEffect(()=>{
//useEffect stuff on mount

return () => {
        //  on component unmount.
    }
},[])

Upvotes: 0

JSONCMD
JSONCMD

Reputation: 75

You can use in Notifications component

navigation.replace("SearchResults", null, null)

Upvotes: 1

Related Questions