react-native-vishesh-animated-loader/App.js

This is the lottie based react-native loader screen

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { Component } from "react";
import {
  StyleSheet,
  View,
  Text,
  TouchableOpacity,
  Animated,
  Easing
} from "react-native";
import LottieView from "lottie-react-native";
import RNPaypal from "react-native-paypal-lib";
import Loader from "./Components/Loader";
import Vloader from "react-native-vishesh-animated-loader";
export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      progress: new Animated.Value(0),
      is_payment_done: false,
      loader: false
    };
  }
  paypalNow = async () => {
    console.log("calling the payment.....");
    RNPaypal.paymentRequest({
      clientId:
        "AeymRbcVGXLUwxfz29nNOHFHGj1hcS7ZK50O1gIC7XuBYPKPFzT3HhFeHbPOZl84zULnUrisi4F1WLs6",
      environment: RNPaypal.ENVIRONMENT.SANDBOX,
      intent: RNPaypal.INTENT.SALE,
      price: 1,
      currency: "USD",
      description: `From mobile`,
      acceptCreditCards: true
    })
      .then(response => {
        console.log(response);
        if (response.response.state === "approved") {
          this.setState({
            is_payment_done: true
          });
        }
      })
      .catch(err => {
        console.log(err.message);
        console.log("reseting");
      });
  };
  render() {
    const { is_payment_done } = this.state;
    return (
      <View style={styles.container}>
        {/* {is_payment_done ? (
          <View style={{ alignItems: "center", marginTop: 20 }}>
            <LottieView
              style={{ width: "100%" }}
              source={require("./trophy.json")}
              loop={false}
              autoPlay={true}
            />
            <Text style={{ color: "#7cf7a5", fontSize: 20, marginTop: 20 }}>
              Purchase was successful
            </Text>
            <Text style={{ color: "grey", fontSize: 14, marginTop: 20 }}>
              Order information was sent on your email
            </Text>
          </View>
        ) : (
          <LottieView
            style={{ width: "100%" }}
            source={require("./water-loader.json")}
            loop={false}
            ref={animation => {
              this.animation = animation;
            }}
            onAnimationFinish={() => {
              console.log("Done");
            }}
          />
        )}

        <View
          style={{ flex: 1, alignItems: "center", justifyContent: "center" }}
        >
          {is_payment_done ? (
            <TouchableOpacity
              style={{
                padding: "10%",
                paddingHorizontal: "20%",
                borderRadius: 20,
                borderWidth: 2,
                borderColor: "#26f069",
                alignSelf: "center",
                backgroundColor: "#3a872e"
              }}
              onPress={() => {
                this.setState({
                  is_payment_done: false
                });
              }}
            >
              <Text
                style={{ color: "white", fontWeight: "bold", fontSize: 20 }}
              >
                Done
              </Text>
            </TouchableOpacity>
          ) : (
            <TouchableOpacity
              style={{
                padding: "10%",
                paddingHorizontal: "10%",
                borderRadius: 20,
                borderWidth: 2,
                borderColor: "#26f069",
                alignSelf: "center",
                backgroundColor: "#7cf7a5"
              }}
              onPress={() => {
                this.setState({
                  loader: true
                });

                this.animation.play();

                setTimeout(() => {
                  this.setState({
                    loader: false
                  });
                  this.paypalNow();
                }, 5000);
              }}
            >
              <Text
                style={{ color: "white", fontWeight: "bold", fontSize: 20 }}
              >
                Pay
              </Text>
            </TouchableOpacity>
          )} */}
          <Vloader
            //width={1500}
            height={500}
            visible={true}
            source={require("./loading3.json")}
            text="loading.."
            textStyle={{color:"red",fontSize:20}}
          />
        </View>
      //  </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,

    alignItems: "center",
    backgroundColor: "#fff"
  },
  welcome: {
    fontSize: 20,
    textAlign: "center",
    margin: 10
  },
  instructions: {
    textAlign: "center",
    color: "#333333",
    marginBottom: 5
  }
});