Mohamed Aimane Skhairi

Posted on Aug 10, 2023 • Edited on Mar 13

Animating with React Native: Bringing Your App to Life 🎉🚀

#reactnative #javascript #animation #mobile

Animations have the power to transform your React Native app from static to dynamic, capturing users' attention and creating a memorable user experience.

In this article, we're diving into the world of animations, from the basics to advanced techniques. Get ready to breathe life into your app!

Why Animations Matter:

Before we dive into the technical details, let's explore why animations are a crucial aspect of mobile app development:

Enhanced User Experience: Animations make interactions smoother, providing visual cues that guide users through the app's flow.
Engagement Boost: Well-executed animations keep users engaged, increasing the likelihood of them spending more time on your app.
Memorability: Memorable animations leave a lasting impression on users, making your app stand out from the crowd.

Getting Started with Basic Animations:

Let's start by covering the fundamentals of creating simple animations in React Native. We'll explore the Animated API and learn how to animate properties like opacity, position, and scale.

Code Example: Fading In Elements

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

const BasicAnimation = () => {
  const fadeAnim = new Animated.Value(0);

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

  return (
    <View>
      <Animated.View
        style={{
          opacity: fadeAnim,
          width: 250,
          height: 50,
          backgroundColor: 'blue',
        }}
      />
      <TouchableOpacity onPress={fadeIn}>
        <Text>Fade In</Text>
      </TouchableOpacity>
    </View>
  );
};

Further Reading: React Native Animated

Adding Depth with Transitions:

Smooth transitions between screens and components add a layer of sophistication to your app. We'll explore how to create transitions that provide a seamless user experience.

Code Example: Screen Transition

import React from 'react';
import { View, Text, TouchableOpacity, Animated } from 'react-native';

const TransitionScreen = ({ navigation }) => {
  const opacity = new Animated.Value(0);

  const startTransition = () => {
    Animated.timing(opacity, {
      toValue: 1,
      duration: 1000,
      useNativeDriver: true,
    }).start(() => {
      navigation.navigate('NextScreen');
    });
  };

  return (
    <View>
      <Animated.View
        style={{
          opacity,
          width: 250,
          height: 50,
          backgroundColor: 'blue',
        }}
      />
      <TouchableOpacity onPress={startTransition}>
        <Text>Start Transition</Text>
      </TouchableOpacity>
    </View>
  );
};

Further Reading: Animating elements between screens

Creating Complex Animations:

Ready for the next level? Let's explore complex animations like parallax scrolling, interactive gestures, and staggered animations that truly captivate your users.

Code Example: Parallax Scrolling

import React, { useState } from 'react';
import { View, Animated, ScrollView } from 'react-native';

const ParallaxScroll = () => {
  const scrollY = new Animated.Value(0);

  return (
    <View>
      <ScrollView
        style={{ flex: 1 }}
        onScroll={Animated.event(
          [{ nativeEvent: { contentOffset: { y: scrollY } } }],
          { useNativeDriver: false }
        )}
      >
        <Animated.View
          style={{
            height: 400,
            backgroundColor: 'blue',
            transform: [
              {
                translateY: Animated.multiply(
                  Animated.diffClamp(scrollY, 0, 400),
                  -0.5
                ),
              },
            ],
          }}
        />
        {/* Content */}
      </ScrollView>
    </View>
  );
};

Further Reading: React Native parallax scrolling example.

Realizing Interaction with Gestures:

Interactive animations engage users directly. We'll explore how to create gesture-based animations using libraries like React Native Gesture Handler.

Code Example: Swipe to Dismiss

import React from 'react';
import { View, Animated } from 'react-native';
import { PanGestureHandler } from 'react-native-gesture-handler';

const SwipeToDismiss = () => {
  const translateY = new Animated.Value(0);
  let offset = 0;

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

  const onHandlerStateChange = ({ nativeEvent }) => {
    if (nativeEvent.state === 5) {
      Animated.timing(translateY, {
        toValue: offset,
        duration: 200,
        useNativeDriver: true,
      }).start();
      offset = 0;
    } else {
      offset += nativeEvent.translationY;
    }
  };

  return (
    <View>
      <PanGestureHandler
        onGestureEvent={onGestureEvent}
        onHandlerStateChange={onHandlerStateChange}
      >
        <Animated.View
          style={{
            transform: [{ translateY }],
            width: 250,
            height: 50,
            backgroundColor: 'blue',
          }}
        />
      </PanGestureHandler>
    </View>
  );
};

