android – manually navigating in deep linking fron Linking.Eventhandler and Linking.InitialUrl React native

I’ve a difficulty concerning navigating after getting the URL from both the Linking occasion handler or getInitialUrl.

I get the proper URL from Deep Linking, no points there. The problem is i can not entry navigate in App.js

TypeError: undefined just isn't an object (evaluating 'this.props.navigation.navigate')

I assume I haven’t got entry to the navigation features inside App.js. Any suggestion to methods to clear up this? I do assume that I’m setting the handler and retrieving it from the improper place.

import React, { Element} from "react"; 
import {retailer} from "./retailer/Retailer";
import { Supplier } from "react-redux";
import * as Font from 'expo-font';
import * as Localization from "expo-localization";
import i18n from "i18n-js";
import NavigationContainer from "./navigation/NavigationContainer";
import { SupportedLocals } from "./types/index";
import { Linking } from "react-native";
import { refreshToken } from "./api_client/authService";
import { break up } from "lodash";

i18n.locale = Localization.locale; 
i18n.SupportedLocals = SupportedLocals;
i18n.fallbacks = true;


export default class App extends Element {
  state = {
    fontsLoaded: false,
  };

  constructor(props) {
    tremendous(props);
    this.state = {
      fontLoaded: false
    };
  }
  async loadFonts() {
    await Font.loadAsync({
      RubikRegular: require("./property/fonts/Rubik-Common.ttf"),
      RubikMedium: require("./property/fonts/Rubik-Medium.ttf"),
      RubikBold: require("./property/fonts/Rubik-Daring.ttf"),
    });
    this.setState({ fontsLoaded: true });
  }


   componentDidMount() {
    this.loadFonts();
    const url = Linking.getInitialURL()
    .then((url) => {
      if (url) {
        console.log('fired get preliminary url')
        this.handleDeepLink({url})
      }
    }).catch((err) => console.error('An error occurred ', err))
      Linking.addEventListener('url', this.handleDeepLink)
  }

  componentWillUnmount(){
    Linking.removeEventListener('url', this.handleDeepLink);
  }  

  handleDeepLink(e) {
    if(e){
      console.log(e)
      let splitter = e.url.break up("?token=")
      let token = splitter[1].break up("&")
      let tokenSend = token[0];
       console.log(tokenSend)
        this.props.navigation.navigate("InvitationInfo", {token: tokenSend})
    }
  }

  render(){
    if (this.state.fontsLoaded) {
      return (
        <Supplier retailer={retailer}>
          <NavigationContainer/>
        </Supplier>
      );
    } else {
      return null;
    }
  }
  
}