React Native Custom Navigation Service (TypeScript)

·

1 min read

There are some ways to redirect to a screen in React Native. I will write one of my favorite.

Create navigationService.ts and paste these:

import * as React from 'react';
import {DrawerActions, NavigationContainerRef} from '@react-navigation/native';

export const navigationRef = React.createRef<NavigationContainerRef>();

export const navigate = (name: string, params?: any) => {
  navigationRef.current?.navigate(name, params);
};

export const openDrawer = () => {
  navigationRef.current?.dispatch(DrawerActions.openDrawer());
};

export const goBack = () => {
  navigationRef.current?.goBack();
};

export const redirectToLoginScreen = () => navigate("Login");

Create app like that and pass navigationRef from navigationService

const App = () => {
  return (
    <NavigationContainer ref={navigationRef}>
      <DrawerNavigator />
    </NavigationContainer>
  );
};

Use like this when you want to redirect to login screen:

  useEffect(() => {
    if(!isLogged) {
      redirectToLogin()
    }
  }, [isLogged])

Or you can open drawer menu like this:

<IconButton
  marginLeft={'auto'}
  variant={'ghost'}
  onPress={openDrawer} // <--- here
  colorScheme={'dark'}
  icon={
    <Icon
      size="sm"
      as={<MaterialCommunityIcons name={'menu'} color={'#fff'} />}
      color="white"
    />
  }
/>

Thats all!