@applicaster/zapp-react-native-ui-components 14.0.0-alpha.5114565431 → 14.0.0-alpha.5203410334

package/Components/Touchable/__tests__/touchable.test.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { View, TouchableOpacity } from "react-native";
-import { create, act } from "react-test-renderer";
+import { render } from "@testing-library/react-native";
 
 import { Touchable } from "..";
 
@@ -23,38 +23,31 @@ describe("<Touchable />", () => {
     });
 
     it("has accessible flag set to false", () => {
-      let wrapper;
+      const { toJSON, UNSAFE_getByType } = render(<Touchable {...props} />);
 
-      act(() => {
-        wrapper = create(<Touchable {...props} />);
-      });
-
-      const touchableWrapper = wrapper.root.findByType(TouchableOpacity);
-      expect(wrapper.toJSON()).toMatchSnapshot();
+      const touchableWrapper = UNSAFE_getByType(TouchableOpacity);
+      expect(toJSON()).toMatchSnapshot();
       expect(touchableWrapper.props).toHaveProperty("accessible", false);
     });
   });
 
   describe("when not running in automated tests environment", () => {
-    let wrapper;
-
-    act(() => {
-      wrapper = create(<Touchable {...props} />);
-    });
-
-    const touchableWrapper = wrapper.root.findByType(TouchableOpacity);
-
     beforeEach(props.onPress.mockClear);
 
     it("renders correctly", () => {
-      expect(wrapper.toJSON()).toMatchSnapshot();
+      const { toJSON } = render(<Touchable {...props} />);
+      expect(toJSON()).toMatchSnapshot();
     });
 
     it("has accessible flag set to true", () => {
+      const { UNSAFE_getByType } = render(<Touchable {...props} />);
+      const touchableWrapper = UNSAFE_getByType(TouchableOpacity);
       expect(touchableWrapper.props).toHaveProperty("accessible", true);
     });
 
     it("assigns testID and accessibilityLabel props correctly", () => {
+      const { UNSAFE_getByType } = render(<Touchable {...props} />);
+      const touchableWrapper = UNSAFE_getByType(TouchableOpacity);
       expect(touchableWrapper.props).toHaveProperty("testID", props.testID);
 
       expect(touchableWrapper.props).toHaveProperty(
@@ -64,6 +57,8 @@ describe("<Touchable />", () => {
     });
 
     it("calls the onPress event when it is pressed", () => {
+      const { UNSAFE_getByType } = render(<Touchable {...props} />);
+      const touchableWrapper = UNSAFE_getByType(TouchableOpacity);
       touchableWrapper.props.onPress();
       expect(props.onPress).toHaveBeenCalledTimes(1);
     });

package/Components/VideoModal/ModalAnimation/AnimatedScrollModal.tsx

@@ -1,9 +1,8 @@
 import React from "react";
-import { Animated, Platform, StyleSheet, View } from "react-native";
+import { Animated, StyleSheet, View } from "react-native";
 
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
 import {
-  GestureHandlerRootView,
   NativeViewGestureHandler,
   PanGestureHandler,
   State,
@@ -357,15 +356,10 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
     };
   }, [playerAnimationState, isAudioItem, isMinimizedModal]);
 
-  const Wrapper = React.useMemo(
-    () => (Platform.OS === "android" ? GestureHandlerRootView : View),
-    []
-  );
-
   const scrollEnabled = isMaximizedModal && isNotMinimizeMaximazeAnimation;
 
   return (
-    <Wrapper style={generalStyles.container}>
+    <View style={generalStyles.container}>
       <TapGestureHandler
         maxDurationMs={100000}
         ref={tapHandlerRef}
@@ -405,7 +399,7 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
           </PanGestureHandler>
         </View>
       </TapGestureHandler>
-    </Wrapper>
+    </View>
   );
 };
 

package/Components/VideoModal/__tests__/PlayerDetails.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import renderer from "react-test-renderer";
+import { render } from "@testing-library/react-native";
 
 const props = {
   entry: {},
@@ -42,16 +42,16 @@ const { PlayerDetails } = require("../PlayerDetails");
 
 describe("PlayerDetails", () => {
   it("renders properly", () => {
-    const element = renderer.create(<PlayerDetails {...props} />);
+    const { toJSON } = render(<PlayerDetails {...props} />);
 
-    expect(element).toMatchSnapshot();
+    expect(toJSON()).toMatchSnapshot();
   });
 
   it("renders properly on tablet in landscape orientation", () => {
-    const element = renderer.create(
+    const { toJSON } = render(
       <PlayerDetails {...props} isTabletLandscape={true} />
     );
 
-    expect(element).toMatchSnapshot();
+    expect(toJSON()).toMatchSnapshot();
   });
 });

package/Contexts/ConfigutaionContext/__tests__/ConfigurationProvider.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import TestRenderer from "react-test-renderer";
+import { render } from "@testing-library/react-native";
 import { View } from "react-native";
 import { useConfiguration } from "@applicaster/zapp-react-native-utils/reactHooks/configuration";
 
@@ -14,12 +14,12 @@ describe("withConfigurationProvider", () => {
   };
 
   it("provides configuration to children", () => {
-    const wrapper = TestRenderer.create(
+    const { toJSON } = render(
       <ConfigurationProvider configuration={{ target: "foobar" }}>
         <TestComponent />
       </ConfigurationProvider>
     );
 
-    expect(wrapper.toJSON()).toMatchSnapshot();
+    expect(toJSON()).toMatchSnapshot();
   });
 });

package/Contexts/ScreenContext/index.tsx

@@ -13,7 +13,8 @@ import {
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { useModalNavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ModalNavigationContext";
 import { useNestedNavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/NestedNavigationContext";
-import { create, StoreApi, UseBoundStore } from "zustand";
+import { create } from "zustand";
+import { subscribeWithSelector } from "zustand/middleware";
 import { useShallow } from "zustand/react/shallow";
 import { Animated } from "react-native";
 
@@ -39,11 +40,26 @@ interface NavBarState {
   setSummary: (subtitle: string) => void;
 }
 
-type ScreenContextType = {
-  _navBarStore: UseBoundStore<StoreApi<NavBarStoreState>>;
-  navBar: NavBarState;
-  legacyFormatScreenData: LegacyNavigationScreenData | null;
-};
+const createStateStore = () =>
+  create(
+    subscribeWithSelector<ScreenStateStore>((set) => ({
+      data: {},
+      setValue: (key, value) =>
+        set((state) => ({
+          data: {
+            ...state.data,
+            [key]: value,
+          },
+        })),
+      removeValue: (key) =>
+        set((state) => {
+          const newData = { ...state.data };
+          delete newData[key];
+
+          return { data: newData };
+        }),
+    }))
+  );
 
 const createStore = () =>
   create<NavBarStoreState>((set) => ({
@@ -65,7 +81,15 @@ const createStore = () =>
     },
   }));
 
+type ScreenContextType = {
+  _navBarStore: ReturnType<typeof createStore>;
+  _stateStore: ReturnType<typeof createStateStore>;
+  navBar: NavBarState;
+  legacyFormatScreenData: LegacyNavigationScreenData | null;
+};
+
 export const ScreenContext = createContext<ScreenContextType>({
+  _stateStore: createStateStore(),
   _navBarStore: createStore(),
   navBar: {
     visible: true,
@@ -103,6 +127,21 @@ export function ScreenContextProvider({
     null
   );
 
+  const screenStateRef = useRef<null | ReturnType<typeof createStateStore>>(
+    null
+  );
+
+  const getScreenState = useCallback(() => {
+    if (screenStateRef.current !== null) {
+      return screenStateRef.current;
+    }
+
+    const stateStore = createStateStore();
+    screenStateRef.current = stateStore;
+
+    return stateStore;
+  }, []);
+
   const getScreenNavBarState = useCallback(() => {
     if (screenNavBarStateRef.current !== null) {
       return screenNavBarStateRef.current;
@@ -163,6 +202,7 @@ export function ScreenContextProvider({
       value={useMemo(
         () => ({
           _navBarStore: getScreenNavBarState(),
+          _stateStore: getScreenState(),
           navBar: navBarState,
           legacyFormatScreenData: routeScreenData,
         }),

package/Decorators/ConfigurationWrapper/__tests__/withConfigurationProvider.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import TestRenderer from "react-test-renderer";
+import { render } from "@testing-library/react-native";
 import { useConfiguration } from "@applicaster/zapp-react-native-utils/reactHooks/configuration";
 import { View } from "react-native";
 import { withConfigurationProvider } from "@applicaster/zapp-react-native-ui-components/Decorators/ConfigurationWrapper";
@@ -15,12 +15,12 @@ describe("withConfigurationProvider", () => {
   it("correctly passes all the configuration keys child component", () => {
     const Component = withConfigurationProvider(TestComponent);
 
-    const wrapper = TestRenderer.create(
+    const { toJSON } = render(
       <Component
         screenData={{ styles: {}, general: {}, data: { source: "test" } }}
       />
     );
 
-    expect(wrapper.toJSON()).toMatchSnapshot();
+    expect(toJSON()).toMatchSnapshot();
   });
 });

package/Decorators/RiverFeedLoader/__tests__/__snapshots__/riverFeedLoader.test.tsx.snap

@@ -1,214 +1,226 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`WithRiverFeedLoader renders correctly 1`] = `
-<View
-  dispatch={[MockFunction]}
-  river={
-    {
-      "id": "A1234",
-      "ui_components": [
-        {
-          "data": {
-            "source": "http://datasource0",
-          },
-          "rules": {
-            "clear_cache_on_reload": false,
-          },
-        },
-        {
-          "data": {
-            "source": "http://datasource1",
-          },
-          "rules": {
-            "clear_cache_on_reload": false,
-          },
-        },
-        {
-          "data": {
-            "source": "http://datasource2",
-          },
-          "rules": {
-            "clear_cache_on_reload": false,
-          },
-        },
-        {
-          "data": {
-            "source": "http://datasource3",
-          },
-          "rules": {
-            "clear_cache_on_reload": false,
-          },
-        },
-        {
-          "data": {
-            "source": "http://datasource4",
-          },
-          "rules": {
-            "clear_cache_on_reload": false,
-          },
-        },
-        {
-          "data": {
-            "source": "http://datasource5",
-          },
-          "rules": {
-            "clear_cache_on_reload": false,
-          },
-        },
-        {
-          "data": {
-            "source": "http://datasource6",
-          },
-          "rules": {
-            "clear_cache_on_reload": false,
-          },
-        },
-        {
-          "data": {
-            "source": "http://datasource7",
-          },
-          "rules": {
-            "clear_cache_on_reload": false,
-          },
-        },
-        {
-          "data": {
-            "source": "http://datasource8",
-          },
-          "rules": {
-            "clear_cache_on_reload": false,
-          },
-        },
-        {
-          "data": {
-            "source": "http://datasource9",
-          },
-          "rules": {
-            "clear_cache_on_reload": false,
-          },
-        },
-        {
-          "data": {
-            "source": "http://datasource10",
-          },
-          "rules": {
-            "clear_cache_on_reload": false,
-          },
-        },
-        {
-          "data": {
-            "source": "http://datasource11",
-          },
-          "rules": {
-            "clear_cache_on_reload": false,
-          },
-        },
-        {
-          "data": {
-            "source": "http://datasource12",
-          },
-          "rules": {
-            "clear_cache_on_reload": true,
-          },
-        },
-        {
-          "data": {
-            "source": "http://datasource13",
-          },
-          "rules": {
-            "clear_cache_on_reload": false,
-          },
-        },
-        {
-          "data": {
-            "source": "http://datasource14",
-          },
-          "rules": {
-            "clear_cache_on_reload": false,
-          },
-        },
-        {
-          "data": {
-            "source": "http://datasource15",
-          },
-          "rules": {
-            "clear_cache_on_reload": false,
-          },
-        },
-        {
-          "data": {
-            "source": "http://datasource16",
-          },
-          "rules": {
-            "clear_cache_on_reload": false,
-          },
-        },
-        {
-          "data": {
-            "source": "http://datasource17",
-          },
-          "rules": {
-            "clear_cache_on_reload": false,
-          },
-        },
-        {
-          "data": {
-            "source": "http://datasource18",
-          },
-          "rules": {
-            "clear_cache_on_reload": false,
-          },
-        },
-        {
-          "data": {
-            "source": "http://datasource19",
-          },
-          "rules": {
-            "clear_cache_on_reload": false,
-          },
-        },
-        {
-          "data": {
-            "source": "http://datasource20",
-          },
-          "rules": {
-            "clear_cache_on_reload": true,
-          },
-        },
-        {
-          "data": {
-            "source": "http://datasource21",
-          },
-          "rules": {
-            "clear_cache_on_reload": false,
-          },
-        },
-        {
-          "data": {
-            "source": "http://datasource22",
-          },
-          "rules": {
-            "clear_cache_on_reload": false,
-          },
-        },
-        {
-          "data": {
-            "source": "http://datasource23",
-          },
-          "rules": {
-            "clear_cache_on_reload": false,
-          },
-        },
-        {
-          "data": {
-            "source": "http://datasource24",
-          },
-          "rules": {
-            "clear_cache_on_reload": false,
-          },
-        },
-      ],
-    }
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
   }
-/>
+>
+  <View
+    dispatch={[MockFunction]}
+    river={
+      {
+        "id": "A1234",
+        "ui_components": [
+          {
+            "data": {
+              "source": "http://datasource0",
+            },
+            "rules": {
+              "clear_cache_on_reload": false,
+            },
+          },
+          {
+            "data": {
+              "source": "http://datasource1",
+            },
+            "rules": {
+              "clear_cache_on_reload": false,
+            },
+          },
+          {
+            "data": {
+              "source": "http://datasource2",
+            },
+            "rules": {
+              "clear_cache_on_reload": false,
+            },
+          },
+          {
+            "data": {
+              "source": "http://datasource3",
+            },
+            "rules": {
+              "clear_cache_on_reload": false,
+            },
+          },
+          {
+            "data": {
+              "source": "http://datasource4",
+            },
+            "rules": {
+              "clear_cache_on_reload": false,
+            },
+          },
+          {
+            "data": {
+              "source": "http://datasource5",
+            },
+            "rules": {
+              "clear_cache_on_reload": false,
+            },
+          },
+          {
+            "data": {
+              "source": "http://datasource6",
+            },
+            "rules": {
+              "clear_cache_on_reload": false,
+            },
+          },
+          {
+            "data": {
+              "source": "http://datasource7",
+            },
+            "rules": {
+              "clear_cache_on_reload": false,
+            },
+          },
+          {
+            "data": {
+              "source": "http://datasource8",
+            },
+            "rules": {
+              "clear_cache_on_reload": false,
+            },
+          },
+          {
+            "data": {
+              "source": "http://datasource9",
+            },
+            "rules": {
+              "clear_cache_on_reload": false,
+            },
+          },
+          {
+            "data": {
+              "source": "http://datasource10",
+            },
+            "rules": {
+              "clear_cache_on_reload": false,
+            },
+          },
+          {
+            "data": {
+              "source": "http://datasource11",
+            },
+            "rules": {
+              "clear_cache_on_reload": false,
+            },
+          },
+          {
+            "data": {
+              "source": "http://datasource12",
+            },
+            "rules": {
+              "clear_cache_on_reload": true,
+            },
+          },
+          {
+            "data": {
+              "source": "http://datasource13",
+            },
+            "rules": {
+              "clear_cache_on_reload": false,
+            },
+          },
+          {
+            "data": {
+              "source": "http://datasource14",
+            },
+            "rules": {
+              "clear_cache_on_reload": false,
+            },
+          },
+          {
+            "data": {
+              "source": "http://datasource15",
+            },
+            "rules": {
+              "clear_cache_on_reload": false,
+            },
+          },
+          {
+            "data": {
+              "source": "http://datasource16",
+            },
+            "rules": {
+              "clear_cache_on_reload": false,
+            },
+          },
+          {
+            "data": {
+              "source": "http://datasource17",
+            },
+            "rules": {
+              "clear_cache_on_reload": false,
+            },
+          },
+          {
+            "data": {
+              "source": "http://datasource18",
+            },
+            "rules": {
+              "clear_cache_on_reload": false,
+            },
+          },
+          {
+            "data": {
+              "source": "http://datasource19",
+            },
+            "rules": {
+              "clear_cache_on_reload": false,
+            },
+          },
+          {
+            "data": {
+              "source": "http://datasource20",
+            },
+            "rules": {
+              "clear_cache_on_reload": true,
+            },
+          },
+          {
+            "data": {
+              "source": "http://datasource21",
+            },
+            "rules": {
+              "clear_cache_on_reload": false,
+            },
+          },
+          {
+            "data": {
+              "source": "http://datasource22",
+            },
+            "rules": {
+              "clear_cache_on_reload": false,
+            },
+          },
+          {
+            "data": {
+              "source": "http://datasource23",
+            },
+            "rules": {
+              "clear_cache_on_reload": false,
+            },
+          },
+          {
+            "data": {
+              "source": "http://datasource24",
+            },
+            "rules": {
+              "clear_cache_on_reload": false,
+            },
+          },
+        ],
+      }
+    }
+  />
+</RNCSafeAreaProvider>
 `;