feat(motion): adopt spring tokens and add shared CSS-transition helper

src/components/Badge.tsx

@@ -1,9 +1,14 @@
 import type { StyleProp, TextProps, TextStyle } from 'react-native';
 import { StyleSheet } from 'react-native';
 
-import Animated, { type AnimatedStyle } from 'react-native-reanimated';
+import Animated, {
+  type AnimatedStyle,
+  type CSSStyle,
+} from 'react-native-reanimated';
 
 import { useInternalTheme } from '../core/theming';
+import { useReduceMotion } from '../theme/accessibility/ReduceMotionContext';
+import { getTransition } from '../theme/tokens/sys/motion';
 import { cornerFull } from '../theme/tokens/sys/shape';
 import type { ThemeProp } from '../theme/types';
 
@@ -56,21 +61,17 @@ const Badge = ({
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
-
-  const {
-    animation: { scale },
-  } = theme;
+  const reduceMotion = useReduceMotion();
 
   const textColor = theme.colors.onError;
 
   const isLarge = children != null;
   const badgeSize = isLarge ? LARGE_SIZE : SMALL_SIZE;
   const labelFont = theme.fonts.labelSmall;
 
-  const transitionStyle = {
+  const transitionStyle: CSSStyle<TextStyle> = {
     opacity: visible ? 1 : 0,
-    transitionDuration: 150 * scale,
-    transitionProperty: 'opacity',
+    ...getTransition(theme, 'opacity', 'short3', 'standard', reduceMotion),
   };
 
   return (

src/components/Checkbox/Checkbox.tsx

@@ -9,14 +9,15 @@ import type {
   ViewStyle,
 } from 'react-native';
 
-import Animated, { cubicBezier, type CSSStyle } from 'react-native-reanimated';
+import Animated, { type CSSStyle } from 'react-native-reanimated';
 
 import { CheckboxTokens } from './tokens';
 import { getSelectionVisualState } from './utils';
 import { useLocale } from '../../core/locale';
 import { useInternalTheme } from '../../core/theming';
 import { useReduceMotion } from '../../theme/accessibility/ReduceMotionContext';
 import { tokens } from '../../theme/tokens';
+import { getTransition } from '../../theme/tokens/sys/motion';
 import type { ThemeProp } from '../../theme/types';
 import { isKeyboardFocusEvent } from '../../utils/isKeyboardFocusEvent';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
@@ -144,44 +145,38 @@ const Checkbox = ({
     customUncheckedColor: uncheckedColor,
   });
 
-  const fillTransitionTimingFunction = cubicBezier(
-    ...theme.motion.easing.standard
+  const fillTransition = getTransition(
+    theme,
+    ['opacity'],
+    'short2',
+    'standard',
+    reduceMotion
   );
 
-  const fillTransitionDuration = reduceMotion
-    ? 0
-    : theme.motion.duration.short2;
-
-  const checkTransitionDuration = reduceMotion
-    ? 0
-    : theme.motion.duration.short3;
-
-  const checkTransitionTimingFunction = cubicBezier(
-    ...theme.motion.easing.standard
+  const checkTransition = getTransition(
+    theme,
+    ['width', 'opacity'],
+    'short3',
+    'standard',
+    reduceMotion
   );
 
   const outlineStyle: CSSStyle<ViewStyle> = {
     borderColor: visual.outlineColor,
     opacity: selected ? 0 : 1,
-    transitionDuration: fillTransitionDuration,
-    transitionProperty: ['opacity'],
-    transitionTimingFunction: fillTransitionTimingFunction,
+    ...fillTransition,
   };
 
   const fillStyle: CSSStyle<ViewStyle> = {
     backgroundColor: visual.containerColor,
     opacity: selected ? 1 : 0,
-    transitionDuration: fillTransitionDuration,
-    transitionProperty: ['opacity'],
-    transitionTimingFunction: fillTransitionTimingFunction,
+    ...fillTransition,
   };
 
   const maskStyle: CSSStyle<ViewStyle> = {
     width: selected ? CONTAINER_SIZE : 0,
     opacity: selected ? 1 : 0,
-    transitionDuration: checkTransitionDuration,
-    transitionProperty: ['width', 'opacity'],
-    transitionTimingFunction: checkTransitionTimingFunction,
+    ...checkTransition,
   };
 
   // Remember the last drawn glyph so the reveal-mask can finish collapsing

src/components/SegmentedButtons/SegmentedButtonItem.tsx

@@ -22,19 +22,14 @@ import {
 } from './utils';
 import { useInternalTheme } from '../../core/theming';
 import { useReduceMotion } from '../../theme/accessibility/ReduceMotionContext';
+import { toRawSpring } from '../../theme/tokens/sys/motion';
 import type { ThemeProp } from '../../theme/types';
 import type { IconSource } from '../Icon';
 import Icon from '../Icon';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
 import type { Props as TouchableRippleProps } from '../TouchableRipple/TouchableRipple';
 import Text from '../Typography/Text';
 
-const CHECK_SPRING_CONFIG = {
-  stiffness: 230.2,
-  damping: 22,
-  mass: 1,
-};
-
 export type Props = {
   /**
    * Whether the segmented button is checked
@@ -139,16 +134,21 @@ const SegmentedButtonItem = ({
 
   const checkScale = useSharedValue(0);
 
+  const checkSpringConfig = React.useMemo(
+    () => ({
+      ...toRawSpring(theme.motion.spring.slow.spatial),
+      reduceMotion: reduceMotion ? ReduceMotion.Always : ReduceMotion.Never,
+    }),
+    [theme.motion.spring.slow.spatial, reduceMotion]
+  );
+
   React.useEffect(() => {
     if (!showSelectedCheck) {
       return;
     }
 
-    checkScale.value = withSpring(checked ? 1 : 0, {
-      ...CHECK_SPRING_CONFIG,
-      reduceMotion: reduceMotion ? ReduceMotion.Always : ReduceMotion.Never,
-    });
-  }, [checked, checkScale, reduceMotion, showSelectedCheck]);
+    checkScale.value = withSpring(checked ? 1 : 0, checkSpringConfig);
+  }, [checked, checkScale, checkSpringConfig, showSelectedCheck]);
 
   const checkAnimatedStyle = useAnimatedStyle(() => ({
     transform: [{ scale: checkScale.value }],

src/components/TextInput/TextInput.tsx

@@ -32,12 +32,6 @@ export type TextInputAnimationState = {
   animatedActiveOutlineStyle?: StyleProp<AnimatedStyle<StyleProp<ViewStyle>>>;
 };
 
-export type TextInputAnimationHandlers = {
-  runFocusAnimation: (hasText: boolean) => void;
-  runBlurAnimation: (hasText: boolean) => void;
-  syncFloatToValue: (hasText: boolean) => void;
-};
-
 export type TextInputFlags = {
   isRTL: boolean;
   isDisabled: boolean;

src/components/TextInput/constants.ts

@@ -1,9 +1,6 @@
 import { PixelRatio } from 'react-native';
 
-import { Easing } from 'react-native-reanimated';
-
 import { tokens } from '../../theme/tokens';
-import { motionDuration, motionEasing } from '../../theme/tokens/sys/motion';
 import { defaultShapes } from '../../theme/tokens/sys/shape';
 
 export const fontScale = PixelRatio.getFontScale();
@@ -46,16 +43,9 @@ export const SUPPORTING_TEXT_FONT_SIZE =
 
 export const SUPPORTING_TEXT_MARGIN_TOP = 4;
 
-export const ANIMATION_DURATION_MS = motionDuration.short3;
-
 export const ACTIVE_INDICATOR_SIZE = 2;
 export const INACTIVE_INDICATOR_SIZE = 1;
 
-export const TIMING_CONFIG = {
-  duration: ANIMATION_DURATION_MS,
-  easing: Easing.bezier(...motionEasing.standard),
-} as const;
-
 /**
  * Constants for the filled variant.
  */