🎉 Introducing @akalli/navigation react-native navigation made easy
Tags: react, reactnative, navigation, javascript
Published: 2022-08-24 16:04:55

---
title:  🎉 Introducing @akalli/navigation react-native navigation made easy
published: true
description:  A simple way to routing React Native routes on top of react-navigation.
tags: react, reactnative, navigation, javascript
# cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iy0w65javrhil63h6hpt.png
# Use a ratio of 100:42 for best results.
---

Are you tired of manage those complex `router` files with guards and soooo many routes?

[@akalli/navigation](https://github.com/akallidreams/navigation) is a NPM package that handles with a simple object things like creation of routes, authentication flow, translation, and drawer menu for react-native apps.

### Installation

`npm install @akalli/navigation react-native-svg @react-navigation/drawer @react-navigation/native @react-navigation/native-stack @react-navigation/stack @react-native-async-storage/async-storage`

> **Disclaimer:**
I know it looks a lot of installations, but most of them are @react-navigation stuff, it has async storage for translations and authentication, and react-native-svg for icons that are used in the drawer. Most of those probably you already use in your app.

### Basic example:

```tsx
// Sample screens

export const Main = () => {
  return (
    <View style={styles.container}>
      <Text>I am the main another screen</Text>
    </View>
  );
};

export const Login = () => {
  return (
    <View style={styles.container}>
      <Text>I am the main another screen</Text>
    </View>
  );
};

export const AnotherScreen = () => {
  return (
    <View style={styles.container}>
      <Text>I am the main another screen</Text>
    </View>
  );
};

// Config base file

const routerConfig: IRouterProps = {
  appInitial: "Main", // Initial route
  screens: {
    MainScreens: {
      Main: Main,
    },
    AssistantScreens: {
      AnotherScreen: AnotherScreen,
    },
  },
};

// Router Provider
export default function App() {
  return <Router config={routerConfig} />;
}
```

**And that is it. Just that routerConfig and you have your app running with routes just like magic.**

## Hooks

**useNav** - Shortcuts for navigation functions.

```tsx
const { navigate, routerState, routes, route, back, drawer } = useNav();
```

**useDict** - Dictionary access mainly, but not exclusevily, for translation features.

```tsx
const { lang, setLang, dict } = useDict("myModule");
```

**useAuth** - Authentication helpers and status.

> This will only work if you wrap your app with <AuthProvider>

```tsx
const {
  data: { tokens, user, isAuthenticated },
  actions: { setTokens, setUser, setIsAuthenticated, clearAuth },
} = useAuth();
```

### Advanced mode

If you want to manage a more complex routing solution with authentication etc. First, you need to wrap your router with `AuthProvider`.

**A more advanced config example:**

```ts
const routerConfig: IRouterProps = {
  appInitialRoute: "Main", // Initial route
  authInitialRoute: "SignIn", // Auth initial route
  env: "prod", // authentication required to access app routes
  activeStack: "auth", // active stack, works only if not env = prod
  drawer: { // drawer props
    position: "left";
    bg: "#26a3c9",
    labelColor: "#e8d7cf",
    icons: {
      Main: MainScreenIcon,
      SignIn: SignScreenIcon,
      AnotherScreen: AnotherScreenIcon
    },
    CustomMenu: MyMenu // This option makes labelColor and icons be ignored because you have full control of the Menu component
  },
  defaultLanguage: 'es',
  dicts: { // dictionaries are the internationalization feature
    main: {
      en: {
        MY_TEXT: 'My text'
      },
      pt: {
        MY_TEXT: 'Meu texto'
      }
    }
  },
  bgs: { // background colors
    authStack: "#26a3c9",
    appStack: "#e8d7cf"
  },
  screens: {
    MainScreens: {
      Main: Main,
    },
    AssistantScreens: {
      AnotherScreen: AnotherScreen,
    },
    AuthScreens: {
      SignIn: SignIn,
    },
  },
};
```

This project independent but also is part of much larger expo template package with easy installation in npx.

Meet: [@akalli/create-akalli-app](https://github.com/akallidreams/create-akalli-app)


It is all open source at GitHub. Checkout, and if any doubts or troubles you can create an issue or reach me at my e-mail dsilva@akalli.com.br.


Thanks, everyone, and happy coding.