66 lines
1.2 KiB
TypeScript
66 lines
1.2 KiB
TypeScript
import React, { useEffect, useRef } from 'react';
|
|
import {
|
|
View,
|
|
Text,
|
|
StyleSheet,
|
|
Animated,
|
|
ImageBackground,
|
|
StatusBar,
|
|
} from 'react-native';
|
|
|
|
const SplashScreen: React.FC = () => {
|
|
const fadeAnim = useRef(new Animated.Value(0)).current;
|
|
|
|
useEffect(() => {
|
|
Animated.timing(fadeAnim, {
|
|
toValue: 1,
|
|
duration: 1200,
|
|
useNativeDriver: true,
|
|
}).start();
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<StatusBar hidden />
|
|
|
|
<ImageBackground
|
|
source={require('./assets/img/splash.png')}
|
|
style={styles.background}
|
|
resizeMode="cover" // IMPORTANT
|
|
>
|
|
<Animated.View
|
|
style={[
|
|
styles.overlay,
|
|
{
|
|
opacity: fadeAnim,
|
|
},
|
|
]}
|
|
>
|
|
{/* Optional content */}
|
|
{/* <Text style={styles.title}>Your App Name</Text> */}
|
|
</Animated.View>
|
|
</ImageBackground>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default SplashScreen;
|
|
|
|
const styles = StyleSheet.create({
|
|
background: {
|
|
flex: 1, // Full screen
|
|
width: '100%',
|
|
height: '100%',
|
|
},
|
|
overlay: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
title: {
|
|
fontSize: 24,
|
|
fontWeight: 'bold',
|
|
color: '#FFFFFF',
|
|
},
|
|
});
|