Show splash screen before show main screen in react native without using 3rd party library

Question

I am beginner in react native so may be my question seems silly to all experts.

but I am struggling with a basic feature that i want to implement that i want to start my

Answer 1

That's how I do it:

1. Create a component for your splash screen and place it at the bottom of your App.js, something like:

   return (
      <>
         
            
            
         
   
         
      
   )
   

2. Your can be something like:

   import React, { useEffect, useState } from 'react'
   import { Image, StatusBar, Text, Animated } from 'react-native'
   
   const SplashScreen = ({ }) => {
      const [done, setdone] = useState(false)
      const animationOpacity = React.useRef(new Animated.Value(1)).current
      const animationScale = React.useRef(new Animated.Value(1)).current
   
      if (done) return null
   
      function hideAnimation() {
           Animated.parallel([
               Animated.timing(animationOpacity, {
                  toValue: 0,
                  delay: 1000,
                  duration: 400,
                  useNativeDriver: true
              }),
              Animated.timing(animationScale, {
                  toValue: 10,
                  delay: 1000,
                  duration: 400,
                  useNativeDriver: true
              })
           ]).start(() => setdone(true))
       }
   
       hideAnimation()
   
       return (
           
   
               
   
               
                    // some image or icon
                   Some text
               
   
           
       )
   }
   
   export default SplashScreen
   

3. Adjust the Animation params, backgroundColor, Image, Text according to your needs.