feat: add native container with back button integration (react-naviga…

…tion#48)

.eslintrc.json

@@ -4,6 +4,7 @@
     "react": { "version": "16" },
     "import/core-modules": [
       "@navigation-ex/core",
+      "@navigation-ex/native",
       "@navigation-ex/routers",
       "@navigation-ex/stack",
       "@navigation-ex/drawer",

packages/core/src/NavigationContainer.tsx

@@ -99,8 +99,19 @@ const Container = React.forwardRef(function NavigationContainer(
     listeners[0](navigation => navigation.dispatch(action));
   };
 
+  const canGoBack = () => {
+    const { result, handled } = listeners[0](navigation =>
+      navigation.canGoBack()
+    );
+
+    if (handled) {
+      return result;
+    } else {
+      return false;
+    }
+  };
+
   React.useImperativeHandle(ref, () => ({
-    dispatch,
     ...(Object.keys(BaseActions) as Array<keyof typeof BaseActions>).reduce<
       any
     >((acc, name) => {
@@ -114,6 +125,8 @@ const Container = React.forwardRef(function NavigationContainer(
         );
       return acc;
     }, {}),
+    dispatch,
+    canGoBack,
   }));
 
   const navigationStateRef = React.useRef<State>();

packages/core/src/useDescriptors.tsx

@@ -55,12 +55,13 @@ export default function useDescriptors<
   getState,
   setState,
   addActionListener,
+  addFocusedListener,
   onRouteFocus,
   router,
   emitter,
-  addFocusedListener,
 }: Options<ScreenOptions>) {
   const [options, setOptions] = React.useState<{ [key: string]: object }>({});
+
   const context = React.useMemo(
     () => ({
       navigation,

packages/core/src/useNavigationBuilder.tsx

@@ -243,9 +243,9 @@ export default function useNavigationBuilder<
     setState,
     onRouteFocus,
     addActionListener,
+    addFocusedListener,
     router,
     emitter,
-    addFocusedListener,
   });
 
   return {

packages/core/src/useNavigationHelpers.tsx

@@ -35,15 +35,14 @@ export default function useNavigationHelpers<
   const { performTransaction } = React.useContext(NavigationStateContext);
 
   return React.useMemo(() => {
-    const dispatch = (action: Action | ((state: State) => State)) => {
+    const dispatch = (action: Action | ((state: State) => State)) =>
       performTransaction(() => {
         if (typeof action === 'function') {
           setState(action(getState()));
         } else {
           onAction(action);
         }
       });
-    };
 
     const actions = {
       ...router.actionCreators,

packages/example/metro.config.js

@@ -39,6 +39,7 @@ module.exports = {
       'react-native-paper',
       'react-native-tab-view',
       'shortid',
+      'use-subscription',
     ],
   },
 

packages/example/package.json

@@ -31,7 +31,8 @@
     "react-native-tab-view": "2.7.1",
     "react-native-web": "^0.11.4",
     "scheduler": "^0.14.0",
-    "shortid": "^2.2.14"
+    "shortid": "^2.2.14",
+    "use-subscription": "^1.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.5.5",

packages/example/src/index.tsx

@@ -2,7 +2,13 @@ import * as React from 'react';
 import { ScrollView, AsyncStorage, YellowBox } from 'react-native';
 import { Appbar, List } from 'react-native-paper';
 import { Asset } from 'expo-asset';
-import { NavigationContainer, InitialState } from '@navigation-ex/core';
+import {
+  NavigationContainer,
+  InitialState,
+  NavigationHelpers,
+  ParamListBase,
+} from '@navigation-ex/core';
+import { useNativeIntegration } from '@navigation-ex/native';
 import {
   createDrawerNavigator,
   DrawerNavigationProp,
@@ -51,6 +57,10 @@ const PERSISTENCE_KEY = 'NAVIGATION_STATE';
 Asset.loadAsync(StackAssets);
 
 export default function App() {
+  const containerRef = React.useRef<NavigationHelpers<ParamListBase>>(null);
+
+  useNativeIntegration(containerRef);
+
   const [isReady, setIsReady] = React.useState(false);
   const [initialState, setInitialState] = React.useState<
     InitialState | undefined
@@ -79,6 +89,7 @@ export default function App() {
 
   return (
     <NavigationContainer
+      ref={containerRef}
       initialState={initialState}
       onStateChange={state =>
         AsyncStorage.setItem(PERSISTENCE_KEY, JSON.stringify(state))

packages/native/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@navigation-ex/native",
+  "version": "0.0.1",
+  "main": "src/index",
+  "license": "MIT",
+  "dependencies": {
+    "@navigation-ex/core": "^0.0.1"
+  },
+  "devDependencies": {
+    "@types/react": "^16.8.24",
+    "@types/react-native": "^0.60.2",
+    "react": "16.8.3",
+    "react-native": "^0.59.8"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  }
+}

packages/native/src/index.tsx

@@ -0,0 +1,2 @@
+export { default as useBackButton } from './useBackButton';
+export { default as useNativeIntegration } from './useNativeIntegration';

packages/native/src/useBackButton.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { NavigationHelpers, ParamListBase } from '@navigation-ex/core';
+import { BackHandler } from 'react-native';
+
+export default function useBackButton(
+  ref: React.RefObject<NavigationHelpers<ParamListBase>>
+) {
+  React.useEffect(() => {
+    const subscription = BackHandler.addEventListener(
+      'hardwareBackPress',
+      () => {
+        if (ref.current == null) {
+          return false;
+        }
+
+        const navigation = ref.current;
+
+        if (navigation.canGoBack()) {
+          navigation.goBack();
+
+          return true;
+        }
+
+        return false;
+      }
+    );
+
+    return () => subscription.remove();
+  }, [ref]);
+}

packages/native/src/useNativeIntegration.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { NavigationHelpers, ParamListBase } from '@navigation-ex/core';
+import useBackButton from './useBackButton';
+
+export default function useNativeIntegration(
+  ref: React.RefObject<NavigationHelpers<ParamListBase>>
+) {
+  useBackButton(ref);
+}