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

package/Application/Components.tsx

@@ -23,7 +23,6 @@ import {
 import {scaleSize, Text} from '../Text';
 import {Icon} from '../Icon';
 import {PopupNotify} from '../Popup';
-import Carousel from '@momo-kits/carousel';
 
 const Touchable =
   Platform.OS === 'android' ? TouchableGesture : TouchableOpacity;
@@ -432,6 +431,11 @@ const HeaderAnimated: React.FC<HeaderAnimatedProps> = ({
     outputRange: [1, 0.5, 0],
     extrapolate: 'clamp',
   });
+  const translateY = animatedValue.interpolate({
+    inputRange: [-300, 0],
+    outputRange: [-160, -2],
+    extrapolate: 'clamp',
+  });
 
   return (
     <TouchableOpacity onPress={onPress}>
@@ -439,7 +443,7 @@ const HeaderAnimated: React.FC<HeaderAnimatedProps> = ({
         style={{
           aspectRatio: 1.75,
           opacity: opacity,
-          transform: [{scale: scale}],
+          transform: [{scale}, {translateY}],
         }}>
         <Image
           source={{

package/Layout/Screen.tsx

@@ -69,14 +69,14 @@ export interface ScreenProps extends ViewProps {
   footerComponent?: ReactNode;
 
   /**
-   * Optional. Margin for the header component.
+   * Optional. Background color of the screen.
    */
-  marginHeader?: number;
+  backgroundColor?: string;
 
   /**
-   * Optional. Background color of the screen.
+   * Optional. layout card offset overlap header banner.
    */
-  backgroundColor?: string;
+  layoutOffset?: -8 | -24 | -56;
 }
 
 const Screen = forwardRef(
@@ -86,12 +86,13 @@ const Screen = forwardRef(
       enableKeyboardAvoidingView = false,
       scrollable = false,
       navigation,
-      marginHeader,
+
       useExtendedHeader,
       animatedHeader,
       scrollViewProps,
       headerComponent: Header,
       footerComponent: Footer,
+      layoutOffset = -56,
       backgroundColor,
     }: ScreenProps,
     ref,
@@ -99,16 +100,13 @@ const Screen = forwardRef(
     const animatedValue = useRef<Animated.Value | undefined>(undefined);
     const {theme} = useContext(ApplicationContext);
     const insets = useSafeAreaInsets();
+    const heightHeader = useHeaderHeight();
 
     let handleScroll;
     let headerBackground: string | undefined = undefined;
     let Component: any = View;
     animatedValue.current = undefined;
 
-    if (useExtendedHeader || animatedHeader) {
-      marginHeader = marginHeader ?? useHeaderHeight();
-    }
-
     if (useExtendedHeader) {
       headerBackground = theme.assets?.headerBackground;
     }
@@ -239,9 +237,8 @@ const Screen = forwardRef(
       <View
         style={[Styles.flex, {backgroundColor}]}
         accessibilityLabel={`ScreenContainer`}>
-        <View style={styles.screenBanner}>{renderHeader()}</View>
         <KeyboardAvoidingView
-          style={[Styles.flex, {paddingTop: marginHeader}]}
+          style={Styles.flex}
           enabled={enableKeyboardAvoidingView}
           behavior={Platform.select({
             ios: 'padding',
@@ -251,9 +248,14 @@ const Screen = forwardRef(
           <Component
             {...scrollViewProps}
             ref={ref}
+            heightHeader={heightHeader}
             showsVerticalScrollIndicator={false}
             onScroll={handleScroll}
             style={Styles.flex}>
+            <View
+              style={[styles.screenBanner, {maxHeight: 215 + layoutOffset}]}>
+              {renderHeader()}
+            </View>
             {renderContent()}
           </Component>
           {Footer && (

package/Layout/styles.ts

@@ -3,9 +3,7 @@ import {Radius, Spacing} from '../Consts';
 
 export default StyleSheet.create({
   screenBanner: {
-    position: 'absolute',
     width: '100%',
-    maxHeight: 215,
   },
   boxGrid: {
     position: 'absolute',

package/package.json

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