@applicaster/zapp-react-native-ui-components 12.0.0-alpha.7623722215 → 12.0.0-alpha.7754333813

package/Components/River/ComponentsMap/ComponentsMap.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as R from "ramda";
-import { View, FlatList, StyleSheet, Platform } from "react-native";
+import { View, StyleSheet, Platform, FlatList } from "react-native";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { RiverItem } from "../RiverItem";
 import { RiverFooter } from "../RiverFooter";
@@ -21,7 +21,8 @@ import {
 import { useScreenData } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenData";
 import { isLast } from "@applicaster/zapp-react-native-utils/arrayUtils";
 import { withComponentsMapProvider } from "@applicaster/zapp-react-native-ui-components/Decorators/ComponentsMapWrapper";
-import { useScreenScrollStore } from "@applicaster/zapp-react-native-utils/screenState";
+import { useScreenContextV2 } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
+import { useShallow } from "zustand/react/shallow";
 
 type Props = {
   feed: ZappFeed;
@@ -41,8 +42,10 @@ const styles = StyleSheet.create({
   },
 });
 
-const scrollIndicatorInsets = { right: 1 };
+const getNearestValue = (value, optionA, optionB) =>
+  Math.abs(value - optionA) < Math.abs(value - optionB) ? optionA : optionB;
 
+const scrollIndicatorInsets = { right: 1 };
 const keyExtractor = R.compose(String, R.prop("id"));
 
 function ComponentsMapComponent(props: Props) {
@@ -60,6 +63,7 @@ function ComponentsMapComponent(props: Props) {
     refreshingPipesV1,
   } = props;
 
+  const flatListRef = React.useRef<FlatList | null>(null);
   const screenConfig = useScreenConfiguration(riverId);
   const screenData = useScreenData(riverId);
   const pullToRefreshEnabled = screenData?.rules?.pull_to_refresh_enabled;
@@ -194,26 +198,81 @@ function ComponentsMapComponent(props: Props) {
     []
   );
 
-  const onScrollFlatList = React.useCallback(
-    ({ nativeEvent }, isScrollingDone = false) => {
-      const {
-        contentOffset: { y },
-      } = nativeEvent;
+  const navBarStore = useScreenContextV2()._navBarStore;
 
-      useScreenScrollStore.setState({
-        scrollingVelocity: isScrollingDone ? 0 : 1,
-        scrollPosition: y,
-      });
-    },
-    []
+  const scrollY = navBarStore(
+    useShallow(({ scrollYAnimated }) => scrollYAnimated)
   );
 
-  const onMomentumScrollEnd = React.useCallback(
-    ({ nativeEvent }) => {
-      onScrollFlatList({ nativeEvent }, true);
-    },
-    [onScrollFlatList]
-  );
+  const canMomentum = React.useRef(false);
+
+  const onScrollBeginDrag = React.useCallback(() => {
+    canMomentum.current = true;
+  }, []);
+
+  /* onMomentumScrollEnd: Handling snap to expanded/collapsed state ( for navbar ) */
+  const _onMomentumScrollEnd = React.useCallback(({ nativeEvent }) => {
+    if (!canMomentum.current) return;
+    canMomentum.current = false;
+
+    const { height: headerHeight, scrollState } = navBarStore.getState();
+
+    const offsetY = Math.max(0, nativeEvent.contentOffset.y);
+
+    if (
+      !(scrollState === 0 || scrollState === -headerHeight) &&
+      flatListRef.current
+    ) {
+      const offset =
+        getNearestValue(Math.round(scrollState), -headerHeight, 0) ===
+        -headerHeight
+          ? Math.round(offsetY + scrollState + headerHeight)
+          : Math.round(offsetY + scrollState);
+
+      flatListRef.current.scrollToOffset({
+        animated: true,
+        offset,
+      });
+    }
+  }, []);
+
+  /* onScrollEnd: Handling snap to expanded/collapsed state ( for navbar ) */
+  const _onScrollEndDrag = React.useCallback(({ nativeEvent }) => {
+    const { height: headerHeight, scrollState } = navBarStore.getState();
+
+    const offsetY = Math.max(0, nativeEvent.contentOffset.y);
+
+    if (
+      !(scrollState === 0 || scrollState === -headerHeight) &&
+      flatListRef.current &&
+      nativeEvent.velocity.y === 0
+    ) {
+      const offset =
+        getNearestValue(Math.round(scrollState), -headerHeight, 0) ===
+        -headerHeight
+          ? Math.round(offsetY + scrollState + headerHeight)
+          : Math.round(offsetY + scrollState);
+
+      flatListRef.current.scrollToOffset({
+        animated: true,
+        offset,
+      });
+    }
+  }, []);
+
+  const onScroll = React.useCallback((event) => {
+    const {
+      nativeEvent: {
+        contentOffset: { y },
+        layoutMeasurement: { height },
+        contentSize: { height: contentHeight },
+      },
+    } = event;
+
+    if (y >= 0 && y + height <= contentHeight) {
+      scrollY.setValue(y);
+    }
+  }, []);
 
   if (shouldShowLoadingError) {
     return <RiverError />;
@@ -230,6 +289,9 @@ function ComponentsMapComponent(props: Props) {
       >
         <ViewportTracker>
           <FlatList
+            ref={(ref) => {
+              flatListRef.current = ref;
+            }}
             // Fix for WebView rerender crashes on Android API 28+
             // https://github.com/react-native-webview/react-native-webview/issues/1915#issuecomment-964035468
             overScrollMode={Platform.OS === "android" ? "never" : "auto"}
@@ -249,8 +311,10 @@ function ComponentsMapComponent(props: Props) {
             }
             ListFooterComponent={renderFooter}
             refreshControl={refreshControl}
-            onScroll={onScrollFlatList}
-            onMomentumScrollEnd={onMomentumScrollEnd}
+            onScrollBeginDrag={onScrollBeginDrag}
+            onScroll={onScroll}
+            onMomentumScrollEnd={_onMomentumScrollEnd}
+            onScrollEndDrag={_onScrollEndDrag}
             scrollEventThrottle={16}
             {...scrollViewExtraProps}
           />

package/Components/River/RefreshControl.tsx

@@ -1,5 +1,9 @@
 import * as React from "react";
-import { RefreshControl as RNRefreshControl } from "react-native";
+import {
+  Platform,
+  RefreshControl as RNRefreshControl,
+  StyleSheet,
+} from "react-native";
 import * as R from "ramda";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { useLocalizedStrings } from "@applicaster/zapp-react-native-utils/localizationUtils";
@@ -8,10 +12,30 @@ import { useSendAnalyticsEventWithFunction } from "@applicaster/zapp-react-nativ
 import { useCurrentScreenData } from "@applicaster/zapp-react-native-utils/reactHooks/screen";
 import { loadPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
 import { useDispatch } from "react-redux";
+import { useShallow } from "zustand/react/shallow";
+import { useScreenContextV2 } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 const BRIGHTNESS_THRESHOLD = 160;
 const ABOVE_DEFAULT_COLOR = "gray";
 const BELOW_DEFAULT_COLOR = "white";
+const BASE_INDICATOR_HEIGHT = 40;
+const BASE_INDICATOR_OFFSET = 16;
+
+/** Return spacing required to position indicator below the navbar bottom line (Android only) */
+const getRefreshControlOffset = () => {
+  return Platform.OS === "ios"
+    ? 0
+    : BASE_INDICATOR_HEIGHT + BASE_INDICATOR_OFFSET;
+};
+
+const styles = StyleSheet.create({
+  // eslint-disable-next-line react-native/no-color-literals
+  control: {
+    zIndex: 1,
+    backgroundColor: "transparent",
+  },
+});
 
 const getBrightness = (RGBcolor) => {
   const RGBvalues = RGBcolor.substring(
@@ -91,6 +115,34 @@ export const usePullToRefresh = (
   };
 };
 
+/** Returns the offset for the progress view of the RefreshControl component
+ *  based on navbar content position */
+export const useGetProgressViewOffset = () => {
+  const { _navBarStore } = useScreenContextV2();
+  const { top } = useSafeAreaInsets();
+
+  const offset = getRefreshControlOffset();
+
+  const { height, contentPosition } = _navBarStore(
+    useShallow(({ contentPosition, height }) => ({ contentPosition, height }))
+  );
+
+  if (height === 0) {
+    return offset;
+  }
+
+  switch (contentPosition) {
+    case "on_bottom_status_bar":
+      // navbar height
+      return offset + height - top;
+    case "on_top_screen":
+      // navbar height + status bar height
+      return offset + height;
+    default:
+      return offset;
+  }
+};
+
 export function RefreshControl(props: {
   pullToRefreshPipesV1RefreshingStateUpdater?: (refreshing: boolean) => void;
   refreshingPipesV1?: boolean;
@@ -211,6 +263,7 @@ export function RefreshControl(props: {
       refreshing={refreshing}
       onRefresh={onRefreshHandler}
       colors={[preparedIndicatorColor]}
+      progressViewOffset={useGetProgressViewOffset()}
       progressBackgroundColor={preparedIndicatorBackgroundColor}
       // @ts-ignore in RN68 this `size` became string
       size={indicatorSize}
@@ -222,6 +275,7 @@ export function RefreshControl(props: {
           : null
       }
       titleColor={preparedTitleUnderIndicatorColor}
+      style={styles.control}
     />
   );
 }

package/Components/River/TV/River.tsx

@@ -106,7 +106,8 @@ export const River = (props: Props) => {
         navigationPluginData?.rules?.focus_on_content
       ) &&
       river &&
-      river.type !== "general_content"
+      river.type !== "general_content" &&
+      river.type !== "tabs_screen" // Tabs screen is kind of general content
     ) {
       const groupId = R.pathOr("river", ["groupId"], componentsMapExtraProps);
 

package/Components/Screen/__tests__/__snapshots__/Screen.test.tsx.snap

@@ -11,7 +11,9 @@ exports[`<Screen Component /> when the navbar should be hidden renders correctly
   }
 >
   <View
+    hasMenu={false}
     id="/river/testId"
+    pathname="/river/testId"
     selected="testId"
     testID="navBar"
     title=""
@@ -41,7 +43,9 @@ exports[`<Screen Component /> when the navbar should show renders correctly 1`]
   }
 >
   <View
+    hasMenu={false}
     id="/river/testId"
+    pathname="/river/testId"
     selected="testId"
     testID="navBar"
     title=""

package/Components/Screen/index.tsx

@@ -6,7 +6,10 @@ import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { getComponentModule } from "@applicaster/zapp-react-native-utils/pluginUtils";
-import { getNavigationPropsV2 } from "@applicaster/zapp-react-native-utils/navigationUtils";
+import {
+  getNavigationPropsV2,
+  resolveNavigationPlugin,
+} from "@applicaster/zapp-react-native-utils/navigationUtils";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import {
   useDimensions,
@@ -52,11 +55,11 @@ function isValidColor(string) {
 }
 
 type Props = {
-  setToggleMenu: () => void;
-  setCloseMenu: () => void;
+  pathname: unknown;
+  screenData: unknown;
 };
 
-export function Screen({ setToggleMenu, setCloseMenu }: Props) {
+export function Screen(_props: Props) {
   const theme = useTheme<BaseThemePropertiesMobile>();
   const navigation = useNavigation();
   const { plugins } = usePickFromState(["plugins"]);
@@ -70,26 +73,38 @@ export function Screen({ setToggleMenu, setCloseMenu }: Props) {
     fullDimensions: true,
   });
 
-  const routeData = useRoute();
+  const { screenData, pathname } = useRoute();
 
   const currentRiver = useScreenData(
-    getScreenId(routeData.screenData, navigation.activeRiver)
+    getScreenId(screenData, navigation.activeRiver)
   );
 
   const { title } = useNavbarState();
 
-  const navBarProps = React.useMemo(
-    () => ({
-      ...getNavigationPropsV2({
-        currentRiver,
-        title,
-        category: "nav_bar",
-      }),
-      setToggleMenu,
-      setCloseMenu,
-    }),
-    [currentRiver, setCloseMenu, setToggleMenu]
-  );
+  const hasMenu =
+    resolveNavigationPlugin({
+      category: "menu",
+      navigations: currentRiver.navigations,
+      plugins,
+    })?.identifier === "quick_brick_side_menu";
+
+  const navBarProps = React.useMemo<MobileNavBarPluginProps | null>(() => {
+    const props = getNavigationPropsV2({
+      currentRiver,
+      title,
+      category: "nav_bar",
+    });
+
+    if (props) {
+      return {
+        ...props,
+        id: pathname,
+        pathname: pathname,
+      };
+    }
+
+    return null;
+  }, [currentRiver, pathname]);
 
   const NavBar = React.useMemo(
     () =>
@@ -97,12 +112,10 @@ export function Screen({ setToggleMenu, setCloseMenu }: Props) {
         "nav_bar",
         currentRiver,
         plugins
-      ) as React.ComponentType<MobileNavBarPluginProps>,
+      ) as React.ComponentType<MobileNavBarPluginProps & { hasMenu: boolean }>,
     []
   );
 
-  const { screenData, pathname } = routeData;
-
   const offlinePlugin = getComponentModule({
     plugins,
     components: {},
@@ -133,9 +146,7 @@ export function Screen({ setToggleMenu, setCloseMenu }: Props) {
   return (
     <ScreenContextProvider pathname={pathname}>
       <View style={style}>
-        <NavBar
-          {...{ ...(navBarProps as MobileNavBarPluginProps), id: pathname }}
-        />
+        {navBarProps && <NavBar {...navBarProps} hasMenu={hasMenu} />}
 
         <OfflineFallbackScreen screenData={targetScreenData}>
           {/* @TODO RouteManager doesn't use props, can they be removed ?  */}

package/Components/VideoLive/__tests__/__snapshots__/PlayerLiveImageComponent.test.tsx.snap

@@ -30,11 +30,6 @@ exports[`PlayerLiveImageComponent should render correctly with default props 1`]
       playerId="player1"
       resizeMode="cover"
       screenConfig={Object {}}
-      source={
-        Object {
-          "uri": "",
-        }
-      }
       style={Object {}}
     />
   </View>

package/Components/VideoModal/ModalAnimation/AnimatedScrollModal.tsx

@@ -9,6 +9,8 @@ import {
   TapGestureHandler,
   GestureHandlerRootView,
 } from "react-native-gesture-handler";
+
+import { PlayerContainerContext } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainerContext";
 import {
   useModalAnimationContext,
   PlayerAnimationStateEnum,
@@ -58,6 +60,8 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
     setLastSnap,
   } = useModalAnimationContext();
 
+  const { isLanguageOverlayVisible } = React.useContext(PlayerContainerContext);
+
   const { maximiseVideoModal, minimiseVideoModal, videoModalState } =
     useNavigation();
 
@@ -69,6 +73,11 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
     playerAnimationState !== PlayerAnimationStateEnum.minimize &&
     playerAnimationState !== PlayerAnimationStateEnum.maximaze;
 
+  const isEnablePanGesture =
+    !isLanguageOverlayVisible &&
+    isNotMinimizeMaximazeAnimation &&
+    (isMaximazedModal || isMinimizedModal);
+
   const isAudioItem = React.useMemo(
     () =>
       videoModalState.item?.content?.type?.includes?.("audio") ||
@@ -290,15 +299,13 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
       >
         <View pointerEvents="box-none">
           <PanGestureHandler
-            enabled={
-              (isMaximazedModal || isMinimizedModal) &&
-              isNotMinimizeMaximazeAnimation
-            }
+            enabled={isEnablePanGesture}
             ref={panHandlerRef}
             simultaneousHandlers={[scrollRef, tapHandlerRef]}
             shouldCancelWhenOutside={isMaximazedModal}
             onGestureEvent={onGestureEvent}
             onHandlerStateChange={onHandlerStateChange}
+            activeOffsetY={[-5, 5]}
           >
             <Animated.View>
               <NativeViewGestureHandler

package/Components/VideoModal/ModalAnimation/AnimatedVideoPlayerComponent.tsx

@@ -3,6 +3,8 @@ import { Animated, StyleSheet } from "react-native";
 
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { PanGestureHandler, State } from "react-native-gesture-handler";
+
+import { PlayerContainerContext } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainerContext";
 import {
   useModalAnimationContext,
   PlayerAnimationStateEnum,
@@ -35,9 +37,14 @@ export const AnimatedVideoPlayer = ({ children }: Props) => {
   } = useModalAnimationContext();
 
   const { videoModalState } = useNavigation();
+  const { isLanguageOverlayVisible } = React.useContext(PlayerContainerContext);
+
   const isMaximazedModal = videoModalState.mode === "MAXIMIZED";
   const isMinimizedModal = videoModalState.mode === "MINIMIZED";
 
+  const isEnablePanGesture =
+    !isLanguageOverlayVisible && (isMaximazedModal || isMinimizedModal);
+
   const onGestureEvent = Animated.event(
     [{ nativeEvent: { translationY: dragVideoPlayerY } }],
     { useNativeDriver: true }
@@ -53,7 +60,7 @@ export const AnimatedVideoPlayer = ({ children }: Props) => {
       if (videoModalState.mode === "MAXIMIZED") {
         if (translationY > 0) {
           const endOffsetY =
-            lastSnap + preparedTranslationY + dragToss * velocityY + 150;
+            lastSnap + preparedTranslationY + dragToss * velocityY + 200;
 
           let destSnapPoint = modalSnapPoints[0];
 
@@ -127,7 +134,7 @@ export const AnimatedVideoPlayer = ({ children }: Props) => {
 
   return (
     <PanGestureHandler
-      enabled={isMaximazedModal || isMinimizedModal}
+      enabled={isEnablePanGesture}
       shouldCancelWhenOutside={isMaximazedModal}
       onGestureEvent={onGestureEvent}
       onHandlerStateChange={onHandlerStateChange}

package/Components/VideoModal/ModalAnimation/ModalAnimationContext.tsx

@@ -1,7 +1,10 @@
 import React, { useContext } from "react";
 import { Animated } from "react-native";
 
-import { useSafeAreaFrame } from "react-native-safe-area-context";
+import {
+  useSafeAreaFrame,
+  useSafeAreaInsets,
+} from "react-native-safe-area-context";
 import { useGetBottomTabBarHeight } from "@applicaster/zapp-react-native-utils/reactHooks";
 
 import { useConfiguration } from "../utils";
@@ -91,8 +94,16 @@ const Provider = ({ children }: { children: React.ReactNode }) => {
   const dragVideoPlayerY = React.useRef(new Animated.Value(0)).current;
 
   const { height } = useSafeAreaFrame();
+  const { bottom: bottomSafeArea } = useSafeAreaInsets();
   const bottomTabBarHeight = useGetBottomTabBarHeight();
-  const minValue = height - minimisedHeight - bottomTabBarHeight;
+
+  /*
+    If bottomTabBarHeight is equal 0 it means an app does not use bottomTabBar.
+    Because of this we need to minus bottom SafeArea offset.
+  */
+  const minValue =
+    height - minimisedHeight - (bottomTabBarHeight || bottomSafeArea);
+
   const modalSnapPoints = React.useMemo(() => [0, minValue], [minValue]);
   // Last snap state which will helps us to make smooth responder to scrollview animation
   const [lastSnap, setLastSnap] = React.useState<number>(modalSnapPoints[0]);

package/Components/VideoModal/PlayerWrapper.tsx

@@ -96,7 +96,7 @@ const getEdges = (isTablet: boolean, isInlineModal: boolean) => {
   }
 
   if (!isInlineModal && Platform.OS === "android") {
-    return [];
+    return ["top", "left", "right", "bottom"];
   }
 
   return ["top"];
@@ -161,7 +161,7 @@ export const PlayerWrapper = (props: Props) => {
       width: isInlineModal && docked ? undefined : baseDimensions.width,
       aspectRatio: !isInlineModal && !pip ? getScreenAspectRatio() : 16 / 9,
     }),
-    [baseDimensions, isInlineModal, pip]
+    [baseDimensions, isInlineModal, pip, docked]
   );
 
   const containerDimensions: DimensionsT = React.useMemo(

package/Components/VideoModal/VideoModal.tsx

@@ -129,17 +129,17 @@ const VideoModalComponent = () => {
   const pathname = `${ROUTE_TYPES.VIDEO_MODAL}/${item?.id}`;
 
   return (
-    <AnimatedPlayerModalWrapper
-      style={[
-        styles.container,
-        {
-          backgroundColor,
-        },
-      ]}
-    >
-      <ScreenContextProvider pathname={pathname}>
-        <PathnameContext.Provider value={pathname}>
-          {itemIdHooksFinished === item?.id ? (
+    <ScreenContextProvider pathname={pathname}>
+      <PathnameContext.Provider value={pathname}>
+        {itemIdHooksFinished === item?.id ? (
+          <AnimatedPlayerModalWrapper
+            style={[
+              styles.container,
+              {
+                backgroundColor,
+              },
+            ]}
+          >
             <HandlePlayable
               item={item}
               isModal={mode !== "PIP"}
@@ -147,14 +147,14 @@ const VideoModalComponent = () => {
               modalWidth={modalSize.width}
               mode={mode}
             />
-          ) : (
-            <View style={styles.loaderContainer}>
-              <Spinner />
-            </View>
-          )}
-        </PathnameContext.Provider>
-      </ScreenContextProvider>
-    </AnimatedPlayerModalWrapper>
+          </AnimatedPlayerModalWrapper>
+        ) : (
+          <View style={styles.loaderContainer}>
+            <Spinner />
+          </View>
+        )}
+      </PathnameContext.Provider>
+    </ScreenContextProvider>
   );
 };
 

package/Components/Viewport/ViewportTracker/ViewportTracker.tsx

@@ -15,7 +15,7 @@ export function ViewportTracker(props) {
 
   const assignRef = React.useCallback(
     (ref) => {
-      callOnChildren(children, "ref", ref);
+      children?.ref?.(ref);
       setNodeHandle(findNodeHandle(ref));
     },
     [children]

package/Components/Viewport/ViewportTracker/index.tsx

@@ -6,6 +6,7 @@ import { ViewportEventContext, ViewportEvents } from "../ViewportEvents";
 type Props = {
   viewportEventsManager?: any;
   children: React.ReactNode;
+  flatListRef?: any; // this ref is used to bind to children component
 };
 
 export function ViewportTracker(props: Props) {

package/Components/Viewport/utils.js

@@ -2,7 +2,7 @@ import * as React from "react";
 
 export function callOnChildren(children, method, ...args) {
   const childMethod = React.Children.only(children).props[method];
-  childMethod && childMethod(...args);
+  typeof childMethod === "function" && childMethod?.(...args);
 }
 
 export function isInViewport(

package/Contexts/MenuToggleContext/{index.js → index.ts}

@@ -1,4 +1,5 @@
 import { createContext } from "@applicaster/zapp-react-native-utils/reactUtils/createContext";
+import React from "react";
 
 const initialContext = { toggleMenu: {}, closeMenu: {}, openMenu: {} };
 
@@ -16,3 +17,18 @@ const stateValidator = ({ property }) =>
   property === "openMenu";
 
 export const MenuToggleContext = createContext(initialContext, stateValidator);
+
+export type MenuToggleContextType = {
+  toggleMenu: any;
+  setToggleMenu: () => void;
+  openMenu: any;
+  setOpenMenu: () => void;
+  closeMenu: any;
+  setCloseMenu: () => void;
+};
+
+export const useMenuToggleContext = () => {
+  return React.useContext<MenuToggleContextType>(
+    MenuToggleContext.ReactContext
+  );
+};

package/Contexts/ScreenContext/__tests__/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ScreenContext withScreenContext should return the context 1`] = `null`;

package/Contexts/ScreenContext/__tests__/index.test.tsx

@@ -0,0 +1,27 @@
+import { render } from "@testing-library/react-native";
+import { ScreenContext, ScreenContextProvider, withScreenContext } from "../";
+import React from "react";
+
+describe("ScreenContext", () => {
+  describe("ScreneContext context", () => {
+    it("should return the context", () => {
+      expect(ScreenContext).toBeDefined();
+    });
+  });
+
+  describe("ScreenContextProvider", () => {
+    it("should return the provider", () => {
+      expect(ScreenContextProvider).toBeDefined();
+    });
+  });
+
+  describe("withScreenContext", () => {
+    it("should return the context", () => {
+      const Component = () => null;
+      const WrappedComponent = withScreenContext(Component);
+      const { toJSON } = render(<WrappedComponent />);
+
+      expect(toJSON()).toMatchSnapshot();
+    });
+  });
+});