Fade out loading screen in React Native - reactjs

Question

I've made a test weather app which has a loading screen with a timeout so it shows the Home screen after 6 sec (this will be replaced by the time the API-fetch is loading). Everything works fine however I'd like the loading screen to fade into the Home screen (now it just snaps right into it). Is there a way of doing this?
Thanks
export default function Home() {
const [isLoading, setIsLoading] = useState(true)
const [temperature, setTemperature] = useState(0)
const [weatherCondition, setWeatherCondition] = useState(null)
const lat = 60
const lon = 24
useEffect(() => {
setTimeout(() => {
fetch(`http://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&APPID=${API_KEY}&units=metric`)
.then(res => res.json())
.then(json => {
setTemperature(json.main.temp)
setWeatherCondition(json.weather[0].main)
setIsLoading(false)
})
.catch((e) => console.log(e))
}, 6000);
},[]);
return (
<View style={styles.container}>
{isLoading ?
<LoadingScreen/>
:
<Weather weather={weatherCondition} temperature={temperature}/>
}
</View>
)
}

Answer 1

You can use react-native-modal for your loading screen and in animationOut pass this value 'fadeOut'

Answer 2

You can do something like this.
First create a Spinner Component so you can use it wherever you want.
Spinner.js
It take on prop visible to show or hide the ActivityIndicator
import React from "react";
import {
View,
StyleSheet,
ActivityIndicator,
Modal,
Dimensions,
} from "react-native";
// dimenstion
const { width, height } = Dimensions.get("window");
const Spinner = ({ visible, ...props }) => {
if (!visible) return null;
return (
<Modal visible={visible} transparent animationType="fade">
<View style={styles.container}>
<ActivityIndicator color="white" size={height * 0.07} />
</View>
</Modal>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "rgba(1,0,23,0.65)",
alignItems: "center",
justifyContent: "center",
},
});
export default Spinner;
Now simply use it in your screen
First import it.
import Spinner from '.....';
and Use it like this.
return (
<View style={styles.container}>
<Spinner visible={isLoading} />
<Weather weather={weatherCondition} temperature={temperature} />
</View>
);