React Native Animations: Bring Your Apps to Life

import { Animated } from 'react-native';

function FadeIn() {
  const fadeAnim = useRef(new Animated.Value(0)).current;

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

  return (
    <Animated.View style={{ opacity: fadeAnim }}>
      <Text>Fades in</Text>
    </Animated.View>
  );
}

const translateAnim = useRef(new Animated.Value(0)).current;

const rotate = translateAnim.interpolate({
  inputRange: [0, 1],
  outputRange: ['0deg', '360deg'],
});

<Animated.View
  style={{
    transform: [{ rotate }],
  }}
>
  <Text>Rotates</Text>
</Animated.View>

const fadeAnim = useRef(new Animated.Value(0)).current;
const scaleAnim = useRef(new Animated.Value(1)).current;

Animated.parallel([
  Animated.timing(fadeAnim, {
    toValue: 1,
    duration: 1000,
    useNativeDriver: true,
  }),
  Animated.spring(scaleAnim, {
    toValue: 2,
    friction: 3,
    useNativeDriver: true,
  }),
]).start();

Animated.sequence([
  Animated.timing(fadeAnim, {
    toValue: 1,
    duration: 500,
    useNativeDriver: true,
  }),
  Animated.timing(scaleAnim, {
    toValue: 1.5,
    duration: 500,
    useNativeDriver: true,
  }),
]).start();

const springAnim = useRef(new Animated.Value(0)).current;

Animated.spring(springAnim, {
  toValue: 1,
  friction: 7,
  tension: 40,
  useNativeDriver: true,
}).start();

import { PanGestureHandler, State } from 'react-native-gesture-handler';

const translateX = useRef(new Animated.Value(0)).current;

const onGestureEvent = Animated.event(
  [{ nativeEvent: { translationX: translateX } }],
  { useNativeDriver: true }
);

<PanGestureHandler
  onGestureEvent={onGestureEvent}
  onHandlerStateChange={(event) => {
    if (event.nativeEvent.state === State.END) {
      Animated.spring(translateX, {
        toValue: 0,
        useNativeDriver: true,
      }).start();
    }
  }}
>
  <Animated.View
    style={[
      styles.box,
      { transform: [{ translateX }] },
    ]}
  />
</PanGestureHandler>

npm install react-native-reanimated

import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withTiming,
  withSpring,
} from 'react-native-reanimated';

function Box() {
  const offset = useSharedValue(0);

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ translateX: offset.value }],
  }));

  return (
    <>
      <Animated.View style={[styles.box, animatedStyle]} />
      <Button
        title="Move"
        onPress={() => {
          offset.value = withSpring(offset.value + 50);
        }}
      />
    </>
  );
}

import { LayoutAnimation } from 'react-native';

function expandItem() {
  LayoutAnimation.configureNext(
    LayoutAnimation.create(
      300,
      LayoutAnimation.Types.easeInEaseOut,
      LayoutAnimation.Properties.opacity
    )
  );
  setExpanded(!expanded);
}

<View style={{ height: expanded ? 200 : 100 }}>
  <Text>Content</Text>
</View>