Upgrade react navigation

__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';

__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {};

__tests__/sagas/deepLinking.spec.js

@@ -13,7 +13,7 @@ import * as eventActions from '../../app/actions/event';
 
 import { loggedInSelector } from '../../app/selectors/session';
 
-jest.mock('../../app/navigation', () => ({
+jest.mock('../../app/ui/components/navigation/RootNavigation', () => ({
   navigate: jest.fn(),
 }));
 

__tests__/sagas/event.spec.js

@@ -18,7 +18,7 @@ jest.mock('../../app/utils/url', () => ({
   apiRequest: jest.fn(() => {}),
 }));
 
-jest.mock('../../app/navigation', () => ({
+jest.mock('../../app/ui/components/navigation/RootNavigation', () => ({
   navigate: jest.fn(),
 }));
 

__tests__/sagas/navigation.spec.js

@@ -7,21 +7,35 @@ import * as eventActions from '../../app/actions/event';
 import * as profileActions from '../../app/actions/profile';
 import * as pizzaActions from '../../app/actions/pizza';
 import * as registrationActions from '../../app/actions/registration';
-import * as sessionActions from '../../app/actions/session';
 import * as calendarActions from '../../app/actions/calendar';
 import * as membersActions from '../../app/actions/members';
 import * as welcomeActions from '../../app/actions/welcome';
 import { settingsActions } from '../../app/actions/settings';
 
-import NavigationService from '../../app/navigation';
+import {
+  goBack,
+  toggleDrawer,
+  navigate,
+} from '../../app/ui/components/navigation/RootNavigation';
 
-jest.mock('../../app/navigation', () => ({
-  __esModule: true,
-  default: {
-    goBack: jest.fn(),
-    toggleDrawer: jest.fn(),
-    navigate: jest.fn(),
-  },
+jest.mock('../../app/ui/components/navigation/RootNavigation', () => ({
+  goBack: jest.fn(),
+  toggleDrawer: jest.fn(),
+  navigate: jest.fn(),
+}));
+
+jest.mock('react-native-vector-icons/MaterialIcons', () => ({
+  propTypes: jest.fn(() => 'Icon'),
+  defaultProps: jest.fn(),
+  create: jest.fn(),
+}));
+
+jest.mock('react-native-vector-icons/MaterialCommunityIcons', () => ({
+  CommunityIcon: 'CommunityIcon',
+}));
+
+jest.mock('react-native-snackbar', () => ({
+  Snackbar: jest.fn(),
 }));
 
 describe('navigation saga', () => {
@@ -31,15 +45,15 @@ describe('navigation saga', () => {
         .dispatch(navigationActions.goBack())
         .silentRun()
         .then(() => {
-          expect(NavigationService.goBack).toBeCalled();
+          expect(goBack).toBeCalled();
         }));
 
     it('should go back when a registration is saved', () =>
       expectSaga(navigationSaga)
         .dispatch(registrationActions.success())
         .silentRun()
         .then(() => {
-          expect(NavigationService.goBack).toBeCalled();
+          expect(goBack).toBeCalled();
         }));
   });
 
@@ -49,7 +63,7 @@ describe('navigation saga', () => {
         .dispatch(navigationActions.toggleDrawer())
         .silentRun()
         .then(() => {
-          expect(NavigationService.toggleDrawer).toBeCalled();
+          expect(toggleDrawer).toBeCalled();
         }));
   });
 
@@ -59,95 +73,71 @@ describe('navigation saga', () => {
         .dispatch(welcomeActions.open())
         .silentRun()
         .then(() => {
-          expect(NavigationService.navigate).toBeCalledWith('Welcome');
+          expect(navigate).toBeCalledWith('Welcome');
         }));
 
     it('should open the settings screen', () =>
       expectSaga(navigationSaga)
         .dispatch(settingsActions.open())
         .silentRun()
         .then(() => {
-          expect(NavigationService.navigate).toBeCalledWith('Settings');
+          expect(navigate).toBeCalledWith('Settings');
         }));
 
     it('should open the calendar screen', () =>
       expectSaga(navigationSaga)
         .dispatch(calendarActions.open())
         .silentRun()
         .then(() => {
-          expect(NavigationService.navigate).toBeCalledWith('Calendar');
+          expect(navigate).toBeCalledWith('Calendar');
         }));
 
     it('should open the members screen', () =>
       expectSaga(navigationSaga)
         .dispatch(membersActions.open())
         .silentRun()
         .then(() => {
-          expect(NavigationService.navigate).toBeCalledWith('MemberList');
+          expect(navigate).toBeCalledWith('MemberList');
         }));
 
     it('should open the event screen', () =>
       expectSaga(navigationSaga)
         .dispatch(eventActions.open())
         .silentRun()
         .then(() => {
-          expect(NavigationService.navigate).toBeCalledWith('Event');
+          expect(navigate).toBeCalledWith('Event');
         }));
 
     it('should open the event admin screen', () =>
       expectSaga(navigationSaga)
         .dispatch(eventActions.admin())
         .silentRun()
         .then(() => {
-          expect(NavigationService.navigate).toBeCalledWith('EventAdmin');
+          expect(navigate).toBeCalledWith('EventAdmin');
         }));
 
     it('should open the profile screen', () =>
       expectSaga(navigationSaga)
         .dispatch(profileActions.profile())
         .silentRun()
         .then(() => {
-          expect(NavigationService.navigate).toBeCalledWith('Profile');
+          expect(navigate).toBeCalledWith('Profile');
         }));
 
     it('should open the registration screen', () =>
       expectSaga(navigationSaga)
         .dispatch(registrationActions.retrieveFields(1))
         .silentRun()
         .then(() => {
-          expect(NavigationService.navigate).toBeCalledWith('Registration');
+          expect(navigate).toBeCalledWith('Registration');
         }));
 
     it('should open the pizza screen', () =>
       expectSaga(navigationSaga)
         .dispatch(pizzaActions.retrievePizzaInfo())
         .silentRun()
         .then(() => {
-          expect(NavigationService.navigate).toBeCalledWith('Pizza');
-        }));
-
-    it('should switch to the signed in navigator', () =>
-      expectSaga(navigationSaga)
-        .dispatch(sessionActions.signedIn('user', 'token'))
-        .silentRun()
-        .then(() => {
-          expect(NavigationService.navigate).toBeCalledWith('SignedIn');
-        }));
-
-    it('should sign out with invalid token', () =>
-      expectSaga(navigationSaga)
-        .dispatch(sessionActions.tokenInvalid())
-        .silentRun()
-        .then(() => {
-          expect(NavigationService.navigate).toBeCalledWith('Auth');
-        }));
-
-    it('should sign out on a sign out action', () =>
-      expectSaga(navigationSaga)
-        .dispatch(sessionActions.signOut())
-        .silentRun()
-        .then(() => {
-          expect(NavigationService.navigate).toBeCalledWith('Auth');
+          expect(navigate).toBeCalledWith('Pizza');
         }));
   });
 });

__tests__/sagas/registration.spec.js

@@ -18,7 +18,7 @@ jest.mock('react-native-snackbar', () => ({
   dismiss: jest.fn(),
 }));
 
-jest.mock('../../app/navigation', () => ({
+jest.mock('../../app/ui/components/navigation/RootNavigation', () => ({
   navigate: jest.fn(),
   goBack: jest.fn(),
 }));

__tests__/sagas/session.spec.js

@@ -30,7 +30,7 @@ jest.mock('../../app/selectors/session', () => ({
   tokenSelector: () => 'abc123',
 }));
 
-jest.mock('../../app/navigation', () => ({
+jest.mock('../../app/ui/components/navigation/RootNavigation', () => ({
   navigate: jest.fn(),
 }));
 

__tests__/setup.js

@@ -1,5 +1,6 @@
 import { NativeModules } from 'react-native';
 import * as ReactNative from 'react-native';
+import 'react-native-gesture-handler/jestSetup';
 
 NativeModules.RNShare = {};
 
@@ -13,6 +14,20 @@ NativeModules.RNCStatusBarManager = {
   setTranslucent: jest.fn(),
 };
 
+jest.mock('react-native-reanimated', () => {
+  // eslint-disable-next-line global-require
+  const Reanimated = require('react-native-reanimated/mock');
+
+  // The mock for `call` immediately calls the callback which is incorrect
+  // So we override it with a no-op
+  Reanimated.default.call = () => {};
+
+  return Reanimated;
+});
+
+// Silence the warning: Animated: `useNativeDriver` is not supported because the native animated module is missing
+jest.mock('react-native/Libraries/Animated/src/NativeAnimatedHelper');
+
 jest.mock('react-native-fs', () => ({
   downloadFile: jest.fn(),
 }));

__tests__/ui/components/errorScreen/__snapshots__/ErrorScreen.spec.js.snap

@@ -12,11 +12,7 @@ exports[`ErrorScreen component renders correctly 1`] = `
   }
 >
   <Image
-    source={
-      Object {
-        "testUri": "../../../app/assets/img/sad_cloud.png",
-      }
-    }
+    source="test-file-stub"
     style={
       Object {
         "height": 200,

__tests__/ui/components/memberView/MemberView.spec.js

@@ -2,7 +2,7 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 import MemberView from '../../../../app/ui/components/memberView/MemberView';
 
-jest.mock('react-navigation', () => ({
+jest.mock('@react-navigation/compat', () => ({
   withNavigation: (component) => component,
 }));
 

__tests__/ui/components/navigator/__snapshots__/Sidebar.spec.js.snap

@@ -41,11 +41,7 @@ exports[`Sidebar component renders correctly 1`] = `
     >
       <Image
         resizeMode="cover"
-        source={
-          Object {
-            "testUri": "../../../app/assets/img/huygens.jpg",
-          }
-        }
+        source="test-file-stub"
         style={
           Array [
             Object {

__tests__/ui/components/standardHeader/StandardHeader.spec.js

@@ -3,7 +3,8 @@ import { Platform } from 'react-native';
 import renderer from 'react-test-renderer';
 import StandardHeader from '../../../../app/ui/components/standardHeader/StandardHeader';
 
-jest.mock('react-navigation', () => ({
+jest.mock('@react-navigation/compat', () => ({
+  createNavigatorFactory: (component) => component,
   withNavigation: (component) => component,
 }));
 

app/app.js

@@ -11,7 +11,7 @@ import sagas from './sagas';
 import * as sessionActions from './actions/session';
 import * as deepLinkingActions from './actions/deepLinking';
 import { register } from './actions/pushNotifications';
-import NavigationService from './navigation';
+import Navigation from './ui/components/navigation/NavigationConnector';
 
 const { UIManager } = NativeModules;
 
@@ -96,11 +96,7 @@ class Main extends Component {
   render() {
     return (
       <Provider store={store}>
-        <NavigationService.AppContainer
-          ref={(navigatorRef) => {
-            NavigationService.setTopLevelNavigator(navigatorRef);
-          }}
-        />
+        <Navigation />
       </Provider>
     );
   }