@applicaster/quick-brick-core 13.0.0-alpha.5131435627 → 13.0.0-alpha.5145183145

package/App/ModalProvider/ModalBottomSheet/ModalBottomSheetFrame.tsx

@@ -1,9 +1,16 @@
 import React from "react";
-import { LayoutChangeEvent, StyleSheet, View } from "react-native";
+import { LayoutChangeEvent, Platform, StyleSheet, View } from "react-native";
 
 import { Handle, HandleProps } from "./Handle";
 import { DraggableBottomSheet } from "./DraggableBottomSheet";
-import { SafeAreaView } from "react-native-safe-area-context";
+import {
+  SafeAreaView,
+  useSafeAreaInsets,
+} from "react-native-safe-area-context";
+import {
+  isAndroidPlatform,
+  platformSelect,
+} from "@applicaster/zapp-react-native-utils/reactUtils";
 
 type Props = {
   children: React.ReactChild;
@@ -14,7 +21,11 @@ type Props = {
   visible: boolean;
   handleProps: HandleProps;
   closeToast: () => void;
-  dimensions: { width: number; height: number };
+  dimensions: {
+    statusBarHeight: any;
+    width: number;
+    height: number;
+  };
 };
 
 const styles = StyleSheet.create({
@@ -24,6 +35,38 @@ const styles = StyleSheet.create({
   },
 });
 
+const defaultBottomOffset = platformSelect({
+  ios: 34,
+  android: 0,
+});
+
+const getIsAndroidVersionIsAtLeast = (expectedVersion: number) => {
+  return parseFloat(Platform.Version.toString()) >= expectedVersion;
+};
+
+const getSheetHeight = ({ height, bottomOffset, maxHeight, dimensions }) => {
+  return platformSelect({
+    ios: height - bottomOffset,
+    default:
+      !getIsAndroidVersionIsAtLeast(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,
@@ -54,22 +97,28 @@ export function ModalBottomSheetFrame(props: Props) {
     }
   };
 
+  const { bottom = defaultBottomOffset } = useSafeAreaInsets();
+
+  const bottomOffset = bottom;
+
+  const sheetHeight = useGetSheetHeight(height, maxHeight, dimensions);
+
   return (
     <DraggableBottomSheet
-      sheetHeight={height}
-      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"]}
         style={[styles.toastFrameContainer, extraStyles]}
-        onLayout={onLayout}
       >
-        <View>{children}</View>
+        <View onLayout={onLayout}>{children}</View>
       </SafeAreaView>
     </DraggableBottomSheet>
   );

package/App/ModalProvider/ModalBottomSheet/index.tsx

@@ -1,9 +1,7 @@
 /// <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 React, { useCallback, useEffect, useState } from "react";
 import { Keyboard, StyleSheet, View } from "react-native";
 
 import { Overlay } from "./Overlay";
@@ -29,32 +27,24 @@ 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,
     modal_bottom_sheet_overlay_color: sheetOverlayColor,
     modal_bottom_sheet_top_corner_radius: sheetCornerRadius,
-    modal_bottom_sheet_max_height: sheetMaxHeight,
     modal_bottom_sheet_handle: sheetHandleEnabled,
     modal_bottom_sheet_handle_color: sheetHandleColor,
     modal_bottom_sheet_handle_focus_color: sheetHandleFocusedColor,
     modal_bottom_sheet_tablet_max_width: sheetTabletMaxWidth,
   } = theme;
 
+  const sheetMaxHeight = dimensions.height * 0.75; // Set a default max height
+
   const {
     ModalBottomSheetContent = ModalComponent,
     modalBottomSheetContentProps,
@@ -64,6 +54,8 @@ export function ModalBottomSheet(props: Props) {
     Keyboard.dismiss();
   }, []);
 
+  const dismiss = useCallback(() => setVisible(false), []);
+
   const isTablet = useIsTablet();
 
   const maxWidth = isTablet ? sheetTabletMaxWidth : dimensions.width;
@@ -78,7 +70,7 @@ export function ModalBottomSheet(props: Props) {
       <ModalBottomSheetFrame
         backgroundColor={sheetBackgroundColor}
         cornerRadius={sheetCornerRadius}
-        maxHeight={sheetMaxHeight + bottomOffset}
+        maxHeight={sheetMaxHeight}
         maxWidth={maxWidth}
         dimensions={dimensions}
         visible={visible}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-core",
-  "version": "13.0.0-alpha.5131435627",
+  "version": "13.0.0-alpha.5145183145",
   "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-alpha.5131435627",
-    "@applicaster/quick-brick-core-plugins": "13.0.0-alpha.5131435627",
-    "@applicaster/zapp-pipes-v2-client": "13.0.0-alpha.5131435627",
-    "@applicaster/zapp-react-native-bridge": "13.0.0-alpha.5131435627",
-    "@applicaster/zapp-react-native-redux": "13.0.0-alpha.5131435627",
-    "@applicaster/zapp-react-native-ui-components": "13.0.0-alpha.5131435627",
-    "@applicaster/zapp-react-native-utils": "13.0.0-alpha.5131435627",
+    "@applicaster/applicaster-types": "13.0.0-alpha.5145183145",
+    "@applicaster/quick-brick-core-plugins": "13.0.0-alpha.5145183145",
+    "@applicaster/zapp-pipes-v2-client": "13.0.0-alpha.5145183145",
+    "@applicaster/zapp-react-native-bridge": "13.0.0-alpha.5145183145",
+    "@applicaster/zapp-react-native-redux": "13.0.0-alpha.5145183145",
+    "@applicaster/zapp-react-native-ui-components": "13.0.0-alpha.5145183145",
+    "@applicaster/zapp-react-native-utils": "13.0.0-alpha.5145183145",
     "atob": "^2.1.2",
     "axios": "^0.28.0",
     "btoa": "^1.2.1",