@applicaster/zapp-react-native-ui-components 13.0.0-alpha.8532113155 → 13.0.0-alpha.9103242840

package/Components/River/__tests__/__snapshots__/componentsMap.test.js.snap

@@ -17,90 +17,7 @@ exports[`componentsMap renders renders components map correctly 1`] = `
     }
   >
     <RCTScrollView
-      ListFooterComponent={
-        <Memo(RiverFooterComponent)
-          flatListHeight={null}
-          loadingState={
-            BehaviorSubject {
-              "_value": {
-                "done": false,
-                "index": -1,
-                "waitForAllComponents": false,
-              },
-              "closed": false,
-              "currentObservers": null,
-              "hasError": false,
-              "isStopped": false,
-              "observers": [
-                SafeSubscriber {
-                  "_finalizers": [
-                    Subscription {
-                      "_finalizers": null,
-                      "_parentage": [Circular],
-                      "closed": false,
-                      "initialTeardown": [Function],
-                    },
-                  ],
-                  "_parentage": null,
-                  "closed": false,
-                  "destination": ConsumerObserver {
-                    "partialObserver": {
-                      "complete": undefined,
-                      "error": undefined,
-                      "next": [Function],
-                    },
-                  },
-                  "initialTeardown": undefined,
-                  "isStopped": false,
-                },
-                SafeSubscriber {
-                  "_finalizers": [
-                    Subscription {
-                      "_finalizers": null,
-                      "_parentage": [Circular],
-                      "closed": false,
-                      "initialTeardown": [Function],
-                    },
-                  ],
-                  "_parentage": null,
-                  "closed": false,
-                  "destination": ConsumerObserver {
-                    "partialObserver": {
-                      "complete": undefined,
-                      "error": undefined,
-                      "next": [Function],
-                    },
-                  },
-                  "initialTeardown": undefined,
-                  "isStopped": false,
-                },
-                SafeSubscriber {
-                  "_finalizers": [
-                    Subscription {
-                      "_finalizers": null,
-                      "_parentage": [Circular],
-                      "closed": false,
-                      "initialTeardown": [Function],
-                    },
-                  ],
-                  "_parentage": null,
-                  "closed": false,
-                  "destination": ConsumerObserver {
-                    "partialObserver": {
-                      "complete": undefined,
-                      "error": undefined,
-                      "next": [Function],
-                    },
-                  },
-                  "initialTeardown": undefined,
-                  "isStopped": false,
-                },
-              ],
-              "thrownError": null,
-            }
-          }
-        />
-      }
+      ListFooterComponent={[Function]}
       contentContainerStyle={
         {
           "paddingBottom": undefined,
@@ -163,14 +80,22 @@ exports[`componentsMap renders renders components map correctly 1`] = `
           style={null}
         >
           <View
-            onLayout={[Function]}
             style={
               {
-                "flex": 1,
+                "display": "flex",
               }
             }
           >
-            <View />
+            <View
+              onLayout={[Function]}
+              style={
+                {
+                  "flex": 1,
+                }
+              }
+            >
+              <View />
+            </View>
           </View>
         </View>
         <View
@@ -178,13 +103,23 @@ exports[`componentsMap renders renders components map correctly 1`] = `
           style={null}
         >
           <View
-            onLayout={[Function]}
             style={
               {
-                "flex": 1,
+                "display": "none",
               }
             }
-          />
+          >
+            <View
+              onLayout={[Function]}
+              style={
+                {
+                  "flex": 1,
+                }
+              }
+            >
+              <View />
+            </View>
+          </View>
         </View>
         <View
           onLayout={[Function]}
@@ -192,16 +127,12 @@ exports[`componentsMap renders renders components map correctly 1`] = `
           <View
             renderToHardwareTextureAndroid={true}
             style={
-              [
-                {
-                  "alignItems": "center",
-                  "justifyContent": "center",
-                  "width": "100%",
-                },
-                {
-                  "height": null,
-                },
-              ]
+              {
+                "alignItems": "center",
+                "height": null,
+                "justifyContent": "center",
+                "width": "100%",
+              }
             }
           >
             <ActivityIndicator

package/Components/River/__tests__/componentsMap.test.js

@@ -1,5 +1,6 @@
 import React from "react";
-import { cleanup, render } from "@testing-library/react-native";
+import TestRenderer from "react-test-renderer";
+import { cleanup } from "@testing-library/react-native";
 import { Provider } from "react-redux";
 import configureStore from "redux-mock-store";
 
@@ -80,13 +81,6 @@ const mockScreenData = {
   id: "A1234",
 };
 
-jest.mock("@applicaster/zapp-react-native-redux/AppStore", () => ({
-  appStore: {
-    get: jest.fn((prop) => mockStore[prop]),
-    getState: jest.fn(),
-  },
-}));
-
 jest.mock("@applicaster/zapp-react-native-utils/localizationUtils", () => ({
   useIsRTL: jest.fn(() => mock_rtl_flag),
 }));
