1---
2title: Animation
3description: Learn how to integrate the react-native-reanimated library and use it in your Expo project.
4---
5
6import { Terminal, SnackInline } from '~/ui/components/Snippet';
7import { BoxLink } from '~/ui/components/BoxLink';
8import { BookOpen02Icon } from '@expo/styleguide-icons';
9
10Animations 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.
11
12## Installation
13
14To install `react-native-reanimated`, run the following command:
15
16<Terminal cmd={['$ npx expo install react-native-reanimated']} />
17
18After the installation completes, add the Babel plugin to **babel.config.js**:
19
20```js babel.config.js
21module.exports = function (api) {
22  api.cache(true);
23  return {
24    presets: ['babel-preset-expo'],
25    plugins: ['react-native-reanimated/plugin'],
26  };
27};
28```
29
30After you add the Babel plugin, restart your development server and clear the bundler cache using `npx expo start --clear`.
31
32> If you load other Babel plugins, the Reanimated plugin has to be the last item in the plugins array.
33
34### Web support
35
36**For web**, install the [`@babel/plugin-proposal-export-namespace-from`](https://babeljs.io/docs/en/babel-plugin-proposal-export-namespace-from#installation) Babel plugin and update the **babel.config.js** to load it:
37
38{/* prettier-ignore */}
39```js babel.config.js
40plugins: [
41  '@babel/plugin-proposal-export-namespace-from',
42  'react-native-reanimated/plugin',
43],
44```
45
46After you add the Babel plugin, restart your development server and clear the bundler cache using `npx expo start --clear`.
47
48## Minimal example
49
50The following example shows how to use the `react-native-reanimated` library to create a simple animation. For more information on the API and its usage, see [**`react-native-reanimated` documentation**](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/your-first-animation).
51
52<SnackInline label="Using react-native-reanimated" dependencies={['react-native-reanimated']}>
53
54{/* prettier-ignore */}
55```jsx
56import Animated, {
57  useSharedValue,
58  withTiming,
59  useAnimatedStyle,
60  Easing,
61} from 'react-native-reanimated';
62import { View, Button, StyleSheet } from 'react-native';
63
64export default function AnimatedStyleUpdateExample() {
65  const randomWidth = useSharedValue(10);
66
67  const config = {
68    duration: 500,
69    easing: Easing.bezier(0.5, 0.01, 0, 1),
70  };
71
72  const style = useAnimatedStyle(() => {
73    return {
74      width: withTiming(randomWidth.value, config),
75    };
76  });
77
78  return (
79    <View style={styles.container}>
80      <Animated.View style={[styles.box, style]} />
81      <Button
82        title="toggle"
83        onPress={() => {
84          randomWidth.value = Math.random() * 350;
85        }}
86      />
87    </View>
88  );
89}
90
91const styles = StyleSheet.create({
92  container: {
93    flex: 1,
94    alignItems: 'center',
95    justifyContent: 'center',
96    flexDirection: 'column',
97  },
98  box: {
99    width: 100,
100    height: 80,
101    backgroundColor: 'black',
102    margin: 30,
103  },
104});
105```
106
107</SnackInline>
108
109### Other animation libraries
110
111Other animation packages are available, such as Moti, that you also use in your Expo project and work on Android, iOS, and the web. For more information on its API and usage, see [Moti's documentation](https://moti.fyi/).
112
113## Next step
114
115<BoxLink
116  title="Store data"
117  description="Learn about different libraries available to store data in your app."
118  href="/develop/user-interface/store-data"
119  Icon={BookOpen02Icon}
120/>
121