jakos-hub-navigation-wrapper
Library to wrapps react-navigation and easy create navigations for your application.
Installation
yarn add @jakos-hub/navigation-wrapper
# Install peer dependencies
yarn add @react-native-community/masked-view @react-navigation/bottom-tabs @react-navigation/native @react-navigation/stack react-native-gesture-handler react-native-reanimated react-native-safe-area-context react-native-screens
Usage
1. Create a the component which will work as a screen
@screens/unauthenticated/login-screen/index.tsx
import React from 'react'
import {Text} from 'react-native'
const LoginScreen: React.FC = () => {
return (<Text>Login screen</Text>)
}
export default LoginScreen
2. Group your screens in an object, where the key will be the path
for the router and the value will be the component to be render by the router.
@screens/unauthenticated/index.ts
import LoginScreen from './login-screen'
export default {
'login-screen': LoginScreen
}
3. Create a configuration file where you will configure your navigation groups:
Prop | type | description |
---|---|---|
initialRoute | string | The initial path which will be displayed when the group it's mounted |
layout | string | The layout that will be used for the screens included in this group |
type | string | The type of navigation used for this group |
screens | object | The group you just created in the previous step |
@config/nav-groups.config.ts
import unAuthenticatedGroup from '@screens/unauthenticated'
import authenticatedGroup from '@screens/authenticated'
import miscGroup from '@screens/misc'
export const misc = {
initialRoute: 'theme-config-screen',
layout: 'main',
type: 'stack',
screens: miscGroup,
}
export const unAuthenticated = {
initialRoute: 'login-screen',
layout: 'empty',
type: 'tabs',
screens: unAuthenticatedGroup,
}
export const authenticated = {
initialRoute: 'dashboard-screen',
layout: 'main',
type: 'stack',
screens: authenticatedGroup,
}
// If you want to nest navigators
export const authenticatedWithNested = {
initialRoute: 'dashboard-screen',
layout: 'main',
type: 'stack',
stacks: [
{
initialRoute: 'some-nested-screen',
layout: 'main',
type: 'tabs',
screens: authenticatedGroup,
},
],
screens: null,
}
4. Create a file where you will define the conditions where the application will mount your groups (Screens), each key on the navigationConfig object must have a condition and all the keys defined for the belonged group
@config/navigation.config.ts
import {NavigationConfigType, ParamsType} from '@jakos-hub/navigation-wrapper'
import {authenticated, unAuthenticated, misc} from '@config/nav-groups.config'
const navigationConfig: NavigationConfigType = (params: ParamsType) => ({
// Here you set a default group to be mounted by the router
initialGroup: 'unauthenticated',
groups: {
misc: { // A group which will be mounted when the key `debug` it's equals to `true`
condition: params.debug === true,
...misc,
},
unauthenticated: { // A group which will be mounted when the key `logged` it's equals to `true`
condition: !params.logged,
...unAuthenticated,
},
authenticated: { // A group which will be mounted when the key `logged` it's equals to `false` or not defined
condition: Boolean(params.logged),
...authenticated,
},
},
})
export default navigationConfig
5. Add the navigation component.
app.tsx
import React from 'react'
import NavigationWrapper from '@jakos-hub/navigation-wrapper'
import navigationConfig from '@config/navigation.config'
import layouts from '@config/available-layouts'
const App: React.FC = () => {
return (
<NavigationWrapper config={navigationConfig} layouts={layouts} />
)
};
export default App
Layouts:
The layout it's just a component which wraps the screen that will be rendered:
import React from 'react'
import {SafeAreaView} from 'react-native'
const MainLayout: React.FC<{ children: React.ReactNode }> = ({children}) => {
return <SafeAreaView>{children}</SafeAreaView>
}
export default MainLayout
Layouts config
@config/available-layouts.ts
import {MainLayout} from '@layouts'
export default {
main: MainLayout,
empty: EmptyLayout,
}