Recognized by Clutch.co as a top-rated Mobile App Development Company.
folio3-mobile
US 408 365 4638
START YOUR PROJECT
  • Solutions
    • Apps Discovery Services
    • Team Augmentation
    • Enterprise
    • AR/VR
    • IoT
    • Wearables
    • Field Sales
    • On Demand Apps
  • Industries
    • Retail
    • Agriculture
    • Healthcare
    • Pharmaceutical & Life Sciences
    • Manufacturing
    • Automotive
    • Logistics
    • Education
  • Technologies
    • Native Mobile Apps
      • iOS
      • Android
    • Cross Platform Apps
      • React Native
      • Flutter
      • Ionic
      • Xamarin
      • NativeScript
      • Sencha
  • Portfolio
  • Blog
  • Contact Us
Menu
  • Solutions
    • Apps Discovery Services
    • Team Augmentation
    • Enterprise
    • AR/VR
    • IoT
    • Wearables
    • Field Sales
    • On Demand Apps
  • Industries
    • Retail
    • Agriculture
    • Healthcare
    • Pharmaceutical & Life Sciences
    • Manufacturing
    • Automotive
    • Logistics
    • Education
  • Technologies
    • Native Mobile Apps
      • iOS
      • Android
    • Cross Platform Apps
      • React Native
      • Flutter
      • Ionic
      • Xamarin
      • NativeScript
      • Sencha
  • Portfolio
  • Blog
  • Contact Us

Beautiful Animations in React Native

Published by: Zayan Tharani | October 12, 2020 Taimoor Malik
SCROLL AND BE AMAZED!
Home > React Native > Beautiful Animations in React Native

With the increased number of applications on Google Play Store and App Store, it has become an extremely difficult task for mobile app developers to get good ratings on their months of hard work. Users will normally not think for a second before uninstalling your application if your app fails to provide necessary functionality and at the same time be pleasing for their eye. 

In enhancing the user interface and user experience of an app, Animations play a great role. The appropriate use of UI animations can help decrease cognitive load, draw and direct user’s attention, and create an experience easier to grasp.

USING LOTTIE FOR ANIMATIONS:

Lottie is a iOS, android and React Native library by Airbnb that enables you to embed highly performant JSON based Adobe AfterEffects animations into your mobile app that renders After Effects animations in real time. Lottie makes it easier to render vector based animations and art in realtime with minimal code. You can find more here.

USING LOTTIE IN REACT-NATIVE:

Using Lottie in react-native is particularly very easy and straight forward. 

You can use these animations very easily in your React Native app thanks to airbnb. The repo and official docs can be found at link below:
https://github.com/react-native-community/lottie-react-native 

This tutorial uses the following versions: 

  • React Native: 0.63
  • Lottie-ios: 3.1.8,
  • Lottie-react-native: 3.5.0
  • Node v14.7.0

Throughout this tutorial, I am using NPM but feel free to use Yarn instead.

Create new React Native App:

  1. npx react-native init LottieAnimationApp
  2. cd  LottieAnimationApp
  3. npm install

Installing Lottie (React Native >= 0.60.0):

  1. npm i –save lottie-react-native
  2. npm i –save [email protected]
  3. cd ios & pod install
  4. Go back to root and npx react-native run-ios

*IMPORTANT: If you face linking issue, check the troubleshooting guide at https://github.com/react-native-community/lottie-react-native 

Using Lottie in React Native:

For this demo, I’ve downloaded animations as Lottie JSON from https://lottiefiles.com/  and place the downloaded JSON in the project structure as shown.

Next, go App.js and replace the contents with to get the following output:

import React from 'react';
import {StyleSheet, TouchableOpacity, View, Text} from 'react-native';
import LottieView from 'lottie-react-native';

class App extends React.Component {
 state = {
   animationPlaying: false,
   showEat: false,
   showSleep: false,
   showCode: false,
   showRepeat: false,
 };

 eatPressed = () => {
   this.setState({
     animationPlaying: true,
     showEat: true,
     showSleep: false,
     showCode: false,
     showRepeat: false,
   });
 };

 sleepPressed = () => {
   this.setState({
     animationPlaying: true,
     showEat: false,
     showSleep: true,
     showCode: false,
     showRepeat: false,
   });
 };

 codePressed = () => {
   this.setState({
     animationPlaying: true,
     showEat: false,
     showSleep: false,
     showCode: true,
     showRepeat: false,
   });
 };

 repeatPressed = () => {
   this.setState({
     animationPlaying: true,
     showEat: false,
     showSleep: false,
     showCode: false,
     showRepeat: true,
   });
 };

 animationFinished = () => {
   console.log("Finished")
   this.setState({
     animationPlaying: false,
     welcomeAnimationShown: true,
     buttonText: "Let's Celebrate",
   });
 };

