Fear what infinite truth, into an inch of joy. Hello everyone, I am @Luo Zhu, a lifelong learning practitioner who loves programming and life.

Blog.bitsrc. IO /top-5-anima…

Originally written by: SaidHayani@

Animation has a big impact on mobile phones, it can create a better user experience, these animations are mainly used to interact with the user’s behavior, the user more involved in your application.

On the technical side, React Native gives us a powerful declarative API for creating animations, often referred to as Animated. However, there are times when you might want to use a third-party library to handle animations for you rather than having to deal directly with the Animated API. Here we explore and discuss five React Native plug-ins that you should use.

Reusing React components

Use Bit to share and reuse React components across platforms. Collaborating as a team on shared components makes it easier to build applications together. Let the Bit do the heavy lifting, so you can easily publish, install, and update your personal components without any overhead.

react-native-animatable

I’m a big fan of react-Native Animatable. React Native provides a declarative wrapper that you can use to animate React Native elements. The nice thing about this library is that its API is easy to use and you don’t need to do any linking operations. So let’s take an example and see how this library works 😃.

First, install the library!

yarn add react-native-animatable
Copy the code

Then, let’s make a slideInDown animation effect!

Our component looks like this:

import React, {Component} from 'react';
import {Text, View, Dimensions, SafeAreaView, StyleSheet} from 'react-native';
import * as Animatable from 'react-native-animatable';

class AnimatableScreen extends Component {
  render() {
    return (
      <SafeAreaView style={styles.container}>
        <View style={{alignItems: 'center'}} >
          <Animatable.View
            style={styles.card}
            animation="slideInDown"
            iterationCount={5}
            direction="alternate">
            <Text style={styles.whiteText}>slideInDown Animation</Text>
          </Animatable.View>
        </View>
      </SafeAreaView>); }}const styles = StyleSheet.create({
  container: {
    width: Dimensions.get('screen').width,
    height: Dimensions.get('screen').height,
    justifyContent: 'center',},card: {
    width: Dimensions.get('screen').width * 0.6.height: Dimensions.get('screen').height * 0.35.backgroundColor: '# 206225'.alignItems: 'center'.justifyContent: 'center'.borderRadius: 8,},whiteText: {
    color: '#ffffff'.fontSize: 18,}});export default AnimatableScreen;
Copy the code

We first import the Animatable object via react-Native-Animatable. Then we combine the Animatable element with the element we want to animate. You can use the Image and Text elements, In addition you can also use createAnimatableComponent animation of other elements, you can view the documentation for more details.

MyCustomComponent = Animatable.createAnimatableComponent(MyCustomComponent);
Copy the code

Props:

  • animationIt takes a string that specifies the type of animation we want, for example:SlideInDown,SlideInLeftPlease see thedocsTo explore the types of animations you can use.
  • iteractionCount: Specifies how many times the animation should run and iterate. We can useinfiniteKeeps the animation running forever.
  • direction: Specifies the direction of the animationnormal.alternate-reverse.reverse.

We can also use other properties, such as Transition, which allows us to define style properties that we want to animate, as shown in the following image:

import React, {Component} from 'react';
import {Text, Dimensions, SafeAreaView, StyleSheet} from 'react-native';
import * as Animatable from 'react-native-animatable';

class AnimatableScreen extends Component {
  state = {
    opacity: 0};componentDidMount() {
    this.setState({opacity: 1});
  }

  render() {
    return (
      <SafeAreaView style={styles.container}>
        <Animatable.View
          style={[
            styles.card,
            {
              opacity: this.state.opacity,]}}iterationCount="infinite"
          direction="reverse"
          duration={3000}
          transition="opacity">
          <Text style={styles.whiteText}>Transition Animation</Text>
        </Animatable.View>
      </SafeAreaView>); }}const styles = StyleSheet.create({
  container: {
    alignItems: 'center'.width: Dimensions.get('screen').width,
    height: Dimensions.get('screen').height,
    justifyContent: 'center',},card: {
    width: Dimensions.get('screen').width * 0.6.height: Dimensions.get('screen').height * 0.35.backgroundColor: '# 206225'.alignItems: 'center'.justifyContent: 'center'.borderRadius: 8,},whiteText: {
    color: '#ffffff'.fontSize: 18,}});export default AnimatableScreen;
