navigation.navigate is not a function... how can i resolve?

Question

naviate in

            useEffect(() => {
                if (me === null) {
                    navigation.navigate('Login');
                }
            },[me]);

but this error ocrrue

here is my code

             import React, {useCallback, useEffect, useLayoutEffect} from 'react';
            import {useDispatch, useSelector} from 'react-redux';
            import styled from 'styled-components/native';
            import {LOAD_MY_INFO_REQUEST, logoutRequestAction} from '../../../reducers/user';
            import {INITIAL_REQUEST} from '../../../reducers/post';
            import Button from '../../components/Button';
            const Container = styled.Text``;



            const Main = (navigation) => {

                
            const {me} = useSelector((state) => state?.user);

            // console.log("me:",me);


            useEffect(() => {
                if (me === null) {
                    navigation.navigate('Login');
                }
            },[me]);

                const dispatch = useDispatch();
                
                const onLogout = useCallback(() => {
                    dispatch(logoutRequestAction());
                }, []);
                
                return (
                <Container>

            <Button
                    type="primary"
                    htmlType="submit"
                    label="로그아웃"
                    style={{marginBottom: 24}}
                    onPress={onLogout}
                    />
                    
                </Container>
                );
            };

            export default Main;

i don't know what is wrong.....

Can you please show what is inside navigation prop?

Diwakar Singh
– Diwakar Singh

2021-02-20 07:11:43 +00:00
Commented Feb 20, 2021 at 7:11 — Diwakar Singh
– Diwakar Singh, Commented Feb 20, 2021 at 7:11

Ankita Kuchhadiya · Accepted Answer · 2021-03-30 11:09:29Z

1

You can use like this

const Main = ({
    navigation
  }) => { // use {} to object destructuring
    useEffect(() => {
      if (!me) { // just check null by using !
        navigation.navigate('Login');
      }
    }, [me]);

edited Mar 30, 2021 at 11:09

answered Feb 20, 2021 at 7:34

Ankita Kuchhadiya

1,2826 silver badges18 bronze badges

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

Comments

Hamas Hassan · Accepted Answer · 2021-02-20 07:43:47Z

Basically, components provide a navigation object but that is inside of the props object and you are trying to access navigation directly not from the props that are why it's saying the function is not defined.

You can change this

   const Main = (navigation) => {...

to this

const Main = (props) => {

// destructuring from props.

     const {navigation} = props

....

}

or

// Here you directly destructing the navigation from props
  const Main = ({navigation}) => {...

        useEffect(() => {
                if (me === null) {
                    navigation.navigate('Login');
                }
            },[me]);

.....
}

Complete code:

import React, { useCallback, useEffect, useLayoutEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import styled from "styled-components/native";
import {
  LOAD_MY_INFO_REQUEST,
  logoutRequestAction,
} from "../../../reducers/user";
import { INITIAL_REQUEST } from "../../../reducers/post";
import Button from "../../components/Button";
const Container = styled.Text``;

const Main = (props) => {
  const { navigation } = props;

  const { me } = useSelector((state) => state?.user);

  // console.log("me:",me);

  useEffect(() => {
    if (me === null) {
      navigation.navigate("Login");
    }
  }, [me]);

  const dispatch = useDispatch();

  const onLogout = useCallback(() => {
    dispatch(logoutRequestAction());
  }, []);

  return (
    <Container>
      <Button
        type="primary"
        htmlType="submit"
        label="로그아웃"
        style={{ marginBottom: 24 }}
        onPress={onLogout}
      />
    </Container>
  );
};

export default Main;

I hope this will help you out. Goodluck!

Collectives™ on Stack Overflow

navigation.navigate is not a function... how can i resolve?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related