AppLoading doesnt hide logo/image after onFinish

[periabyte]

Using AppLoading component doesn’t hide and overlaps with the next screen navigated to.

//AppLoadingScreen.js
      _initialSetup = async () => {
		const { navigation } = this.props;
		try {
			await this._loadFonts();
			await this._loadAssets();

			navigation.navigate('AuthLoading');
		} catch (err) {
			console.error("APP LOADING ERROR", err);
		}
	};

    _onFinish = async () => {
        await this.setState({ isReady: true });
        SplashScreen.hide();
    };

    render() {
        const { isReady } = this.state;

        if (!isReady) {
            return (
                <AppLoading
                    startAsync={this._initialSetup}
                    onFinish={this._onFinish}
                    onError={this._onError}
                    autoHideSplash={false}
                />
            );
        }

        return (
            <View style={styles.centerCenter}>
                <View style={{ justifyContent: 'center' }}>
                    <ActivityIndicator size="large" color="#013B79" />
                </View>
            </View>
        );
    }

[periabyte]

I solved it by adding backgroundColor in the return

       return (
            <View style={[styles.centerCenter, { backgroundColor: '#fff' }]}>
                <View style={{ justifyContent: 'center' }}>
                    <ActivityIndicator size="large" color="#013B79" />
                </View>
            </View>
        );

[charliecruzan]

Nice, @periabyte!

Now, if someone else has the same issue, they can simply google and use your solution