@ralali/rematch-navigation-plugin

React Navigation 5 plugin for Rematch

Installation

yarn add @ralali/rematch-navigation-plugin

or

npm i @ralali/rematch-navigation-plugin

Peer Dependencies

• react >= 16.7.0-alpha
• react native ( recommend >= 0.55.0 )
• @react-native-community/async-storage>=1.11.0
• @react-navigation/native >=5.0.0
• @rematch/core >= 1.0.0

Usage

register

register navigation ref in your root NavigationContainer

import { register } from '@ralali/rematch-navigation-plugin';
import { NavigationContainer } from '@react-navigation/native';

return (
    <NavigationContainer ref={register} />
);

navigationPlugin

import { init } from '@rematch/core';
import { navigationPlugin } from '@ralali/rematch-navigation-plugin';

const store = init({
  ...,
  plugins: [navigationPlugin]
});

export default store;

in your model

...,
effects: (dispatch) => ({
  exampleNavigate: async () => {
      dispatch.nav.navigate('SomewhereScreen');
  }
});

navigationRef

if you want to access NavigationContainer ref, simply use

import { navigationRef } from '@ralali/rematch-navigation-plugin';
import { CommonActions } from '@react-navigation/native';

function navigateWithoutComponent() {
    if (navigationRef) {
        navigationRef.dispatch(
            CommonActions.navigate({
                name: 'HomeScreen',
                params
            })
        );
    }
}

useExitHandler

options	defaultValue	ReturnType
duration	1500	number
message	Press once again to exit	string
handler	() => BackHandler.exitApp()	void

we already handle for android backPress on root stack if there is no screen left. Usually if there is screen left in stack navigator, when pressing backPress two times, application will exit

simply put this method in your Root Navigation component

import { useExitHandler } from '@ralali/rematch-navigation-plugin'

// without custom message
useExitHandler();

// if you want to give custom message
useExitHandler({
    message: 'Becareful, press once again will terminate this app'
});

return (
    <NavigationContainer
    ...
);

by default, we use BackHandler.exitApp() from react-native to handle application exit, hovewer use this function won't totally kill your application

if you want to use another handler for making application totally killed, we suggest to use react-native-exit-app

import RNExitApp from 'react-native-exit-app';

useExitHandler({
    message: 'Becareful, press once again will terminate this app',
    handler: () => RNExitApp.exitApp()
});

usePersistNav

This feature is only active in development mode

import { usePersistNav, register } from '@ralali/rematch-navigation-plugin';

const { initialState, setNavState, isNavReady } = usePersistNav();
  
/**
 * partial docs from https://reactnavigation.org/docs/state-persistence/
 *
 * Because the state is restored asynchronously
 * the app must render an empty/loading view for a moment before we have the initial state
 * to handle this, you can return a loading view when isNavReady is false:
 *
 */
if (!isNavReady) {
    return null;

    or

    return <ActivityIndicator />;
}

return (
    <NavigationContainer
        ref={register}
        initialState={initialState}
        onStateChange={(state) => {
            setNavState(state);
        }}
    >
    ...
);

useScreenAnalytics

since screen name on tab can duplicate, different with screne name on stack, this is a useful function to take IdenticalRoute

IdenticalRoute	Description	ReturnType
resultName	if the first slice routes type is tab, we will append the type into resultName returning latest route name is not enough for us to identify screen activity example: with tab: [MainTab] - All without tab: CovidInfoScreen	string
closestRoute	take the last 2 routes from NavigationState.routes	ShortRoute[]
routes	return only name and type from NavigationState.routes	ShortRoute[]

example usage

import { useScreenAnalytics, navigationRef } from '@ralali/rematch-navigation-plugin';
import { setCurrentScreen } from 'your/helpers';

const { subscribeState, routeNameRef } = useScreenAnalytics((route) => {
    const { resultName, closestRoute } = route;
    
    /**
     * use your analytics function here
    /*
    setCurrentScreen(resultName);
});

return (
    <NavigationContainer
        onReady={() => {
            routeNameRef.current = navigationRef.getCurrentRoute().name;
        }}
        onStateChange={(state) => {
            subscribeState();
            setNavState(state);
        }}
    >
    ...
);