An Interest In:
Web News this Week
- April 2, 2024
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
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
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To