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

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,10 +38,16 @@ export function Badge({
   size = 18,
   ...rest
 }: Props) {
-  const [opacity] = React.useState(() => new Animated.Value(visible ? 1 : 0));
+  const [opacity] = React.useState(
+    () =>
+      new Animated.Value(visible ? 1 : 0, {
+        useNativeDriver: true,
+        unstable_disableBatchingForNativeCreate: true,
+      }),
+  );
   const [rendered, setRendered] = React.useState(visible);
 
-  const {colors, fonts} = useTheme();
+  const { colors, fonts } = useTheme();
 
   React.useEffect(() => {
     if (!rendered) {
@@ -52,7 +58,7 @@ export function Badge({
       toValue: visible ? 1 : 0,
       duration: 150,
       useNativeDriver,
-    }).start(({finished}) => {
+    }).start(({ finished }) => {
       if (finished && !visible) {
         setRendered(false);
       }
@@ -70,7 +76,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';
 
@@ -103,7 +109,8 @@ export function Badge({
         styles.container,
         restStyle,
       ]}
-      {...rest}>
+      {...rest}
+    >
       {children}
     </Animated.Text>
   );

package/Application/BottomTab/BottomTabBar.tsx

@@ -57,7 +57,12 @@ 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)).current;
+  const indicatorAnimated = React.useRef(
+    new Animated.Value(0, {
+      useNativeDriver: true,
+      unstable_disableBatchingForNativeCreate: true,
+    }),
+  ).current;
   const insets = useSafeAreaInsets();
   const paddingBottom = getPaddingBottom(insets);
   const focusedTab = state?.routes[state.index]?.name || routes[0]?.params;

package/Application/BottomTab/index.tsx

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

package/Application/Components/HeaderBackground.tsx

@@ -13,7 +13,10 @@ const LinearGradientAnimated = Animated.createAnimatedComponent(LinearGradient);
  * header background for default
  */
 const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
-  animatedValue = new Animated.Value(0),
+  animatedValue = new Animated.Value(0, {
+    useNativeDriver: true,
+    unstable_disableBatchingForNativeCreate: true,
+  }),
   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,8 +42,13 @@ const HeaderExtendHeader: React.FC<{
   gradientColor: customGradientColor,
   headerBackground: customBackground,
 }) => {
-  const {theme} = useContext(ApplicationContext);
-  const animated = useRef(new Animated.Value(0));
+  const { theme } = useContext(ApplicationContext);
+  const animated = useRef(
+    new Animated.Value(0, {
+      useNativeDriver: true,
+      unstable_disableBatchingForNativeCreate: true,
+    }),
+  );
   const gradientColor = customGradientColor ?? theme.colors.gradient;
   const headerBackground = customBackground ?? theme.assets?.headerBackground;
   const leftPosition = inputSearchProps?.leftPosition || BACK_WIDTH + 20;
@@ -60,7 +65,7 @@ const HeaderExtendHeader: React.FC<{
   });
 
   useEffect(() => {
-    const listener = animatedValue.addListener(({value}) => {
+    const listener = animatedValue.addListener(({ value }) => {
       animated.current.setValue(value);
     });
     return () => {
@@ -95,8 +100,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}
@@ -106,16 +111,18 @@ 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}
                 />
               )}
@@ -128,10 +135,11 @@ 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],
@@ -141,8 +149,9 @@ const HeaderExtendHeader: React.FC<{
                 ],
                 extrapolate: 'clamp',
               }),
-            }}>
-            <Animated.View style={{backgroundColor, borderRadius: Radius.XL}}>
+            }}
+          >
+            <Animated.View style={{ backgroundColor, borderRadius: Radius.XL }}>
               <InputSearch
                 {...inputSearchProps}
                 ref={inputSearchRef}
