React Navigation - this.props.navigation.state is undefined

Question

Using: "@react-navigation/drawer": "^5.4.0", "@react-navigation/native": "^5.1.4",

App.js:

    import { createDrawerNavigator } from '@react-navigation/drawer';
    ...
    const Drawer = createDrawerNavigator();
    const DrawerRender = () => {
    return (
      <NavigationContainer>
        <Drawer.Navigator drawerContent={props => <DrawerContent {...props} />}>
          <Drawer.Screen name="Home" component={Home} />
          <Drawer.Screen name="Screen1" component={Screen1} options={{unmountOnBlur: true, gestureEnabled: false}} />
          <Drawer.Screen name="Screen2" component={Screen2} options={{unmountOnBlur: true, gestureEnabled: false}} />
        </Drawer.Navigator>
      </NavigationContainer>
    );}

From Screen1:

    navigateToPage = page_id => {
      this.closeCommentScreen();
      this.reopenModal = true;
      this.props.navigation.navigate('Screen2', {'page_id': 'testing'});
    }

On Screen2:

    export default class Screen2 extends React.Component {

    constructor(props) {
       super(props);
    }
    componentDidMount() {
       let id = this.props.navigation.state.params.page_id
       ...

I tried printing "this.props.navigation" and it always returns empty dictionary {}, hence params is undefined.

What am I doing wrong?

my this.props.navigation is empty. state.params will always be null — Saurabh
– Saurabh, Commented Apr 16, 2020 at 3:40
navigation.navigate works with no issue. When I try to access the params from Screen2, it errors out — Saurabh
– Saurabh, Commented Apr 16, 2020 at 5:10

satya164 · Accepted Answer · 2020-04-16 22:19:28Z

5

It's this.props.route.params

See the upgrade guide https://reactnavigation.org/docs/upgrading-from-4.x#separate-route-prop

answered Apr 16, 2020 at 22:19

satya164

10.2k2 gold badges35 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

rnewd_user · Accepted Answer · 2022-07-27 16:11:10Z

0

first Screen

nav.setOptions({
                        headerRight: () => <Button
                            title='Add coin'
                            onPress={() => navigation.navigate('Crypto Information', {
                                params: { currentCoins: temp },
                            })}
                        >
                        </Button>,
                    });

Second Screen

const CryptoInformation = ({ _, route }) => {
const { params } = route.params

answered Jul 27, 2022 at 16:11

rnewd_user

1,72215 silver badges17 bronze badges

Collectives™ on Stack Overflow

React Navigation - this.props.navigation.state is undefined

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related