Kopax Anderson
Description
I am building a
react-native
app with [
expo SDK36
](https://docs.expo.io/).
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:
```bash
expo init # choose blank project
2. Edit `app.json` with:
```diff
{
+ "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:
```jsx
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:
December 31, 2019