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

package/Application/Components/HeaderBackground.tsx

@@ -16,10 +16,14 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
   animatedValue,
   useGradient = true,
   useShadowHeader = true,
+  gradientColor,
+  headerBackground,
 }) => {
   const {theme} = useContext(ApplicationContext);
 
-  let headerImage = theme.assets?.headerBackground;
+  const linearGradientColor = gradientColor ?? theme.colors.gradient;
+
+  let headerImage = headerBackground ?? theme.assets?.headerBackground;
   if (image === null) {
     headerImage = undefined;
   }
@@ -50,7 +54,7 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
       <View style={styles.gradientContainer}>
         {useGradient && (
           <LinearGradientAnimated
-            colors={[theme.colors.gradient, theme.colors.gradient + '00']}
+            colors={[linearGradientColor, linearGradientColor + '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} from '../../Consts';
+import {Colors, Radius, Spacing, Styles} from '../../Consts';
 import {Image} from '../../Image';
 
 const SCREEN_PADDING = 12;
@@ -27,6 +27,8 @@ const HeaderExtendHeader: React.FC<{
   inputSearchRef?: Ref<InputRef>;
   navigation?: Navigation;
   useShadowHeader?: boolean;
+  gradientColor?: string;
+  headerBackground?: string;
 }> = ({
   headerType = 'default',
   animatedValue,
@@ -35,11 +37,17 @@ 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],
@@ -82,47 +90,12 @@ const HeaderExtendHeader: React.FC<{
   });
 
   if (inputSearchProps) {
-    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>
-
+    const renderInputView = () => {
+      return (
         <Animated.View
           style={{
             justifyContent: 'flex-end',
             height,
-            position: 'absolute',
-            zIndex: 2,
           }}>
           <Animated.View
             style={{
@@ -147,6 +120,40 @@ 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 />
       </>
     );
@@ -169,12 +176,12 @@ const HeaderExtendHeader: React.FC<{
           ]}
         />
         <LinearGradientAnimated
-          colors={[theme.colors.gradient, theme.colors.gradient + '00']}
+          colors={[linearGradientColor, linearGradientColor + '00']}
           style={[styles.extendedHeader, {opacity: opacityGradient}]}>
-          {!!theme.assets?.headerBackground && (
+          {!!headerBackground && (
             <Image
               style={styles.headerBackground}
-              source={{uri: theme.assets?.headerBackground}}
+              source={{uri: headerBackground}}
               loading={false}
             />
           )}

package/Application/Components/HeaderRight.tsx

@@ -303,6 +303,11 @@ 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,6 +174,8 @@ export type HeaderBackgroundProps = {
   useGradient?: boolean;
   useShadowHeader?: boolean;
   backgroundColor?: string;
+  gradientColor?: string;
+  headerBackground?: string;
 };
 
 export type TitleUserProps = {

package/Layout/Screen.tsx

@@ -136,6 +136,16 @@ 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(
@@ -160,6 +170,8 @@ const Screen = forwardRef(
       inputSearchProps,
       inputSearchRef,
       animatedValue: customAnimatedValue,
+      headerBackground,
+      gradientColor,
     }: ScreenProps,
     ref: any
   ) => {
@@ -175,10 +187,9 @@ const Screen = forwardRef(
 
     let handleScroll;
     let Component: any = View;
-
-    let keyboardOffset = heightHeader - Math.min(insets.bottom, 21);
+    let keyboardOffset = heightHeader - 20;
     if (headerType === 'extended' || animatedHeader || inputSearchProps) {
-      keyboardOffset = -Math.min(insets.bottom, 21);
+      keyboardOffset = -20;
     }
 
     /**
@@ -233,6 +244,8 @@ const Screen = forwardRef(
                 {...props}
                 animatedValue={animatedValue.current}
                 useShadowHeader={useShadowHeader}
+                headerBackground={headerBackground}
+                gradientColor={gradientColor}
               />
             ),
             headerTitle: (props: any) => <HeaderTitle {...props} />,
@@ -276,6 +289,8 @@ const Screen = forwardRef(
             animatedValue={animatedValue.current}
             useGradient={false}
             useShadowHeader={useShadowHeader}
+            headerBackground={headerBackground}
+            gradientColor={gradientColor}
           />
         ),
         headerTitle: (props: any) => {
@@ -343,7 +358,7 @@ const Screen = forwardRef(
       } else {
         setHeaderType(headerType);
       }
-    }, [headerType, animatedHeader, inputSearchProps, useShadowHeader]);
+    }, [headerType, animatedHeader, inputSearchProps]);
 
     /**
      * expose ref for screen
@@ -487,6 +502,8 @@ 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.2",
+  "version": "0.109.1-beta.3",
   "description": "React Native Component Kits",
   "main": "index.ts",
   "scripts": {},