@momo-kits/foundation 0.80.8-beta.10 → 0.80.8-beta.12

package/Application/ModalScreen.tsx

@@ -1,11 +1,12 @@
-import React, {useContext, useEffect, useMemo, useRef} from 'react';
+import React, {useContext, useEffect, useMemo, useRef, useState} from 'react';
 import {
+  Dimensions,
+  Keyboard,
   KeyboardAvoidingView,
   Platform,
   Pressable,
   StyleSheet,
   View,
-  Keyboard,
 } from 'react-native';
 import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
 import {
@@ -90,6 +91,7 @@ const Modal: React.FC<ModalParams> = props => {
 const BottomSheet: React.FC<BottomSheetParams> = props => {
   const insets = useSafeAreaInsets();
   const {theme, navigator} = useContext(ApplicationContext);
+  const [keyboardSnap, setKeyboardSnap] = useState(0);
   const {screen, options, snapPoint}: BottomSheetParams = props.route.params;
   const Component = useRef(screen).current;
   const navigation = new Navigation(props.navigation, theme);
@@ -102,28 +104,41 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
 
   const snapPoints = useMemo(() => {
     if (snapPoint) {
-      return [snapPoint];
+      const current = parseInt(snapPoint) + keyboardSnap * 100;
+      return [`${current}%`];
     }
     return ['50%', '70%', '90%'];
-  }, []);
+  }, [keyboardSnap]);
 
   const bottomSheetRef = useRef<any>(null);
   const mountedRef = useRef(true);
 
   let backgroundColor = theme.colors.background.default;
+  let bottomInset = keyboardSnap * Dimensions.get('window').height;
+  if (bottomInset > 16) {
+    bottomInset -= 16;
+  }
   if (options?.surface) {
     backgroundColor = theme.colors.background.surface;
   }
 
   useEffect(() => {
-    const keyboardDidShow = Keyboard.addListener('keyboardDidShow', () =>
-      bottomSheetRef.current?.expand(),
-    );
+    const keyboardDidShow = Keyboard.addListener('keyboardDidShow', e => {
+      setKeyboardSnap(
+        e.endCoordinates.height / Dimensions.get('window').height,
+      );
+      bottomSheetRef.current?.expand();
+    });
+
+    const keyboardDidHide = Keyboard.addListener('keyboardDidHide', () => {
+      setKeyboardSnap(0);
+    });
 
     bottomSheetRef.current?.present();
     return () => {
       mountedRef.current = false;
       keyboardDidShow.remove();
+      keyboardDidHide.remove();
     };
   }, []);
 
@@ -145,6 +160,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
             navigator?.pop();
           }
         }}
+        bottomInset={bottomInset}
         handleComponent={null}
         backdropComponent={backdropComponent}>
         <BottomSheetView accessibilityLabel={'BottomSheet'}>

package/Layout/Card.tsx

@@ -150,7 +150,7 @@ const Card: React.FC<CardProps> = ({
             width: widthSection,
             marginHorizontal: gridContext.margin,
           },
-          Shadow.Light,
+          useShadow && Shadow.Light,
         ]}>
         {!!backgroundImage && (
           <Image

package/Layout/styles.ts

@@ -1,4 +1,5 @@
 import {StyleSheet} from 'react-native';
+import {Spacing} from '../Consts';
 
 export default StyleSheet.create({
   boxGrid: {
@@ -47,7 +48,6 @@ export default StyleSheet.create({
     marginLeft: undefined,
     marginRight: undefined,
     marginVertical: undefined,
-    overflow: 'hidden',
   },
   item: {
     overflow: 'hidden',
@@ -65,5 +65,6 @@ export default StyleSheet.create({
     bottom: 0,
     left: 0,
     right: 0,
+    borderRadius: Spacing.M,
   },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.80.8-beta.10",
+    "version": "0.80.8-beta.12",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {