@applicaster/zapp-react-native-utils 13.0.0-alpha.5718191297 → 13.0.0-alpha.5771418585

package/README.md

@@ -376,16 +376,6 @@ useEffect(() => {
 }, []);
 ```
 
-### testUtils
-
-`@applicaster/zapp-react-native-utils/testUtils`
-
-- `testIDEquals: (testId: any) => boolean | { width: number, height: number }` - Function to be used in tandem with enzyme findWhere
-
-```javascript
-wrapper.findWhere(testIDEquals("text"));
-```
-
 ### appUtils - contextKeysManager
 
 `@applicaster/zapp-react-native-utils/appUtils/contextKeyManager`

package/appUtils/contextKeysManager/index.ts

@@ -16,12 +16,12 @@ import {
 
 export { StorageLevel };
 
-type KeyNameObj = {
+export type KeyNameObj = {
   namespace: string;
   key: string;
 };
 
-type KeyName = string | KeyNameObj;
+export type KeyName = string | KeyNameObj;
 
 type ParsedKeyAndNamespace = {
   namespace?: string;

package/appUtils/contextKeysManager/utils/index.ts

@@ -1,10 +1,11 @@
 import * as R from "ramda";
 import { DEFAULT_NAMESPACE } from "../consts";
+import { KeyName, KeyNameObj } from "../index";
 
 const lastDotRegex = /\.([^.]+)$/;
 const splitByLastDot = R.compose(R.init, R.split(lastDotRegex));
 
-export function getNamespaceAndKey(namespacedKey) {
+export function getNamespaceAndKey(namespacedKey: KeyName): KeyNameObj {
   if (typeof namespacedKey !== "string") return namespacedKey;
 
   const namespacedKeyProps = namespacedKey.includes(".")

package/appUtils/focusManager/__tests__/__snapshots__/focusManager.test.js.snap

@@ -28,6 +28,7 @@ exports[`focusManager should be defined 1`] = `
   "moveFocus": [Function],
   "on": [Function],
   "press": [Function],
+  "pressIn": [Function],
   "pressOut": [Function],
   "recoverFocus": [Function],
   "register": [Function],

package/appUtils/focusManager/index.ts

@@ -345,6 +345,14 @@ export const focusManager = (function () {
     });
   }
 
