Cinematic Splash

1import React, { useEffect, useRef } from 'react';
2import { View, Image, Animated, Dimensions, StyleSheet } from 'react-native';
3import { LinearGradient } from 'expo-linear-gradient';
4
5const { width } = Dimensions.get('window');
6
7export default function CinematicInstagramSplash({ onAnimationComplete }) {
8    const fadeAnim = useRef(new Animated.Value(0)).current;
9    const scaleAnim = useRef(new Animated.Value(0.8)).current;
10    const loadingProgress = useRef(new Animated.Value(0)).current;
11
12    useEffect(() => {
13        // Run animations
14        Animated.parallel([
15            Animated.timing(fadeAnim, {
16                toValue: 1,
17                duration: 800,
18                useNativeDriver: true,
19            }),
20            Animated.timing(scaleAnim, {

import React, { useState } from 'react';
import { View, StyleSheet, TouchableOpacity, Text } from 'react-native';
import { Play } from 'lucide-react-native';
import CinematicInstagramSplash from './components/InstagramSplashScreen';

export default function App() {
    const [isAnimating, setIsAnimating] = useState(true);

    return (
        <View style={styles.container}>
            {isAnimating ? (
                <CinematicInstagramSplash
                    onAnimationComplete={() => setIsAnimating(false)}
                />
            ) : (
                <View style={styles.main}>
                    <TouchableOpacity
                        style={styles.btn}
                        onPress={() => setIsAnimating(true)}
                    >