how to create a hook with navigation properties for useContext react-native-CodePudding

Thank you very much in advance I have a native reagent application that is in the following order of components:

app.tsx:

import React from 'react';

import { Routes } from './src/routes';
import { AppProvider } from './src/hooks';

export default function App() {
  return (
      <AppProvider>
        <Routes />
      </AppProvider>
  );
}

I just needed to use the navigation properties inside a hooks: hook/index.tsx

import React, { ReactNode, useContext } from 'react';

import {
  NavigationContainer,
  NavigationContext,
} from '@react-navigation/native';
import { AuthProvider } from './auth';
import { CommonProvider } from './common';


interface AppProviderProps {
  children: ReactNode;
}

function AppProvider({ children }: AppProviderProps) {
  return (
      <CommonProvider>
        <AuthProvider>{children}</AuthProvider>
      </CommonProvider>
    </NavigationProvider>
  );
}

export { AppProvider };

hook example: hook/CommonProvider.tsx:

import React, { createContext, ReactNode, useContext, useState } from 'react';
import { Dispatch, SetStateAction } from 'react';

type CommonContextData = {
  isLoading: boolean;
  setIsLoading: Dispatch<SetStateAction<boolean>>;
};

interface CommonProviderProps {
  children: ReactNode;
}

const CommonContext = createContext<CommonContextData>({} as CommonContextData);

function CommonProvider({ children }: CommonProviderProps) {
  const [isLoading, setIsLoading] = useState<boolean>(false);
  //const {navigate} = useNavigation()//here I could use the navigation methods ???????
  return (
    <CommonContext.Provider value={{ isLoading, setIsLoading }}>
      {children}
    </CommonContext.Provider>
  );
}

function useCommon(): CommonContextData {
  const context = useContext(CommonContext);
  return context;
}

export { CommonProvider, useCommon };

how would I do the following implementation?

CodePudding user response：

I believe you need to wrap the Root component with the NavigationContainer. Once done, you can use the useNavigation hook in any child component. For instance inside the CommonProvider you can use the hook useEffect in that way.

const navigation = useNavigation(); 

useEffect(()=>{
  navigation.navigate('YourNextScreenName')
}, [navigation])

CodePudding user response：

I managed to solve it as follows: persist a file of routes/RootNavigation.ts

import { createNavigationContainerRef } from '@react-navigation/native';

export const navigationRef = createNavigationContainerRef();

export function navigate(name: string, params: any) {
  if (navigationRef.isReady()) {
    navigationRef.navigate(name,params);
  }
}

in my case what contains the centralization of routes in the file add the navigationRef, no NavigationContainer: routes/index.tsx

   ...
   <NavigationContainer linking={linking} independent ref={navigationRef}>
   ...

using in file any hook:

...
  function handleMovePage() {
    // navigation.navigate('SignIn');
    RootNavigation.navigate('SelectArea', { userName: 'Lucy' });
  }
...

reference: https://reactnavigation.org/docs/navigation-context/