+  function pressIn() {
+    const currentFocusable = getCurrentFocus();
+
+    if (currentFocusable) {
+      currentFocusable.pressIn(null);
+    }
+  }
+
   /**
    * calls the `press` method on the current focus component
    * @public
@@ -552,6 +560,7 @@ export const focusManager = (function () {
     invokeHandler,
     removeHandler,
     longPress,
+    pressIn,
     pressOut,
     enableFocus,
     setInitialFocus,

package/appUtils/platform/platformUtils.ts

@@ -77,6 +77,12 @@ export class ClosedCaptioningManager {
 
   private constructor() {
     this.initialize();
+
+    window["vizioDebug"] = {
+      setCCEnabled: (isCCEnabled: boolean) => {
+        this.ccState$.next(isCCEnabled);
+      },
+    };
   }
 
   static getInstance(): ClosedCaptioningManager {

package/appUtils/playerManager/player.ts

@@ -98,6 +98,7 @@ export class Player {
     this.isFullScreenSupported = this.isFullScreenSupported.bind(this);
     this.onPlayerSeekComplete = this.onPlayerSeekComplete.bind(this);
 
+    this.isPaused = this.isPaused.bind(this);
     this.entryObservable = null;
   }
 
@@ -253,9 +254,9 @@ export class Player {
     return this.playerState.seekPosition !== null;
   };
 
-  isPaused = () => {
+  isPaused() {
     return !!this.playerState.isPaused;
-  };
+  }
 
   isPlaying = () => {
     return !!this.playerState.isPaused === false;
@@ -290,11 +291,11 @@ export class Player {
   };
 
   // Methods to call actions on the player
-  seekTo = (_position: number) => {};
+  seekTo = async (_position: number) => {};
 
-  forward = (_deltaTime: number) => {};
+  forward = async (_deltaTime: number) => {};
 
-  rewind = (_deltaTime: number) => {};
+  rewind = async (_deltaTime: number) => {};
 
   /**
    * Determine whether content is live using three checks
@@ -701,8 +702,8 @@ export class Player {
     onPlayerAttached: this.onPlayerAttached,
   });
 
-  play = () => {};
-  pause = () => {};
+  play = async () => {};
+  pause = async () => {};
   disableBufferAnimation = (): boolean => true;
 
   setPlaybackRate = (_rate) => {};

package/appUtils/playerManager/playerNative.ts

@@ -95,7 +95,7 @@ export class PlayerNative extends Player {
   };
 
   // Methods to call actions on the player
-  seekTo = (position: number) => {
+  seekTo = async (position: number) => {
     if (!this.playerState.seekableDuration) {
       log_warning("seekTo: Can not seek, video is not seekable");
 
@@ -123,7 +123,7 @@ export class PlayerNative extends Player {
     this.logState(PlayerModuleFuncNames.seekTo, { position });
   };
 
-  forward = (deltaTime: number) => {
+  forward = async (deltaTime: number) => {
     if (isEmptyOrNil(this.playerState.contentPosition)) {
       return;
     }
@@ -139,7 +139,7 @@ export class PlayerNative extends Player {
     this.logState(PlayerModuleFuncNames.forward, { deltaTime });
   };
 
-  rewind = (deltaTime: number) => {
+  rewind = async (deltaTime: number) => {
     if (isEmptyOrNil(this.playerState.contentPosition)) {
       return;
     }
@@ -155,13 +155,13 @@ export class PlayerNative extends Player {
     this.logState(PlayerModuleFuncNames.rewind, { deltaTime });
   };
 
-  play = () => {
+  play = async () => {
     if (!this.invokeNativeFunction(PlayerModuleFuncNames.play)) {
       this.currentPlayerComponent()?.[PlayerModuleFuncNames.play]?.();
     }
   };
 
-  pause = () => {
+  pause = async () => {
     if (!this.invokeNativeFunction(PlayerModuleFuncNames.pause)) {
       this.currentPlayerComponent()?.[PlayerModuleFuncNames.pause]?.();
     }

package/equalUtils/index.ts

@@ -49,9 +49,16 @@ export const isEqual =
     }
 
     if (compareRemainingKeysBySameValue) {
-      const undeclaredKeys = R.difference(
-        [...byValue, ...byReference, byComparator.keys],
-        Object.keys(prev)
+      const allKeys = new Set([...Object.keys(prev), ...Object.keys(next)]);
+
+      const declaredKeys = new Set([
+        ...byValue,
+        ...byReference,
+        ...byComparator.keys,
+      ]);
+
+      const undeclaredKeys = Array.from(allKeys).filter(
+        (key) => !declaredKeys.has(key)
       );
 
       const isRestKeysEqualAllBySameValue = undeclaredKeys.every((key) =>

package/focusManager/FocusManager.ts

@@ -250,7 +250,17 @@ class FocusManager {
   }
 
   onDisableFocusChange = (id) => {
-    if (FocusManager.instance.isFocused(id)) {
+    const isFocused = FocusManager.instance.isFocused(id);
+
+    const isDescendantFocused = (() => {
+      try {
+        return FocusManager.instance.isAnyDescendantFocused(id);
+      } catch (_e) {
+        return false;
+      }
+    })();
+
+    if (isFocused || isDescendantFocused) {
       // Move focus to next one
       const nextFocus = FocusManager.instance.focused?.props
         ?.nextFocusDown as string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "13.0.0-alpha.5718191297",
+  "version": "13.0.0-alpha.5771418585",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,7 +28,7 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "13.0.0-alpha.5718191297",
+    "@applicaster/applicaster-types": "13.0.0-alpha.5771418585",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "create-react-context": "^0.2.3",

package/reactHooks/navigation/index.ts

@@ -1,5 +1,5 @@
-import React, { useEffect, useMemo } from "react";
-import { BackHandler, InteractionManager, NativeModules } from "react-native";
+import { useContext, useEffect, useMemo, useRef } from "react";
+import { BackHandler } from "react-native";
 
 import {
   useContentTypes,
@@ -31,6 +31,8 @@ export { useGetBottomTabBarHeight } from "./useGetBottomTabBarHeight";
 
 export { useIsScreenActive } from "./useIsScreenActive";
 
+export { useProfilerLogging } from "./useProfilerLogging";
+
 export {
   useUniqueRouteSuffix,
   useNavbarId,
@@ -121,10 +123,8 @@ export function isNavBarVisible(
   return true;
 }
 
-const { ProfilerBridge } = NativeModules;
-
 export const useBackHandler = (cb: () => boolean) => {
-  React.useEffect(() => {
+  useEffect(() => {
     BackHandler.addEventListener("hardwareBackPress", cb);
 
     return () => {
@@ -158,7 +158,7 @@ export const useZappHooksForEntry = (
     setIsHooksExecutionInProgress,
     setIsPresentingFullScreen,
     setIsRunningInBackground,
-  }: HookModalContextT = React.useContext(ZappHookModalContext.ReactContext);
+  }: HookModalContextT = useContext(ZappHookModalContext.ReactContext);
 
   const {
     appData: { layoutVersion },
@@ -256,22 +256,10 @@ export const useZappHooksForEntry = (
   }, [entry.id]);
 };
 
-export const useProfilerLogging = () => {
-  const logTimestamp = (data: string) =>
-    InteractionManager.runAfterInteractions(() => {
-      if (ProfilerBridge && data) {
-        ProfilerBridge.updateTimer("navigation", data, Date.now());
-      }
-    });
-
-  return logTimestamp;
-};
-
 export const useRunIfLongPress = (
   options = { timeout: LONG_KEY_PRESS_TIMEOUT }
 ) => {
-  const pressTimeout =
-    React.useRef<Nullable<ReturnType<typeof setTimeout>>>(null);
+  const pressTimeout = useRef<Nullable<ReturnType<typeof setTimeout>>>(null);
 
   const resetTimeout = () => {
     clearTimeout(pressTimeout.current as ReturnType<typeof setTimeout>);

package/reactHooks/navigation/useProfilerLogging.ts

@@ -0,0 +1,15 @@
+import { useCallback } from "react";
+import { InteractionManager, NativeModules } from "react-native";
+
+const { ProfilerBridge } = NativeModules;
+
+export const useProfilerLogging = () =>
+  useCallback(
+    (data: string) =>
+      InteractionManager.runAfterInteractions(() => {
+        if (ProfilerBridge && data) {
+          ProfilerBridge.updateTimer("navigation", data, Date.now());
+        }
+      }),
+    []
+  );

package/reactHooks/player/TVSeekControlller/TVSeekController.ts

@@ -23,7 +23,7 @@ export enum SEEK_STRATEGY {
 }
 
 const CONFIG_TAP_SEEK = {
-  CLICKS_BEFORE_PAUSE: 0,
+  CLICKS_BEFORE_PAUSE: 1,
 };
 
 const CONFIG_LONG_PRESS = {
@@ -93,6 +93,8 @@ export class TVSeekController
       this.isPlayerInitiallyPaused = this.playerController.isPaused();
     }
 
+    log_debug(`handleStartSeek: seekType: ${seekType}, initiallyPaused: ${this.isPlayerInitiallyPaused}, isPlayerPaused: ${this.playerController.isPaused()}`);
+
     this.clearLongPressThresholdTimeout();
     this.clearSeekCompleteTimeout();
     this.setStrategy(SEEK_STRATEGY.TAP_SEEK);
@@ -105,27 +107,36 @@ export class TVSeekController
   };
 
   onForwardPress = (): boolean => {
+    log_debug("onForwardPress:");
+
     this.handleStartSeek(SEEK_TYPE.FORWARD);
 
     return true;
   };
 
   onRewindPress = (): boolean => {
+    log_debug("onRewindPress:");
+
     this.handleStartSeek(SEEK_TYPE.REWIND);
 
     return true;
   };
 
   onSeekEnd = () => {
+    log_debug("onSeekEnd: Seek ended");
     this.clearLongPressThresholdTimeout();
     this.currentSeekController.onSeekEnd();
   };
 
   onRewindPressOut = () => {
+    log_debug("onRewindPressOut:");
+
     this.onSeekEnd();
   };
 
   onForwardPressOut = () => {
+    log_debug("onForwardPressOut:");
+
     this.onSeekEnd();
   };
 
@@ -138,7 +149,9 @@ export class TVSeekController
   };
 
   handleDelayedSeek = (offset: number = 0) => {
-    this.handlePlayerPause();
+    if (this.delayedSeekPosition === null) {
+      void this.handlePlayerPause();
+    }
 
     const currentPos =
       this.delayedSeekPosition === null
@@ -174,36 +187,46 @@ export class TVSeekController
       }
     }
 
+    log_debug(`handleDelayedSeek: currentPos: ${currentPos} targetPos:${targetPos}, initiallyPaused: ${this.isPlayerInitiallyPaused}`);
+
     this.delayedSeekPosition = targetPos;
     this.delayedSeekProgressSubject.next(targetPos);
   };
 
-  handleSeekTo = (newPosition: number) => {
-    this.playerController.seekTo(newPosition);
+  handleSeekTo = async (newPosition: number) => {
+    await this.playerController.seekTo(newPosition);
+
+    log_debug(
+      `handleSeekTo: isPlayerInitiallyPaused: ${this.isPlayerInitiallyPaused}  CallPlayerPlay: ${this.isPlayerInitiallyPaused ? "NO" : "YES"}`
+    );
 
     if (!this.isPlayerInitiallyPaused) {
-      this.playerController.play();
+      await this.playerController.play();
     }
   };
 
-  handleSeek = (offset: number) => {
-    this.playerController[this.currentSeekType](offset);
+  handleSeek = async (offset: number) => {
+    await this.playerController[this.currentSeekType](offset);
+
+    log_debug(
+      `handleSeek: isPlayerInitiallyPaused: ${this.isPlayerInitiallyPaused} CallPlayerPlay: ${this.isPlayerInitiallyPaused ? "NO" : "YES"}`
+    );
 
     if (!this.isPlayerInitiallyPaused) {
-      this.playerController.play();
+      await this.playerController.play();
     }
   };
 
   handleSeekComplete = () => {
     this.clearSeekCompleteTimeout();
 
-    this.seekEndTimeout = setTimeout(() => {
+    this.seekEndTimeout = setTimeout(async () => {
       if (this.delayedSeekPosition !== null) {
-        this.handleSeekTo(this.delayedSeekPosition);
+        await this.handleSeekTo(this.delayedSeekPosition);
       }
 
       log_debug(
-        `handleSeekComplete: Seek finished, type: ${this.currentSeekController.title}, seekPosition: ${this.delayedSeekPosition}. Reset all states and seek position.`
+        `handleSeekComplete: Seek finished, type: ${this.currentSeekController.title}, seekPosition: ${this.delayedSeekPosition}, playerPaused: ${this.playerController.isPaused()}. Reset all states and seek position.`
       );
 
       this.resetAll();
@@ -214,12 +237,16 @@ export class TVSeekController
     return this.delayedSeekPosition !== null;
   };
 
-  handlePlayerPause = () => {
+  handlePlayerPause = async () => {
+    log_debug(
+      `handleSeek: handlePlayerPause isPlayerPaused: ${this.playerController.isPaused()}`
+    );
+
     if (this.playerController.isPaused()) {
       return;
     }
 
-    this.playerController.pause();
+    await this.playerController.pause();
   };
 
   clearSeekCompleteTimeout = () => {

package/reactHooks/player/TVSeekControlller/TapSeekController.ts

@@ -12,6 +12,8 @@ interface TapPressConfig {
 
 export class TapSeekController implements ISeekController {
   readonly title = "TapSeek";
+  private lastFastSeekExit = 0;
+
   constructor(
     private seekControllerDelegate: ISeekControllerDelegate,
     private seekIncrementalStrategy: SeekIncrementalBaseStrategy,
@@ -23,13 +25,18 @@ export class TapSeekController implements ISeekController {
 
     const skipTime = this.seekIncrementalStrategy.getSkipTime();
     const seekMultiplier = this.seekIncrementalStrategy.getSkipMultiplier();
+    const cooldown = Date.now() - this.lastFastSeekExit > 1000;
 
     if (seekMultiplier > this.config.CLICKS_BEFORE_PAUSE) {
       log_debug(
         `${this.title}: handle delayed seek type:${seekType} - skipTime: ${skipTime}, seekMultiplier: ${seekMultiplier}.`
       );
 
-      this.seekControllerDelegate.handleDelayedSeek(skipTime);
+      if (cooldown) {
+        this.seekControllerDelegate.handleDelayedSeek(skipTime);
+      } else {
+        this.seekControllerDelegate.handleSeek(skipTime);
+      }
     } else {
       log_debug(
         `${this.title}: handle seek type:${seekType} - skipTime: ${skipTime}.`
@@ -46,8 +53,8 @@ export class TapSeekController implements ISeekController {
   };
 
   reset = () => {
-    log_debug("{this.title}: Reset states");
-
+    log_debug(`${this.title}: Reset states`);
+    this.lastFastSeekExit = Date.now();
     this.seekIncrementalStrategy.reset();
   };
 }

package/reactUtils/__tests__/__snapshots__/reactUtilsHelpers.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`addLifeCycleMethods attaches the lifecycle method to the component 1`] = `
+exports[`reactUtils helpers addLifeCycleMethods attaches the lifecycle method to the component 1`] = `
 <View>
   <Text>
     I'm a class component
@@ -8,7 +8,7 @@ exports[`addLifeCycleMethods attaches the lifecycle method to the component 1`]
 </View>
 `;
 
-exports[`attachMethodToPrototype attaches a lifecycle method to the component's prototype 1`] = `
+exports[`reactUtils helpers attachMethodToPrototype attaches a lifecycle method to the component's prototype 1`] = `
 <View>
   <Text>
     I'm a class component
@@ -16,6 +16,18 @@ exports[`attachMethodToPrototype attaches a lifecycle method to the component's
 </View>
 `;
 
-exports[`attachMethodToPrototype preserves any existing lifecycle method 1`] = `<StatelessComponent />`;
+exports[`reactUtils helpers attachMethodToPrototype preserves any existing lifecycle method 1`] = `
+<View>
+  <Text>
+    I'm a stateless component
+  </Text>
+</View>
+`;
 
-exports[`wrapInClass wraps the stateless component in a class 1`] = `<StatelessComponent />`;
+exports[`reactUtils helpers wrapInClass wraps the stateless component in a class 1`] = `
+<View>
+  <Text>
+    I'm a stateless component
+  </Text>
+</View>
+`;

package/reactUtils/__tests__/reactUtilsHelpers.test.js

@@ -1,6 +1,5 @@
 import * as React from "react";
-import { shallow } from "enzyme";
-import { shallowToJson } from "enzyme-to-json";
+import { render } from "@testing-library/react-native";
 
 import {
   isClassComponent,
@@ -20,98 +19,100 @@ import {
 } from "./fixtures";
 
 describe("reactUtils helpers", () => {
-  it("should have isNilOrEmpty", () => {
-    expect(isNilOrEmpty).toBeDefined();
-    expect(isNilOrEmpty(null)).toBeTruthy();
-    expect(isNilOrEmpty(undefined)).toBeTruthy();
-    expect(isNilOrEmpty("")).toBeTruthy();
-    expect(isNilOrEmpty([])).toBeTruthy();
+  describe("isNilOrEmpty", () => {
+    it("should return correct output", () => {
+      expect(isNilOrEmpty).toBeDefined();
+      expect(isNilOrEmpty(null)).toBeTruthy();
+      expect(isNilOrEmpty(undefined)).toBeTruthy();
+      expect(isNilOrEmpty("")).toBeTruthy();
+      expect(isNilOrEmpty([])).toBeTruthy();
+    });
   });
-});
 
-describe("isClassComponent", () => {
-  it("returns true if the component is a class component", () => {
-    expect(isClassComponent(ClassComponent)).toBe(true);
-  });
+  describe("isClassComponent", () => {
+    it("returns true if the component is a class component", () => {
+      expect(isClassComponent(ClassComponent)).toBe(true);
+    });
 
-  it("returns false otherwise", () => {
-    expect(isClassComponent(StatelessComponent)).toBe(false);
+    it("returns false otherwise", () => {
+      expect(isClassComponent(StatelessComponent)).toBe(false);
+    });
   });
-});
 
-describe("attachMethodToPrototype", () => {
-  const initialWrapper = shallow(<ClassComponent />);
+  describe("attachMethodToPrototype", () => {
+    const initialWrapper = render(<ClassComponent />);
 
-  expect(initialWrapper.instance()).not.toHaveProperty(
-    COMPONENT_DID_MOUNT_METHOD
-  );
-
-  afterEach(() => {
-    componentDidMount.mockClear();
-  });
-
-  it("attaches a lifecycle method to the component's prototype", () => {
-    const NewComponent = attachMethodToPrototype(ClassComponent)(
-      componentDidMount,
+    expect(initialWrapper.toJSON()).not.toHaveProperty(
       COMPONENT_DID_MOUNT_METHOD
     );
 
-    const wrapper = shallow(<NewComponent />);
+    afterEach(() => {
+      componentDidMount.mockClear();
+    });
 
-    expect(shallowToJson(wrapper)).toMatchSnapshot();
-    expect(wrapper.instance()).toHaveProperty(COMPONENT_DID_MOUNT_METHOD);
-    expect(componentDidMount).toHaveBeenCalled();
-  });
+    it("attaches a lifecycle method to the component's prototype", () => {
+      const NewComponent = attachMethodToPrototype(ClassComponent)(
+        componentDidMount,
+        COMPONENT_DID_MOUNT_METHOD
+      );
 
-  it("preserves any existing lifecycle method", () => {
-    const NewComponent = attachMethodToPrototype(ComponentWithLifeCycle)(
-      componentDidMount,
-      COMPONENT_DID_MOUNT_METHOD
-    );
+      const wrapper = render(<NewComponent />);
 
-    expect(componentDidMount).not.toHaveBeenCalled();
+      expect(wrapper.toJSON(wrapper)).toMatchSnapshot();
+      expect(new NewComponent()).toHaveProperty(COMPONENT_DID_MOUNT_METHOD);
+      expect(componentDidMount).toHaveBeenCalled();
+    });
 
-    const wrapper = shallow(<NewComponent />);
+    it("preserves any existing lifecycle method", () => {
+      const NewComponent = attachMethodToPrototype(ComponentWithLifeCycle)(
+        componentDidMount,
+        COMPONENT_DID_MOUNT_METHOD
+      );
 
-    expect(shallowToJson(wrapper)).toMatchSnapshot();
-    expect(componentDidMount).toHaveBeenCalled();
-    expect(existingMethod).toHaveBeenCalled();
-  });
-});
+      expect(componentDidMount).not.toHaveBeenCalled();
 
-describe("wrapInClass", () => {
-  let NewComponent;
-  let wrapper;
+      const wrapper = render(<NewComponent />);
 
-  beforeEach(() => {
-    NewComponent = wrapInClass(StatelessComponent);
-    wrapper = shallow(<NewComponent />);
+      expect(wrapper.toJSON()).toMatchSnapshot();
+      expect(componentDidMount).toHaveBeenCalled();
+      expect(existingMethod).toHaveBeenCalled();
+    });
   });
 
-  it("wraps the stateless component in a class", () => {
-    expect(isClassComponent(NewComponent)).toBe(true);
-    expect(shallowToJson(wrapper)).toMatchSnapshot();
-  });
-});
+  describe("wrapInClass", () => {
+    let NewComponent;
+    let wrapper;
 
-describe("addLifeCycleMethods", () => {
-  let NewComponent;
-  let wrapper;
+    beforeEach(() => {
+      NewComponent = wrapInClass(StatelessComponent);
+      wrapper = render(<NewComponent />);
+    });
 
-  beforeEach(() => {
-    NewComponent = addLifeCycleMethods({ componentDidMount })(ClassComponent);
-    wrapper = shallow(<NewComponent />);
+    it("wraps the stateless component in a class", () => {
+      expect(isClassComponent(NewComponent)).toBe(true);
+      expect(wrapper.toJSON()).toMatchSnapshot();
+    });
   });
 
-  afterEach(() => {
-    componentDidMount.mockClear();
-  });
+  describe("addLifeCycleMethods", () => {
+    let NewComponent;
+    let wrapper;
 
-  it("attaches the lifecycle method to the component", () => {
-    expect(shallowToJson(wrapper)).toMatchSnapshot();
-  });
+    beforeEach(() => {
+      NewComponent = addLifeCycleMethods({ componentDidMount })(ClassComponent);
+      wrapper = render(<NewComponent />);
+    });
+
+    afterEach(() => {
+      componentDidMount.mockClear();
+    });
+
+    it("attaches the lifecycle method to the component", () => {
+      expect(wrapper.toJSON()).toMatchSnapshot();
+    });
 
-  it("adds the lifecycle method to the component", () => {
-    expect(componentDidMount).toHaveBeenCalled();
+    it("adds the lifecycle method to the component", () => {
+      expect(componentDidMount).toHaveBeenCalled();
+    });
   });
 });

package/reactUtils/createContext/__tests__/__snapshots__/helpers.test.js.snap

@@ -1,59 +1,27 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`createContextSetters when no state validator is provided calls setState when the setters are called, no matter what the value is 1`] = `
+exports[`helpers createContextSetters when no state validator is provided calls setState when the setters are called, no matter what the value is 1`] = `
 {
   "bar": "bar",
   "foo": "foo",
 }
 `;
 
-exports[`createContextSetters when no state validator is provided calls setState when the setters are called, no matter what the value is 2`] = `
-{
-  "bar": "bar",
-  "foo": "invalid foo",
-}
-`;
-
-exports[`createContextSetters when no state validator is provided calls setState when the setters are called, no matter what the value is 3`] = `
-{
-  "bar": "invalid bar",
-  "foo": "invalid foo",
-}
-`;
-
-exports[`createContextSetters when no state validator is provided calls setState when the setters are called, no matter what the value is 4`] = `
-[
-  [
-    [Function],
-  ],
-  [
-    [Function],
-  ],
-]
-`;
-
-exports[`createContextSetters when state validator is provided calls setState when the setters are called & the validator passes 1`] = `
+exports[`helpers createContextSetters when no state validator is provided calls setState when the setters are called, no matter what the value is 2`] = `
 {
   "bar": "bar",
   "foo": "foo",
 }
 `;
 
-exports[`createContextSetters when state validator is provided calls setState when the setters are called & the validator passes 2`] = `
+exports[`helpers createContextSetters when no state validator is provided calls setState when the setters are called, no matter what the value is 3`] = `
 {
   "bar": "bar",
-  "foo": "new foo",
-}
-`;
-
-exports[`createContextSetters when state validator is provided calls setState when the setters are called & the validator passes 3`] = `
-{
-  "bar": "new bar",
-  "foo": "new foo",
+  "foo": "foo",
 }
 `;
 
-exports[`createContextSetters when state validator is provided calls setState when the setters are called & the validator passes 4`] = `
+exports[`helpers createContextSetters when no state validator is provided calls setState when the setters are called, no matter what the value is 4`] = `
 [
   [
     [Function],
@@ -64,43 +32,9 @@ exports[`createContextSetters when state validator is provided calls setState wh
 ]
 `;
 
-exports[`createContextSetters when state validator is provided skips the update if the new value is the same as the previous one 1`] = `
+exports[`helpers createContextSetters when state validator is provided skips the update if the new value is the same as the previous one 1`] = `
 {
   "bar": "bar",
   "foo": "new foo",
 }
 `;
-
-exports[`createContextSetters when state validator is provided skips the update if the state validator doesn't pass 1`] = `
-{
-  "bar": "bar",
-  "foo": "foo",
-}
-`;
-
-exports[`createContextSetters when state validator is provided skips the update if the state validator doesn't pass 2`] = `
-{
-  "bar": "bar",
-  "foo": "foo",
-}
-`;
-
-exports[`createContextSetters when state validator is provided skips the update if the state validator doesn't pass 3`] = `
-{
-  "bar": "bar",
-  "foo": "foo",
-}
-`;
-
-exports[`createContextSetters when state validator is provided skips the update if the state validator doesn't pass 4`] = `
-[
-  [
-    "trying to invoke setFoo with invalid foo - but it was rejected by the state validator
-          skipping context update",
-  ],
-  [
-    "trying to invoke setBar with invalid bar - but it was rejected by the state validator
-          skipping context update",
-  ],
-]
-`;

package/reactUtils/createContext/__tests__/__snapshots__/provider.test.js.snap

@@ -1,32 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`createProvider creates a context Provider component 1`] = `
-<mockConstructor
-  value={
-    {
-      "context": "initialValue",
-      "otherContext": "otherValue",
-      "setContext": [Function],
-      "setOtherContext": [Function],
-    }
-  }
->
-  <MockChild
-    context="context"
-  />
-</mockConstructor>
-`;
-
-exports[`createProvider creates a context Provider component 2`] = `
-{
-  "children": <MockChild
-    context="context"
-  />,
-  "value": {
-    "context": "initialValue",
-    "otherContext": "otherValue",
-    "setContext": [Function],
-    "setOtherContext": [Function],
-  },
-}
+<View>
+  context
+</View>
 `;

package/reactUtils/createContext/__tests__/__snapshots__/withConsumer.test.js.snap

@@ -1,8 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`createConsumer creates a context consumer function 1`] = `
-<Child
-  context="foo"
-  setContext={[MockFunction]}
-/>
+<View>
+  foo
+</View>
 `;

package/reactUtils/createContext/__tests__/__snapshots__/withProvider.test.js.snap

@@ -1,7 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`withProvider decorates a component with the provider 1`] = `
-<Provider>
-  <Component />
-</Provider>
+<View>
+  <View>
+    <Text>
+      I am a Component
+    </Text>
+  </View>
+</View>
 `;

package/reactUtils/createContext/__tests__/helpers.test.js

@@ -1,7 +1,8 @@
 import * as React from "react";
-import { shallow } from "enzyme";
 import { View, Text } from "react-native";
 
+import { NOOP, getSetterName, createContextSetters } from "../helpers";
+
 function stateValidator({ property, value }) {
   return (
     (property === "foo" && value === "new foo") ||
@@ -9,150 +10,135 @@ function stateValidator({ property, value }) {
   );
 }
 
-const mockLogger = {
-  warning: jest.fn(),
-};
-
-jest.mock("../../logger", () => ({
-  reactUtilsLogger: {
-    addSubsystem: jest.fn(() => mockLogger),
-  },
-}));
-
-const { NOOP, getSetterName, createContextSetters } = require("../helpers");
-
-describe("NOOP", () => {
-  it("does nothing", () => {
-    expect(NOOP()).toBeUndefined();
+describe("helpers", () => {
+  describe("NOOP", () => {
+    it("does nothing", () => {
+      expect(NOOP()).toBeUndefined();
+    });
   });
-});
 
-describe("getSetterName", () => {
-  it("returns a setter name for the given property name", () => {
-    expect(getSetterName("fooBar")).toBe("setFooBar");
+  describe("getSetterName", () => {
+    it("returns a setter name for the given property name", () => {
+      expect(getSetterName("fooBar")).toBe("setFooBar");
+    });
   });
-});
-
-describe("createContextSetters", () => {
-  describe("when state validator is provided", () => {
-    class Component extends React.Component {
-      constructor(props) {
-        super(props);
-        this.state = { foo: "foo", bar: "bar" };
-        createContextSetters(["foo", "bar"], this, { stateValidator });
-      }
-
-      resetInitialState() {
-        this.setState({ foo: "foo", bar: "bar" });
-      }
 
-      render() {
-        return (
-          <View>
-            <Text>I am a component</Text>
-          </View>
-        );
+  describe("createContextSetters", () => {
+    describe("when state validator is provided", () => {
+      class ClassComponent {
+        constructor() {
+          this._state = { foo: "foo", bar: "bar" };
+          createContextSetters(["foo", "bar"], this, { stateValidator });
+        }
+
+        setState(newState) {
+          if (typeof newState === "function") {
+            this.state = newState(this.state);
+          } else {
+            this.state = { ...this.state, ...newState };
+          }
+        }
+
+        set state(val) {
+          this._state = val;
+        }
+
+        get state() {
+          return this._state;
+        }
+
+        getState() {
+          return this._state;
+        }
+
+        resetInitialState() {
+          this.setState({ foo: "foo", bar: "bar" });
+        }
+
+        render() {
+          return <View testID="test-view">{JSON.stringify(this.state)}</View>;
+        }
       }
-    }
 
-    const wrapper = shallow(<Component />);
-    const instance = wrapper.instance();
-    const setStateSpy = jest.spyOn(instance, "setState");
+      let instance;
 
-    beforeEach(() => {
-      instance.resetInitialState();
-      setStateSpy.mockClear();
-      mockLogger.warning.mockClear();
-    });
-
-    it("adds all properties and setters to the component", () => {
-      expect(instance).toHaveProperty("setFoo");
-      expect(instance.setFoo).toBeFunction();
-      expect(instance).toHaveProperty("setBar");
-      expect(instance.setBar).toBeFunction();
-    });
+      beforeEach(() => {
+        instance = new ClassComponent();
+      });
 
-    it("calls setState when the setters are called & the validator passes", () => {
-      expect(instance.state).toMatchSnapshot();
+      it("calls setState when the setters are called & the validator passes", () => {
+        expect(instance.state.foo).toEqual("foo");
+        expect(instance.state.bar).toEqual("bar");
 
-      instance.setFoo("new foo");
-      expect(instance.state).toMatchSnapshot();
-
-      instance.setBar("new bar");
-      expect(instance.state).toMatchSnapshot();
-
-      expect(setStateSpy).toHaveBeenCalledTimes(2);
-      expect(setStateSpy.mock.calls).toMatchSnapshot();
-      expect(mockLogger.warning).not.toHaveBeenCalled();
-    });
+        instance.setFoo("new foo");
+        expect(instance.state.foo).toEqual("new foo");
 
-    it("skips the update if the state validator doesn't pass", () => {
-      expect(instance.state).toMatchSnapshot();
+        instance.setBar("new bar");
+        expect(instance.state.bar).toEqual("new bar");
+      });
 
-      instance.setFoo("invalid foo");
-      expect(instance.state).toMatchSnapshot();
+      it("skips the update if the state validator doesn't pass", () => {
+        expect(instance.state.foo).toEqual("foo");
+        expect(instance.state.bar).toEqual("bar");
 
-      instance.setBar("invalid bar");
-      expect(instance.state).toMatchSnapshot();
+        instance.setFoo("invalid foo");
+        expect(instance.state.foo).toEqual("foo");
 
-      expect(setStateSpy).not.toHaveBeenCalled();
-      expect(mockLogger.warning).toHaveBeenCalledTimes(2);
-      expect(mockLogger.warning.mock.calls).toMatchSnapshot();
-    });
+        instance.setBar("invalid bar");
+        expect(instance.state.bar).toEqual("bar");
+      });
 
-    it("skips the update if the new value is the same as the previous one", () => {
-      instance.setFoo("new foo");
-      instance.setFoo("new foo");
-      expect(instance.state).toMatchSnapshot();
-      expect(setStateSpy).toHaveBeenCalledTimes(1);
+      it("skips the update if the new value is the same as the previous one", () => {
+        instance.setFoo("new foo");
+        instance.setFoo("new foo");
+        expect(instance.state).toMatchSnapshot();
+      });
     });
-  });
-
-  describe("when no state validator is provided", () => {
-    class Component extends React.Component {
-      constructor(props) {
-        super(props);
-        this.state = { foo: "foo", bar: "bar" };
-        createContextSetters(["foo", "bar"], this);
-      }
 
-      render() {
-        return (
-          <View>
-            <Text>I am a component </Text>
-          </View>
-        );
+    describe("when no state validator is provided", () => {
+      class Component extends React.Component {
+        constructor(props) {
+          super(props);
+          this.state = { foo: "foo", bar: "bar" };
+          createContextSetters(["foo", "bar"], this);
+        }
+
+        render() {
+          return (
+            <View>
+              <Text>I am a component </Text>
+            </View>
+          );
+        }
       }
-    }
 
-    const wrapper = shallow(<Component />);
-    const instance = wrapper.instance();
-    const setStateSpy = jest.spyOn(instance, "setState");
+      // const wrapper = new Component();
+      const instance = new Component();
+      const setStateSpy = jest.spyOn(instance, "setState");
 
-    afterEach(() => {
-      setStateSpy.mockClear();
-      mockLogger.warning.mockClear();
-    });
+      afterEach(() => {
+        setStateSpy.mockClear();
+      });
 
-    it("adds all properties and setters to the component", () => {
-      expect(instance).toHaveProperty("setFoo");
-      expect(instance.setFoo).toBeFunction();
-      expect(instance).toHaveProperty("setBar");
-      expect(instance.setBar).toBeFunction();
-    });
+      it("adds all properties and setters to the component", () => {
+        expect(instance).toHaveProperty("setFoo");
+        expect(instance.setFoo).toBeFunction();
+        expect(instance).toHaveProperty("setBar");
+        expect(instance.setBar).toBeFunction();
+      });
 
-    it("calls setState when the setters are called, no matter what the value is", () => {
-      expect(instance.state).toMatchSnapshot();
+      it("calls setState when the setters are called, no matter what the value is", () => {
+        expect(instance.state).toMatchSnapshot();
 
-      instance.setFoo("invalid foo");
-      expect(instance.state).toMatchSnapshot();
+        instance.setFoo("invalid foo");
+        expect(instance.state).toMatchSnapshot();
 
-      instance.setBar("invalid bar");
-      expect(instance.state).toMatchSnapshot();
+        instance.setBar("invalid bar");
+        expect(instance.state).toMatchSnapshot();
 
-      expect(setStateSpy).toHaveBeenCalledTimes(2);
-      expect(setStateSpy.mock.calls).toMatchSnapshot();
-      expect(mockLogger.warning).not.toHaveBeenCalled();
+        expect(setStateSpy).toHaveBeenCalledTimes(2);
+        expect(setStateSpy.mock.calls).toMatchSnapshot();
+      });
     });
   });
 });

package/reactUtils/createContext/__tests__/provider.test.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types */
 import * as React from "react";
