Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to fresh navigate to specific screen?

I'm new in React Native

I have route looks :

ScreenA -> ScreenB -> ScreenC

Now i want to fresh navigate to ScreenA from ScreenC, I use this.props.navigation.navigate('ScreenA');

But i get the fact, i get previous screenA (not new one) or i can say it is like back to previous screen method. What i want similar to Intent intent = new Intent(ScreenA) in Android Native. Can anyone help to solve it?

Updated :

I have 2 routes group, it may lead to the real problem :

StackNavigator {
 screenA,
 screenB
}

TabNavigator {
 screenC
}

I can't move screenC to screenA using .push or .dispatch. But working well using .navigate. But if i use .navigate , screenA is previous screen not new screen (same like before i move to screenB). I want move from screenC to a new screenA not previous screenA.

like image 220
Crocodile Avatar asked Oct 18 '18 09:10

Crocodile


People also ask

How do I navigate a specific screen in React Native?

Use the goBack() Method to Go Back to a Specific Screen in the Navigation Stack in React Native. It's important to understand that to go back to a specific screen in the navigation stack using the goBack method, you must call it from the component you want to go back from.

How do I change my screen navigation?

With gesture navigation: Swipe up from the bottom edge of the screen to go to the Home page. Swipe up from the bottom, hold and then relese to switch apps. Swipe from the left or right edge of the screen to move back.

How do you go back to previous screen in React Native?

You can go back to an existing screen in the stack with navigation. navigate('RouteName') , and you can go back to the first screen in the stack with navigation.

How do I reset navigation React Native?

To reset the navigation stack for the home screen with React Navigation and React Native, we can use the navigation. dispatch and the CommonActions. reset methods. import { CommonActions } from "@react-navigation/native"; navigation.


2 Answers

Try

import { NavigationActions, StackActions } from 'react-navigation';
//Reset and navigate
    const resetAction = StackActions.reset({
            index: 0,
            actions: [
              NavigationActions.navigate({ routeName: 'YourScreen' })
            ]
          })
          this.props.navigation.dispatch(resetAction);
//Or Navigate
this.props.navigation.navigate("YourScreen");
//Similar to navigate, push will move you forward to a new route in the stack
this.props.navigation.push(routeName, params, action)

For more refer here

like image 84
Prasanth S Avatar answered Oct 18 '22 13:10

Prasanth S


Solution

If you use react-navigation, you can use push instead of navigate for making a new screen.

this.props.navigation.push('ScreenA');

But other screens remain in stack in this case.

Official Doc

Why

In StackNavigation, navigate is worked according to screen's stack. But push works push the specific screen to stack without checking duplication.

If you want to custom current stack, using reset can be another option.

like image 21
Jeff Gu Kang Avatar answered Oct 18 '22 12:10

Jeff Gu Kang