How do I set up the Animated API in React Native?

How do I set up the Animated API in React Native?

To set up the Animated API in React Native, first ensure you have React Native installed. Then, import the Animated module in your component.

What are the basic components of the Animated API?

The basic components include Animated.View, Animated.Text, and Animated.Image. You can animate properties like opacity, position, and scale.

Can you show me a simple example of an animation?

Sure! Here's a simple example:

import React, { useRef, useEffect } from 'react';
import { Animated, View } from 'react-native';

const FadeInView = (props) => {
  const fadeAnim = useRef(new Animated.Value(0)).current;  // Initial value for opacity: 0

  useEffect(() => {
    Animated.timing(fadeAnim, {
      toValue: 1,
      duration: 2000,
      useNativeDriver: true,
    }).start();
  }, [fadeAnim]);

  return <Animated.View style={{...props.style, opacity: fadeAnim}}>{props.children}</Animated.View>;
};

This will fade in the component over 2 seconds.

What if I want to chain multiple animations?

You can use Animated.sequence or Animated.parallel to chain animations. For example:

Animated.sequence([
  Animated.timing(fadeAnim, { toValue: 1, duration: 1000 }),
  Animated.timing(scaleAnim, { toValue: 1, duration: 1000 }),
]).start();