@momo-kits/foundation 0.109.1-beta.0 → 0.109.1-beta.2

package/Application/Components/HeaderBackground.tsx

@@ -40,7 +40,7 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
       <Animated.View
         style={[
           Styles.flex,
-          useShadowHeader && styles.shadowHeader,
+          useShadowHeader ? styles.shadowHeader : styles.dividerHeader,
           {
             backgroundColor: theme.colors.background.surface,
             opacity: opacityBackground,
@@ -107,6 +107,10 @@ const styles = StyleSheet.create({
     position: 'absolute',
     aspectRatio: 375 / 154,
   },
+  dividerHeader: {
+    borderBottomWidth: 1,
+    borderColor: Colors.black_04,
+  },
 });
 
 export {HeaderBackground};

package/Application/Components/HeaderExtendHeader.tsx

@@ -5,7 +5,7 @@ import {Animated, Dimensions, Platform, StyleSheet, View} from 'react-native';
 import {HeaderType} from '../../Layout/types';
 import {InputRef, InputSearch, InputSearchProps} from '../../Input';
 import Navigation from '../Navigation';
-import {Colors, Radius, Spacing, Styles} from '../../Consts';
+import {Colors, Radius, Spacing} from '../../Consts';
 import {Image} from '../../Image';
 
 const SCREEN_PADDING = 12;
@@ -82,12 +82,47 @@ const HeaderExtendHeader: React.FC<{
   });
 
   if (inputSearchProps) {
-    const renderInputView = () => {
-      return (
+    return (
+      <>
+        <Animated.View style={{height: height}} />
+        <Animated.View
+          style={[
+            useShadowHeader ? styles.shadowHeader : styles.dividerHeader,
+            {
+              backgroundColor: theme.colors.background.surface,
+              opacity: opacityBackground,
+              position: 'absolute',
+              width: '100%',
+              height: heightHeader,
+              zIndex: 1,
+            },
+          ]}
+        />
+
+        <Animated.View
+          style={[
+            styles.headerBox,
+            {height: headerType === 'extended' ? height : heightHeader},
+          ]}>
+          <LinearGradientAnimated
+            colors={[theme.colors.gradient, theme.colors.gradient + '00']}
+            style={[styles.extendedHeader, {opacity: opacityGradient}]}>
+            {!!theme.assets?.headerBackground && (
+              <Image
+                style={styles.headerBackground}
+                source={{uri: theme.assets?.headerBackground}}
+                loading={false}
+              />
+            )}
+          </LinearGradientAnimated>
+        </Animated.View>
+
         <Animated.View
           style={{
             justifyContent: 'flex-end',
             height,
+            position: 'absolute',
+            zIndex: 2,
           }}>
           <Animated.View
             style={{
@@ -112,40 +147,6 @@ const HeaderExtendHeader: React.FC<{
             </Animated.View>
           </Animated.View>
         </Animated.View>
-      );
-    };
-    return (
-      <>
-        <Animated.View
-          style={[
-            styles.headerBox,
-            {height: headerType === 'extended' ? height : heightHeader},
-          ]}>
-          <Animated.View
-            style={[
-              Styles.flex,
-              styles.shadowHeader,
-              {
-                borderBottomWidth: 1,
-                borderColor: theme.colors.border.default,
-                backgroundColor: theme.colors.background.surface,
-                opacity: opacityBackground,
-              },
-            ]}
-          />
-          <LinearGradientAnimated
-            colors={[theme.colors.gradient, theme.colors.gradient + '00']}
-            style={[styles.extendedHeader, {opacity: opacityGradient}]}>
-            {!!theme.assets?.headerBackground && (
-              <Image
-                style={styles.headerBackground}
-                source={{uri: theme.assets?.headerBackground}}
-                loading={false}
-              />
-            )}
-          </LinearGradientAnimated>
-        </Animated.View>
-        {renderInputView()}
         <Verified />
       </>
     );

package/Application/Components/HeaderRight.tsx

@@ -303,11 +303,6 @@ const styles = StyleSheet.create({
     position: 'absolute',
     width: '100%',
   },
-  headerBox: {
-    width: '100%',
-    position: 'absolute',
-    overflow: 'hidden',
-  },
   verifiedDot: {
     width: 4,
     height: 4,

package/Application/Components/HeaderTitle.tsx

@@ -1,5 +1,11 @@
 import React, {useContext} from 'react';
-import {Animated, StyleSheet, TouchableOpacity, View} from 'react-native';
+import {
+  Animated,
+  Dimensions,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from 'react-native';
 import {ApplicationContext, MiniAppContext} from '../index';
 import {scaleSize, Text} from '../../Text';
 import {Colors, Spacing, Styles} from '../../Consts';
@@ -227,7 +233,7 @@ const styles = StyleSheet.create({
   headerTitleContainer: {
     alignItems: 'center',
     justifyContent: 'center',
-    width: '70%',
+    width: Dimensions.get('window').width - 170,
   },
   circle: {
     width: 32,

package/Application/utils.tsx

@@ -158,17 +158,7 @@ const exportHeaderTitle = (
       },
     };
   } else if (typeof params.headerTitle === 'string') {
-    return {
-      headerTitle: (props: any) => {
-        return (
-          <HeaderTitle
-            {...props}
-            children={params.headerTitle}
-            animatedValue={animatedValue}
-          />
-        );
-      },
-    };
+    delete params.headerTitle;
   }
   return {};
 };

package/Layout/Screen.tsx

@@ -175,9 +175,10 @@ const Screen = forwardRef(
 
     let handleScroll;
     let Component: any = View;
-    let keyboardOffset = heightHeader - 20;
+
+    let keyboardOffset = heightHeader - Math.min(insets.bottom, 21);
     if (headerType === 'extended' || animatedHeader || inputSearchProps) {
-      keyboardOffset = -20;
+      keyboardOffset = -Math.min(insets.bottom, 21);
     }
 
     /**
@@ -342,7 +343,7 @@ const Screen = forwardRef(
       } else {
         setHeaderType(headerType);
       }
-    }, [headerType, animatedHeader, inputSearchProps]);
+    }, [headerType, animatedHeader, inputSearchProps, useShadowHeader]);
 
     /**
      * expose ref for screen

package/package.json

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