Loading multiple splash screens / loading screens with timeout react native expo

Question

I am trying to load two consecutive splash screens before my signup page is loaded, I want each splash screen to be shown for a certain amount of time, I have tried with this code but it didn't work well for me. this is my App.js:

import React, { useEffect, useState } from "react";
import { StyleSheet, Text, View } from "react-native";
import TechInLifeSplashScreen from "./Screens/TechInLifeSplashScreen";
import NewLookSplashScreen from "./Screens/NewLookSplashScreen";
import SignupScreen from "./Screens/SignupScreen";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loadingTIL: true,
      loadingNL: false,
      loadingWelcome: false,
    };
  }

  componentDidMount() {
    const TILTimeout = setTimeout(() => {
      this.setState({ loadingTIL: false, loadingNL: true });
      this.showWelcome();
    }, 3000);
  }

  showWelcome = () => {
    setTimeout(() => {
      this.setState({ loadingNL: false, loadingWelcome: true });
    }, 3000);
  };

  render() {
    if (this.state.loadingTIL) {
      return <TechInLifeSplashScreen></TechInLifeSplashScreen>;
    } else if (this.state.loadingNL) {
      return <NewLookSplashScreen></NewLookSplashScreen>;
    } else if (this.state.loadingWelcome)
      return (
        <View style={styles.container}>
          <SignupScreen></SignupScreen>
        </View>
      );
    else return null;
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

Can anyone help me with this code in order to load my three screens in sequence? Thanks.

Answer 1

You can clear the timeouts by calling clearTimeout() for particular timeouts. But, for that, you should get the references to access within the component scope. You may use this keyword for that. For example, you may use this.TILTimeout instead of const TILTimeout .

Following is a better way to do what you want.

import React from "react";
import { StyleSheet, Text, View } from "react-native";
import TechInLifeSplashScreen from "./Screens/TechInLifeSplashScreen";
import NewLookSplashScreen from "./Screens/NewLookSplashScreen";
import SignupScreen from "./Screens/SignupScreen";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loadingTIL: true,
      loadingNL: false,
      loadingWelcome: false,
    };
  }

  componentDidMount() {
    this.showNewLook();
  }

  componentWillUnmount() {
    clearTimeout(this.TILTimeout);
    clearTimeout(this.NLTimeout);
  }

  showNewLook = () => {
    this.TILTimeout = setTimeout(() => {
      this.setState({ loadingTIL: false, loadingNL: true });
      this.showWelcome();
    }, 3000);
  }

  showWelcome = () => {
    this.NLTimeout = setTimeout(() => {
      this.setState({ loadingNL: false, loadingWelcome: true });
    }, 3000);
  };

  render() {
    if(this.state.loadingTIL) {
      return <TechInLifeSplashScreen/>
    }
    if(this.state.loadingNL) {
      return <NewLookSplashScreen/>
    }
    if(this.state.loadingWelcome) {
      return (
        <View style={styles.container}>
          <SignupScreen/>
        </View>
      )
    }
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});