-import { shallow } from "enzyme";
-import toJson from "enzyme-to-json";
+import { render } from "@testing-library/react-native";
+
 import { View } from "react-native";
 
 import { createProvider } from "../provider";
@@ -29,14 +29,12 @@ describe("createProvider", () => {
   it("creates a context Provider component", () => {
     const MockChild = (props) => <View>{props.context}</View>;
 
-    const wrapper = shallow(
+    const wrapper = render(
       <Provider>
         <MockChild context={"context"} />
       </Provider>
     );
 
-    expect(toJson(wrapper)).toMatchSnapshot();
-
-    expect(wrapper.find(ReactContext.Provider).props()).toMatchSnapshot();
+    expect(wrapper.toJSON()).toMatchSnapshot();
   });
 });

package/reactUtils/createContext/__tests__/withConsumer.test.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types */
 import * as React from "react";
-import { shallow } from "enzyme";
-import toJson from "enzyme-to-json";
+import { render } from "@testing-library/react-native";
+
 import { View } from "react-native";
 
 import { createWithConsumerDecorator } from "../withConsumer";
@@ -11,21 +11,21 @@ describe("createConsumer", () => {
   const { Consumer } = ReactContext;
   const withConsumer = createWithConsumerDecorator(Consumer);
 
-  it("returns a function", () => {
-    expect(withConsumer).toBeFunction();
-  });
-
   it("creates a context consumer function", () => {
-    const Child = (props) => <View>{props.context}</View>;
-    const DecoratedChild = withConsumer(Child);
+    expect(withConsumer).toBeFunction();
     const newContextValue = "newValue";
 
-    const wrapper = shallow(<DecoratedChild />);
+    const Child = (props) => {
+      props.setContext(newContextValue);
+
+      return <View>{props.context}</View>;
+    };
+
+    const DecoratedChild = withConsumer(Child);
 
-    const childWrapper = wrapper.dive();
+    const wrapper = render(<DecoratedChild />);
 
-    expect(toJson(childWrapper)).toMatchSnapshot();
-    childWrapper.props().setContext(newContextValue);
+    expect(wrapper.toJSON()).toMatchSnapshot();
 
     expect(mockContextData.setContext).toHaveBeenCalledWith(newContextValue);
   });

package/reactUtils/createContext/__tests__/withProvider.test.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types */
 import * as React from "react";
-import { shallow } from "enzyme";
-import toJson from "enzyme-to-json";
+import { render } from "@testing-library/react-native";
+
 import { View, Text } from "react-native";
 
 import { createWithProviderDecorator } from "../withProvider";
@@ -19,8 +19,8 @@ describe("withProvider", () => {
 
     const DecoratedComponent = withProvider(Component);
 
-    const wrapper = shallow(<DecoratedComponent />);
+    const wrapper = render(<DecoratedComponent />);
 
-    expect(toJson(wrapper)).toMatchSnapshot();
+    expect(wrapper.toJSON()).toMatchSnapshot();
   });
 });

package/testUtils/index.tsx

@@ -15,16 +15,6 @@ import { ThemeContext } from "../theme";
 
 export { getByTestId } from "./getByTestId";
 
-/**
- * Function to be used in tandem with enzyme findWhere(node => node.prop('testID') === 'yourID')
- * Example:
- * wrapper.findWhere(testIDEquals('yourID'))
- * @param {*} testId
- * @return boolean
- */
-export const testIDEquals = (testId: any): boolean =>
-  R.compose(R.equals(testId), R.invoker(1, "prop")("testID"));
-
 /** Helper function for react-test-renderer, accepts type and renderer
  * * @param {*} type React Component type instance  or name of component
  * * @param {*} renderer renderer instance