[Bug] How to customize within Expo SDK36 the Android Splash screen without any background color flickering?

Expo SDK
1

Description

I am building a react-native app with expo SDK36.

I want to configure to make a nice splash screen without animation for the moment (using a .png)

Reproduction

  1. Init a blank expo project:
expo init # choose blank project
  1. Edit app.json with:
{
+    "backgroundColor": "#FF5454",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "cover"
    }
}
  1. Use the AppLoading template on expo documentation, mine look like this:
export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isSplashReady: false,
      isAppReady: false,
    };
  }

  _cacheSplashResourcesAsync = async () => {
    const gif = require('../assets/splash.png');
    return Asset.fromModule(gif).downloadAsync();
  };

  _cacheResourcesAsync = async () => {
    SplashScreen.hide();

    const images = [
      require('../assets/homepage/a-basket-of-apples-in-an-outdoor-market.jpg'),
      require('../assets/homepage/available-at-google-play.png'),
      require('../assets/homepage/available-at-app-store.png'),
    ];

    try {
      await Font.loadAsync({
        'raleway-medium': require('../assets/fonts/Raleway-Medium.ttf'),
        roboto: require('../assets/fonts/Roboto-Regular.ttf'),
      });
    } catch (e) {
      // we have found that Safari on iPhone 6 was failing even if fonts are loaded
    }

    const cacheImages = images.map((image) => Asset.fromModule(image).downloadAsync());

    await Promise.all(cacheImages);
    this.setState({ isAppReady: true });
  };

  render() {
    const { isSplashReady, isAppReady } = this.state;
    if (!isSplashReady) {
      return (
        <AppLoading
          startAsync={this._cacheSplashResourcesAsync}
          onFinish={() => this.setState({ isSplashReady: true })}
          onError={process.env.NODE_ENV === 'production' ? undefined : console.warn /* eslint-disable-line no-console */}
          autoHideSplash={false}
        />
      );
    }

    return (
      <View style={{ flex: 1 }}>
        {!isAppReady ? (
          <Image
            source={require('../assets/splash.png')}
            onLoad={this._cacheResourcesAsync}
          />
        ) : (
          <AppCore
            version={`${version}-${getEnvVars().name}`}
            locales={locales}
            backgroundImage={require('../assets/homepage/a-basket-of-apples-in-an-outdoor-market.jpg')}
          />
        )}
      </View>
    );
  }
}
  1. Run expo start --android

Expected

I expect to have a nice splash.png displayed when opening my app, and instant transition to the view.

Result

Instead the splash.png disappears with an instant screen flickering that uses the color of the background color set in app.json (0ms transition, very ugly).

It then disappears quickly with a fade out.

Related issues

These are related issues I have created:

2

I solved it by adding style={{ width: '100%', height: '100%' }} to my splash image. It was sized to 0 and background was displayed.

3

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.