how to add spinner in react native?-CodePudding

am stuck with a problem , I want to add spinner before loading my Welcome page , please tell me how to do? I have install react native lottie package for spinner. if you have any query please free feel to ask.

welcome.js

This is the welcome .js file where i want to add loader before loading my welcome page.

import React, { useEffect, useState } from "react";
import { View, Text, Image, StyleSheet, TouchableOpacity } from "react-native";
import LottieView from "lottie-react-native";

export const Welcome = ({ navigation }) => {
  const [loading, setLoading] = useState(false);

  return (
    <View>
      {loading ? (
        <LottieView source={require("../assets/loader.json")} autoPlay loop />
      ) : null}
      <Image
        style={{
          height: 300,
          width: 250,
          alignItems: "center",
          marginLeft: 50,
          marginTop: 100,
        }}
        source={require("../images/Welcome.png")}
      />
      <Text style={styles.logintext}>
        Log In with your Data that you entered during your Registration.
      </Text>
      <TouchableOpacity>
        <Text style={styles.btn1} onPress={() => navigation.navigate("signup")}>
          Sign Up
        </Text>
      </TouchableOpacity>
      <TouchableOpacity>
        <Text style={styles.btn2} onPress={() => navigation.navigate("signin")}>
          Sign In
        </Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  logintext: {
    alignItems: "center",
    justifyContent: "center",
    fontWeight: "bold",
    marginHorizontal: 35,
    marginTop: 20,
  },
  btn1: {
    backgroundColor: "#FFA500",
    textAlign: "center",
    color: "#fff",
    padding: 10,
    marginTop: 70,
    marginHorizontal: 60,
    borderRadius: 20,
    fontWeight: "bold",
    fontSize: 18,
  },
  btn2: {
    backgroundColor: "#FFF",
    textAlign: "center",
    color: "#000000",
    padding: 10,
    marginTop: 40,
    marginHorizontal: 60,
    borderRadius: 20,
    fontWeight: "bold",
    fontSize: 18,
    borderColor: "#FFA500",
    borderWidth: 3,
  },
});

// export default Welcome;

CodePudding user response：

You are loading the spinner only if the loading is true, but you are also rendering other components without waiting for the loader to be false.

Try the below example:

{!loading && (<Image
        style={{
          height: 300,
          width: 250,
          alignItems: "center",
          marginLeft: 50,
          marginTop: 100,
        }}
        source={require("../images/Welcome.png")}
      />
      <Text style={styles.logintext}>
        Log In with your Data that you entered during your Registration.
      </Text>
      <TouchableOpacity>
        <Text style={styles.btn1} onPress={() => navigation.navigate("signup")}>
          Sign Up
        </Text>
      </TouchableOpacity>
      <TouchableOpacity>
        <Text style={styles.btn2} onPress={() => navigation.navigate("signin")}>
          Sign In
        </Text>
      </TouchableOpacity>
    </View>)}

CodePudding user response：

First, make your initial state of 'loading' to true

const [loading, setLoading] = useState(true);

Then add a timeout in the componentDidMount method like this

useEffect(() => {
const timer = setTimeout(() => {
  setLoading(false);
}, 2000);
return () => clearTimeout(timer);
}, []);

CodePudding user response：

loadingText={'loading'}

worked for me to show the loading icon, when loading a Table

<Loader> Loading </Loader>

for other components in general.