141 lines
3.8 KiB
TypeScript
141 lines
3.8 KiB
TypeScript
import React, { useEffect, useRef } from 'react'
|
|
import {
|
|
View,
|
|
Text,
|
|
StyleSheet,
|
|
ActivityIndicator,
|
|
Animated,
|
|
ImageBackground,
|
|
Dimensions,
|
|
} from 'react-native'
|
|
|
|
const { width, height } = Dimensions.get('window')
|
|
|
|
export function LoadingScreen() {
|
|
const fadeAnim = useRef(new Animated.Value(0)).current
|
|
const scaleAnim = useRef(new Animated.Value(0.95)).current
|
|
|
|
useEffect(() => {
|
|
Animated.parallel([
|
|
Animated.timing(fadeAnim, {
|
|
toValue: 1,
|
|
duration: 800,
|
|
useNativeDriver: true,
|
|
}),
|
|
Animated.spring(scaleAnim, {
|
|
toValue: 1,
|
|
friction: 8,
|
|
tension: 40,
|
|
useNativeDriver: true,
|
|
}),
|
|
]).start()
|
|
}, [])
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<ImageBackground
|
|
source={require('../../assets/loading_bg.png')}
|
|
style={styles.backgroundImage}
|
|
resizeMode="cover"
|
|
>
|
|
<Animated.View
|
|
style={[
|
|
styles.content,
|
|
{
|
|
opacity: fadeAnim,
|
|
transform: [{ scale: scaleAnim }],
|
|
},
|
|
]}
|
|
>
|
|
{/* Card with rounded corners and semi-transparent background */}
|
|
<View style={styles.glassCard}>
|
|
<View style={styles.logoContainer}>
|
|
<View style={styles.logoBox}>
|
|
<Text style={styles.logoLetter}>I</Text>
|
|
</View>
|
|
<Text style={styles.appName}>InnungsApp</Text>
|
|
</View>
|
|
|
|
<View style={styles.loaderContainer}>
|
|
<ActivityIndicator size="large" color="#003B7E" />
|
|
<Text style={styles.loadingText}>Wird geladen...</Text>
|
|
</View>
|
|
</View>
|
|
</Animated.View>
|
|
</ImageBackground>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: '#003B7E',
|
|
},
|
|
backgroundImage: {
|
|
flex: 1,
|
|
width: width,
|
|
height: height,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
content: {
|
|
width: '80%',
|
|
maxWidth: 320,
|
|
alignItems: 'center',
|
|
},
|
|
glassCard: {
|
|
width: '100%',
|
|
padding: 32,
|
|
borderRadius: 32, // Rounded corners as requested
|
|
borderWidth: 1,
|
|
borderColor: 'rgba(255, 255, 255, 0.4)',
|
|
backgroundColor: 'rgba(255, 255, 255, 0.95)', // Solid-ish background for clean look without blur
|
|
alignItems: 'center',
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 10 },
|
|
shadowOpacity: 0.1,
|
|
shadowRadius: 20,
|
|
elevation: 10,
|
|
},
|
|
logoContainer: {
|
|
alignItems: 'center',
|
|
marginBottom: 24,
|
|
},
|
|
logoBox: {
|
|
width: 64,
|
|
height: 64,
|
|
backgroundColor: '#003B7E',
|
|
borderRadius: 20,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
marginBottom: 12,
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 4 },
|
|
shadowOpacity: 0.2,
|
|
shadowRadius: 8,
|
|
elevation: 5,
|
|
},
|
|
logoLetter: {
|
|
color: '#FFFFFF',
|
|
fontSize: 32,
|
|
fontWeight: '900',
|
|
},
|
|
appName: {
|
|
fontSize: 24,
|
|
fontWeight: '800',
|
|
color: '#0F172A',
|
|
letterSpacing: -0.5,
|
|
},
|
|
loaderContainer: {
|
|
alignItems: 'center',
|
|
gap: 12,
|
|
},
|
|
loadingText: {
|
|
fontSize: 14,
|
|
color: '#64748B',
|
|
fontWeight: '600',
|
|
marginTop: 8,
|
|
},
|
|
})
|