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,
}