1

what i'm trying to do is to change Params of two screens (screen2, screen3) from another screen (screen1)

the Param name i want to chage is resetInputs

The main :

using MaterialTopTabNavigator -> NavigationContainer -> Tab.Navigator -> Tab.Screen

<NavigationContainer independent={true}>
    <Tab.Navigator screenOptions={{swipeEnabled: false, gestureEnabled: false,headerShown: false,}}>
        <Tab.Screen  name="Step 1" component={Step1LenRigi} options={{title: "Step 1", gestureEnabled: false,}} initialParams={{resetInputs: false, hundlerGetRouteKeys: getRouteKeys}}/>
        <Tab.Screen  name="Step 2" component={Step2LenRigi} options={{title: "Step 2", gestureEnabled: false,}} initialParams={{resetInputs : false, hundlerSetRouteKeys: setRouteKey}}/>
        <Tab.Screen  name="Step 3" component={Step3LenRigi}  options={{title: "Step 3", gestureEnabled: false,}} initialParams={{resetInputs : false, hundlerSetRouteKeys: setRouteKey}}/>
        <Tab.Screen  name="Step 4" component={Step4LenRigi} options={{title: "Step 4", gestureEnabled: false,}} initialParams={{resetInputs : false}} />
    </Tab.Navigator>
</NavigationContainer>

Screen 1 :

in Screen_1 i'm trying to Change Params of Screen_2 and Screen_3 According to Documentation Link i used navigation.dispatch and CommonActions.setParams

async function hundlerResetSteps(value)
{
    /// Get Route keys 
    const route_keys = await hundlerGetRouteKeys(); 

    console.log("!!!!!!!!!!!!!! in route_keys : ", route_keys);


    /// Change Params of other screens
    navigation.dispatch({
        ...CommonActions.setParams({ resetInputs: true }),
        source: route_keys?.step2,
    });

     navigation.dispatch({
         ...CommonActions.setParams({ resetInputs: true }),
        source: route_keys?.step3,
    });
}

in Screen_2 and Screen_3 : i'm printing the Log to see Params Values, in screen Focus Event but the value didn't changed (i tried Three different Method to display Params values)

    let { params } = useRoute();
    const tmp_using_useNavigationState = useNavigationState(state => state.routes);
    
    /// Screen Focus
    useEffect(()=> {

        const unsubscribe = navigation.addListener('focus', () => {
        
            const tmp_using_getState = navigation.getState();   ;
            
            let tmp_using_route_params = route?.params || false;
            
            console.log("\n#### Focus in step 2 with  tmp_using_useNavigationState: ", tmp_using_useNavigationState[1]);
            console.log("\n#### Focus in step 2-1 with  tmp_using_getState: ", tmp_using_getState);
            console.log("\n#### Focus in step 2-2 with  tmp_using_route_params: ", tmp_using_route_params);
        });
    
        return unsubscribe;
    }, [route]);

!!!! My question is why the value of resetInputs in Params didn't Changed in step 2 and step 3!!!!

Expected behavior : as i understand from Doc , if i want to change Params of another screen i have to use navigation.dispatch and CommonActions.setParams , but when i use it , the Params values didn't changed

package version :

@react-navigation/native "^6.0.11" @react-navigation/bottom-tabs "^6.3.2" @react-navigation/material-bottom-tabs "^6.3.2" @react-navigation/material-top-tabs "^6.2.2" react-native-screens "^3.16.0" react-native-tab-view "^3.1.1", expo "~46.0.7" node v14.17.4 npm or yarn npm : 6.14.14

Oussama Nm
  • 35
  • 1
  • 8
  • i find out that the Params changed in screen_2 & screen_3, but after using `navigation.navigate` in screen_1 the value of **resetInputs** get reset to its default value, i still dont know Why ??? - i navigate using this method : `navigation.navigate({name: 'Step 2', params: {dataStep1: tmp}, merge: true});` – Oussama Nm Feb 14 '23 at 14:41
  • i figured that it's changed using : ` const Myroute = useRoute(); useEffect(() => { console.log("--------------- Hello wotrld with : \n", Myroute); }, [Myroute]); ` **but the Problem is when i used navigation.navigate , the parms that i changed its reset to default value ??** – Oussama Nm Feb 14 '23 at 14:43

0 Answers0