npm package: @jakos-hub/navigation-wrapper
Description: Navigation wrapper for react-navigation
Author: Alejandro Quiroz
Latest version: 1.0.8

# jakos-hub-navigation-wrapper
![coverage](./dist/coverage-badge.svg)
[![npm version](https://badge.fury.io/js/%40jakos-hub%2Fnavigation-wrapper.svg)](https://badge.fury.io/js/%40jakos-hub%2Fnavigation-wrapper)

Library to wrapps [react-navigation](https://reactnavigation.org/) and easy create navigations for your application.

## Installation
```bash
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`
```jsx
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`
```typescript
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`
```jsx
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`
```typescript
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`
```jsx
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: 
```jsx
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`
```typescript
import {MainLayout} from  '@layouts'

export  default {
	main: MainLayout,
	empty: EmptyLayout,
}
```