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

Question

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?

Enzo Manuel Mangano · Accepted Answer · 2021-09-29 17:39:17Z

1

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])

answered Sep 29, 2021 at 17:39

Enzo Manuel Mangano

7066 silver badges12 bronze badges

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

3 Comments

Andersonfrfilho Over a year ago

thank you in advance, but if I wrap the component <Routes > <AppProvider/> </Routes > the routes were without the context no?

Enzo Manuel Mangano Over a year ago

I mean something like that: export default function App() { return ( <NavigationContainer> <AppProvider> <Routes /> </AppProvider> </NavigationContainer> ); }

Andersonfrfilho Over a year ago

I tried it and even managed to hook it but I get the following error when using the navigate method: ``` The 'navigation' object hasn't been initialized yet. This might happen if you don't have a navigator mounted, or if the navigator hasn't finished mounting. See reactnavigation.org/docs/… for more details. ```

Andersonfrfilho · Accepted Answer · 2021-09-29 22:46:15Z

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/

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related