Lottie.js

import React, { Component, useState } from "react";
import {
  Text,
  StyleSheet,
  TouchableOpacity,
  TouchableNativeFeedback
} from "react-native";
import Animated, { Easing } from "react-native-reanimated";
import { Block } from "../../components/common";
import LottieView from "lottie-react-native";
import { colors } from "../../theme";
import { connect } from "react-redux";
import { bindActionCreators, compose } from "redux";

const {
  set,
  cond,
  eq,
  and,
  startClock,
  clockRunning,
  block,
  timing,
  Value,
  Clock,
  interpolate
} = Animated;

function runTiming(clock, value, dest) {
  const state = {
    finished: new Value(1),
    position: new Value(value),
    time: new Value(0),
    frameTime: new Value(0)
  };

  const config = {
    duration: 2000,
    toValue: new Value(0),
    easing: Easing.inOut(Easing.ease)
  };

  const reset = [
    set(state.finished, 0),
    set(state.time, 0),
    set(state.frameTime, 0)
  ];

  return block([
    cond(and(state.finished, eq(state.position, value)), [
      ...reset,
      set(config.toValue, dest)
    ]),
    cond(and(state.finished, eq(state.position, dest)), [
      ...reset,
      set(state.position, value),
      set(config.toValue, dest)
    ]),
    cond(clockRunning(clock), 0, startClock(clock)),
    timing(clock, state, config),
    state.position
  ]);
}

const LEN = 5;

class Reanimated extends Component {
  constructor(props) {
    super(props);
    const clock = new Clock();
    const base = runTiming(clock, 0, 1);
    this.state = {
      speed: 2.5
    };
    this.scale = interpolate(base, {
      inputRange: [0, 0.99, 1],
      outputRange: [1, 1.6, 0]
    });
    this.opacity = interpolate(base, {
      inputRange: [0, 1],
      outputRange: [0.4, 0]
    });
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.router_name && nextProps.router_name === `_reanimated`) {
      this.animation.play();
    }
  }

  render() {
    return (
      <Block middle center flex={1}>
        {/* {[...Array(LEN)].map((el, index) => (
          <Animated.View
            style={[
              {
                backgroundColor: "#00639a",
                width: 100 + index * 40,
                height: 100 + index * 40,
                borderRadius: 50 + index * 20,
                position: "absolute"
              },
              { transform: [{ scale: this.scale }], opacity: this.opacity }
            ]}
          />
        ))} */}
        <LottieView
          ref={animation => {
            this.animation = animation;
          }}
          source={require("../../assets/lotties/vui-animation.json")}
          speed={this.state.speed}
          loop
        />
        <Block style={styles.wrapButon}>
          <TouchableOpacity
            style={{ backgroundColor: "transparent" }}
            activeOpacity={0.6}
            onPress={() => this.animation.play()}
            onPressIn={() => this.setState({ speed: 5 })}
            onPressOut={() => this.setState({ speed: 2.5 })}
          >
            <Block style={styles.circleButton} middle center>
              <Text style={{ fontSize: 24, color: colors.WHITE }}>
                Check in
              </Text>
            </Block>
          </TouchableOpacity>
        </Block>
      </Block>
    );
  }
}

const styles = StyleSheet.create({
  circle: {},
  circleButton: {
    width: 150,
    height: 150,
    borderRadius: 75,
    backgroundColor: "#00639a"
  },
  wrapButon: {
    ...StyleSheet.absoluteFillObject,
    justifyContent: "center",
    alignItems: "center"
  }
});

const mapStateToProps = state => ({
  router_name: state.shared.router_name
});

export default connect(
  mapStateToProps,
  null
)(Reanimated);