TypeScript icon, indicating that this package has built-in type declarations

    1.0.8 • Public • Published


    coverage npm version

    Library to wrapps react-navigation and easy create navigations for your application.


    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


    1. Create a the component which will work as a screen


    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.


    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


    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


    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,
    			unauthenticated: { // A group which will be mounted when the key `logged` it's equals to `true`
    				condition: !params.logged,
    			authenticated: { // A group which will be mounted when the key `logged` it's equals to `false` or not defined
    				condition: Boolean(params.logged),
    export  default  navigationConfig

    5. Add the navigation component.


    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


    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


    import {MainLayout} from  '@layouts'
    export  default {
    	main: MainLayout,
    	empty: EmptyLayout,


    npm i @jakos-hub/navigation-wrapper

    DownloadsWeekly Downloads






    Unpacked Size

    43.1 kB

    Total Files


    Last publish


    • alejandro.devop