@applicaster/quick-brick-core 13.0.0-rc.117 → 13.0.0-rc.118

package/App/ModalProvider/ModalBottomSheet/ModalBottomSheetFrame.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { LayoutChangeEvent, Platform, StyleSheet, View } from "react-native";
+import { LayoutChangeEvent, StyleSheet, View } from "react-native";
 
 import { Handle, HandleProps } from "./Handle";
 import { DraggableBottomSheet } from "./DraggableBottomSheet";
@@ -7,7 +7,11 @@ import {
   SafeAreaView,
   useSafeAreaInsets,
 } from "react-native-safe-area-context";
-import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
+import {
+  isAndroidPlatform,
+  isAndroidVersionAtLeast,
+  platformSelect,
+} from "@applicaster/zapp-react-native-utils/reactUtils";
 
 type Props = {
   children: React.ReactChild;
@@ -37,6 +41,29 @@ const defaultBottomOffset = platformSelect({
   android: 0,
 });
 
+const getSheetHeight = ({ height, bottomOffset, maxHeight, dimensions }) => {
+  return platformSelect({
+    ios: height - bottomOffset,
+    default:
+      !isAndroidVersionAtLeast(35) && isAndroidPlatform()
+        ? (height || maxHeight) - (bottomOffset + dimensions.statusBarHeight)
+        : height || maxHeight,
+  });
+};
+
+const useGetSheetHeight = (height, maxHeight, dimensions) => {
+  const { bottom = defaultBottomOffset } = useSafeAreaInsets();
+
+  const bottomOffset = bottom;
+
+  return getSheetHeight({
+    height,
+    bottomOffset,
+    maxHeight,
+    dimensions,
+  });
+};
+
 export function ModalBottomSheetFrame(props: Props) {
   const {
     children,
@@ -69,19 +96,20 @@ export function ModalBottomSheetFrame(props: Props) {
 
   const { bottom = defaultBottomOffset } = useSafeAreaInsets();
 
-  const bottomOffset = bottom + dimensions.statusBarHeight;
+  const bottomOffset = bottom;
+
+  const sheetHeight = useGetSheetHeight(height, maxHeight, dimensions);
 
   return (
     <DraggableBottomSheet
-      sheetHeight={
-        Platform.OS === "ios" ? height : (height || maxHeight) - bottomOffset
-      }
-      visible={visible}
+      sheetHeight={sheetHeight}
+      visible={height > 0 && visible}
       dismiss={props.closeToast}
       hasHeader={handleProps.enabled}
       header={(dragging) => <Handle {...handleProps} focused={dragging} />}
       maxWidth={maxWidth}
       {...dimensions}
+      height={dimensions.height - bottomOffset}
     >
       <SafeAreaView
         edges={["left", "right", "bottom"]}

package/App/ModalProvider/ModalBottomSheet/index.tsx

@@ -1,10 +1,8 @@
 /// <reference types="@applicaster/applicaster-types" />
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
-import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 
-import React, { useEffect, useState } from "react";
-import { Keyboard, Platform, StyleSheet, View } from "react-native";
+import React, { useCallback, useEffect, useState } from "react";
+import { Keyboard, StyleSheet, View } from "react-native";
 
 import { Overlay } from "./Overlay";
 import { ModalBottomSheetFrame } from "./ModalBottomSheetFrame";
@@ -29,20 +27,11 @@ type Props = {
   modalBottomSheetContentProps: Record<string, any>;
 };
 
-const defaultBottomOffset = platformSelect({
-  ios: 34,
-  android: 0,
-});
-
 export function ModalBottomSheet(props: Props) {
   const theme = useTheme<BaseThemePropertiesMobile>();
   const navigator = useNavigation();
   const dimensions = useDimensions();
   const [visible, setVisible] = useState(true);
-  const dismiss = () => setVisible(false);
-  const { bottom = defaultBottomOffset } = useSafeAreaInsets();
-
-  const bottomOffset = bottom;
 
   const {
     modal_bottom_sheet_background_color: sheetBackgroundColor,
@@ -65,6 +54,8 @@ export function ModalBottomSheet(props: Props) {
     Keyboard.dismiss();
   }, []);
 
+  const dismiss = useCallback(() => setVisible(false), []);
+
   const isTablet = useIsTablet();
 
   const maxWidth = isTablet ? sheetTabletMaxWidth : dimensions.width;
@@ -79,9 +70,7 @@ export function ModalBottomSheet(props: Props) {
       <ModalBottomSheetFrame
         backgroundColor={sheetBackgroundColor}
         cornerRadius={sheetCornerRadius}
-        maxHeight={
-          Platform.OS === "ios" ? sheetMaxHeight + bottomOffset : sheetMaxHeight
-        }
+        maxHeight={sheetMaxHeight}
         maxWidth={maxWidth}
         dimensions={dimensions}
         visible={visible}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-core",
-  "version": "13.0.0-rc.117",
+  "version": "13.0.0-rc.118",
   "description": "Core package for Applicaster's Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,13 +28,13 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "13.0.0-rc.117",
-    "@applicaster/quick-brick-core-plugins": "13.0.0-rc.117",
-    "@applicaster/zapp-pipes-v2-client": "13.0.0-rc.117",
-    "@applicaster/zapp-react-native-bridge": "13.0.0-rc.117",
-    "@applicaster/zapp-react-native-redux": "13.0.0-rc.117",
-    "@applicaster/zapp-react-native-ui-components": "13.0.0-rc.117",
-    "@applicaster/zapp-react-native-utils": "13.0.0-rc.117",
+    "@applicaster/applicaster-types": "13.0.0-rc.118",
+    "@applicaster/quick-brick-core-plugins": "13.0.0-rc.118",
+    "@applicaster/zapp-pipes-v2-client": "13.0.0-rc.118",
+    "@applicaster/zapp-react-native-bridge": "13.0.0-rc.118",
+    "@applicaster/zapp-react-native-redux": "13.0.0-rc.118",
+    "@applicaster/zapp-react-native-ui-components": "13.0.0-rc.118",
+    "@applicaster/zapp-react-native-utils": "13.0.0-rc.118",
     "atob": "^2.1.2",
     "axios": "^0.28.0",
     "btoa": "^1.2.1",