Instagram Style Splash

1import React, { useEffect } from 'react';
2import { StyleSheet, View, Image, Text, Dimensions } from 'react-native';
3import Animated, {
4    useSharedValue,
5    useAnimatedStyle,
6    withTiming,
7    Easing,
8    runOnJS,
9    withDelay
10} from 'react-native-reanimated';
11
12const { width } = Dimensions.get('window');
13
14interface Props {
15    onAnimationComplete?: () => void;
16}
17
18const InstagramSplash: React.FC<Props> = ({ onAnimationComplete }) => {
19    // Shared values for Logo
20    const logoOpacity = useSharedValue(0);

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 [key, setKey] = useState(0);
    const [isAnimating, setIsAnimating] = useState(true);

    const replay = () => {
        setKey(prev => prev + 1);
        setIsAnimating(true);
    };

    return (
        <View style={styles.container}>
            {isAnimating ? (
                <CinematicInstagramSplash
                    onAnimationComplete={() => setIsAnimating(false)}
                />