@momo-kits/foundation 0.109.1-beta.3 → 0.109.1-optimize.2

package/Application/Components/HeaderBackground.tsx

@@ -16,14 +16,10 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
   animatedValue,
   useGradient = true,
   useShadowHeader = true,
-  gradientColor,
-  headerBackground,
 }) => {
   const {theme} = useContext(ApplicationContext);
 
-  const linearGradientColor = gradientColor ?? theme.colors.gradient;
-
-  let headerImage = headerBackground ?? theme.assets?.headerBackground;
+  let headerImage = theme.assets?.headerBackground;
   if (image === null) {
     headerImage = undefined;
   }
@@ -54,7 +50,7 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
       <View style={styles.gradientContainer}>
         {useGradient && (
           <LinearGradientAnimated
-            colors={[linearGradientColor, linearGradientColor + '00']}
+            colors={[theme.colors.gradient, theme.colors.gradient + '00']}
             style={[styles.extendedHeader, {opacity: opacityGradient}]}>
             {!!headerImage && (
               <Image

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;
@@ -27,8 +27,6 @@ const HeaderExtendHeader: React.FC<{
   inputSearchRef?: Ref<InputRef>;
   navigation?: Navigation;
   useShadowHeader?: boolean;
-  gradientColor?: string;
-  headerBackground?: string;
 }> = ({
   headerType = 'default',
   animatedValue,
@@ -37,17 +35,11 @@ const HeaderExtendHeader: React.FC<{
   inputSearchProps,
   inputSearchRef,
   useShadowHeader = true,
-  gradientColor,
-  headerBackground: customHeaderBackground,
 }) => {
   const {theme} = useContext(ApplicationContext);
 
   const animated = useRef(new Animated.Value(0));
 
-  const linearGradientColor = gradientColor ?? theme.colors.gradient;
-  const headerBackground =
-    customHeaderBackground ?? theme.assets?.headerBackground;
-
   const opacityBackground = animatedValue?.interpolate({
     inputRange: [0, 52],
     outputRange: [0, 1],
@@ -90,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={{
@@ -120,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={[linearGradientColor, linearGradientColor + '00']}
-            style={[styles.extendedHeader, {opacity: opacityGradient}]}>
-            {!!headerBackground && (
-              <Image
-                style={styles.headerBackground}
-                source={{uri: headerBackground}}
-                loading={false}
-              />
-            )}
-          </LinearGradientAnimated>
-        </Animated.View>
-        {renderInputView()}
         <Verified />
       </>
     );
@@ -176,12 +169,12 @@ const HeaderExtendHeader: React.FC<{
           ]}
         />
         <LinearGradientAnimated
-          colors={[linearGradientColor, linearGradientColor + '00']}
+          colors={[theme.colors.gradient, theme.colors.gradient + '00']}
           style={[styles.extendedHeader, {opacity: opacityGradient}]}>
-          {!!headerBackground && (
+          {!!theme.assets?.headerBackground && (
             <Image
               style={styles.headerBackground}
-              source={{uri: headerBackground}}
+              source={{uri: theme.assets?.headerBackground}}
               loading={false}
             />
           )}

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/types.ts

@@ -174,8 +174,6 @@ export type HeaderBackgroundProps = {
   useGradient?: boolean;
   useShadowHeader?: boolean;
   backgroundColor?: string;
-  gradientColor?: string;
-  headerBackground?: string;
 };
 
 export type TitleUserProps = {

package/Layout/Screen.tsx

@@ -136,16 +136,6 @@ export interface ScreenProps extends ViewProps {
    * Optional. If `true`, use shadow header.
    */
   useShadowHeader?: boolean;
-
-  /**
-   * Optional. Custom header Gradient Color.
-   */
-  gradientColor?: string;
-
-  /**
-   * Optional. Custom headerBackground Image
-   */
-  headerBackground?: string;
 }
 
 const Screen = forwardRef(
@@ -170,8 +160,6 @@ const Screen = forwardRef(
       inputSearchProps,
       inputSearchRef,
       animatedValue: customAnimatedValue,
-      headerBackground,
-      gradientColor,
     }: ScreenProps,
     ref: any
   ) => {
@@ -187,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);
     }
 
     /**
@@ -244,8 +233,6 @@ const Screen = forwardRef(
                 {...props}
                 animatedValue={animatedValue.current}
                 useShadowHeader={useShadowHeader}
-                headerBackground={headerBackground}
-                gradientColor={gradientColor}
               />
             ),
             headerTitle: (props: any) => <HeaderTitle {...props} />,
@@ -289,8 +276,6 @@ const Screen = forwardRef(
             animatedValue={animatedValue.current}
             useGradient={false}
             useShadowHeader={useShadowHeader}
-            headerBackground={headerBackground}
-            gradientColor={gradientColor}
           />
         ),
         headerTitle: (props: any) => {
@@ -358,7 +343,7 @@ const Screen = forwardRef(
       } else {
         setHeaderType(headerType);
       }
-    }, [headerType, animatedHeader, inputSearchProps]);
+    }, [headerType, animatedHeader, inputSearchProps, useShadowHeader]);
 
     /**
      * expose ref for screen
@@ -502,8 +487,6 @@ const Screen = forwardRef(
           navigation={navigation}
           inputSearchRef={inputSearchRef}
           useShadowHeader={useShadowHeader}
-          gradientColor={gradientColor}
-          headerBackground={headerBackground}
         />
 
         <KeyboardAvoidingView

package/package.json

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