@momo-kits/foundation 0.162.2-sp.1 → 0.162.2-sp.2

package/Application/Components/HeaderAnimated.tsx

@@ -8,7 +8,7 @@ import { type HeaderAnimatedProps } from '../types';
 import React from 'react';
 import { Image } from '../../Image';
 import { Colors } from '../../Consts';
-import { useNormalizedSharedValue } from './useAnimatedCompat';
+import { useNormalizedSharedValue } from '../utils';
 
 const HeaderAnimated: React.FC<HeaderAnimatedProps> = ({
   animatedValue,

package/Application/Components/HeaderBackground.tsx

@@ -7,7 +7,7 @@ import { ApplicationContext, MiniAppContext } from '../../Context';
 import { Colors, Styles } from '../../Consts';
 import { Image } from '../../Image';
 import BackgroundImageView from './BackgroundImageView';
-import { useNormalizedSharedValue } from './useAnimatedCompat';
+import { useNormalizedSharedValue } from '../utils';
 
 const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
   animatedValue,

package/Application/Components/HeaderExtendHeader.tsx

@@ -17,7 +17,7 @@ import BackgroundImageView from './BackgroundImageView';
 import {
   AnimatedCompatValue,
   useNormalizedSharedValue,
-} from './useAnimatedCompat';
+} from '../utils';
 
 const SCREEN_PADDING = 12;
 const BACK_WIDTH = 28;

package/Application/Components/HeaderTitle.tsx

@@ -24,7 +24,7 @@ import { Skeleton } from '../../Skeleton';
 import {
   AnimatedCompatValue,
   useNormalizedSharedValue,
-} from './useAnimatedCompat';
+} from '../utils';
 
 type HeaderTitleInterpolate = {
   inputRange: number[];

package/Application/Components/SearchHeader.tsx

@@ -11,7 +11,7 @@ import React, { useContext } from 'react';
 import { SearchHeaderProps } from '../types';
 import { ApplicationContext, MiniAppContext } from '../../Context';
 import { Text } from '../../Text';
-import { useNormalizedSharedValue } from './useAnimatedCompat';
+import { useNormalizedSharedValue } from '../utils';
 
 const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
   (

package/Application/utils.tsx

@@ -5,8 +5,9 @@ import {
 } from '@react-navigation/stack';
 import type { HeaderTitleProps, NavigationOptions } from './types';
 import { Colors, Spacing } from '../Consts';
-import { AppState, Platform } from 'react-native';
+import { Animated, AppState, Platform } from 'react-native';
 import type { SharedValue } from 'react-native-reanimated';
+import { useSharedValue } from 'react-native-reanimated';
 import {
   MiniAppContext,
   ScreenContext,
@@ -229,6 +230,43 @@ const useAppState = () => {
   };
 };
 
+/**
+ * Union of the two animation runtimes an internal foundation component might
+ * receive. Public Screen props still accept React Native Animated.Value only;
+ * this type keeps lower-level header/floating components compatible while they
+ * render with reanimated.
+ */
+export type AnimatedCompatValue = Animated.Value | SharedValue<number>;
+
+const isRNAnimatedValue = (v: unknown): v is Animated.Value =>
+  !!v &&
+  typeof (v as Animated.Value).setValue === 'function' &&
+  typeof (v as Animated.Value).interpolate === 'function';
+
+const isSharedValue = (v: unknown): v is SharedValue<number> =>
+  !!v && !isRNAnimatedValue(v) && 'value' in (v as object);
+
+const useNormalizedSharedValue = (
+  input?: AnimatedCompatValue,
+): SharedValue<number> => {
+  const fallback = useSharedValue(0);
+
+  useEffect(() => {
+    if (!isRNAnimatedValue(input)) {
+      return;
+    }
+    const id = input.addListener(({ value }) => {
+      fallback.value = value;
+    });
+    return () => input.removeListener(id);
+  }, [input, fallback]);
+
+  if (isSharedValue(input)) {
+    return input;
+  }
+  return fallback;
+};
+
 export {
   getStackOptions,
   getModalOptions,
@@ -237,4 +275,5 @@ export {
   setAutomationID,
   useComponentId,
   useAppState,
+  useNormalizedSharedValue,
 };

package/Layout/FloatingButton.tsx

@@ -18,7 +18,7 @@ import { useScaleSize } from '../Text';
 import {
   AnimatedCompatValue,
   useNormalizedSharedValue,
-} from '../Application/Components/useAnimatedCompat';
+} from '../Application/utils';
 
 export interface FloatingButtonProps {
   label?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.162.2-sp.1",
+    "version": "0.162.2-sp.2",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},

package/Application/Components/useAnimatedCompat.ts

@@ -1,63 +0,0 @@
-import { useEffect } from 'react';
-import { Animated } from 'react-native';
-import { useSharedValue, type SharedValue } from 'react-native-reanimated';
-
-/**
- * Union of the two animation runtimes a consumer might hand to a foundation
- * component. react-native `Animated.Value` (legacy) and reanimated
- * `SharedValue` are different objects and cannot be used interchangeably, so
- * foundation components normalize whatever they receive into a `SharedValue`
- * via {@link useNormalizedSharedValue} before rendering with reanimated.
- */
-export type AnimatedCompatValue = Animated.Value | SharedValue<number>;
-
-/**
- * A react-native `Animated.Value` exposes `setValue`/`interpolate` methods; a
- * reanimated `SharedValue` does not.
- */
-export const isRNAnimatedValue = (v: unknown): v is Animated.Value =>
-  !!v &&
-  typeof (v as Animated.Value).setValue === 'function' &&
-  typeof (v as Animated.Value).interpolate === 'function';
-
-/**
- * Heuristic: a reanimated `SharedValue` carries a `value` accessor but none of
- * the `Animated.Value` methods.
- */
-export const isSharedValue = (v: unknown): v is SharedValue<number> =>
-  !!v && !isRNAnimatedValue(v) && 'value' in (v as object);
-
-/**
- * Normalize an incoming animated value (either runtime, or nothing) into a
- * reanimated `SharedValue<number>` that foundation components can drive with
- * `useAnimatedStyle`/`interpolate`.
- *
- * - SharedValue  → returned as-is (zero overhead, shares the same UI-thread cell)
- * - Animated.Value → bridged: a JS-thread `addListener` mirrors its value into
- *   an internal SharedValue. NOTE: when the source `Animated.Value` is driven
- *   by `Animated.event(..., { useNativeDriver: true })`, `addListener` does NOT
- *   fire per frame, so the bridge stays flat. For the Screen-driven case the
- *   bridge is fed from the scroll `listener` instead (see Screen.tsx); this
- *   hook's listener is the safety net for standalone / JS-driven usage.
- * - undefined    → a fresh internal SharedValue stuck at 0
- */
-export function useNormalizedSharedValue(
-  input?: AnimatedCompatValue,
-): SharedValue<number> {
-  const fallback = useSharedValue(0);
-
-  useEffect(() => {
-    if (!isRNAnimatedValue(input)) {
-      return;
-    }
-    const id = input.addListener(({ value }) => {
-      fallback.value = value;
-    });
-    return () => input.removeListener(id);
-  }, [input, fallback]);
-
-  if (isSharedValue(input)) {
-    return input;
-  }
-  return fallback;
-}