@jakos-hub/navigation-wrapper
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.8 • Public • Published

    jakos-hub-navigation-wrapper

    coverage npm version

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

    Install

    npm i @jakos-hub/navigation-wrapper

    DownloadsWeekly Downloads

    4

    Version

    1.0.8

    License

    MIT

    Unpacked Size

    43.1 kB

    Total Files

    21

    Last publish

    Collaborators

    • alejandro.devop