@@ -159,13 +153,7 @@ const plugins = [];
 const navigation = {};
 
 const props = { components, cellStyles, riverComponents, navigation };
-
-const store = mockStore({
-  components,
-  cellStyles,
-  plugins,
-  getState: jest.fn(),
-});
+const store = mockStore({ components, cellStyles, plugins });
 
 jest.useFakeTimers();
 
@@ -182,12 +170,12 @@ describe("componentsMap", () => {
       .spyOn(themeUtils, "useTheme")
       .mockImplementation(() => () => theme);
 
-    const { toJSON } = render(
+    const wrapper = TestRenderer.create(
       <Provider store={store}>
         <ComponentsMap {...props} />
       </Provider>
     );
 
-    expect(toJSON()).toMatchSnapshot();
+    expect(wrapper.toJSON()).toMatchSnapshot();
   });
 });

package/Components/Screen/index.tsx

@@ -2,6 +2,10 @@
 import React from "react";
 import { View } from "react-native";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import {
+  isOrientationCompatible,
+  useGetScreenOrientation,
+} from "@applicaster/zapp-react-native-utils/appUtils/orientationHelper";
 
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { getComponentModule } from "@applicaster/zapp-react-native-utils/pluginUtils";
@@ -11,6 +15,7 @@ import {
   getScreenId,
 } from "@applicaster/zapp-react-native-utils/navigationUtils";
 import {
+  useDimensions,
   useRoute,
   useCurrentScreenData,
   useNavbarState,
@@ -22,7 +27,6 @@ import { getNavigationPluginModule } from "@applicaster/zapp-react-native-app/Ap
 import { RouteManager } from "../RouteManager";
 import { useScreenConfiguration } from "../River/useScreenConfiguration";
 import { isValidColor } from "./utils";
-import { useWaitForValidOrientation } from "./hooks";
 
 const screenStyles = {
   flex: 1,
@@ -46,6 +50,14 @@ export function Screen(_props: Props) {
   const currentScreenData = useCurrentScreenData();
   const { backgroundColor } = useScreenConfiguration(currentScreenData.id);
 
+  const {
+    width: screenWidth,
+    height,
+    deviceInfo,
+  } = useDimensions("screen", {
+    fullDimensions: true,
+  });
+
   const { screenData, pathname } = useRoute();
 
   const currentRiver = useScreenData(
@@ -54,6 +66,13 @@ export function Screen(_props: Props) {
 
   const { title } = useNavbarState();
 
+  const isTablet = deviceInfo?.isTablet;
+
+  const { appData } = usePickFromState(["appData"]);
+  const isTabletPortrait = appData?.isTabletPortrait;
+
+  const layoutData = { isTablet, isTabletPortrait, width: screenWidth, height };
+
   const hasMenu = shouldNavBarDisplayMenu(currentRiver, plugins);
 
   const navBarProps = React.useMemo<MobileNavBarPluginProps | null>(
@@ -89,23 +108,30 @@ export function Screen(_props: Props) {
     [theme.app_background_color, backgroundColor]
   );
 
-  // Set ready state when screen is rotated to desired orientation
-  const isReady = useWaitForValidOrientation();
+  const targetScreenData =
+    currentScreenData || (screenData as any)?.targetScreen || screenData;
+
+  const orientation = useGetScreenOrientation(targetScreenData);
 
   // We prevent rendering of the screen until UI is actually rotated to screen desired orientation.
   // This saves unnecessary re-renders and user will not see distorted aspect screen.
+  if (
+    !isOrientationCompatible({
+      orientation,
+      layoutData,
+    })
+  ) {
+    return <View style={style} />;
+  }
+
   return (
     <View style={style}>
-      {isReady ? (
-        <>
-          {navBarProps && <NavBar {...navBarProps} hasMenu={hasMenu} />}
-
-          <OfflineFallbackScreen>
-            {/* @TODO RouteManager doesn't use props, can they be removed ?  */}
-            <RouteManager pathname={pathname} screenData={screenData} />
-          </OfflineFallbackScreen>
-        </>
-      ) : null}
+      {navBarProps && <NavBar {...navBarProps} hasMenu={hasMenu} />}
+
+      <OfflineFallbackScreen>
+        {/* @TODO RouteManager doesn't use props, can they be removed ?  */}
+        <RouteManager pathname={pathname} screenData={screenData} />
+      </OfflineFallbackScreen>
     </View>
   );
 }

package/Components/Tabs/Tab.tsx

@@ -69,8 +69,8 @@ const getStyles = (configuration, selected, focused) => {
           ? tab_cell_background_color_selected_active
           : tab_cell_background_color_selected_default
         : focused
-          ? tab_cell_background_color_active
-          : tab_cell_background_color_default,
+        ? tab_cell_background_color_active
+        : tab_cell_background_color_default,
       justifyContent: "center",
       alignItems: "center",
       position: "relative",
@@ -85,8 +85,8 @@ const getStyles = (configuration, selected, focused) => {
           ? tab_cell_border_color_active_focused
           : tab_cell_border_color_active
         : focused
-          ? tab_cell_border_color_default_focused
-          : tab_cell_border_color_default,
+        ? tab_cell_border_color_default_focused
+        : tab_cell_border_color_default,
     },
     label: {
       fontFamily: text_label_font_family,
@@ -98,8 +98,8 @@ const getStyles = (configuration, selected, focused) => {
           ? text_label_selected_active_font_color
           : text_label_selected_default_font_color
         : focused
-          ? text_label_active_font_color
-          : text_label_default_font_color,
+        ? text_label_active_font_color
+        : text_label_default_font_color,
     },
     underline: {
       position: "absolute",

package/Components/TextInputTv/index.tsx

@@ -94,8 +94,8 @@ function TextInputTV(props: Props, ref) {
             styles.textAlign === "center"
               ? styles.textAlign
               : styles.textAlign === "left"
-                ? "right"
-                : "left";
+              ? "right"
+              : "left";
 
           return { style: { ...styles, textAlign } };
         }

package/Components/Transitioner/AnimationManager.js

@@ -3,19 +3,19 @@ import { Animated } from "react-native";
 import { NAV_ACTION_PUSH, NAV_ACTION_BACK } from "./Transitioner";
 
 type TransitionConfig = {
-  duration: number;
-  easing: any;
+  duration: number,
+  easing: any,
   from: {
-    style: any;
-  };
+    style: any,
+  },
   to: {
-    style: any;
-  };
+    style: any,
+  },
 };
 
 type Props = {
-  transitionConfig: TransitionConfig;
-  contentStyle: { [string]: any };
+  transitionConfig: TransitionConfig,
+  contentStyle: { [string]: any },
 };
 
 /**

package/Components/Transitioner/Scene.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { equals } from "ramda";
 import { Animated, ViewProps, ViewStyle } from "react-native";
 import { useSafeAreaFrame } from "react-native-safe-area-context";
 
@@ -9,11 +8,6 @@ import { PathnameContext } from "../../Contexts/PathnameContext";
 import { ScreenDataContext } from "../../Contexts/ScreenDataContext";
 import { ScreenContextProvider } from "../../Contexts/ScreenContext";
 
-const fullWidthDimensions = {
-  height: "100%",
-  width: "100%",
-};
-
 type Props = {
   children: any;
   style: any;
@@ -26,47 +20,6 @@ type Props = {
   screenData: NavigationScreenData;
 };
 
-export function CurrentScreenContextProvider({
-  children,
-  ...props
-}: {
-  children: any;
-  pathname: string;
-  isActive: boolean;
-  screenData: NavigationScreenData;
-}) {
-  const { pathname, isActive = false, screenData } = props;
-
-  const [initialScreenData, setInitialScreenData] = React.useState(screenData);
-
-  React.useLayoutEffect(() => {
-    const screenDataChanged = !equals(initialScreenData, screenData);
-
-    if (isActive && screenDataChanged) {
-      setInitialScreenData(screenData);
-    }
-  }, [initialScreenData, screenData, isActive]);
-
-  return (
-    <ScreenDataContext.Provider value={initialScreenData}>
-      <PathnameContext.Provider value={pathname}>
-        <ScreenContextProvider pathname={pathname}>
-          {children}
-        </ScreenContextProvider>
-      </PathnameContext.Provider>
-    </ScreenDataContext.Provider>
-  );
-}
-
-const withCurrentScreenContext = (Component) =>
-  function SceneComponent(props: Props) {
-    return (
-      <CurrentScreenContextProvider {...props}>
-        <Component {...props} />
-      </CurrentScreenContextProvider>
-    );
-  };
-
 /**
  * Animated View container for any purpose.
  * Renders given children with given style object.
@@ -79,35 +32,53 @@ const withCurrentScreenContext = (Component) =>
  * @param contentStyle
  * @param screenUniqueId
  */
-function SceneComponent({
+export function Scene({
   children,
   style,
   pointerEvents = "auto",
   overlayStyle,
   animating,
   contentStyle,
+  pathname,
   isActive = false,
   screenData,
 }: Props) {
+  const [initialScreenData, setInitialScreenData] = React.useState(screenData);
+
   useScreenOrientationHandler({
     screenData,
     isActive,
   });
 
+  React.useLayoutEffect(() => {
+    if (isActive) {
+      setInitialScreenData(screenData);
+    }
+  }, [screenData, isActive]);
+
   const frame = useSafeAreaFrame();
   const isAnimating = animating && overlayStyle;
 
-  const dimensions = isAnimating ? fullWidthDimensions : frame;
+  const dimensions = isAnimating
+    ? {
+        width: "100%",
+        height: "100%",
+      }
+    : frame;
 
   return (
     <Animated.View
       pointerEvents={pointerEvents}
       style={[style, contentStyle, dimensions]}
     >
-      {children}
+      <ScreenDataContext.Provider value={initialScreenData}>
+        <PathnameContext.Provider value={pathname}>
+          <ScreenContextProvider pathname={pathname}>
+            {children}
+          </ScreenContextProvider>
+        </PathnameContext.Provider>
+      </ScreenDataContext.Provider>
       {isAnimating && <Animated.View style={overlayStyle} />}
     </Animated.View>
   );
 }
-
-export const Scene = withCurrentScreenContext(SceneComponent);

package/Components/Transitioner/__tests__/__snapshots__/Scene.test.js.snap

@@ -1,79 +1,63 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Scene /> renders correctly 1`] = `
-<CurrentScreenContextProvider
-  contentStyle={
-    {
-      "paddingBottom": 49,
-    }
-  }
-  overlayStyle={
-    {
-      "opacity": 1,
-    }
-  }
+<ForwardRef(AnimatedComponentWrapper)
+  pointerEvents="auto"
   style={
-    {
-      "flex": 1,
-    }
-  }
->
-  <SceneComponent
-    contentStyle={
+    [
       {
-        "paddingBottom": 49,
-      }
-    }
-    overlayStyle={
+        "flex": 1,
+      },
       {
-        "opacity": 1,
-      }
-    }
-    style={
+        "paddingBottom": 49,
+      },
       {
-        "flex": 1,
-      }
-    }
-  />
-</CurrentScreenContextProvider>
+        "fontScale": 2,
+        "height": 1334,
+        "scale": 2,
+        "statusBarHeight": null,
+        "width": 750,
+      },
+    ]
+  }
+>
+  <ContextProvider>
+    <ContextProvider>
+      <ScreenContextProvider />
+    </ContextProvider>
+  </ContextProvider>
+</ForwardRef(AnimatedComponentWrapper)>
 `;
 
 exports[`<Scene /> renders the overlay while animating 1`] = `
-<CurrentScreenContextProvider
-  animating={true}
-  contentStyle={
-    {
-      "paddingBottom": 49,
-    }
-  }
-  overlayStyle={
-    {
-      "opacity": 1,
-    }
-  }
+<ForwardRef(AnimatedComponentWrapper)
+  pointerEvents="auto"
   style={
-    {
-      "flex": 1,
-    }
-  }
->
-  <SceneComponent
-    animating={true}
-    contentStyle={
+    [
+      {
+        "flex": 1,
+      },
       {
         "paddingBottom": 49,
-      }
-    }
-    overlayStyle={
+      },
       {
-        "opacity": 1,
-      }
-    }
+        "height": "100%",
+        "width": "100%",
+      },
+    ]
+  }
+>
+  <ContextProvider>
+    <ContextProvider>
+      <ScreenContextProvider />
+    </ContextProvider>
+  </ContextProvider>
+  <ForwardRef(AnimatedComponentWrapper)
     style={
       {
-        "flex": 1,
+        "opacity": 1,
       }
     }
   />
-</CurrentScreenContextProvider>
+</ForwardRef(AnimatedComponentWrapper)>
 `;

package/Components/Transitioner/__tests__/__snapshots__/transitioner.test.js.snap

@@ -9,7 +9,7 @@ exports[`<TransitionerComponent /> renders correctly 1`] = `
     }
   }
 >
-  <SceneComponent
+  <Scene
     isActive={true}
     screenUniqueId="mocked-uuid"
     style={{}}
@@ -23,6 +23,6 @@ exports[`<TransitionerComponent /> renders correctly 1`] = `
         children
       </Text>
     </View>
-  </SceneComponent>
+  </Scene>
 </View>
 `;

package/Components/Transitioner/index.js

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { useWindowDimensions } from "react-native";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
 import { useDimensions } from "@applicaster/zapp-react-native-utils/reactHooks/layout";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
@@ -6,15 +7,10 @@ import { TransitionerComponent } from "./Transitioner";
 
 export const Transitioner = (props) => {
   const navigator = useNavigation();
+  const { height, width } = useWindowDimensions();
 
-  const {
-    width,
-    height,
-    deviceInfo: { isTablet },
-  } = useDimensions("window", {
-    updateForInactiveScreens: false,
-    deviceInfo: true,
-  });
+  const dimensions = useDimensions("window", { deviceInfo: true });
+  const isTablet = dimensions?.deviceInfo?.isTablet;
 
   const { appData } = usePickFromState(["appData"]);
   const isTabletPortrait = appData?.isTabletPortrait;