✨ (NavigationContext) Exposes NavigationConsumer, withNavigation and useNavigation utils

Author: tpucci

example/babel.config.js

@@ -1,3 +1,4 @@
 module.exports = {
   presets: ['module:metro-react-native-babel-preset', '@babel/preset-typescript'],
+  plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]],
 };

example/metro.config.js

@@ -21,6 +21,10 @@ module.exports = {
       'mobx-react': path.resolve(__dirname, '../node_modules/mobx-react'),
       react: path.resolve(__dirname, '../node_modules/react'),
       'react-native': path.resolve(__dirname, '../node_modules/react-native'),
+      '@babel/plugin-proposal-decorators': path.resolve(
+        __dirname,
+        '../node_modules/@babel/plugin-proposal-decorators'
+      ),
     },
   },
   transformer: {

src/Navigation.store.tsx

@@ -7,7 +7,17 @@ interface ICanalsMap {
 }
 
 export class Navigation {
+  static getInstance() {
+    if (Navigation.instance) {
+      return Navigation.instance;
+    }
+    Navigation.instance = new Navigation();
+    return Navigation.instance;
+  }
+  private static instance: Navigation;
+
+  private canalsMap: ICanalsMap = {};
+
   @observable
-  state: INavigationState = {};
-  canalsMap: ICanalsMap = {};
+  private state: INavigationState = {};
 }

src/NavigationContext.tsx

@@ -1,4 +1,22 @@
-import { createContext } from 'react';
+import React, { Component, createContext, useContext, ComponentType } from 'react';
 import { Navigation } from './Navigation.store';
 
-export const NavigationContext = createContext(new Navigation());
+const NavigationContext = createContext(Navigation.getInstance());
+
+export const useNavigation = () => useContext(NavigationContext);
+
+export const NavigationConsumer = NavigationContext.Consumer;
+
+export const withNavigation = (
+  ComponentWithoutNavigation: ComponentType<{ navigation: Navigation }>
+) =>
+  class ComponentWithNavigation extends Component {
+    static displayName = 'withNavigation';
+    render() {
+      return (
+        <NavigationConsumer>
+          {navigation => <ComponentWithoutNavigation {...this.props} navigation={navigation} />}
+        </NavigationConsumer>
+      );
+    }
+  };

src/__tests__/Navigation.store.test.tsx

@@ -1,16 +1,31 @@
 import { Navigation } from '../Navigation.store';
 
 describe('Navigation store', () => {
+  it('exposes the store instance', () => {
+    const expectedNavigation = new Navigation();
+    const navigation = Navigation.getInstance();
+    expect(navigation).toEqual(expectedNavigation);
+  });
+
+  it('exposes the same store instance if it accessed twice', () => {
+    const navigation = Navigation.getInstance();
+    const otherNavigation = Navigation.getInstance();
+    expect(otherNavigation).toBe(navigation);
+  });
+
   it('initializes with an empty state and canalsMap', () => {
     const navigation = new Navigation();
+    // @ts-ignore
     expect(navigation.state).toEqual({});
+    // @ts-ignore
     expect(navigation.canalsMap).toEqual({});
   });
 
   describe('state', () => {
     it('cannot be changed directly', () => {
       try {
         const navigation = new Navigation();
+        // @ts-ignore
         navigation.state = {};
       } catch (error) {
         expect(error.message).toMatch(/\[mobx\]/);

src/__tests__/NavigationContext.test.tsx

@@ -2,20 +2,47 @@ import React from 'react';
 import TestRenderer from 'react-test-renderer';
 import { View } from 'react-native';
 
-import { NavigationContext } from '../NavigationContext';
+import { NavigationConsumer, withNavigation, useNavigation } from '../NavigationContext';
 import { Navigation } from '../Navigation.store';
 
 describe('NavigationContext', () => {
-  it('initializes a context with a new navigation store', () => {
-    const expectedNavigation = new Navigation();
-    TestRenderer.create(
-      <NavigationContext.Consumer>
-        {navigation => {
-          expect(navigation).toEqual(expectedNavigation);
-          return <View />;
-        }}
-      </NavigationContext.Consumer>
-    );
-    expect.assertions(1);
+  describe('NavigationConsumer', () => {
+    it('connects to context and exposes the navigation prop', () => {
+      const expectedNavigation = new Navigation();
+      TestRenderer.create(
+        <NavigationConsumer>
+          {navigation => {
+            expect(navigation).toEqual(expectedNavigation);
+            return <View />;
+          }}
+        </NavigationConsumer>
+      );
+      expect.assertions(1);
+    });
+  });
+  describe('withNavigation', () => {
+    it('connects to context and exposes the navigation prop', () => {
+      const expectedNavigation = new Navigation();
+      // @ts-ignore
+      const ViewWithNavigation = withNavigation(View);
+      const testRenderer = TestRenderer.create(<ViewWithNavigation />);
+      // @ts-ignore
+      expect(testRenderer.root.children[0].props.navigation).toEqual(expectedNavigation);
+      expect.assertions(1);
+    });
+  });
+  describe('useNavigation', () => {
+    it('connects to context and exposes the navigation prop', () => {
+      const expectedNavigation = new Navigation();
+      const ViewWithNavigation = () => {
+        const navigation = useNavigation();
+        // @ts-ignore
+        return <View navigation={navigation} />;
+      };
+      const testRenderer = TestRenderer.create(<ViewWithNavigation />);
+      // @ts-ignore
+      expect(testRenderer.root.children[0].props.navigation).toEqual(expectedNavigation);
+      expect.assertions(1);
+    });
   });
 });

src/__tests__/__snapshots__/createCanal.test.tsx.snap

@@ -1,3 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`createCanal renders the first page when mounted 1`] = `<View />`;
+exports[`createCanal renders the first page when mounted 1`] = `
+<View
+  navigation={
+    Navigation {
+      "canalsMap": Object {},
+    }
+  }
+/>
+`;

src/createCanal.tsx

@@ -1,6 +1,10 @@
 import React, { ComponentType, FunctionComponent } from 'react';
+import { Navigation } from 'Navigation.store';
+import { useNavigation } from './NavigationContext';
 
-export const createCanal = (...Pages: ComponentType[]): FunctionComponent => {
+export const createCanal = (
+  ...Pages: Array<ComponentType<{ navigation: Navigation }>>
+): FunctionComponent => {
   for (let index = 0; index < Pages.length; index++) {
     const Page = Pages[index];
     if (!(React.isValidElement(Page) || typeof Page === 'function')) {
@@ -11,5 +15,9 @@ export const createCanal = (...Pages: ComponentType[]): FunctionComponent => {
     }
   }
   const FirstPage = Pages[0];
-  return () => <FirstPage />;
+  const Canal = () => {
+    const navigation = useNavigation();
+    return <FirstPage navigation={navigation} />;
+  };
+  return Canal;
 };

src/index.ts

@@ -1 +1,2 @@
 export { createCanal } from './createCanal';
+export { NavigationConsumer, withNavigation, useNavigation } from './NavigationContext';

tsconfig.json

@@ -28,5 +28,12 @@
     "types": ["react-native"]
   },
   "include": ["./src"],
-  "exclude": ["node_modules", "dist", "example", "**/__tests__/*"]
+  "exclude": [
+    "node_modules",
+    "dist",
+    "example",
+    "**/__tests__/*",
+    "**/*.test.ts",
+    "**/*.test.tsx"
+  ]
 }