 render() {
   return (
     <View style={styles.mainContainer}>
       {this.state.animationPlaying ? (
         <View style={styles.mainContainer}>
           {this.state.showEat && (
             <LottieView
               ref={(animation) => {
                 this.animation = animation;
               }}
               autoPlay
               loop={false}
               source={require('./animations/eat.json')}
               onAnimationFinish={this.animationFinished}
             />
           )}
           {this.state.showSleep && (
             <LottieView
               ref={(animation) => {
                 this.animation = animation;
               }}
               autoPlay
               loop={false}
               source={require('./animations/sleep.json')}
               onAnimationFinish={this.animationFinished}
             />
           )}
           {this.state.showCode && (
             <LottieView
               ref={(animation) => {
                 this.animation = animation;
               }}
               autoPlay
               loop={false}
               source={require('./animations/code.json')}
               onAnimationFinish={this.animationFinished}
             />
           )}
           {this.state.showRepeat && (
             <LottieView
               ref={(animation) => {
                 this.animation = animation;
               }}
               autoPlay
               loop={false}
               source={require('./animations/repeat.json')}
               onAnimationFinish={this.animationFinished}
             />
           )}
         </View>
       ) : (
         <View>
           <TouchableOpacity
             style={styles.animateButton}
             onPress={this.eatPressed}>
             <Text style={styles.animateText}>Eat</Text>
           </TouchableOpacity>

           <TouchableOpacity
             style={styles.animateButton}
             onPress={this.sleepPressed}>
             <Text style={styles.animateText}>Sleep</Text>
           </TouchableOpacity>
           <TouchableOpacity
             style={styles.animateButton}
             onPress={this.codePressed}>
             <Text style={styles.animateText}>Code</Text>
           </TouchableOpacity>
           <TouchableOpacity
             style={styles.animateButton}
             onPress={this.repeatPressed}>
             <Text style={styles.animateText}>Repeat</Text>
           </TouchableOpacity>
         </View>
       )}
     </View>
   );
 }
}

export default App;

const styles = StyleSheet.create({
 mainContainer: {
   justifyContent: 'center',
   flex: 1,
 },
 animateButton: {
   height: 60,
   backgroundColor: '#000',
   marginHorizontal: 32,
   borderRadius: 20,
   justifyContent: 'center',
   alignItems: 'center',
   marginBottom: 20,
 },
 animateText: {
   fontSize: 22,
   color: '#fff',
 },
});

You’ll see the following output:

You can find the full list of props and methods available for LottieView in the API document.


Avatar
About Zayan Tharani

Zayan Tharani is working as a Software Engineer at Folio3, comes up with expertise including; React-Native, Native iOS, Native Android, and Flutter development. He is a passionate developer who can work under a great deal of pressure, prepared for new challenges, particularly about innovation. He is skilled in vision and chatbot development as well. He loves outdoor activities such as playing football, cricking, and traveling which give him new experiences.

Newsletter

Search

Archives

  • December 2020
  • November 2020
  • October 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • May 2019
  • Categories

    • Android App Development
    • App Development
    • App Testing
    • Blog
    • Elasticsearch
    • flutter-app-development
    • IOT
    • React Native
    • Staff Augmentation

Recent Posts

  • Startup Incubator – How to Make an App Start on Startup?
  • Jquery Vs. React: Which One Is The Best Option To Create An App For Business?
  • One codebase to rule them all – Sharing code in mobile & web apps using Flutter
  • What is Tree Shaking and Implementation in React
  • Vue VS. React – Crowning the King of Web App Development in 2021

Tags

  • android
  • Automation
  • cross-platform
  • development
  • firebase
  • ios
  • QA
  • react-native
  • Testing
  • Test Script

Newsletter

Newsletter

Post navigation

Previous WORKING REMOTELY- HOW TO HIRE REMOTE APP DEVELOPMENT TEAM AND REMOTELY MANAGE YOUR TEAM
Next What is crowdfunding and how does it work for App Development?

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Schedule an appointment with our Mobile App Development Expert

Footer Menu
  • Company
    • About Us
    • Portfolio
    • Blog
    • Careers
    • Contact Us
  • Solutions
    • Apps Discovery Services
    • Team Augmentation
    • Enterprise App Development
    • AR/VR Application Development
    • IoT Application Development
    • Wearables Apps Development
    • Field Sales
    • On-Demand Apps Development
  • Technologies
    • iOS
    • Android
    • React Native
    • Flutter
    • Ionic
    • Xamarin
    • NativeScript
    • HTML5
    • Sencha
  • Industries
    • Retail
    • Agriculture
    • Healthcare
    • Pharmaceutical
    • Manufacturing
    • Automotive
    • Logistics
    • Education

US Office

Belmont, California – 1301 Shoreway Road, Suite 160, Belmont, CA 94002

Pleasanton, California – 6701 Koll Center Parkway, #250 Pleasanton, CA 94566

Tel: +1 408 365 4638
Support: +1 (408) 512 1812

Mexico Office

Amado Nervo #2200, Edificio Esfera 1 piso 4, Col. Jardines del Sol, CP. 45050, Zapopan, Jalisco, Mexico

Bulgaria Office

49 Bacho Kiro Street, Sofia, 1000, Bulgaria

Canada Office​

895 Don Mills Road, Two Morneau Shepell Centre, Suite 900, Toronto, Ontario, M3C 1W3, Canada

UK Office

Export House, Cawsey Way, Woking Surrey, GU21 6QX

Tel: +44 (0) 14 8361 6611

UAE Office

Dubai, UAE – Dubai Internet City, 1st Floor, Building Number 12, Premises ED 29, Dubai, UAE

Tel: +971-55-6540154
Tel: +971-04-2505173

Pakistan Office

163 Bangalore Town, Main Shahrah-e-Faisal, Karachi –
75350

705, Business Center, PECHS Block-6, Shahrah-e-Faisal,
Karachi – 75350

First Floor, Blue Mall 8-R, MM Alam Road Gulberg III, Lahore

Tel: +92-21-3432 3721-4 

© 2020, Folio3 Software Inc., All rights reserved.

  • Privacy policy and terms of use
  • Cookie Policy
Follow us on
Facebook-f
Twitter
Linkedin-in

Get a free app audit

Tired of your app not performing up to the mark?

Get a free technology and app strategy review.