---
modificationDate: June 03, 2026
title: Animation
description: Learn how to integrate React Native animations and use it in your Expo project.
---

<AgentInstructions>

## Submitting Feedback

If you encounter errors, misleading or outdated information, report it so Expo can be improved:

Preferred command:
npx --yes submit-expo-feedback@latest --category docs --subject "/develop/user-interface/animation/" "<actionable feedback>"

Direct HTTP fallback:
curl -X POST https://api.expo.dev/v2/feedback/docs-send -H 'Content-Type: application/json' -d '{"url":"/develop/user-interface/animation/","feedback":"🤖 Agent feedback for docs: <specific, actionable description> (<model>, <harness>)"}'

Only submit when you have something specific and actionable to report. Try to give the most context.

## Navigation

When answering a related or follow-up question, fetch the relevant page below as Markdown (.md) instead of guessing; use llms.txt for the full map.

You are here: Home > Develop > User interface
Pages in this section:
- [Splash screen and app icon](https://docs.expo.dev/develop/user-interface/splash-screen-and-app-icon.md)
- [Safe areas](https://docs.expo.dev/develop/user-interface/safe-areas.md)
- [System bars](https://docs.expo.dev/develop/user-interface/system-bars.md)
- [Fonts](https://docs.expo.dev/develop/user-interface/fonts.md)
- [Assets](https://docs.expo.dev/develop/user-interface/assets.md)
- [Color themes](https://docs.expo.dev/develop/user-interface/color-themes.md)
- [Animation](https://docs.expo.dev/develop/user-interface/animation.md) (this page)
- [Store data](https://docs.expo.dev/develop/user-interface/store-data.md)
- [Next steps](https://docs.expo.dev/develop/user-interface/next-steps.md)
Full documentation tree: [llms.txt](https://docs.expo.dev/llms.txt)

</AgentInstructions>

This documentation is available as Markdown for AI agents and LLMs. See the [full Markdown index](/llms.txt) or append .md to any documentation URL.

# Animation

Learn how to integrate React Native animations and use it in your Expo project.

Animations are a great way to enhance and provide a better user experience. In your Expo projects, you can use the [Animated API](https://reactnative.dev/docs/next/animations) from React Native. However, if you want to use more advanced animations with better performance, you can use the [`react-native-reanimated`](https://docs.swmansion.com/react-native-reanimated/) library. It provides an API that simplifies the process of creating smooth, powerful, and maintainable animations.

## Installation

You can skip installing `react-native-reanimated` if you have created a project using [the default template](/get-started/create-a-project.md). This library is already installed. Otherwise, install it by running the following command:

```sh
# npm
npx expo install react-native-reanimated

# yarn
yarn expo install react-native-reanimated

# pnpm
pnpm expo install react-native-reanimated

# bun
bun expo install react-native-reanimated
```

## Usage

### Minimal example

The following example shows how to use the `react-native-reanimated` library to create a simple animation. For more information on the API and advanced usage, see [`react-native-reanimated` documentation](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/your-first-animation).

```tsx
import Animated, {
  useSharedValue,
  withTiming,
  useAnimatedStyle,
  Easing,
} from 'react-native-reanimated';
import { View, Button, StyleSheet } from 'react-native';

export default function AnimatedStyleUpdateExample() {
  const randomWidth = useSharedValue(10);

  const config = {
    duration: 500,
    easing: Easing.bezier(0.5, 0.01, 0, 1),
  };

  const style = useAnimatedStyle(() => {
    return {
      width: withTiming(randomWidth.value, config),
    };
  });

  return (
    <View style={styles.container}>
      <Animated.View style={[styles.box, style]} />
      <Button
        title="toggle"
        onPress={() => {
          randomWidth.value = Math.random() * 350;
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    width: 100,
    height: 80,
    backgroundColor: 'black',
    margin: 30,
  },
});
```

## Other animation libraries

You can use other animation packages such as [Moti](https://moti.fyi/) in your Expo project. It works on Android, iOS, and web.