What are some examples of animations in React Native?

What are some examples of animations I can use in React Native?

You can use various animations in React Native, such as fade, slide, and scale animations. Would you like to see code examples?

Yes, please provide a code example for a fade animation.

Here's a simple fade animation example using the Animated API:

import React, { useEffect, useRef } from 'react';
import { View, Animated } 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.

That looks great! Can I also create a slide animation?

Absolutely! Here's a simple slide animation example:

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

const SlideInView = (props) => {
  const slideAnim = useRef(new Animated.Value(-100)).current;  // Initial value for translateY: -100

  useEffect(() => {
    Animated.timing(slideAnim, {
      toValue: 0,
      duration: 500,
      useNativeDriver: true,
    }).start();
  }, [slideAnim]);

  return <Animated.View style={{ ...props.style, transform: [{ translateY: slideAnim }] }}>{props.children}</Animated.View>;
};

This will slide the component in from the top.