undefined is not an object (evaluating '_this.props.navigation') in react native when passing parameter

Question

im passing parameter from screen A to screen B

Screen A :

<Button
          title="Go Next"
          onPress={() =>
            navigate('liveScreen', {
              linkItem: this.state.link,
            })
          }
        />

Screen B :

import React, { useEffect } from 'react';
import JitsiMeet, { JitsiMeetView } from 'react-native-jitsi-meet';

function linkScreen() {

  useEffect(() => {
    setTimeout(() => {
      const url = `https://meet.jit.si/${this.props.navigation.state.params.linkItem}`;
      const userInfo = {
        displayName: 'User',
        email: '[email protected]',
        avatar: 'https:/gravatar.com/avatar/abc123',
      };
      JitsiMeet.call(url, userInfo);
    }, 1000);
  }, [])

  useEffect(() => {
    return () => {
      JitsiMeet.endCall();
    };
  });

  function onConferenceTerminated(nativeEvent) {
    console.log(nativeEvent)
  }

  function onConferenceJoined(nativeEvent) {
    console.log(nativeEvent)
  }

  function onConferenceWillJoin(nativeEvent) {
    console.log(nativeEvent)
  }
  return (
    <JitsiMeetView
      onConferenceTerminated={e => onConferenceTerminated(e)}
      onConferenceJoined={e => onConferenceJoined(e)}
      onConferenceWillJoin={e => onConferenceWillJoin(e)}
      style={{
        flex: 1,
        height: '100%',
        width: '100%',
      }}
    />
  )
}
export default linkScreen;

but theres an error on screen B that say 'undefined is not an object (evaluating '_this.props.navigation')'

im using react-native-jitst-meet to create simple confrence app for class project. I really hope you guys can give the solution. Thankyou before

Answer 1

You are using a functional component. So you cant access it as this.props.navigation

First you have to add the props like below

function linkScreen({navigation}) {

Then you can access it like below

const url = `https://meet.jit.si/${navigation.state.params.linkItem}`;