Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SplashScreen is automatically dismissed in development client #30526

Open
peterlazar1993 opened this issue Jul 19, 2024 · 6 comments
Open

SplashScreen is automatically dismissed in development client #30526

peterlazar1993 opened this issue Jul 19, 2024 · 6 comments
Labels
Development Builds needs review Issue is ready to be reviewed by a maintainer

Comments

@peterlazar1993
Copy link

Summary

I am trying out react-native-bootsplash v6 with expo support. On running the development client, the splash screen is automatically hidden. This only happens on Android and only with development client builds

bootsplash.mp4

Managed or bare workflow?

managed

What platform(s) does this occur on?

Android

Package versions

expo-dev-client: 4.0.20
expo: 51.0.21
react-native-bootsplash: 6

Environment

expo-env-info 1.2.0 environment info:
    System:
      OS: macOS 14.5
      Shell: 3.7.1 - /opt/homebrew/bin/fish
    Binaries:
      Node: 21.7.3 - ~/.local/share/mise/installs/node/21.7.3/bin/node
      Yarn: 4.3.1 - ~/.local/share/mise/installs/node/21.7.3/bin/yarn
      npm: 10.5.0 - ~/.local/share/mise/installs/node/21.7.3/bin/npm
      Watchman: 2024.07.15.00 - /opt/homebrew/bin/watchman
    Managers:
      CocoaPods: 1.15.2 - /Users/peterlazar/.local/share/mise/installs/ruby/3.2.2/bin/pod
    SDKs:
      iOS SDK:
        Platforms: DriverKit 23.5, iOS 17.5, macOS 14.5, tvOS 17.5, visionOS 1.2, watchOS 10.5
      Android SDK:
        API Levels: 32, 34
        Build Tools: 34.0.0
        System Images: android-28 | Google ARM64-V8a Play ARM 64 v8a, android-29 | Google Play ARM 64 v8a, android-34 | Google APIs ARM 64 v8a, android-34 | Google Play ARM 64 v8a
    IDEs:
      Xcode: 15.4/15F31d - /usr/bin/xcodebuild

Reproducible demo

https://github.com/peterlazar1993/bootsplash-sample

  • Run with yarn android

Stacktrace (if a crash is involved)

No response

@expo-bot expo-bot added needs review Issue is ready to be reviewed by a maintainer and removed needs validation Issue needs to be validated labels Jul 19, 2024
@teivienn
Copy link

This issue should be reposted to the repository library. The expo team does not accompany it and therefore by posting it here, the author of this library will not know about the problem

сс @zoontek

@zoontek
Copy link
Contributor

zoontek commented Jul 20, 2024

Thanks @peterlazar1993, the reproduction repository is perfect. The issue seems to occur only with expo-dev-client and is not related to react-native-bootplash directly. I will investigate to check what could create it, but I think it's probably somewhere there.

@teivienn we are working together with the expo lately, solving this is important for them too as the splash screen implementation of Expo is about to evolve.

@zoontek
Copy link
Contributor

zoontek commented Jul 20, 2024

@peterlazar1993 Found it, we have to comment / disable this line.

I started working on reading the app config from anywhere in expo modules, maybe we can read it in the expo-dev-launcher package, check if the splash option is present or not (or if it's using the legacy config) and disable the dev launcher splash screen in such cases? (ping @alanjhughes)

@outaTiME
Copy link

outaTiME commented Jul 25, 2024

Hi there, I am experiencing (I think) the same or similar error.

If I run the following example either from Expo Go or from a custom client in development mode, the SplashScreen disappears after 5 seconds (this is the test value set in the setTimeout) which is expected.

However, if I create a build with EAS, this SplashScreen timeout is not respected on Android and disappears automatically, on iOS, it works perfectly.

import * as SplashScreen from 'expo-splash-screen';
import { StatusBar } from 'expo-status-bar';
import { useEffect } from 'react';
import { StyleSheet, Text, View } from 'react-native';

const start_time = Date.now();
// Keep the splash screen visible while we fetch resources
SplashScreen.preventAutoHideAsync();

export default function App() {
  useEffect(() => {
    // Wait 5 seconds to remove the splash screen
    new Promise((resolve) => setTimeout(resolve, 5 * 1000)).then(() => {
      console.log(
        `👌 Application loading is completed in ${Date.now() - start_time}ms`,
      );
      SplashScreen.hideAsync();
    });
  }, []);
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

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

(just in case) I leave the package.json:

{
  "name": "splashscreenissue",
  "version": "1.0.0",
  "main": "expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "expo": "~51.0.22",
    "expo-splash-screen": "~0.27.5",
    "expo-status-bar": "~1.12.1",
    "react": "18.2.0",
    "react-native": "0.74.3"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  },
  "private": true
}

@peterlazar1993
Copy link
Author

peterlazar1993 commented Jul 26, 2024

@outaTiME The issue reported here is specific to react-native-bootsplash not expo-splash-screen
It would be best to create another issue.

Also the issue reported here is the inverse of what you're experiencing. SplashScreen is removed automatically in custom dev client builds, but works perfectly in release builds.

@outaTiME
Copy link

Understood @peterlazar1993, I thought that maybe because of the comment made by @zoontek this could be related at some point.

In case you are interested I created a new issue here: #30643

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Development Builds needs review Issue is ready to be reviewed by a maintainer
Projects
None yet
Development

No branches or pull requests

5 participants