71 lines
1.5 KiB
TypeScript
71 lines
1.5 KiB
TypeScript
import React, { useEffect, useRef } from 'react';
|
|
import { View, Text, Animated, StyleSheet, Image } from 'react-native';
|
|
|
|
export default function SplashScreen() {
|
|
const fadeAnim = useRef(new Animated.Value(0)).current;
|
|
|
|
useEffect(() => {
|
|
Animated.timing(fadeAnim, {
|
|
toValue: 1,
|
|
duration: 800,
|
|
useNativeDriver: true,
|
|
}).start();
|
|
}, []);
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<Animated.View style={[styles.content, { opacity: fadeAnim }]}>
|
|
<View style={styles.iconContainer}>
|
|
<Image
|
|
source={require('../assets/icon.png')}
|
|
style={styles.icon}
|
|
resizeMode="cover"
|
|
/>
|
|
</View>
|
|
<Text style={styles.title}>GreenLens</Text>
|
|
<Text style={styles.subtitle}>Identify any plant</Text>
|
|
</Animated.View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: '#1c1917',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
content: {
|
|
alignItems: 'center',
|
|
},
|
|
iconContainer: {
|
|
width: 100,
|
|
height: 100,
|
|
borderRadius: 24,
|
|
backgroundColor: '#ffffff',
|
|
elevation: 8,
|
|
shadowColor: '#4ade80',
|
|
shadowOffset: { width: 0, height: 4 },
|
|
shadowOpacity: 0.2,
|
|
shadowRadius: 12,
|
|
marginBottom: 8,
|
|
overflow: 'hidden',
|
|
},
|
|
icon: {
|
|
width: '100%',
|
|
height: '100%',
|
|
},
|
|
title: {
|
|
fontSize: 36,
|
|
fontWeight: '700',
|
|
color: '#fafaf9',
|
|
marginTop: 16,
|
|
},
|
|
subtitle: {
|
|
fontSize: 16,
|
|
color: '#a8a29e',
|
|
marginTop: 8,
|
|
},
|
|
});
|