CODEWITHSUNDEEP
react-nativesplash-screen
fp007
fp007

Reputation: 480

React-Native Splash Screen Control Time

I want to control the time of my Splash Screen. I changed/create the next files to make the splash, and it works perfectly. But I don't want to use any library for this.

android/app/src/main/java/com/MYAPP/SpashActivity.java android/app/src/main/AndroidManifest.xml android/app/src/main/values/styles.xml android/app/src/main/res/addedAllFoldersWithPNGLogos android/app/src/main/res/drawable/splash_background

Thanks

Upvotes: 5

Views: 21151

Answers (3)

Sanka Sanjeeva
Sanka Sanjeeva

Reputation: 3520

For Android, I did like this,

Rendering all content after 2 seconds, Until 2 seconds my splash screen had appeared

import React, { useState } from 'react'

import Navigator from './Navigators/Main'

const App = () => {

  const [isLoad, setIsLoad] = useState(false);

  setTimeout(() => {
    setIsLoad(true);
  }, 2000);

  return isLoad ? <Navigator /> : null
}

export default App

Upvotes: -1

Shwanton
Shwanton

Reputation: 61

The react-native-splash-screen has a pretty good implementation for this.

Once you install and link the native dependencies, you can control when you show the splash screen in your native code:

Android:

public class MainActivity extends ReactActivity {
   @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this);  // here
        super.onCreate(savedInstanceState);
    }
    // ...other code
}

iOS:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // ...other code

    [RNSplashScreen show];  // here
    // or
    //[RNSplashScreen showSplash:@"LaunchScreen" inRootView:rootView];

    return YES;
}

Then in your React code, you can control when to hide the splash screen

React Component:

componentDidMount() {
  // do stuff while splash screen is shown
  // After having done stuff (such as async tasks) hide the splash screen
  SplashScreen.hide();
}

React Hooks (hide after component is loaded):

  React.useEffect(() => {
    SplashScreen.hide();
  }, []);

React Hooks (hide after a timeout):

const [hideSplash, setHideSplash] = React.useState(false);

React.useEffect(() => {
  setTimeout(() => {
    setHideSplash(true);
  }, 1000); // amount of time the splash is shown from the time component is rendered
}, []);

React.useEffect(() => {
  hideSplash && SplashScreen.hide();
}, [hideSplash]);

// ...

Upvotes: 5

Ali SabziNezhad
Ali SabziNezhad

Reputation: 3118

You don't need to create activity in android folder. all pages and views are js files inside index.js and you can switch between them by packages like React Navigation. For creating an splash, you can make a splashScreen.js file and call it from index.js. In splashScreen.js you can set a timer and after that time, your first page of app (Home for example) calls. This is a sample code for splashScreen.js:

export default class SplashScreen extends Component {
    constructor(props) {
        super(props);
        this.state = {
        }
    }

    componentDidMount() {
        setTimeout(() => {
            // go to Home page
        }, 2500)
    }

    render() {
        return (
            <View style={{ backgroundColor: 'white' }}>
                <View style={{ flex: 1, paddingTop: 50 }}>
                    <Text>Splash Screen</Text>
                </View>
            </View>
        )
    }
}

I hope this help you.

Upvotes: 3

Related Questions