Copy the code

React-native Animatable gives us more options and gives us more control over animations, there’s more to this library than one article can cover, and I really recommend you check out the documentation.

Lottie

This is my favorite library so far, Lottie is an animation library created by Airbnb that parses After Effect animations into JSON files that you can export and use in your apps, You can use Lottie on ios, Android, Windows, the Web, and React Native.

To use Lottie with React Native, you need to install lottie-React-Native, which is a simple package element that receives JSON files:

import React, {Component} from 'react';
import {StyleSheet, SafeAreaView} from 'react-native';
import LottieView from 'lottie-react-native';

export default class index extends Component {
  render() {
    return (
      <SafeAreaView style={styles.container}>
        <LottieView
          source={require('./animation.json')}
          loop
          autoPlay
          style={{width: 100}} / >
      </SafeAreaView>); }}const styles = StyleSheet.create({
  container: {
    alignItems: 'center',}});Copy the code

You can check lottiefiles.com/ for a free JSON file of After Effect animations to use with Lottie for a different animation experience 😎.

react-native-reanimated

The authors of React-Native reAnimated rewrote the Animated API of React Native from scratch, as described in the official documentation, React-native ReAnimated provides a more comprehensive, lower-level abstraction for the API of the Animated library on which it is based, so there is more flexibility when writing animations, especially when it comes to gesture-based interactions.

React-native Animated provides you with a new Animated API to replace the React Native Animated API, You can use it instead of the React Native Animated API to create animations in React Native. Here’s why you might have to use react-native Animated instead of the React Native Animated API:

  • React-native Reanimated gives you more control over animated values by providing multiple declarative apis to keep track of value changes.
  • No longer neededuseNativeDriverBecause react-native reanimated executes animations directly in the UI thread.

To learn more about the library, I recommend reading the documentation they host on GitHub, and I also recommend following William Candillon and his YouTube channel, who does some great animations on React Native, And he’s been using React-native Reanimated.

React Native Animations Library (rnal)

Rnal is the React Native animation library created by Saidhayani@. Its purpose is to make it easy enough to animate React Native by providing simple encapsulation to create transition effects such as Fade, Scale, or rotation effects. With the option to create custom animations, you can create the Fade effect by simply doing the following:

You can check out Docs to explore more options available to you.

react-native-motion

React Native Motion is a library for creating animations in React Native. It is easy to use. Here is an example of how to create a simple Shake animation using React Native Motion:

import React, {Component} from 'react';
import {Text, StyleSheet, TouchableOpacity, SafeAreaView} from 'react-native';
import {Shake} from 'react-native-motion';

export default class index extends Component {
  state = {
    value: 0}; _startAnimation =() = > {
    this.setState({value: this.state.value + 1});
  };
  render() {
    return (
      <SafeAreaView style={styles.container}>
        <TouchableOpacity style={styles.btn} onPress={this._startAnimation}>
          <Text style={styles.textBtn}>Start animation 🚀</Text>
        </TouchableOpacity>
        <Shake style={[styles.card]} value={this.state.value} type="timing">
          <Text style={styles.whiteText}>{this.state.value}</Text>
        </Shake>
      </SafeAreaView>); }}const styles = StyleSheet.create({
  container: {
    alignItems: 'center',},btn: {
    alignItems: 'center'.backgroundColor: '#d3d3d3'.padding: 10.width: '80%'.borderRadius: 10.marginTop: 20,},textBtn: {
    fontWeight: 'bold',},card: {
    backgroundColor: '#007fff'.width: '60%'.height: 300.marginTop: 100.justifyContent: 'center'.alignItems: 'center'.borderRadius: 10,},whiteText: {
    color: '#ffffff',}});Copy the code

React-native-motion provides a simple API for creating shared transitions, and the authors of the library wrote an article about shared transitions. It’s worth noting.

This library has not been updated for 3 years and does not have TypeScript type declarations. Use with caution in production environments!

This article was first published on the official website of Luozhu, as well as the public account luozhu Morning Teahouse and Gold digging Column.