@applicaster/quick-brick-core 13.0.0-alpha.3013095924 → 13.0.0-alpha.3044917147

package/App/ModalProvider/ModalBottomSheet/DraggableBottomSheet/index.tsx

@@ -56,6 +56,7 @@ export class DraggableBottomSheet extends Component<Props, ComponentState> {
   _translateYOffset: Animated.Value;
   _translateY: Animated.AnimatedAddition;
   _snapPoints: SnapPoints;
+  _prevContentHeight = 0;
 
   _callWhenMounted: () => void | null;
 
@@ -89,6 +90,14 @@ export class DraggableBottomSheet extends Component<Props, ComponentState> {
       this._lastScrollY
     );
 
+    const initialSnapPoints = new SnapPoints(props.height, props.sheetHeight);
+
+    this._translateYOffset = new Animated.Value(
+      props.visible ? initialSnapPoints.top : initialSnapPoints.bottom
+    );
+
+    this._prevContentHeight = initialSnapPoints.contentHeight;
+
     this.state = {
       lastSnap: props.height,
       dragging: false,
@@ -150,12 +159,25 @@ export class DraggableBottomSheet extends Component<Props, ComponentState> {
 
     if (!this._snapPoints) {
       this._snapPoints = new SnapPoints(windowHeight, totalSheetHeight);
+      this._prevContentHeight = totalSheetHeight;
     } else {
       this._snapPoints.windowHeight = windowHeight;
       this._snapPoints.contentHeight = totalSheetHeight;
-    }
 
-    this._translateYOffset = new Animated.Value(this._snapPoints.bottom);
+      if (this.props.visible && this._isMounted) {
+        Animated.timing(this._translateYOffset, {
+          toValue: this._snapPoints.top,
+          duration: ANIMATION_DURATION,
+          easing: ANIMATION_EASING,
+          delay: ANIMATION_DELAY,
+          useNativeDriver: USE_NATIVE_DRIVER,
+        }).start();
+      } else {
+        this._translateYOffset.setValue(this._snapPoints.top);
+      }
+
+      this._prevContentHeight = totalSheetHeight;
+    }
 
     this._translateY = Animated.add(
       this._translateYOffset,
@@ -254,6 +276,7 @@ export class DraggableBottomSheet extends Component<Props, ComponentState> {
   getDraggableAreaStyles() {
     return {
       width: this.props.maxWidth,
+      top: 0,
       left: (this.props.width - this.props.maxWidth) / 2 || 0,
     };
   }

package/App/ModalProvider/ModalBottomSheet/ModalBottomSheetFrame.tsx

@@ -1,10 +1,11 @@
 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,
+  useSafeAreaFrame,
   useSafeAreaInsets,
 } from "react-native-safe-area-context";
 import {
@@ -41,17 +42,16 @@ const defaultBottomOffset = platformSelect({
   android: 0,
 });
 
-const getSheetHeight = ({ height, bottomOffset, maxHeight, dimensions }) => {
+const getSheetHeight = ({ height, bottomOffset, maxHeight }) => {
   return platformSelect({
     ios: height - bottomOffset,
     default:
-      !isAndroidVersionAtLeast(35) && isAndroidPlatform()
-        ? (height || maxHeight) - (bottomOffset + dimensions.statusBarHeight)
-        : height || maxHeight,
+      (height || maxHeight) -
+      (!isAndroidVersionAtLeast(35) && isAndroidPlatform() ? bottomOffset : 0),
   });
 };
 
-const useGetSheetHeight = (height, maxHeight, dimensions) => {
+const useGetSheetHeight = (height, maxHeight) => {
   const { bottom = defaultBottomOffset } = useSafeAreaInsets();
 
   const bottomOffset = bottom;
@@ -60,7 +60,6 @@ const useGetSheetHeight = (height, maxHeight, dimensions) => {
     height,
     bottomOffset,
     maxHeight,
-    dimensions,
   });
 };
 
@@ -76,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);
@@ -90,15 +91,13 @@ export function ModalBottomSheetFrame(props: Props) {
     const { height } = event.nativeEvent.layout;
 
     if (height !== 0) {
-      setHeight((oldHeight) => oldHeight || height);
+      setHeight(height);
     }
   };
 
   const { bottom = defaultBottomOffset } = useSafeAreaInsets();
 
-  const bottomOffset = bottom;
-
-  const sheetHeight = useGetSheetHeight(height, maxHeight, dimensions);
+  const sheetHeight = useGetSheetHeight(height, maxHeight);
 
   return (
     <DraggableBottomSheet
@@ -109,7 +108,7 @@ export function ModalBottomSheetFrame(props: Props) {
       header={(dragging) => <Handle {...handleProps} focused={dragging} />}
       maxWidth={maxWidth}
       {...dimensions}
-      height={dimensions.height - bottomOffset}
+      height={safeAreaDims.height - (Platform.OS === "ios" ? bottom : 0)}
     >
       <SafeAreaView
         edges={["left", "right", "bottom"]}

package/package.json

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

package/App/ModalProvider/ModalChildrenWrapper/index.ts

@@ -1 +0,0 @@
-export { Fragment as ModalChildrenWrapper } from "react";