CODEWITHSUNDEEP
react-nativereact-navigation
Emerald
Emerald

Reputation: 874

this.props.navigation.navigate is not navigating to the correct screen

I faced this weird situation where when I navigating from a screen to another, it navigating back to the previous screen that has been opened.

Navigation expectation :

Layer 1 (screen A) > Layer 2 (screen B) > Layer 3 (screen C) > Layer 4 (screen D) > Layer 5 (screen B) > Layer 6 (screen C) > Layer 7 (screen D)

and when go back button is clicked from each screen, it will be popped backwards

Layer 7 > Layer 6 > Layer 5 > Layer 4 > Layer 3 > Layer 2 > Layer 1

Instagram app is the good example for the navigation cycle.

What my app faced :

Layer 1 (screen A) > Layer 2 (screen B) > Layer 3 (screen C) > Layer 4 (screen D) > Layer 2 (screen B) > Layer 3 (screen C)

If you see from Layer 4 (screen D) navigating to screen B it should open it as Layer 5 instead, but what happened was, it been opened as Layer 2 which is jumping 2 layers back.

I am using this.props.navigation.navigate('ScreenName') to navigate to another screen.

EDIT : SAMPLE CODE

I have set a route in my app like this :

import React from 'react';
import { createStackNavigator, createAppContainer } from 'react-navigation';

import ScreenA from 'app/views/ScreenA';
import ScreenB from 'app/views/ScreenB';
import ScreenC from 'app/views/ScreenC';
import ScreenD from 'app/views/ScreenD';

const Navigation = createStackNavigator({
    'PublicRoutes': {screen: ScreenA},
    'ScreenB':{screen: ScreenB},
    'ScreenC':{screen: ScreenC},
    'ScreenD':{screen: ScreenD},
});

export default createAppContainer(Navigation)

And this is the sample code for screens :

type Props = {};
export default class ScreenD extends Component<Props> {
    constructor(props){
        super(props);
        this.state = {};
    }

    render() {
        return (
            <View>
                <TouchableOpacity onPress={()=>this.props.navigation.navigate('ScreenB')}>
                    <Text>PRESS</Text>
                </TouchableOpacity>
            </View>
        )
    }
}

Upvotes: 1

Views: 701

Answers (2)

hong developer
hong developer

Reputation: 13906

You have the same routeName. The name must be set differently from screen to screen. Navigation does not distinguish it.

import React from 'react';
import { createStackNavigator, createAppContainer } from 'react-navigation';

import ScreenA from 'app/views/ScreenA';
import ScreenB from 'app/views/ScreenB';
import ScreenC from 'app/views/ScreenC';
import ScreenD from 'app/views/ScreenD';
import ScreenE from 'app/views/ScreenE';

const Navigation = createStackNavigator({
    'PublicRoutes': {screen: ScreenA}, // Layer 1
    'ScreenB':{screen: ScreenB}, // Layer 2
    'ScreenC':{screen: ScreenC}, // Layer 3
    'ScreenD':{screen: ScreenD}, // Layer 4
    'ScreenE':{screen: ScreenE}, // Layer 5
});

ScreenD.js

this.props.navigation.navigate('ScreenE')

You can use this if you want to render the screen again. 

this.props.navigation.push('screenB')

Upvotes: 0

wahid_abdul
wahid_abdul

Reputation: 156

Try using the render(){} outside the constructor?

Upvotes: 1

Related Questions