Animation

Edit this page

Learn how to integrate the react-native-reanimated library 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 from React Native. However, if you want to use more advanced animations with better performance, you can use the 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. This library is already installed. Otherwise, install it by running the following command:

Terminal

- npx 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.

Using react-native-reanimated

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 in your Expo project. It works on Android, iOS, and web.