@momo-kits/foundation 0.80.8-beta.15 → 0.80.8-beta.17

package/Application/Components.tsx

@@ -209,7 +209,7 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
     headerImage = undefined;
   }
   const opacity = animatedValue?.interpolate({
-    inputRange: [0, 200],
+    inputRange: [0, 114],
     outputRange: [0, 1],
     extrapolate: 'clamp',
   });
@@ -423,7 +423,7 @@ const HeaderAnimated: React.FC<HeaderAnimatedProps> = ({
 }) => {
   const scale = animatedValue.interpolate({
     inputRange: [-300, 0, 300],
-    outputRange: [2, 1, 1],
+    outputRange: [4, 1, 1],
     extrapolate: 'clamp',
   });
   const opacity = animatedValue.interpolate({
@@ -433,7 +433,7 @@ const HeaderAnimated: React.FC<HeaderAnimatedProps> = ({
   });
   const translateY = animatedValue.interpolate({
     inputRange: [-300, 0],
-    outputRange: [-160, -2],
+    outputRange: [-80, -2],
     extrapolate: 'clamp',
   });
 

package/Application/Navigation.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import {NavigationProp} from '@react-navigation/native';
-import {Alert} from 'react-native';
 import {NavigationOptions, Theme} from './types';
 import {HeaderRightAction} from './index';
 import {getOptions} from './utils';
@@ -20,11 +19,9 @@ class Navigation {
       const headerRight = params.headerRight?.({}) as React.ReactElement;
       const type = headerRight?.type;
       if (type !== HeaderRightAction && type !== HeaderToolkitAction) {
-        Alert.alert(
-          'Rule',
+        console.warn(
           'headerRight contains element type of HeaderRightAction | HeaderToolkitAction, Please check again.',
         );
-        delete params.headerRight;
       }
     }
     return params;

package/Layout/Screen.tsx

@@ -181,18 +181,6 @@ const Screen = forwardRef(
      * render top navigation banner
      */
     const renderHeader = () => {
-      if (headerBackground != undefined) {
-        return (
-          <Image
-            source={{
-              uri: headerBackground,
-            }}
-            style={{
-              aspectRatio: 1.75,
-            }}
-          />
-        );
-      }
       if (typeof animatedHeader === 'function') {
         return animatedHeader({animatedValue: animatedValue.current});
       }
@@ -237,6 +225,17 @@ const Screen = forwardRef(
       <View
         style={[Styles.flex, {backgroundColor}]}
         accessibilityLabel={`ScreenContainer`}>
+        {!!headerBackground && (
+          <>
+            <Image
+              source={{
+                uri: headerBackground,
+              }}
+              style={styles.extendedHeader}
+            />
+            <View style={{height: heightHeader}} />
+          </>
+        )}
         <KeyboardAvoidingView
           style={Styles.flex}
           enabled={enableKeyboardAvoidingView}
@@ -253,7 +252,7 @@ const Screen = forwardRef(
             onScroll={handleScroll}
             style={Styles.flex}>
             <View
-              style={[styles.screenBanner, {maxHeight: 215 + layoutOffset}]}>
+              style={[styles.screenBanner, {maxHeight: 210 + layoutOffset}]}>
               {renderHeader()}
             </View>
             {renderContent()}

package/Layout/styles.ts

@@ -2,6 +2,12 @@ import {StyleSheet} from 'react-native';
 import {Radius, Spacing} from '../Consts';
 
 export default StyleSheet.create({
+  extendedHeader: {
+    aspectRatio: 1.75,
+    position: 'absolute',
+    width: '100%',
+    height: 210,
+  },
   screenBanner: {
     width: '100%',
   },

package/package.json

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