93 lines
2.3 KiB
TypeScript
93 lines
2.3 KiB
TypeScript
import { StyleSheet, View } from "react-native";
|
|
import Animated, {
|
|
useSharedValue,
|
|
useAnimatedStyle,
|
|
withRepeat,
|
|
withTiming,
|
|
useDerivedValue,
|
|
Easing,
|
|
} from "react-native-reanimated";
|
|
import { ThemedView } from "@/components/ThemedView";
|
|
import { ThemedText } from "@/components/ThemedText";
|
|
import { useThemeColor } from "@/hooks/useThemeColor";
|
|
|
|
export const LoadingView = () => {
|
|
const rotation = useSharedValue(0);
|
|
|
|
// Theme-aware colors
|
|
const backgroundColor = useThemeColor({ light: "#f8fafc", dark: "#111827" }, "background");
|
|
const textColor = useThemeColor({ light: "#1f2937", dark: "#f9fafb" }, "text");
|
|
const subtitleColor = useThemeColor({ light: "#6b7280", dark: "#9ca3af" }, "text");
|
|
|
|
rotation.value = withRepeat(
|
|
withTiming(360, { easing: Easing.linear, duration: 2000 }),
|
|
-1,
|
|
false
|
|
);
|
|
const rotationDeg = useDerivedValue(() => {
|
|
return `${rotation.value}deg`;
|
|
});
|
|
|
|
const animatedStyle = useAnimatedStyle(() => {
|
|
return {
|
|
transform: [{ rotate: rotationDeg.value }],
|
|
};
|
|
});
|
|
|
|
return (
|
|
<ThemedView style={[styles.loadingContainer, { backgroundColor }]}>
|
|
<View style={styles.loadingContent}>
|
|
<View style={styles.logoContainer}>
|
|
<Animated.Image
|
|
source={require("@/assets/images/logo.png")}
|
|
style={[styles.logo, animatedStyle]}
|
|
/>
|
|
</View>
|
|
<ThemedText type="title" style={[styles.title, { color: textColor }]}>
|
|
XTablo
|
|
</ThemedText>
|
|
<ThemedText type="subtitle" style={[styles.subtitle, { color: subtitleColor }]}>
|
|
{"Initialisation de l'application..."}
|
|
</ThemedText>
|
|
</View>
|
|
</ThemedView>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
loadingContainer: {
|
|
flex: 1,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
},
|
|
loadingContent: {
|
|
alignItems: "center",
|
|
paddingHorizontal: 40,
|
|
},
|
|
logoContainer: {
|
|
alignItems: "center",
|
|
width: 130,
|
|
height: 130,
|
|
},
|
|
logo: {
|
|
width: 100,
|
|
height: 100,
|
|
shadowColor: "#000",
|
|
shadowOffset: { width: 0, height: 4 },
|
|
shadowOpacity: 0.1,
|
|
shadowRadius: 8,
|
|
elevation: 4,
|
|
},
|
|
title: {
|
|
fontSize: 28,
|
|
fontWeight: "bold",
|
|
textAlign: "center",
|
|
marginBottom: 8,
|
|
},
|
|
subtitle: {
|
|
fontSize: 16,
|
|
textAlign: "center",
|
|
marginBottom: 32,
|
|
opacity: 0.8,
|
|
},
|
|
});
|