Create a Multi-Step Animated Modal Depending on User Actions in React Native

Create a Multi-Step Animated Modal Depending on User Actions in React Native

Animations can be used to effectively communicate a users action. However many times the reverse animation is used for both a close, or success. We can do better, and we'll walk through how to use `Animated` to create 2 different animations with a single animated value. Create a Multi-Step Animated Modal Depending on User Actions in React Native

Introduction

Animations can be used to effectively communicate a users action. However many times the reverse animation is used for both a close, or success. We can do better, and we'll walk through how to use Animated to create 2 different animations with a single animated value.

Set the Scene

Lets set the scene. We need a button to open the modal, and a background. We'll make our background a tomato color so we can see our modal overlay transition easier.

We will also setup our animation. We'll use a useState hook and the callback style of useState. Like so

const [animation] = useState(() => new Animated.Value(0));

We do this because this will prevent a new Animated.Value being instantiated each render. Use state will only ever use the first one, so even if you did useState(new Animated.Value(0)) all would function. We just save ourselves a bit of overhead each render.

import React, { useState } from "react";
import { StyleSheet, Text, View, TouchableOpacity, Animated, Dimensions } from "react-native";

export default function App() {
  const [animation] = useState(() => new Animated.Value(0));

  return (
    <View style={styles.container}>
      <TouchableOpacity
        onPress={() => {
          Animated.spring(animation, {
            toValue: 1,
          }).start();
        }}
      >
        <Text>Open</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "tomato",
    alignItems: "center",
    justifyContent: "center",
  },
});

react react native

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire Dedicated React Native Developer

Have you ever thought of having your own app that runs smoothly over multiple platforms? React Native is an open-source cross-platform mobile application framework which is a great option to create mobile apps for both Android and iOS. **[Hire...

Build a simple React Native Pokemon app with React-Navigation

As we start learning new technologies we want to start building something or work on a simple project to get a better understanding of the technology.

Hire Dedicated React Native Developer in India | React Native Development

Hire dedicated React Native developers for your next project. As the top react native development company we offer you the best service as per your business needs.

Top React Native Mobile App Development Companies in USA

Looking for top React Native mobile app development company in USA for Startups & Enterprise? Find out the top list of React Native mobile app development company in USA.

Which Kind of Apps Are Most Suitable for React Native? - TopDevelopers.co

React Native is beneficial to develop custom mobile apps and in addition to that the cross-platform app development framework is best suited for the apps of various types.