I am creating a modern, professional React Native CLI mobile application and need a visually appealing splash screen animation. The splash screen should start by displaying the app logo centered on a clean, dark or gradient background. The logo should then smoothly zoom in to fill the entire screen, creating a bold and immersive visual effect. After a brief pause, the animation should transition by zooming the logo out, revealing the login screen beneath it with a sleek fade or slide animation. The overall look should feel fast, fluid, and polished, suitable for both Android and iOS platforms. The design should include modern UI touches like soft shadows, elegant typography, and rounded components to give the app a professional and attractive first impression. Use React Native's Animated API or Reanimated for smooth performance.

splash screen
import React, { useEffect } from 'react';
import { View, Text, StyleSheet, Image } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
import MaskedView from '@react-native-masked-view/masked-view';
import LinearGradient from 'react-native-linear-gradient';

// 👇 Add local type here — you don't need to create a separate file
type NavigationProp = NativeStackNavigationProp<{
  Splash: undefined;
  Login: undefined;
}>;

const SplashScreen = () => {
  const navigation = useNavigation<NavigationProp>();

  useEffect(() => {
    const timer = setTimeout(() => {
      navigation.navigate('Login');
    }, 5000);

    return () => clearTimeout(timer);
  }, []);

  return (
    <View style={styles.container}>
      <Image
        source={require('../assets/images/logo.png')}
        style={styles.logo}
        resizeMode="contain"
      />
      <MaskedView
        maskElement={
          <Text style={[styles.title, { backgroundColor: 'transparent' }]}>
            myapp
          </Text>
        }
      >
        <LinearGradient
          colors={['#4CB050', '#74FF02']}
          start={{ x: 0, y: 0 }}
          end={{ x: 1, y: 0 }}
        >
          <Text style={[styles.title, { opacity: 0 }]}>myapp</Text>
        </LinearGradient>
      </MaskedView>
      <Text style={styles.text}>
        Realtime Dhrilling Operation Monitoring and Optimization System
      </Text>
    </View>
  );
};

export default SplashScreen;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#121212',
    justifyContent: 'center',
    alignItems: 'center',
  },
  logo: {
    width: 150,
    height: 150,
    backgroundColor: 'transparent',
  },
  title: {
    fontSize: 28,
    color: '#fff',
    fontWeight: 'bold',
    marginBottom: 10,
    textAlign: 'center',
  },
  text: {
    color: '#fff',
    textAlign: 'center',
  },
});


loginscreen
import { useNavigation } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import React, { useEffect, useState } from 'react';
import {
  View,
  Text,
  TextInput,
  TouchableOpacity,
  StyleSheet,
  Image,
  Platform,
  Alert,
} from 'react-native';
import CheckBox from '@react-native-community/checkbox';
import { fetchIP } from '../components/CommonFunctions';

type NavigationProp = NativeStackNavigationProp<{
  Login: undefined;
  dashboard: undefined;
}>;

const LoginScreen = () => {
  const navigation = useNavigation<NavigationProp>();

  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [remember, setRemember] = useState(false);
  const [ipAddress, setIpAddress] = useState('');

  const handleCheckboxChange = () => {
  
    if (!username || !password) {
      Alert.alert('Missing Information', 'Please fill in both username and password before selecting this option.', [
        { text: 'OK' },
      ]);
      return; 
    }

    
    setRemember(prevState => !prevState);
  };

  useEffect(() => {
   
    const getIP = async () => {
      if (remember) {
        const ip = await fetchIP();  
        setIpAddress(ip);  
      } else {
        setIpAddress('');  
      }
    };

    getIP();

  }, [remember]); 

  const handleLogin = () => {
    if(remember)
      {
        navigation.navigate('dashboard');
      }else{
        Alert.alert('Check the Checkbox', 'Please check the checkbox to continue.', [
        { text: 'OK' },
      ]);
      }
  };

  return (
    <View style={styles.container}>
      <Image
        source={require('../assets/images/logo.png')} 
        style={styles.logo}
        resizeMode="contain"
      />

      <Text style={styles.title}>Login</Text>

      <TextInput
        placeholder="Username"
        placeholderTextColor="#aaa"
        style={styles.input}
        value={username}
        onChangeText={setUsername}
      />

      <TextInput
        placeholder="Password"
        placeholderTextColor="#aaa"
        style={styles.input}
        value={password}
        onChangeText={setPassword}
        secureTextEntry
      />

      <View style={styles.checkboxContainer}>
        <CheckBox
          value={remember}
          onValueChange={handleCheckboxChange} 
          style={styles.checkbox}
        />
        <Text style={styles.label}>Authentication with database</Text>
      </View>

      {remember && ipAddress !== '' && (
        <View style={styles.ipContainer}>
          <View style={styles.ipRow}>
            {/* <Text style={styles.ipLabel}>IP Address:</Text> */}
            <Text style={styles.ipValue}>
              http://{ipAddress}:44326/myapp.asmx
            </Text>
          </View>
        </View>
      )}
      <TouchableOpacity style={styles.loginButton} onPress={handleLogin}>
        <Text style={styles.loginText}>Login</Text>
      </TouchableOpacity>
    </View>
  );
};

export default LoginScreen;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#212B35',
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: 15, 
  },
  logo: {
    width: 120,
    height: 120,
    marginBottom: 30,
  },
  title: {
    fontSize: 28,
    color: '#fff',
    fontWeight: 'bold',
    marginBottom: 20,
  },
  input: {
    width: '100%',
    backgroundColor: '#212B35',
    color: '#fff',
    borderRadius: 8,
    padding: 12,
    marginBottom: 15,
    borderColor: '#cccccc',
    borderWidth: 1,
    marginHorizontal: 0,
  },
  checkboxContainer: {
    flexDirection: 'row',
    marginBottom: 10,
    alignItems: 'center',
    alignSelf: 'flex-start',
  },
  checkbox: {
    marginRight: 10,
    ...Platform.select({
      ios: {
        transform: [{ scaleX: 0.8 }, { scaleY: 0.8 }],
      },
    }),
  },
  label: {
    color: '#fff',
    fontSize: 16,
  },
  ipLabel: {
    color: '#aaa',
    fontSize: 14,
    marginLeft: 10,
  },
  ipValue: {
    color: '#4CB050',
    fontSize: 16,
    fontWeight: '600',
  },
  ipContainer: {
    width: '100%',
    marginBottom: 10,
  },
  ipRow: {
    justifyContent: 'flex-start',
    alignItems: 'center',
  },
  loginButton: {
    backgroundColor: '#4CB050',
    paddingVertical: 12,
    paddingHorizontal: 40,
    borderRadius: 8,
    marginTop: 10,
    width: '100%',
    alignItems: 'center',
  },
  loginText: {
    color: '#fff',
    fontSize: 18,
    fontWeight: 'bold',
  },
});