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 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.
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 dsilva@akalli.com.br.
Thanks, everyone, and happy coding.
Top comments (0)