Hiding splash screen after being inactive or put on backround

[jurcovicova]

I have very simple react-native application - all it does is to hide splash screen in render method and then shows Rendering component text.

My app:

import React from 'react'
import {View, AppState, Text} from 'react-native'
import SplashScreen from 'rn-splash-screen'

class App extends React.Component {

  constructor(props) {
    super(props)
  }

  hideSplash() {
    SplashScreen.hide()
  }

  render() {
    this.hideSplash()

    return (
      <Text>Rendering component</Text>
    )
  }
}

module.exports = App

Right after install, everything works:

• I install and start the app - splash screen appears.
• Splash screen disappears and I see white screen with Rendering component text on it.

Then I put the app to the background and open it again via icon on home screen:

• Splash screen appears and stays there. It hasRendering component text on top of it.

I think that splash screen should disappear.

Then I lock the device via power button and unlock it again (while the app is open):

• Splash screen appears and stays there. It hasRendering component text on top of it.

I think that splash screen should disappear too in this case too.

I am using Samsung S5.

[jurcovicova]

I did another experiment, since splash screen hiding does not belong to the render method anyway. This time, I call hideSplash method in componentWillMount and also in AppState event listener. The method counts how many times it was called during component life:

class App extends React.Component {

  constructor(props) {
    super(props)
    this.state = {splashHidden: false, splashHiddenTimes: 0}
  }

  hideSplash() {
    this.setState({splashHidden: true, splashHiddenTimes: (this.state.splashHiddenTimes || 0) + 1})
    SplashScreen.hide()
  }

  componentWillMount() {
    this.hideSplash()

    AppState.addEventListener('change', (currentAppState) => {
      if (currentAppState === 'active') {
        this.hideSplash()
        this.setState({currentAppState})
      }
    })
  }

  render() {
      return (
        <Text>{this.state.currentAppState} at {this.state.splashHidden ? 'it is hidden' : 'nope'} times {`${this.state.splashHiddenTimes}`}</Text>
      )
  }
}

module.exports = App

Right after install, everything works:

• I install and start the app - splash screen appears.
• Splash screen disappears and I see white screen with at it is hidden times 0 text on it.

Then I put the app to the background and open it again via icon on home screen:

• Splash screen appears and stays there. It hasat it is hidden times 0 text on top of it.

Lock the device again via power button and unlock it again a couple of times:

• Splash screen appears and stays there. It hasactive at it is hidden times 2 text on top of it.
• Splash screen appears and stays there. It hasactive at it is hidden times 3 text on top of it.
• Splash screen appears and stays there. It hasactive at it is hidden times 4 text on top of it.
• etc

I think that splash screen should disappear. The hideSplash method is being called after each unlock, because the number is raising.

Is there something else I can do to make the splash disappear?

[ryankask]

Is this same issue? https://github.com/mehcode/rn-splash-screen/issues/26

[jurcovicova]

Probably not, we are using react-native 0.31.0 and his problem started with 0.34.0.

[mehcode]

This was fixed as well in v4.0.0