CODEWITHSUNDEEP
androidreactjsreact-native
Crocodile
Crocodile

Reputation: 509

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.

Upvotes: 6

Views: 4015

Answers (4)

Crocodile
Crocodile

Reputation: 509

Finally i found the answer (but i'm not sure it's a best practice or not) :

related to all answer i get a same solution is use .push . And i try to change navigate with push method but first time i try it's failed. And after a hour try i get the fact that this way works for me :

 this.props.navigation.push('TabNavigator') //Call the navigator name not screenname when cross two different navigator.

You can share your idea if you know better solution. thank you

Upvotes: 0

Rocky
Rocky

Reputation: 442

Try this :
First of all import StackNavigator & your all screen in App.js file Like this

import { StackNavigator, SwitchNavigator } from 'react-navigation';

   import ScreenA  from './ScreenA';
   import ScreenB  from './ScreenB';`enter code here`
   import ScreenC  from './ScreenC';

export default class App extends Component { 
render() {
   return (
       <Nav />
   );
 }
const Nav = StackNavigator({
   ScreenA  : { screen: ScreenA },
   ScreenB  : { screen: ScreenB },
   ScreenC  : { screen: ScreenC },
 });

When ScreenA will be open then call 

  this.props.navigation.navigate('ScreenB');  // to navigate

You can try also 

  this.props.navigation.push('ScreenB');  to navigate

if you want to go to the previous screen A you just need to call 

 this.props.navigation.goBack()

Upvotes: 3

Prasanth S
Prasanth S

Reputation: 3820

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

Upvotes: 3

Jeff Gu Kang
Jeff Gu Kang

Reputation: 4879

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.

Upvotes: 3

Related Questions