Core Reactive System

/**
 * Creates a shared value that can be accessed from both JS and UI threads
 * @param initialValue - The initial value
 * @returns SharedValue instance with .value property
 */
function useSharedValue<T>(initialValue: T): SharedValue<T>;

interface SharedValue<T> {
  /** Current value - can be read and written from both threads */
  value: T;
  /** Get the current value (alternative to .value property) */
  get(): T;
  /** Set the value with optional updater function */
  set(value: T | ((value: T) => T)): void;
  /** Add a listener that triggers when value changes */
  addListener: (listenerID: number, listener: (value: T) => void) => void;
  /** Remove a value change listener */
  removeListener: (listenerID: number) => void;
  /** Modify value using a transform function */
  modify: (modifier?: (value: T) => T, forceUpdate?: boolean) => void;
}

import { useSharedValue } from "react-native-reanimated";

// Basic shared values
const opacity = useSharedValue(1);
const scale = useSharedValue(1);
const position = useSharedValue({ x: 0, y: 0 });

// Reading and writing values
opacity.value = 0.5;
position.value = { x: 100, y: 200 };

// Using in animations
const handlePress = () => {
  opacity.value = withTiming(opacity.value === 1 ? 0 : 1);
};

/**
 * Creates an animated style object that updates when dependencies change
 * @param updater - Function returning style object using shared values
 * @param dependencies - Optional dependency array for optimization
 * @returns Animated style handle for use in component style prop
 */
function useAnimatedStyle<T>(
  updater: () => T,
  dependencies?: React.DependencyList
): AnimatedStyleHandle;

type AnimatedStyleHandle = object;

import { useAnimatedStyle, useSharedValue, withSpring } from "react-native-reanimated";

const MyComponent = () => {
  const scale = useSharedValue(1);
  const rotation = useSharedValue(0);

  // Basic animated style
  const animatedStyle = useAnimatedStyle(() => ({
    transform: [
      { scale: scale.value },
      { rotate: `${rotation.value}deg` }
    ],
  }));

  // Style with conditional logic
  const conditionalStyle = useAnimatedStyle(() => ({
    backgroundColor: scale.value > 1.2 ? "red" : "blue",
    borderRadius: scale.value * 10,
  }));

  // Using dependency array for optimization
  const optimizedStyle = useAnimatedStyle(() => ({
    opacity: scale.value > 1 ? 1 : 0.5,
  }), []);

  return (
    <Animated.View style={[baseStyle, animatedStyle]} />
  );
};

/**
 * Creates a derived value that automatically updates when dependencies change
 * @param processor - Function computing the derived value
 * @param dependencies - Optional dependency array for optimization
 * @returns Read-only derived value
 */
function useDerivedValue<T>(
  processor: () => T,
  dependencies?: React.DependencyList
): DerivedValue<T>;

interface DerivedValue<T> {
  /** Read-only computed value */
  readonly value: T;
}

import { useDerivedValue, useSharedValue, interpolate } from "react-native-reanimated";

const MyComponent = () => {
  const scrollY = useSharedValue(0);
  const scale = useSharedValue(1);

  // Simple derived value
  const isScrolledDown = useDerivedValue(() => scrollY.value > 100);

  // Complex computation
  const headerOpacity = useDerivedValue(() => {
    return interpolate(
      scrollY.value,
      [0, 100, 200],
      [1, 0.5, 0],
      Extrapolation.CLAMP
    );
  });

  // Combining multiple shared values
  const combinedTransform = useDerivedValue(() => ({
    scale: scale.value,
    translateY: scrollY.value * -0.5,
  }));

  const animatedStyle = useAnimatedStyle(() => ({
    opacity: headerOpacity.value,
    transform: [
      { scale: combinedTransform.value.scale },
      { translateY: combinedTransform.value.translateY }
    ],
  }));

  return <Animated.View style={animatedStyle} />;
};

/**
 * Creates animated props that update when shared values change
 * @param updater - Function returning props object using shared values
 * @param dependencies - Optional dependency array for optimization
 * @returns Animated props object for component props
 */
function useAnimatedProps<T>(
  updater: () => Partial<T>,
  dependencies?: React.DependencyList
): AnimatedProps<T>;

type AnimatedProps<T> = {
  [K in keyof T]: T[K] | SharedValue<T[K]> | DerivedValue<T[K]>;
};

import { useAnimatedProps, useSharedValue } from "react-native-reanimated";
import { TextInput } from "react-native";

const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);

const MyComponent = () => {
  const inputOpacity = useSharedValue(1);
  const fontSize = useSharedValue(16);

  // Animated props for TextInput
  const animatedProps = useAnimatedProps(() => ({
    placeholder: inputOpacity.value > 0.5 ? "Enter text" : "Disabled",
    editable: inputOpacity.value > 0.5,
  }));

  // Animated style combined with props
  const animatedStyle = useAnimatedStyle(() => ({
    opacity: inputOpacity.value,
    fontSize: fontSize.value,
  }));

  return (
    <AnimatedTextInput
      style={animatedStyle}
      animatedProps={animatedProps}
    />
  );
};

/**
 * Creates a mutable shared value (alternative to useSharedValue for non-hook contexts)
 * @param initialValue - The initial value
 * @returns SharedValue instance
 */
function makeMutable<T>(initialValue: T): SharedValue<T>;

/**
 * Checks if a value is a SharedValue instance
 * @param value - Value to check
 * @returns True if value is a SharedValue
 */
function isSharedValue(value: any): value is SharedValue<any>;

/**
 * Checks if Reanimated is properly configured
 * @returns True if Reanimated is configured correctly
 */
function isConfigured(): boolean;

/**
 * Checks if running Reanimated version 3
 * @returns True if using Reanimated 3+
 */
function isReanimated3(): boolean;

import { makeMutable, isSharedValue } from "react-native-reanimated";

// Creating shared values outside components
const globalCounter = makeMutable(0);

// Type guards
const handleValue = (value: unknown) => {
  if (isSharedValue(value)) {
    console.log("Current value:", value.value);
    value.value = value.value + 1;
  }
};

// Configuration checks
if (isConfigured()) {
  console.log("Reanimated is ready to use");
}

/**
 * React to changes in shared values with custom side effects
 * @param prepare - Function to prepare values (runs on UI thread)
 * @param react - Function to handle changes (runs on JS thread)
 * @param dependencies - Optional dependency array
 */
function useAnimatedReaction<T>(
  prepare: () => T,
  react: (prepared: T, previous: T | null) => void,
  dependencies?: React.DependencyList
): void;

import { useAnimatedReaction, useSharedValue, runOnJS } from "react-native-reanimated";

const MyComponent = () => {
  const scrollY = useSharedValue(0);
  
  // React to scroll changes
  useAnimatedReaction(
    () => scrollY.value > 100,
    (isScrolledDown, wasScrolledDown) => {
      if (isScrolledDown !== wasScrolledDown) {
        runOnJS(handleScrollThreshold)(isScrolledDown);
      }
    }
  );

  const handleScrollThreshold = (isScrolledDown: boolean) => {
    console.log("Scroll threshold crossed:", isScrolledDown);
  };

  return <ScrollView onScroll={scrollHandler} />;
};

type AnimatableValue = number | string | number[];

interface AnimatedStyleHandle {
  [key: string]: any;
}

type StyleProps = {
  [key: string]: AnimatableValue | StyleProps;
};

interface MeasuredDimensions {
  x: number;
  y: number;
  width: number;
  height: number;
  pageX: number;
  pageY: number;
}