RNDM Render Plugin: React Navigation

About

This plugin provides functionality for RNDM Render package when integrating React Navigation.

Installation

If you have not already done so, then please ensure you have installed the RNDM Render and RNDM Plugin: Core package.

From NPM

npm install --save @rndm/render-plugin-react-navigation

Post Installation

In order to allow this plugin to work, it must first be included in your project. You can do this inside your main index file:

import '@rndm/render-plugin-react-navigation';

Usage

The React Navigation Plugin contains components, methods and middleware that can be described inside your JSON API.

Full documentation of React Navigation

Components

The components included within this plugin make use of the 'create...()' functions but are named after the type of Navigator generated. These are:

• StackNavigator
• BottomTabNavigator
• TopTabNavigator
• DrawerNavigator
• SwitchNavigator

These Navigators are comprised of different Screens, which take the key of their name as the route name.

Example

{
    type: 'react-navigation.DrawerNavigator',
    props: {
        routes: {
            Screen: {
                type: 'react-native.View',
                props: {
                    style: {
                        flex: 1,
                        backgroundColor: 'red',,
                    },
                },
            },
        },
    },
}

In the example above, you can see that a single screen is provided to a DrawerNavigator, which will take up the full height of the view and will appear red.

Methods

The methods included are a grouping of Navigation and Stack actions provided by the React Navigation Package. These are mainly used for navigation around your application.

Example

{
    type: 'react-navigation.StackNavigator',
    props: {
        routes: {
            Screen: {
                type: 'react-native.TouchableOpacity',
                props: {
                    onPress: {
                        isFunc: true,
                        type: 'react-navigation.push',
                        args: [
                            'Other',
                        ],
                    },
                    children: {
                        type: 'react-native.View',
                        props: {
                            style: {
                                flex: 1,
                                backgroundColor: 'red',
                            },
                        },
                    },
            },
            Other: {
                type: 'react-native.View',
                props: {
                    style: {
                        flex: 1,
                        backgroundColor: 'yellow',
                    },
                },
            },
        },
    },
}

In the example above, we have a StackNavigator that contains view that will call the push method to navigate to a second screen called 'Other'.

A second way to do this is by accessing the dispatch method within the navigators passed in as part of this package:

Example

{
    type: 'react-navigation.StackNavigator',
    props: {
        routes: {
            Screen: {
                type: 'react-native.TouchableOpacity',
                props: {
                    onPress: {
                        isFunc: true,
                        type: 'react-navigation.navigators.root.dispatch',
                        args: [
                            {
                                type: 'Navigation/PUSH',
                                routeName: 'Other'
                            }
                        ],
                    },
                    children: {
                        type: 'react-native.View',
                        props: {
                            style: {
                                flex: 1,
                                backgroundColor: 'red',
                            },
                        },
                    },
            },
            Other: {
                type: 'react-native.View',
                props: {
                    style: {
                        flex: 1,
                        backgroundColor: 'yellow',
                    },
                },
            },
        },
    },
}

Middleware

RNDM transfers the ability to include the two middleware aspects from React Navigation to your project. These are:

withNavigation

withNavigationFocus

Example

{
    type: 'react-navigation.StackNavigator',
    props: {
        routes: {
            Screen: {
                type: 'react-native.TouchableOpacity',
                props: {
                    middleware: [
                        middleware: 'react-navigation.withNavigation',
                    ],
                    onPress: {
                        isFunc: true,
                        type: 'react-navigation.navigators.root.dispatch',
                        args: [
                            {
                                type: 'Navigation/PUSH',
                                routeName: 'Other'
                            }
                        ],
                    },
                    children: {
                        type: 'react-native.View',
                        props: {
                            style: {
                                flex: 1,
                                backgroundColor: 'red',
                            },
                        },
                    },
            },
            Other: {
                type: 'react-native.View',
                props: {
                    middleware: [
                        middleware: 'react-navigation.withNavigationFocus',
                    ],
                    style: {
                        flex: 1,
                        backgroundColor: 'yellow',
                    },
                },
            },
        },
    },
}

Examples

Full examples can be found in the example library found in this project.

https://github.com/rndm-com/rndm-render-plugin-react-navigation/tree/master/examples

CLI

The CLI for this plugin adds a number of rewired packages to the '_supporting/rewire_modules.json' file. These are files that needs to be run through the Babel Compiler prior to usage when running the React Native Web version of your project.

To Run this you can call the following script in the command line:

render-plugin-react-navigation init

Alternatively, add the following into the '_supporting/rewire_modules.json' file if you have not already done so:

...
"react-navigation",
"react-native-tab-view",
"react-native-safe-area-view",
...

Check out the Playground page to see how these features work.