This library is part of a larger framework with many solutions that you can access at here. All the modules are independent so you can use it without the other ones but we recommend give it a try due the fact they make much easier to implement the features navigation(@akalli/navigation), global state(@akalli/state), smart components(@akalli/components) and icons(@akalli/icons).
This package helps to use react navigation in react-native projects, with integrations such as redux persist, creation of routes automaticaly and authentication logic. Using a small and simple configuration object all that is delivered.
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
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} />;
}
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();
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,
},
},
};
If you want to create a complete custom drawer menu you can use CustomMenu
propertie at the config. It receives 2 props, DrawerProps
and routes
.
- Replace main with
index.ts
onpackage.json
- Delete all dependencies from
package.json
- npm publish
npm i styled-components @react-navigation/drawer @react-navigation/native @react-navigation/native-stack @react-navigation/stack
- Replace main with
node_modules/expo/AppEntry.js
inpackage.json
- Add all packages again to dependencies in
package.json
expo start
ornpm start
and scan QR code onexpo go
"dependencies": {
"@react-navigation/drawer": "^6.4.1",
"@react-navigation/native": "^6.0.8",
"@react-navigation/native-stack": "^6.4.1",
"@react-navigation/stack": "^6.1.1",
"babel-plugin-transform-inline-environment-variables": "^0.4.3",
"expo": "~45.0.0",
"expo-status-bar": "~1.3.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-native": "0.68.2",
"react-native-reanimated": "^2.8.0",
"react-native-safe-area-context": "4.2.4",
"react-native-svg": "12.3.0",
"react-native-web": "0.17.7",
"react-native-gesture-handler": "~2.2.1",
"@react-native-async-storage/async-storage": "~1.17.3"
},
"devDependencies": {
"@babel/core": "^7.12.9",
"@expo/webpack-config": "^0.16.27",
"@storybook/addon-actions": "^5.3.21",
"@storybook/addon-knobs": "^5.3.21",
"@storybook/addon-links": "^5.3.21",
"@storybook/addon-ondevice-actions": "^5.3.23",
"@storybook/addon-ondevice-knobs": "^5.3.26",
"@storybook/cli": "^6.5.9",
"@storybook/react": "^6.5.9",
"@storybook/react-native": "^5.3.25",
"@storybook/react-native-server": "^5.3.23",
"@types/react": "~17.0.21",
"@types/react-native": "~0.66.13",
"babel-loader": "^8.2.5",
"chromatic": "^6.7.1",
"typescript": "~4.3.5"
}