@applicaster/quick-brick-core 13.0.0-alpha.2886020207 → 13.0.0-alpha.3003916059

package/App/ModalProvider/ModalBottomSheet/ModalBottomSheetFrame.tsx

@@ -1,9 +1,18 @@
 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,
+  useSafeAreaFrame,
+  useSafeAreaInsets,
+} from "react-native-safe-area-context";
+import {
+  isAndroidPlatform,
+  isAndroidVersionAtLeast,
+  platformSelect,
+} from "@applicaster/zapp-react-native-utils/reactUtils";
 
 type Props = {
   children: React.ReactChild;
@@ -14,7 +23,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 +37,32 @@ const styles = StyleSheet.create({
   },
 });
 
+const defaultBottomOffset = platformSelect({
+  ios: 34,
+  android: 0,
+});
+
+const getSheetHeight = ({ height, bottomOffset, maxHeight }) => {
+  return platformSelect({
+    ios: height - bottomOffset,
+    default:
+      (height || maxHeight) -
+      (!isAndroidVersionAtLeast(35) && isAndroidPlatform() ? bottomOffset : 0),
+  });
+};
+
+const useGetSheetHeight = (height, maxHeight) => {
+  const { bottom = defaultBottomOffset } = useSafeAreaInsets();
+
+  const bottomOffset = bottom;
+
+  return getSheetHeight({
+    height,
+    bottomOffset,
+    maxHeight,
+  });
+};
+
 export function ModalBottomSheetFrame(props: Props) {
   const {
     children,
@@ -36,12 +75,14 @@ export function ModalBottomSheetFrame(props: Props) {
     dimensions,
   } = props;
 
+  const safeAreaDims = useSafeAreaFrame();
+
   const extraStyles = {
     backgroundColor,
     borderTopLeftRadius: cornerRadius,
     borderTopRightRadius: cornerRadius,
     maxHeight,
-    maxWidth: Math.min(Number(maxWidth), dimensions.width),
+    maxWidth: Math.min(Number(maxWidth), safeAreaDims.width),
   };
 
   const [height, setHeight] = React.useState(0);
@@ -54,22 +95,26 @@ export function ModalBottomSheetFrame(props: Props) {
     }
   };
 
+  const { bottom = defaultBottomOffset } = useSafeAreaInsets();
+
+  const sheetHeight = useGetSheetHeight(height, maxHeight);
+
   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={safeAreaDims.height - (Platform.OS === "ios" ? bottom : 0)}
     >
       <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,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,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/App/index.tsx

@@ -1,3 +1,7 @@
+// Disable logs popups(RN68)
+import { LogBox } from "react-native";
+LogBox.ignoreAllLogs();
+
 import * as React from "react";
 import * as R from "ramda";
 

package/package.json

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