Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
August 24, 2022 04:04 pm GMT

Introducing @akalli/navigation react-native navigation made easy

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

@akalli/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:

// Sample screensexport 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 fileconst routerConfig: IRouterProps = {  appInitial: "Main", // Initial route  screens: {    MainScreens: {      Main: Main,    },    AssistantScreens: {      AnotherScreen: AnotherScreen,    },  },};// Router Providerexport 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.

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

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

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

useAuth - Authentication helpers and status.

This will only work if you wrap your app with

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:

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

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 [email protected].

Thanks, everyone, and happy coding.


Original Link: https://dev.to/danilosilvadev/introducing-akallinavigation-react-native-navigation-made-easy-52n1

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To