@momo-kits/foundation 0.111.1-beta.13 → 0.111.1-beta.15

package/Application/BottomSheet.tsx

@@ -18,12 +18,16 @@ import {BottomSheetParams} from './types';
 import {Colors, Radius, Spacing, Styles} from '../Consts';
 import {Text} from '../Text';
 import {Icon} from '../Icon';
+import {useHeaderHeight} from '@react-navigation/stack';
 
 const BottomSheet: React.FC<BottomSheetParams> = props => {
   const {theme, navigator} = useContext(ApplicationContext);
   const heightDevice = Dimensions.get('screen').height;
   const action = useRef<undefined | string>();
   const insets = useSafeAreaInsets();
+  const heightHeader = useHeaderHeight();
+  const keyboardOffset = heightHeader - Math.min(insets.bottom, 21);
+
   const {
     screen: Screen,
     options,
@@ -184,12 +188,13 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
       style={StyleSheet.absoluteFillObject}>
       <KeyboardAvoidingView
         behavior={Platform.select({
-          ios: 'padding',
+          ios: 'position',
           android: undefined,
         })}
-        keyboardVerticalOffset={keyboardVerticalOffset ?? -20}
+        keyboardVerticalOffset={keyboardVerticalOffset ?? keyboardOffset}
         enabled={useKeyboardAvoidingView}
-        style={[Styles.flex, {justifyContent: 'flex-end'}]}>
+        contentContainerStyle={styles.container}
+        style={styles.container}>
         <Pressable
           style={StyleSheet.absoluteFillObject}
           onPress={() => {
@@ -232,6 +237,10 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
 };
 
 const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'flex-end',
+  },
   overlay: {
     flex: 1,
     backgroundColor: 'rgba(0, 0, 0, 0.6)',

package/Application/Components/HeaderBackground.tsx

@@ -12,7 +12,6 @@ const LinearGradientAnimated = Animated.createAnimatedComponent(LinearGradient);
  * header background for default
  */
 const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
-  image,
   animatedValue = new Animated.Value(0),
   useGradient = true,
   useShadowHeader = true,
@@ -20,13 +19,8 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
   headerBackground,
 }) => {
   const {theme} = useContext(ApplicationContext);
-
   const gradientColor = customGradientColor ?? theme.colors.gradient;
-
-  let headerImage = headerBackground ?? theme.assets?.headerBackground;
-  if (image === null) {
-    headerImage = undefined;
-  }
+  const headerImage = headerBackground ?? theme.assets?.headerBackground;
 
   const opacityBackground = animatedValue?.interpolate({
     inputRange: [0, 52],
@@ -39,6 +33,10 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
     extrapolate: 'clamp',
   });
 
+  if (Platform.OS === 'android' && headerImage) {
+    useShadowHeader = false;
+  }
+
   return (
     <View style={Styles.flex}>
       <Animated.View

package/Application/Components/HeaderExtendHeader.tsx

@@ -46,7 +46,6 @@ const HeaderExtendHeader: React.FC<{
   const gradientColor = customGradientColor ?? theme.colors.gradient;
   const headerBackground = customBackground ?? theme.assets?.headerBackground;
   const leftPosition = inputSearchProps?.leftPosition || BACK_WIDTH + 20;
-  const isIos = Platform.OS === 'ios';
 
   const opacityBackground = animatedValue?.interpolate({
     inputRange: [0, 52],
@@ -89,15 +88,17 @@ const HeaderExtendHeader: React.FC<{
     extrapolate: 'clamp',
   });
 
+  if (Platform.OS === 'android' && headerBackground) {
+    useShadowHeader = false;
+  }
+
   if (inputSearchProps) {
     return (
       <>
         <Animated.View style={{height: height}} />
         <Animated.View
           style={[
-            isIos && useShadowHeader
-              ? styles.shadowHeader
-              : styles.dividerHeader,
+            useShadowHeader ? styles.shadowHeader : styles.dividerHeader,
             {
               position: 'absolute',
               width: '100%',

package/Application/Components/HeaderRight.tsx

@@ -94,7 +94,7 @@ const HeaderToolkitAction: React.FC<any> = ({
     () =>
       navigator?.maxApi?.dispatchFunction(
         'isFavoriteApp',
-        context?.code,
+        {code: context?.code},
         (result: boolean) => {
           setIsFavorite(result);
         }

package/Application/types.ts

@@ -185,7 +185,6 @@ export interface HeaderBackProps extends NavigationButtonProps {
 }
 
 export type HeaderBackgroundProps = {
-  image?: string | null;
   animatedValue?: Animated.Value;
   useGradient?: boolean;
   useShadowHeader?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/foundation",
-  "version": "0.111.1-beta.13",
+  "version": "0.111.1-beta.15",
   "description": "React Native Component Kits",
   "main": "index.ts",
   "scripts": {},