tengo un problema, quiero agregar un control giratorio antes de cargar mi página de bienvenida, dígame cómo hacerlo. He instalado el paquete lottie nativo de reacción para spinner. Si tiene alguna consulta, no dude en preguntar.

bienvenido.js

Este es el archivo .js de bienvenida donde quiero agregar un cargador antes de cargar mi página de bienvenida.

 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;