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;
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>)}
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);
}, []);
loadingText={'loading'}
worked for me to show the loading icon, when loading a Table
<Loader> Loading </Loader>
for other components in general.