@momo-kits/foundation 0.150.2-beta.test.15 → 0.150.2-image.1

package/Application/BottomTab/Badge.tsx

@@ -1,4 +1,4 @@
-import { useTheme } from '@react-navigation/native';
+import {useTheme} from '@react-navigation/native';
 import color from 'color';
 import * as React from 'react';
 import {
@@ -38,16 +38,10 @@ export function Badge({
   size = 18,
   ...rest
 }: Props) {
-  const [opacity] = React.useState(
-    () =>
-      new Animated.Value(visible ? 1 : 0, {
-        useNativeDriver: true,
-        unstable_disableBatchingForNativeCreate: true,
-      }),
-  );
+  const [opacity] = React.useState(() => new Animated.Value(visible ? 1 : 0));
   const [rendered, setRendered] = React.useState(visible);
 
-  const { colors, fonts } = useTheme();
+  const {colors, fonts} = useTheme();
 
   React.useEffect(() => {
     if (!rendered) {
@@ -58,7 +52,7 @@ export function Badge({
       toValue: visible ? 1 : 0,
       duration: 150,
       useNativeDriver,
-    }).start(({ finished }) => {
+    }).start(({finished}) => {
       if (finished && !visible) {
         setRendered(false);
       }
@@ -76,7 +70,7 @@ export function Badge({
   }
 
   // @ts-expect-error: backgroundColor definitely exists
-  const { backgroundColor = colors.notification, ...restStyle } =
+  const {backgroundColor = colors.notification, ...restStyle} =
     StyleSheet.flatten(style) || {};
   const textColor = color(backgroundColor).isLight() ? 'black' : 'white';
 
@@ -109,8 +103,7 @@ export function Badge({
         styles.container,
         restStyle,
       ]}
-      {...rest}
-    >
+      {...rest}>
       {children}
     </Animated.Text>
   );

package/Application/BottomTab/BottomTabBar.tsx

@@ -57,12 +57,7 @@ export default function BottomTabBar({
   const useFloating = floatingButton && state.routes.length % 2 === 0;
   const itemWidth = widthDevice / (state.routes.length + (useFloating ? 1 : 0));
   // const buildLink = useLinkBuilder();
-  const indicatorAnimated = React.useRef(
-    new Animated.Value(0, {
-      useNativeDriver: true,
-      unstable_disableBatchingForNativeCreate: true,
-    }),
-  ).current;
+  const indicatorAnimated = React.useRef(new Animated.Value(0)).current;
   const insets = useSafeAreaInsets();
   const paddingBottom = getPaddingBottom(insets);
   const focusedTab = state?.routes[state.index]?.name || routes[0]?.params;

package/Application/BottomTab/index.tsx

@@ -42,18 +42,8 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
 
   const opacityValue = 0.3;
   const scaleValue = 0.97;
-  const opacity = useRef(
-    new Animated.Value(opacityValue, {
-      useNativeDriver: true,
-      unstable_disableBatchingForNativeCreate: true,
-    }),
-  ).current;
-  const scale = useRef(
-    new Animated.Value(scaleValue, {
-      useNativeDriver: true,
-      unstable_disableBatchingForNativeCreate: true,
-    }),
-  ).current;
+  const opacity = useRef(new Animated.Value(opacityValue)).current;
+  const scale = useRef(new Animated.Value(scaleValue)).current;
   const screenName = screen?.name || screen?.type?.name || 'Invalid';
 
   const onScreenNavigated = useCallback(
@@ -243,12 +233,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
   const dimensions = useWindowDimensions();
   const insets = useSafeAreaInsets();
   const initialIndex = tabs.findIndex(i => i.name === initialRouteName);
-  const indicatorAnimated = useRef(
-    new Animated.Value(0, {
-      useNativeDriver: true,
-      unstable_disableBatchingForNativeCreate: true,
-    }),
-  );
+  const indicatorAnimated = useRef(new Animated.Value(0));
   const activeIndex = useRef(initialIndex > 0 ? initialIndex : 0);
   const itemWidth = dimensions.width / tabs.length;
 

package/Application/Components/HeaderBackground.tsx

@@ -13,10 +13,7 @@ const LinearGradientAnimated = Animated.createAnimatedComponent(LinearGradient);
  * header background for default
  */
 const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
-  animatedValue = new Animated.Value(0, {
-    useNativeDriver: true,
-    unstable_disableBatchingForNativeCreate: true,
-  }),
+  animatedValue = new Animated.Value(0),
   useGradient = true,
   useShadowHeader = true,
   gradientColor: customGradientColor,

package/Application/Components/HeaderExtendHeader.tsx

@@ -1,19 +1,19 @@
-import React, { Ref, useContext, useEffect, useRef } from 'react';
+import React, {Ref, useContext, useEffect, useRef} from 'react';
 import LinearGradient from 'react-native-linear-gradient';
-import { ApplicationContext, MiniAppContext } from '../index';
-import { Animated, Dimensions, Platform, StyleSheet, View } from 'react-native';
-import { HeaderType } from '../../Layout/types';
-import { InputRef, InputSearch } from '../../Input';
+import {ApplicationContext, MiniAppContext} from '../index';
+import {Animated, Dimensions, Platform, StyleSheet, View} from 'react-native';
+import {HeaderType} from '../../Layout/types';
+import {InputRef, InputSearch} from '../../Input';
 import Navigation from '../Navigation';
-import { Colors, Radius, Spacing } from '../../Consts';
-import { Image } from '../../Image';
-import { SearchHeaderProps } from '../types';
+import {Colors, Radius, Spacing} from '../../Consts';
+import {Image} from '../../Image';
+import {SearchHeaderProps} from '../types';
 import BackgroundImageView from './BackgroundImageView';
 
 const SCREEN_PADDING = 12;
 const BACK_WIDTH = 28;
 
-const { width: screenWidth } = Dimensions.get('window');
+const {width: screenWidth} = Dimensions.get('window');
 const LinearGradientAnimated = Animated.createAnimatedComponent(LinearGradient);
 
 /**
@@ -42,13 +42,8 @@ const HeaderExtendHeader: React.FC<{
   gradientColor: customGradientColor,
   headerBackground: customBackground,
 }) => {
-  const { theme } = useContext(ApplicationContext);
-  const animated = useRef(
-    new Animated.Value(0, {
-      useNativeDriver: true,
-      unstable_disableBatchingForNativeCreate: true,
-    }),
-  );
+  const {theme} = useContext(ApplicationContext);
+  const animated = useRef(new Animated.Value(0));
   const gradientColor = customGradientColor ?? theme.colors.gradient;
   const headerBackground = customBackground ?? theme.assets?.headerBackground;
   const leftPosition = inputSearchProps?.leftPosition || BACK_WIDTH + 20;
@@ -65,7 +60,7 @@ const HeaderExtendHeader: React.FC<{
   });
 
   useEffect(() => {
-    const listener = animatedValue.addListener(({ value }) => {
+    const listener = animatedValue.addListener(({value}) => {
       animated.current.setValue(value);
     });
     return () => {
@@ -100,8 +95,8 @@ const HeaderExtendHeader: React.FC<{
 
   if (inputSearchProps) {
     return (
-      <View style={{ zIndex: 0 }}>
-        <Animated.View style={{ height: height }} />
+      <View style={{zIndex: 0}}>
+        <Animated.View style={{height: height}} />
         <BackgroundImageView
           useShadowHeader={useShadowHeader}
           heightHeader={heightHeader}
@@ -111,18 +106,16 @@ const HeaderExtendHeader: React.FC<{
         <Animated.View
           style={[
             styles.headerBox,
-            { height: headerType === 'extended' ? height : heightHeader },
-          ]}
-        >
+            {height: headerType === 'extended' ? height : heightHeader},
+          ]}>
           {!!gradientColor && (
             <LinearGradientAnimated
               colors={[gradientColor, gradientColor + '00']}
-              style={[styles.extendedHeader, { opacity: opacityGradient }]}
-            >
+              style={[styles.extendedHeader, {opacity: opacityGradient}]}>
               {!!theme.assets?.headerBackground && (
                 <Image
                   style={styles.headerBackground}
-                  source={{ uri: theme.assets?.headerBackground }}
+                  source={{uri: theme.assets?.headerBackground}}
                   loading={false}
                 />
               )}
@@ -135,11 +128,10 @@ const HeaderExtendHeader: React.FC<{
             height,
             position: 'absolute',
             zIndex: 2,
-          }}
-        >
+          }}>
           <Animated.View
             style={{
-              transform: [{ translateX }],
+              transform: [{translateX}],
               marginVertical: Spacing.S,
               width: animated.current.interpolate({
                 inputRange: [0, 100],
@@ -149,9 +141,8 @@ const HeaderExtendHeader: React.FC<{
                 ],
                 extrapolate: 'clamp',
               }),
-            }}
-          >
-            <Animated.View style={{ backgroundColor, borderRadius: Radius.XL }}>
+            }}>
+            <Animated.View style={{backgroundColor, borderRadius: Radius.XL}}>
               <InputSearch
                 {...inputSearchProps}
                 ref={inputSearchRef}
@@ -168,7 +159,7 @@ const HeaderExtendHeader: React.FC<{
 
   if (headerType === 'extended') {
     return (
-      <View style={{ zIndex: 0 }}>
+      <View style={{zIndex: 0}}>
         <BackgroundImageView
           useShadowHeader={useShadowHeader}
           heightHeader={heightHeader}
@@ -178,18 +169,17 @@ const HeaderExtendHeader: React.FC<{
         {!!gradientColor && (
           <LinearGradientAnimated
             colors={[gradientColor, gradientColor + '00']}
-            style={[styles.extendedHeader, { opacity: opacityGradient }]}
-          >
+            style={[styles.extendedHeader, {opacity: opacityGradient}]}>
             {!!headerBackground && (
               <Image
                 style={styles.headerBackground}
-                source={{ uri: headerBackground }}
+                source={{uri: headerBackground}}
                 loading={false}
               />
             )}
           </LinearGradientAnimated>
         )}
-        <View style={{ height: heightHeader }} />
+        <View style={{height: heightHeader}} />
         <Verified />
       </View>
     );
@@ -233,4 +223,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export { HeaderExtendHeader };
+export {HeaderExtendHeader};

package/Application/Components/SearchHeader.tsx

@@ -20,12 +20,7 @@ const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
     const { theme, navigator } = useContext(ApplicationContext);
     const context = useContext<any>(MiniAppContext);
 
-    const animated = useRef(
-      new Animated.Value(0, {
-        useNativeDriver: true,
-        unstable_disableBatchingForNativeCreate: true,
-      }),
-    );
+    const animated = useRef(new Animated.Value(0));
 
     useEffect(() => {
       const listener = animatedValue?.addListener(({ value }) => {

package/Application/ModalScreen.tsx

@@ -33,18 +33,8 @@ const Modal: React.FC<ModalParams> = props => {
     useNativeModal = false,
   } = props.route.params;
   const Component = useRef(screen).current;
-  const opacity = useRef(
-    new Animated.Value(0, {
-      useNativeDriver: true,
-      unstable_disableBatchingForNativeCreate: true,
-    }),
-  ).current;
-  const scale = useRef(
-    new Animated.Value(0.8, {
-      useNativeDriver: true,
-      unstable_disableBatchingForNativeCreate: true,
-    }),
-  ).current;
+  const opacity = useRef(new Animated.Value(0)).current;
+  const scale = useRef(new Animated.Value(0.8)).current;
 
   const navigation = new Navigation(props.navigation);
   const params = {

package/Badge/BadgeDotAnimation.tsx

@@ -7,24 +7,9 @@ const DURATION = 500;
 
 const BadgeDotAnimation = ({ size, style }: BadgeDotProps) => {
   // Refs for animated values
-  const scaleAnim = useRef(
-    new Animated.Value(1, {
-      useNativeDriver: true,
-      unstable_disableBatchingForNativeCreate: true,
-    }),
-  ).current;
-  const waveScaleAnim = useRef(
-    new Animated.Value(1, {
-      useNativeDriver: true,
-      unstable_disableBatchingForNativeCreate: true,
-    }),
-  ).current;
-  const waveOpacityAnim = useRef(
-    new Animated.Value(0, {
-      useNativeDriver: true,
-      unstable_disableBatchingForNativeCreate: true,
-    }),
-  ).current;
+  const scaleAnim = useRef(new Animated.Value(1)).current;
+  const waveScaleAnim = useRef(new Animated.Value(1)).current;
+  const waveOpacityAnim = useRef(new Animated.Value(0)).current;
 
   const dotStyle =
     size === 'small' ? styles.dotAnimationSmall : styles.dotAnimation;

package/Image/index.tsx

@@ -66,7 +66,7 @@ const Image: React.FC<ImageProps> = ({
       {...rest}
       {...{ accessibilityLabel: rest.accessibilityLabel ?? accessibilityLabel }}
       source={source}
-      style={[styles.container, style]}
+      style={style}
       onProgress={() => {
         error.current = false;
         if (status !== 'loading' && loading) {
@@ -90,7 +90,7 @@ const Image: React.FC<ImageProps> = ({
         error.current = true;
       }}
     >
-      {renderContent()}
+      <View style={styles.container}>{renderContent()}</View>
     </FastImage>
   );
 };

package/Image/styles.ts

@@ -1,5 +1,5 @@
-import {StyleSheet} from 'react-native';
+import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
-  container: {},
-});
+  container: { zIndex: -1, flex: 1 },
+});

package/Input/InputOTP.tsx

@@ -30,12 +30,7 @@ import SystemTextInput from './SystemTextInput';
 const OTPCaret: FC<CaretProps> = ({ index, length }) => {
   const DURATION = 300;
   const { theme } = useContext(ApplicationContext);
-  const opacity = useRef(
-    new Animated.Value(0, {
-      useNativeDriver: true,
-      unstable_disableBatchingForNativeCreate: true,
-    }),
-  ).current;
+  const opacity = useRef(new Animated.Value(0)).current;
 
   useEffect(() => {
     Animated.loop(

package/Layout/Card.tsx

@@ -33,9 +33,10 @@ const Card: React.FC<CardProps> = ({
   const gutterSize = 8;
   const margin = 12;
   const widthSection = Dimensions.get('window').width - margin * 2;
-  const sizePerSpan =
+  let sizePerSpan =
     (widthSection - margin * 2 - gutterSize * (numberOfColumns - 1)) /
-    numberOfColumns;
+      numberOfColumns -
+    1 / numberOfColumns;
 
   const gridContext: GridContextProps = {
     numberOfColumns,

package/Layout/FloatingButton.tsx

@@ -41,12 +41,7 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
   const { theme } = useContext(ApplicationContext);
   const maxWidth = useRef(0);
   const minWidth = size === 'small' ? 36 : 48;
-  const [opacityAnimated] = useState(
-    new Animated.Value(0, {
-      useNativeDriver: true,
-      unstable_disableBatchingForNativeCreate: true,
-    }),
-  ); // Initial opacity set to 0
+  const [opacityAnimated] = useState(new Animated.Value(0)); // Initial opacity set to 0
   const [widthAnimated, setWidthAnimated] = useState<Animated.Value>();
   const lastOffset = useRef(0);
   const lastDirection = useRef<string>(null);
@@ -105,12 +100,7 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
     const layout = event.nativeEvent.layout;
     if (widthAnimated) return;
     maxWidth.current = layout.width;
-    setWidthAnimated(
-      new Animated.Value(layout.width, {
-        useNativeDriver: true,
-        unstable_disableBatchingForNativeCreate: true,
-      }),
-    );
+    setWidthAnimated(new Animated.Value(layout.width));
   };
 
   if (renderComponent) {

package/Layout/Screen.tsx

@@ -194,7 +194,7 @@ const Screen = forwardRef(
     const insets = useSafeAreaInsets();
     const heightHeader = useHeaderHeight();
     const animatedValue = useRef<Animated.Value>(
-      customAnimatedValue || new Animated.Value(0, {useNativeDriver: true, unstable_disableBatchingForNativeCreate: true}),
+      customAnimatedValue || new Animated.Value(0),
     );
     const currentTint = useRef<string | undefined>(undefined);
     const isTab = navigation?.instance?.getState?.()?.type === 'tab';

package/Loader/ProgressBar.tsx

@@ -1,18 +1,13 @@
-import React, { FC, useContext, useEffect, useRef } from 'react';
-import { Animated, View } from 'react-native';
+import React, {FC, useContext, useEffect, useRef} from 'react';
+import {Animated, View} from 'react-native';
 import styles from './styles';
-import { ProgressBarProps } from './types';
-import { ApplicationContext } from '../Application';
-import { Radius } from '../Consts';
+import {ProgressBarProps} from './types';
+import {ApplicationContext} from '../Application';
+import {Radius} from '../Consts';
 
-const ProgressBar: FC<ProgressBarProps> = ({ percent = 0, style }) => {
-  const { theme } = useContext(ApplicationContext);
-  const animation = useRef(
-    new Animated.Value(0, {
-      useNativeDriver: true,
-      unstable_disableBatchingForNativeCreate: true,
-    }),
-  ).current;
+const ProgressBar: FC<ProgressBarProps> = ({percent = 0, style}) => {
+  const {theme} = useContext(ApplicationContext);
+  const animation = useRef(new Animated.Value(0)).current;
 
   useEffect(() => {
     Animated.timing(animation, {
@@ -32,9 +27,8 @@ const ProgressBar: FC<ProgressBarProps> = ({ percent = 0, style }) => {
       style={[
         style,
         styles.progressContainer,
-        { backgroundColor: theme.colors.background.default },
-      ]}
-    >
+        {backgroundColor: theme.colors.background.default},
+      ]}>
       <Animated.View
         style={{
           height: 4,

package/Pagination/PaginationScroll.tsx

@@ -1,8 +1,8 @@
-import React, { FC, useContext, useRef, useState } from 'react';
-import { Animated, View } from 'react-native';
-import { ScrollIndicatorProps } from './types';
+import React, {FC, useContext, useRef, useState} from 'react';
+import {Animated, View} from 'react-native';
+import {ScrollIndicatorProps} from './types';
 import styles from './styles';
-import { ApplicationContext } from '../Application';
+import {ApplicationContext} from '../Application';
 
 const INDICATOR_WIDTH = 24;
 const INDICATOR_CONTAINER_WIDTH = 72;
@@ -11,13 +11,8 @@ const PaginationScroll: FC<ScrollIndicatorProps> = ({
   children,
   scrollViewRef,
 }) => {
-  const { theme } = useContext(ApplicationContext);
-  const left = useRef(
-    new Animated.Value(0, {
-      useNativeDriver: true,
-      unstable_disableBatchingForNativeCreate: true,
-    }),
-  ).current;
+  const {theme} = useContext(ApplicationContext);
+  const left = useRef(new Animated.Value(0)).current;
   const [scrollViewWidth, setScrollViewWidth] = useState(0);
   const [scrollContentWidth, setScrollContentWidth] = useState(0);
 
@@ -28,7 +23,7 @@ const PaginationScroll: FC<ScrollIndicatorProps> = ({
         outputRange: [0, INDICATOR_CONTAINER_WIDTH - INDICATOR_WIDTH],
         extrapolate: 'clamp',
       });
-      return { transform: [{ translateX: value }] };
+      return {transform: [{translateX: value}]};
     }
     return {};
   };
@@ -47,7 +42,7 @@ const PaginationScroll: FC<ScrollIndicatorProps> = ({
               },
             },
           ],
-          { useNativeDriver: true },
+          {useNativeDriver: true}
         )}
         alwaysBounceHorizontal={false}
         showsHorizontalScrollIndicator={false}
@@ -58,8 +53,7 @@ const PaginationScroll: FC<ScrollIndicatorProps> = ({
         }}
         onLayout={e => {
           setScrollViewWidth(e.nativeEvent.layout.width);
-        }}
-      >
+        }}>
         {children}
       </Animated.ScrollView>
     );
@@ -69,9 +63,8 @@ const PaginationScroll: FC<ScrollIndicatorProps> = ({
       <View
         style={[
           styles.indicatorContainer,
-          { backgroundColor: theme.colors.background.pressed },
-        ]}
-      >
+          {backgroundColor: theme.colors.background.pressed},
+        ]}>
         <Animated.View
           style={[
             styles.indicator,

package/Skeleton/index.tsx

@@ -20,12 +20,7 @@ const Skeleton: React.FC<SkeletonTypes> = ({ style }) => {
   const PRIMARY_COLOR = Colors.black_05;
   const HIGHLIGHT_COLOR1 = Colors.black_05;
   const HIGHLIGHT_COLOR2 = Colors.black_03;
-  const beginShimmerPosition = useRef(
-    new Animated.Value(0, {
-      useNativeDriver: true,
-      unstable_disableBatchingForNativeCreate: true,
-    }),
-  ).current;
+  const beginShimmerPosition = useRef(new Animated.Value(0)).current;
 
   const shimmerColors = [HIGHLIGHT_COLOR1, HIGHLIGHT_COLOR2, HIGHLIGHT_COLOR1];
   const linearTranslate = beginShimmerPosition.interpolate({

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.150.2-beta.test.15",
+    "version": "0.150.2-image.1",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},
@@ -32,4 +32,4 @@
         "registry": "https://registry.npmjs.org/"
     },
     "license": "MoMo"
-}
+}