@applicaster/zapp-react-native-ui-components 16.0.0-rc.36 → 16.0.0-rc.38

package/Components/ModalComponent/BottomSheetModalContent.tsx

@@ -23,6 +23,12 @@ type ModalComponentProps = {
   maxHeight?: number;
   dismiss: () => void;
   headerComponent?: React.ComponentType;
+
+  scrollViewContent?: {
+    renderItem: (item: any, index: number) => React.ReactNode;
+    items: any[];
+  } | null;
+
   buttonComponent?: React.ComponentType;
   iconProps?: ItemIconProps | ((theme: PluginConfiguration) => ItemIconProps);
   itemProps?:
@@ -50,6 +56,9 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
     summary,
     title,
     headerComponent: ModalHeader = DefaultModalHeader,
+
+    scrollViewContent = null,
+
     buttonComponent: ButtonComponent = Button,
     getSelectedItemIcon = ({
       modal_bottom_sheet_item_selected_icon,
@@ -109,24 +118,31 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
           paddingBottom: paddingBottom + bottomInset,
         }}
       >
-        {items.map((item, index) =>
-          item ? (
-            <ButtonComponent
-              key={index}
-              configuration={theme}
-              selectedItem={current_selection}
-              item={item}
-              onPress={handlePress}
-              label={theme[item?.label] ?? item?.label}
-              iconBaseProps={iconBaseProps}
-              itemBaseProps={itemBaseProps}
-              labelBaseProps={labelBaseProps}
-              selectedItemIcon={getSelectedItemIcon(theme)}
-              defaultItemIcon={getDefaultItemIcon(theme)}
-              iconPlacement={iconPlacement}
-            />
-          ) : null
-        )}
+        {scrollViewContent
+          ? scrollViewContent.items.map((item, index) =>
+              scrollViewContent.renderItem(item, index)
+            )
+          : null}
+
+        {!scrollViewContent &&
+          items.map((item, index) =>
+            item ? (
+              <ButtonComponent
+                key={index}
+                configuration={theme}
+                selectedItem={current_selection}
+                item={item}
+                onPress={handlePress}
+                label={theme[item?.label] ?? item?.label}
+                iconBaseProps={iconBaseProps}
+                itemBaseProps={itemBaseProps}
+                labelBaseProps={labelBaseProps}
+                selectedItemIcon={getSelectedItemIcon(theme)}
+                defaultItemIcon={getDefaultItemIcon(theme)}
+                iconPlacement={iconPlacement}
+              />
+            ) : null
+          )}
       </ScrollView>
     </View>
   );

package/Components/Transitioner/Transitioner.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { View } from "react-native";
-import { append, compose, identity, isNil, tail, take, update } from "ramda";
+import { append, compose, identity, tail, take, update } from "ramda";
 
 import { AnimationManager } from "./AnimationManager";
 import { Scene } from "./Scene";
@@ -10,6 +10,7 @@ import {
   shouldSkipAnimationForPreviousWebViewScene,
 } from "./utils";
 import { v4 as uuid_v4 } from "uuid";
+import { isScreenActiveForRoute } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useIsScreenActive";
 
 export const NAV_ACTION_PUSH = "PUSH";
 
@@ -50,16 +51,16 @@ function scenesForBackTransition(props: SceneProps, { scenes }) {
     : [prepareScene(props.children), scenes[0]];
 }
 
-const isModalClosed = (navigator) => {
-  return !!isNil(navigator?.modalData);
-};
-
 type Props = {
   transitionConfig: any;
   children: React.ReactNode;
   navigator: {
     previousAction: string;
     currentRoute: string;
+    videoModalState?: {
+      visible?: boolean;
+      mode?: string;
+    };
     screenData: {
       [key: string]: any;
     };
@@ -283,8 +284,10 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
   // so only a single scene should be rendered,
   // instead of dangerous nulls or duplicates.
   renderSingleScene({ scenes, to }) {
-    const { contentStyle } = this.props;
-    const screenData = this.props.children.props.screenData;
+    const { contentStyle, navigator, children } = this.props;
+
+    const { currentRoute, videoModalState } = navigator;
+    const screenData = children.props.screenData;
     const pathname = scenes[to.index].key;
 
     return (
@@ -293,7 +296,11 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
           <Scene
             {...{ style: to?.style || {} }}
             pathname={pathname}
-            isActive={pathname === this.props.navigator.currentRoute}
+            isActive={isScreenActiveForRoute(
+              pathname,
+              currentRoute,
+              videoModalState
+            )}
             contentStyle={contentStyle}
             key={scenes[to.index].key}
             screenUniqueId={scenes[to.index].screenUniqueId}
@@ -311,16 +318,19 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
   // Looks redundant, but when written like this
   // we do not need to pass or generate keys.
   renderScenes({ scenes, from, to }) {
-    const { contentStyle } = this.props;
+    const { contentStyle, navigator } = this.props;
+
+    const { currentRoute, videoModalState } = navigator;
 
     const fromScene = scenes[from.index] && (
       <Scene
         key={scenes[from.index].key}
         pathname={scenes[from.index].key}
-        isActive={
-          scenes[from.index].key === this.props.navigator.currentRoute &&
-          isModalClosed(this.props.navigator)
-        }
+        isActive={isScreenActiveForRoute(
+          scenes[from.index].key,
+          currentRoute,
+          videoModalState
+        )}
         style={from.style}
         pointerEvents="none"
         overlayStyle={from.overlayStyle}
@@ -336,10 +346,11 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
     const toScene = scenes[to.index] && (
       <Scene
         pathname={scenes[to.index].key}
-        isActive={
-          scenes[to.index].key === this.props.navigator.currentRoute &&
-          isModalClosed(this.props.navigator)
-        }
+        isActive={isScreenActiveForRoute(
+          scenes[to.index].key,
+          currentRoute,
+          videoModalState
+        )}
         key={scenes[to.index].key}
         style={to.style}
         overlayStyle={to.overlayStyle}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "16.0.0-rc.36",
+  "version": "16.0.0-rc.38",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,10 +28,10 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "16.0.0-rc.36",
-    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.36",
-    "@applicaster/zapp-react-native-redux": "16.0.0-rc.36",
-    "@applicaster/zapp-react-native-utils": "16.0.0-rc.36",
+    "@applicaster/applicaster-types": "16.0.0-rc.38",
+    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.38",
+    "@applicaster/zapp-react-native-redux": "16.0.0-rc.38",
+    "@applicaster/zapp-react-native-utils": "16.0.0-rc.38",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "url": "^0.11.0",