Further Reading: React Native Gesture Handler.

The Power of Lottie: Adding Animated Vectors:

Lottie is a fantastic tool to integrate complex animations created in tools like Adobe After Effects. We'll explore how to incorporate Lottie animations into your React Native app.

Code Example: Integrating Lottie

import React from 'react';
import { View } from 'react-native';
import LottieView from 'lottie-react-native';

const LottieAnimation = () => {
  return (
    <View>
      <LottieView
        source={require('./animation.json')}
        autoPlay
        loop
        style={{ width: 200, height: 200 }}
      />
    </View>
  );
};

Further Reading: Lottie for React Native.

Elevate Your App with Animation Libraries:

While React Native's built-in Animated API offers a great starting point for animations, there are two powerful libraries that take animations to the next level: react-native-reanimated and react-native-skia.

Using React Native Reanimated for Complex Animations:

react-native-reanimated is a library developed by the creators of React Native that provides a more performant and flexible way to create complex animations. It allows you to directly control the native runtime, enabling smooth and sophisticated animations.

Code Example: Creating a rotating square animation:

In this example, we're using the useSharedValue hook to create an animated value named rotation. We then use the useAnimatedStyle hook to define the animated style for the rotating square based on the rotation value.

The withTiming function is used to smoothly animate the rotation from 0 to 360 degrees with a linear easing function. After each rotation, the animation is restarted using the rotateSquare function.

import React from 'react';
import { View, StyleSheet } from 'react-native';
import Animated, {
  useSharedValue,
  withSpring,
  useAnimatedStyle,
  Easing,
  withTiming,
  repeat,
} from 'react-native-reanimated';

const ReanimatedExample = () => {
  const rotation = useSharedValue(0);

  const rotateSquare = () => {
    rotation.value = withTiming(
      360,
      { duration: 1000, easing: Easing.linear },
      () => {
        rotation.value = 0;
        rotateSquare();
      }
    );
  };

  rotateSquare();

  const animatedStyle = useAnimatedStyle(() => {
    return {
      transform: [{ rotate: `${rotation.value}deg` }],
    };
  });

  return (
    <View style={styles.container}>
      <Animated.View style={[styles.square, animatedStyle]} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  square: {
    width: 100,
    height: 100,
    backgroundColor: 'blue',
  },
});

export default ReanimatedExample;

Further Reading: React Native Reanimated.

Exploring React Native Skia for Cutting-Edge Graphics:

react-native-skia leverages the Skia graphics engine, the same engine that powers Chrome and Firefox, to deliver stunning visuals and animations. It's particularly suited for applications that require high-quality graphics and complex visual effects.

Code Example: Creating a Toggle Skia Animation

The position of the rectangle is animated when the button is pressed (toggled state changed).

import React, { useState } from "react";
import { Canvas, Rect, useSpring } from "@shopify/react-native-skia";
import { Button, StyleSheet } from "react-native";
 
export const AnimationExample = () => {
  const [toggled, setToggled] = useState(false);
  const position = useSpring(toggled ? 100 : 0);
  return (
    <>
      <Canvas style={{ flex: 1 }}>
        <Rect x={position} y={100} width={10} height={10} color={"red"} />
      </Canvas>
      <Button title="Toggle" onPress={() => setToggled((p) => !p)} />
    </>
  );
};

Further Reading: React Native Skia Animations, React Native Skia Tutorials.

Wrapping Up Your Animated Journey:

As you explore these advanced animation libraries, you'll unlock new possibilities for creating dynamic and engaging user experiences.

Whether you choose the flexibility of react-native-reanimated or the graphical prowess of react-native-skia, your animations will leave a lasting impression on your app's users.

🔗 Let's Connect:

I hope this deep dive into advanced animation libraries sparks your creativity! Follow me for more React Native and mobile app development content. Let's connect online through lnk.bio/medaimane.

Elevate your animations to new heights and create experiences that your users won't forget! 🌟🚀

DEV Community