@@ -159,7 +168,7 @@ const HeaderExtendHeader: React.FC<{
 
   if (headerType === 'extended') {
     return (
-      <View style={{zIndex: 0}}>
+      <View style={{ zIndex: 0 }}>
         <BackgroundImageView
           useShadowHeader={useShadowHeader}
           heightHeader={heightHeader}
@@ -169,17 +178,18 @@ 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>
     );
@@ -223,4 +233,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export {HeaderExtendHeader};
+export { HeaderExtendHeader };

package/Application/Components/SearchHeader.tsx

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

package/Application/ModalScreen.tsx

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

package/Application/utils.tsx

@@ -36,8 +36,6 @@ const getStackOptions = (): StackNavigationOptions => {
     headerRight: (props: any) => <HeaderRight {...props} />,
     headerTintColor: Colors.black_17,
     gestureEnabled: false,
-    freezeOnBlur: true,
-    animation: 'none',
     ...TransitionPresets.SlideFromRightIOS,
   };
 };

package/Badge/BadgeDotAnimation.tsx

@@ -7,9 +7,24 @@ const DURATION = 500;
 
 const BadgeDotAnimation = ({ size, style }: BadgeDotProps) => {
   // Refs for animated values
-  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 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 dotStyle =
     size === 'small' ? styles.dotAnimationSmall : styles.dotAnimation;

package/Input/InputOTP.tsx

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

package/Layout/FloatingButton.tsx

@@ -41,7 +41,12 @@ 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)); // Initial opacity set to 0
+  const [opacityAnimated] = useState(
+    new Animated.Value(0, {
+      useNativeDriver: true,
+      unstable_disableBatchingForNativeCreate: true,
+    }),
+  ); // Initial opacity set to 0
   const [widthAnimated, setWidthAnimated] = useState<Animated.Value>();
   const lastOffset = useRef(0);
   const lastDirection = useRef<string>(null);
@@ -100,7 +105,12 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
     const layout = event.nativeEvent.layout;
     if (widthAnimated) return;
     maxWidth.current = layout.width;
-    setWidthAnimated(new Animated.Value(layout.width));
+    setWidthAnimated(
+      new Animated.Value(layout.width, {
+        useNativeDriver: true,
+        unstable_disableBatchingForNativeCreate: true,
+      }),
+    );
   };
 
   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),
+      customAnimatedValue || new Animated.Value(0, {useNativeDriver: true, unstable_disableBatchingForNativeCreate: true}),
     );
     const currentTint = useRef<string | undefined>(undefined);
     const isTab = navigation?.instance?.getState?.()?.type === 'tab';

package/Loader/ProgressBar.tsx

@@ -1,13 +1,18 @@
-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)).current;
+const ProgressBar: FC<ProgressBarProps> = ({ percent = 0, style }) => {
+  const { theme } = useContext(ApplicationContext);
+  const animation = useRef(
+    new Animated.Value(0, {
+      useNativeDriver: true,
+      unstable_disableBatchingForNativeCreate: true,
+    }),
+  ).current;
 
   useEffect(() => {
     Animated.timing(animation, {
@@ -27,8 +32,9 @@ 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,8 +11,13 @@ const PaginationScroll: FC<ScrollIndicatorProps> = ({
   children,
   scrollViewRef,
 }) => {
-  const {theme} = useContext(ApplicationContext);
-  const left = useRef(new Animated.Value(0)).current;
+  const { theme } = useContext(ApplicationContext);
+  const left = useRef(
+    new Animated.Value(0, {
+      useNativeDriver: true,
+      unstable_disableBatchingForNativeCreate: true,
+    }),
+  ).current;
   const [scrollViewWidth, setScrollViewWidth] = useState(0);
   const [scrollContentWidth, setScrollContentWidth] = useState(0);
 
@@ -23,7 +28,7 @@ const PaginationScroll: FC<ScrollIndicatorProps> = ({
         outputRange: [0, INDICATOR_CONTAINER_WIDTH - INDICATOR_WIDTH],
         extrapolate: 'clamp',
       });
-      return {transform: [{translateX: value}]};
+      return { transform: [{ translateX: value }] };
     }
     return {};
   };
@@ -42,7 +47,7 @@ const PaginationScroll: FC<ScrollIndicatorProps> = ({
               },
             },
           ],
-          {useNativeDriver: true}
+          { useNativeDriver: true },
         )}
         alwaysBounceHorizontal={false}
         showsHorizontalScrollIndicator={false}
@@ -53,7 +58,8 @@ const PaginationScroll: FC<ScrollIndicatorProps> = ({
         }}
         onLayout={e => {
           setScrollViewWidth(e.nativeEvent.layout.width);
-        }}>
+        }}
+      >
         {children}
       </Animated.ScrollView>
     );
@@ -63,8 +69,9 @@ 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,7 +20,12 @@ 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)).current;
+  const beginShimmerPosition = useRef(
+    new Animated.Value(0, {
+      useNativeDriver: true,
+      unstable_disableBatchingForNativeCreate: true,
+    }),
+  ).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.5",
+    "version": "0.150.2-beta.test.15",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},
@@ -32,4 +32,4 @@
         "registry": "https://registry.npmjs.org/"
     },
     "license": "MoMo"
-}
+}