tessl/npm-react-native-reanimated

More powerful alternative to Animated library for React Native with UI thread animations and advanced gesture handling.

—

Pending

Overview

Eval results

Files

Animated Components

Name: tessl/npm-react-native-reanimated
Author: tessl

High-performance animated versions of React Native components with optimized rendering that can efficiently handle animated properties and styles.

Capabilities

Built-in Animated Components

Pre-built animated versions of common React Native components.

const Animated: {
  /** Animated version of React Native View */
  View: React.ComponentType<AnimatedProps<ViewProps>>;
  /** Animated version of React Native Text */
  Text: React.ComponentType<AnimatedProps<TextProps>>;
  /** Animated version of React Native ScrollView */
  ScrollView: React.ComponentType<AnimatedProps<ScrollViewProps>>;
  /** Animated version of React Native Image */
  Image: React.ComponentType<AnimatedProps<ImageProps>>;
  /** Animated version of React Native FlatList */
  FlatList: React.ComponentType<AnimatedProps<FlatListProps<any>>>;
};

Usage Examples:

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

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

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

  const textStyle = useAnimatedStyle(() => ({
    color: opacity.value > 0.5 ? "black" : "gray",
    fontSize: 16 + scale.value * 4,
  }));

  const handlePress = () => {
    opacity.value = withSpring(opacity.value === 1 ? 0.3 : 1);
    scale.value = withSpring(scale.value === 1 ? 1.2 : 1);
    translateY.value = withSpring(translateY.value === 0 ? -20 : 0);
  };

  return (
    <>
      {/* Animated View */}
      <Animated.View
        style={[
          {
            width: 200,
            height: 100,
            backgroundColor: "lightblue",
            borderRadius: 10,
          },
          animatedStyle,
        ]}
      >
        {/* Animated Text inside */}
        <Animated.Text style={[{ textAlign: "center" }, textStyle]}>
          Animated Text
        </Animated.Text>
      </Animated.View>

      <Button title="Animate" onPress={handlePress} />
    </>
  );
};

Animated ScrollView

Enhanced ScrollView with optimized scroll event handling and animated properties.

interface AnimatedScrollViewProps extends ScrollViewProps {
  /** Animated scroll event handler */
  onScroll?: EventHandler<ScrollEvent>;
  /** Additional animated props */
  animatedProps?: AnimatedProps<ScrollViewProps>;
  /** Layout animation for scroll view */
  layout?: ILayoutAnimationBuilder;
}

Usage Example:

import React from "react";
import Animated, { 
  useSharedValue, 
  useAnimatedScrollHandler,
  useAnimatedStyle,
  interpolate 
} from "react-native-reanimated";

const AnimatedScrollExample = () => {
  const scrollY = useSharedValue(0);
  const headerHeight = 100;

  const scrollHandler = useAnimatedScrollHandler({
    onScroll: (event) => {
      scrollY.value = event.contentOffset.y;
    },
  });

  const headerStyle = useAnimatedStyle(() => ({
    opacity: interpolate(scrollY.value, [0, headerHeight], [1, 0]),
    transform: [
      {
        translateY: interpolate(
          scrollY.value,
          [0, headerHeight],
          [0, -headerHeight / 2]
        ),
      },
    ],
  }));

  return (
    <>
      <Animated.View style={[{ height: headerHeight }, headerStyle]}>
        <Animated.Text>Parallax Header</Animated.Text>
      </Animated.View>
      
      <Animated.ScrollView
        onScroll={scrollHandler}
        scrollEventThrottle={16}
      >
        {/* Scroll content */}
        {Array.from({ length: 50 }).map((_, index) => (
          <Animated.View
            key={index}
            style={{
              height: 80,
              backgroundColor: index % 2 ? "lightgray" : "white",
              justifyContent: "center",
              alignItems: "center",
            }}
          >
            <Animated.Text>Item {index}</Animated.Text>
          </Animated.View>
        ))}
      </Animated.ScrollView>
    </>
  );
};

Animated FlatList

