@momo-kits/foundation 0.92.21-beta.7 → 0.92.21-beta.9

package/Application/Components.tsx

@@ -506,7 +506,7 @@ const HeaderAnimated: React.FC<HeaderAnimatedProps> = ({
  * Header extended with background image
  * @constructor
  */
-const HeaderExtendBackground: React.FC<{
+const HeaderExtendHeader: React.FC<{
   headerType?: HeaderType;
   animatedValue: Animated.Value;
   heightHeader: number;
@@ -551,10 +551,10 @@ const HeaderExtendBackground: React.FC<{
               }),
             }}>
             <AnimatedInputSearch
-              hasColorBG
               animatedValue={animatedValue}
               navigation={navigation}
               {...inputSearchProps}
+              hasColorBG={true}
             />
           </Animated.View>
         </View>
@@ -564,12 +564,25 @@ const HeaderExtendBackground: React.FC<{
     if (headerType === 'extended') {
       return (
         <>
-          <Image
-            source={{
-              uri: theme.assets?.headerBackground,
-            }}
-            style={styles.extendedHeader}
-          />
+          <Animated.View
+            style={[
+              styles.headerBox,
+              {
+                height: heightAnimated.current.interpolate({
+                  inputRange: [0, 100],
+                  outputRange: [heightHeader + 52, heightHeader],
+                  extrapolate: 'clamp',
+                }),
+              },
+            ]}>
+            <Image
+              source={{
+                uri: theme.assets?.headerBackground,
+              }}
+              style={styles.headerBackground}
+            />
+          </Animated.View>
+
           <Animated.View
             style={{
               justifyContent: 'flex-end',
@@ -591,23 +604,12 @@ const HeaderExtendBackground: React.FC<{
 
     return (
       <>
-        <View
-          style={{
-            height: heightHeader + 52,
-            width: '100%',
-            position: 'absolute',
-            overflow: 'hidden',
-          }}>
+        <View style={[styles.headerBox, {height: heightHeader}]}>
           <Image
             source={{
               uri: theme.assets?.headerBackground,
             }}
-            style={{
-              width: '100%',
-              height: undefined,
-              position: 'absolute',
-              aspectRatio: 1.75,
-            }}
+            style={styles.headerBackground}
           />
         </View>
 
@@ -722,6 +724,11 @@ const styles = StyleSheet.create({
     width: '100%',
     height: 210,
   },
+  headerBox: {
+    width: '100%',
+    position: 'absolute',
+    overflow: 'hidden',
+  },
 });
 
 export {
@@ -733,5 +740,5 @@ export {
   HeaderCustom,
   HeaderAnimated,
   HeaderRight,
-  HeaderExtendBackground,
+  HeaderExtendHeader,
 };

package/Layout/Screen.tsx

@@ -31,7 +31,7 @@ import {Card, Section, validateChildren} from './index';
 import styles from './styles';
 import {HeaderType} from './types';
 import {InputSearchProps} from '../Input';
-import {HeaderExtendBackground} from '../Application/Components';
+import {HeaderExtendHeader} from '../Application/Components';
 
 export interface ScreenProps extends ViewProps {
   /**
@@ -408,7 +408,7 @@ const Screen = forwardRef(
 
     return (
       <View style={[Styles.flex, {backgroundColor}]}>
-        <HeaderExtendBackground
+        <HeaderExtendHeader
           headerType={headerType}
           heightHeader={heightHeader}
           animatedValue={animatedValue.current}

package/package.json

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