High-performance animated list component with layout animations and optimized rendering.

interface AnimatedFlatListProps<T> extends FlatListProps<T> {
  /** Layout animation for list items */
  itemLayoutAnimation?: IEntryExitAnimationBuilder;
  /** Animated scroll event handler */
  onScroll?: EventHandler<ScrollEvent>;
  /** Additional animated props */
  animatedProps?: AnimatedProps<FlatListProps<T>>;
}

Usage Example:

import React, { useState } from "react";
import Animated, { 
  FadeInDown, 
  FadeOutUp,
  useAnimatedScrollHandler,
  useSharedValue 
} from "react-native-reanimated";
import { Button } from "react-native";

const AnimatedFlatListExample = () => {
  const [data, setData] = useState([1, 2, 3, 4, 5]);
  const scrollY = useSharedValue(0);

  const scrollHandler = useAnimatedScrollHandler({
    onScroll: (event) => {
      scrollY.value = event.contentOffset.y;
    },
  });

  const addItem = () => {
    setData(prev => [...prev, prev.length + 1]);
  };

  const removeItem = () => {
    setData(prev => prev.slice(0, -1));
  };

  const renderItem = ({ item, index }: { item: number; index: number }) => (
    <Animated.View
      entering={FadeInDown.delay(index * 100)}
      exiting={FadeOutUp}
      style={{
        height: 80,
        backgroundColor: "lightblue",
        marginVertical: 5,
        marginHorizontal: 10,
        borderRadius: 10,
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <Animated.Text>Item {item}</Animated.Text>
    </Animated.View>
  );

  return (
    <>
      <Button title="Add Item" onPress={addItem} />
      <Button title="Remove Item" onPress={removeItem} />
      
      <Animated.FlatList
        data={data}
        renderItem={renderItem}
        keyExtractor={(item) => item.toString()}
        onScroll={scrollHandler}
        scrollEventThrottle={16}
        showsVerticalScrollIndicator={false}
      />
    </>
  );
};

Custom Animated Components

Create animated versions of any React Native component or custom component.

/**
 * Creates an animated version of any component
 * @param component - React component to make animatable
 * @returns Animated version of the component
 */
function createAnimatedComponent<T extends React.ComponentType<any>>(
  component: T
): React.ComponentType<AnimatedProps<React.ComponentProps<T>>>;

Usage Examples:

import React from "react";
import { TextInput, Switch } from "react-native";
import Animated, { 
  useSharedValue, 
  useAnimatedProps,
  useAnimatedStyle,
  withTiming 
} from "react-native-reanimated";

// Create animated versions of components
const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
const AnimatedSwitch = Animated.createAnimatedComponent(Switch);

const CustomAnimatedExample = () => {
  const inputOpacity = useSharedValue(1);
  const fontSize = useSharedValue(16);
  const switchValue = useSharedValue(false);

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

  // Animated style for TextInput
  const textInputStyle = useAnimatedStyle(() => ({
    opacity: inputOpacity.value,
    fontSize: fontSize.value,
    borderWidth: inputOpacity.value > 0.5 ? 2 : 1,
    borderColor: inputOpacity.value > 0.5 ? "blue" : "gray",
  }));

  // Animated props for Switch
  const animatedSwitchProps = useAnimatedProps(() => ({
    value: switchValue.value,
    trackColor: {
      false: "#767577",
      true: switchValue.value ? "#81b0ff" : "#767577",
    },
  }));

  const toggleInput = () => {
    inputOpacity.value = withTiming(inputOpacity.value === 1 ? 0.3 : 1);
    fontSize.value = withTiming(fontSize.value === 16 ? 20 : 16);
  };

  const toggleSwitch = () => {
    switchValue.value = withTiming(switchValue.value ? 0 : 1);
  };

  return (
    <Animated.View style={{ padding: 20 }}>
      {/* Animated TextInput */}
      <AnimatedTextInput
        style={[
          {
            height: 40,
            borderRadius: 5,
            paddingHorizontal: 10,
            marginBottom: 20,
          },
          textInputStyle,
        ]}
        animatedProps={animatedTextInputProps}
      />

      {/* Animated Switch */}
      <AnimatedSwitch
        animatedProps={animatedSwitchProps}
        onValueChange={toggleSwitch}
      />

      <Button title="Toggle Input" onPress={toggleInput} />
    </Animated.View>
  );
};

Component Configuration

Utilities for configuring animated component behavior.

/**
 * Add native props to the whitelist for animated components
 * @param props - Object mapping prop names to boolean values
 */
function addWhitelistedNativeProps(props: Record<string, boolean>): void;

/**
 * Add UI props to the whitelist for animated components  
 * @param props - Object mapping prop names to boolean values
 */
function addWhitelistedUIProps(props: Record<string, boolean>): void;

Usage Example:

import { addWhitelistedNativeProps, addWhitelistedUIProps } from "react-native-reanimated";

// Allow custom native props to be animated
addWhitelistedNativeProps({
  customProp: true,
  specialAttribute: true,
});

// Allow custom UI props to be animated  
addWhitelistedUIProps({
  customStyleProp: true,
  animatedAttribute: true,
});

Advanced Component Patterns

Complex usage patterns for animated components.

Animated Component with Layout Animations:

import React, { useState } from "react";
import Animated, { 
  FadeIn, 
  FadeOut, 
  Layout,
  useAnimatedStyle,
  useSharedValue,
  withSpring 
} from "react-native-reanimated";

const AdvancedAnimatedExample = () => {
  const [items, setItems] = useState([1, 2, 3]);
  const containerScale = useSharedValue(1);

  const containerStyle = useAnimatedStyle(() => ({
    transform: [{ scale: containerScale.value }],
  }));

  const addItem = () => {
    setItems(prev => [...prev, prev.length + 1]);
    containerScale.value = withSpring(1.05, {}, () => {
      containerScale.value = withSpring(1);
    });
  };

  const removeItem = (id: number) => {
    setItems(prev => prev.filter(item => item !== id));
  };

  return (
    <Animated.View style={containerStyle}>
      {items.map((item) => (
        <Animated.View
          key={item}
          entering={FadeIn.springify()}
          exiting={FadeOut.duration(300)}
          layout={Layout.springify()}
          style={{
            height: 60,
            backgroundColor: "lightcoral",
            marginVertical: 5,
            borderRadius: 10,
            justifyContent: "center",
            alignItems: "center",
          }}
        >
          <Animated.Text>Item {item}</Animated.Text>
          <Button 
            title="Remove" 
            onPress={() => removeItem(item)} 
          />
        </Animated.View>
      ))}
      
      <Button title="Add Item" onPress={addItem} />
    </Animated.View>
  );
};

Type Definitions

type AnimatedProps<T> = {
  [K in keyof T]: T[K] | SharedValue<T[K]> | DerivedValue<T[K]>;
} & {
  animatedProps?: Partial<T>;
  layout?: ILayoutAnimationBuilder;
  entering?: IEntryExitAnimationBuilder;
  exiting?: IEntryExitAnimationBuilder;
};

type AnimatedComponent<T> = React.ComponentType<AnimatedProps<React.ComponentProps<T>>>;

interface ScrollEvent {
  contentOffset: {
    x: number;
    y: number;
  };
  contentSize: {
    height: number;
    width: number;
  };
  layoutMeasurement: {
    height: number;
    width: number;
  };
}

interface FlatListPropsWithLayout<T> extends FlatListProps<T> {
  itemLayoutAnimation?: IEntryExitAnimationBuilder;
}

Install with Tessl CLI

npx tessl i tessl/npm-react-native-reanimated

docs

animated-components.md

animation-functions.md

configuration-utilities.md

core-reactive-system.md

css-integration.md

event-handling.md

index.md

interpolation-easing.md

layout-animations.md

platform-functions.md

screen-transitions.md

testing-utilities.md

worklet-functions.md

tile.json

tessl/npm-react-native-reanimated