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

Android AppLoading is blank #409

Closed
joshwils82 opened this issue Jul 24, 2017 · 60 comments

Comments

Projects
None yet
@joshwils82
Copy link

commented Jul 24, 2017

I am seeing a blank (all white) AppLoading screen after upgrading to 18.0.0. I have AppLoading as the root component. This appears to be an Android only issue as it is still working on iOS.

@jesseruder

This comment has been minimized.

Copy link
Contributor

commented Jul 25, 2017

Can you upload your code or reproduce on snack?

@joshwils82

This comment has been minimized.

Copy link
Author

commented Jul 26, 2017

Sure, here is some code you can put into snack that will show the issue. Notice how after the "Waiting for code.." message, the screen is blank for 5 seconds while it is showing the AppLoading component.

import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Constants, AppLoading } from 'expo';

export default class App extends Component {
  
  constructor() {
    super();
    this.state = { pending: true};
  }
  
  componentWillMount() {
    setTimeout(() => {
      this.setState({pending: false});
    }, 5000);
  }
  
  render() {

      if (this.state.pending) {
        return (<AppLoading/>);
      }

    return (
      <View style={styles.container}>
        <Text style={styles.paragraph}>
          Change code in the editor and watch it change on your phone!
          Save to get a shareable url. You get a new url each time you save.
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
    color: '#34495e',
  },
});

expbot added a commit that referenced this issue Aug 9, 2017

Add Keychain access to api (#409)
fbshipit-source-id: 44f75bc
@benhannel

This comment has been minimized.

Copy link

commented Aug 21, 2017

I'm having the same issue on SDK 19

@jbakerdev

This comment has been minimized.

Copy link

commented Sep 11, 2017

+1 SDK 19

@wenbolovesnz

This comment has been minimized.

Copy link

commented Sep 15, 2017

+1 SDK 20

@mamal72

This comment has been minimized.

Copy link

commented Sep 28, 2017

Had the same problem with 20.0.0. Just updated to 21.0.0 and it's fixed! 🎉🎈
Thank you! 👍🙏

@anp

This comment has been minimized.

Copy link
Contributor

commented Oct 11, 2017

Hi! I think without specifying a loading/splash config in app.json I think it's supposed to default to a blank screen. If we've specified differently elsewhere, please post back and I'll reopen. Thanks!

Side note: I observed the same behavior on iOS and Android in the latest release.

@anp anp closed this Oct 11, 2017

@outaTiME

This comment has been minimized.

Copy link

commented Oct 13, 2017

@dikaiosune Same here, in iOS works as expected and in android white screen ...

I leave a comparison side by side:

screen recording 2017-10-12 at 09 05 pm

Im running 21 SDK with last cli on both devices also here I leave the app.json and the source:

{
  "expo": {
    "name": "foo",
    "description": "An empty new project",
    "slug": "foo",
    "privacy": "unlisted",
    "sdkVersion": "21.0.0",
    "version": "1.0.0",
    "orientation": "portrait",
    "primaryColor": "#cccccc",
    "icon": "./assets/icons/app-icon.png",
    "loading": {
      "icon": "./assets/icons/loading-icon.png"
    },
    "packagerOpts": {
      "assetExts": ["ttf", "mp4"]
    }
  }
}

One option in the new SDK way:

export default class App extends React.Component {
  state = {
    rehydrated: false,
  };
  async _persistStore() {
    return new Promise(function(resolve, reject) {
      // https://github.com/rt2zz/redux-persist/blob/master/docs/recipes.md
      persistStore(store, { storage: AsyncStorage, whitelist: ['auth'] }, () => {
        setTimeout(() => {
          resolve();
        }, 10 * 1000); // 10 secs
      });
    });
  }
  render() {
    if (!this.state.rehydrated) {
      return (
        <AppLoading
          startAsync={this._persistStore}
          onFinish={() => this.setState({ rehydrated: true })} />
      );
    }
    return (
      <Provider store={store}>
        <Router />
      </Provider>
    );
  }
}

The old one:

export default class App extends React.Component {
  state = {
    rehydrated: false,
  };
  componentWillMount() {
    // https://github.com/rt2zz/redux-persist/blob/master/docs/recipes.md
    persistStore(store, { storage: AsyncStorage, whitelist: ['auth'] }, () => {
      setTimeout(() => {
        this.setState({
          rehydrated: true
        });
      }, 10 * 1000); // 2 secs
    });
  }
  render() {
    if (!this.state.rehydrated) {
      return (
        <AppLoading />
      );
    }
    return (
      <Provider store={store}>
        <Router />
      </Provider>
    );
  }
}

NOTE: same behavior in both codes

thanks !!!

@anp anp reopened this Oct 14, 2017

@kadoshms

This comment has been minimized.

Copy link

commented Oct 21, 2017

Looking at the source code of AppLoading.android.js in 19.0.0:

'use strict';

export default () => null;

That could explain the blank screen....

@3axap4eHko

This comment has been minimized.

Copy link

commented Nov 27, 2017

+1 SDK 23

@sermagnus

This comment has been minimized.

Copy link

commented Dec 1, 2017

+1 with SDK 23

@3axap4eHko

This comment has been minimized.

Copy link

commented Dec 5, 2017

I found solution with following config. It will show splash on standalone application (not in development)

"expo": {
  ...
  "splash": {
     "backgroundColor": "#424242",
     "image": "./images/icon_512.png"
  }
  ...
}
@nikki93

This comment has been minimized.

Copy link
Contributor

commented Dec 5, 2017

@outaTiME's issue is this other one #1068 -- that issue tracks the similar issue for development mode live reloading, please discuss it there.

The issue on this page should be addressed in the minor update https://blog.expo.io/expo-for-android-sdk23-minor-update-daf5847ae0a7 and has worked for at least one user https://forums.expo.io/t/sdk-23-only-white-screen-on-android/4944/9 -- let us know if you still face it.

@nikki93 nikki93 closed this Dec 5, 2017

@arrygoo

This comment has been minimized.

Copy link
Contributor

commented Dec 13, 2017

@nikki93 I'm having this issue with a detached app (just updated from expo22 to 23). How can I fix or debug it?

@gfleetwood

This comment has been minimized.

Copy link

commented Dec 25, 2017

Having this issue with the latest expo on Ubuntu 16.04 and Android. Worked well for most of yesterday and then started with this problem out of the blue.

@kadoshms

This comment has been minimized.

Copy link

commented Dec 31, 2017

I am not sure weather this issue is fixed or not.
Anyway, doesnt seem like it does in both sdk 23 and 24

@MaybeRex

This comment has been minimized.

Copy link

commented Jan 1, 2018

Same issue on sdk 24

@kadoshms

This comment has been minimized.

Copy link

commented Jan 1, 2018

Now I can confirm that this is not fixed in 23 nor 24.

Could someone please reopen?

@mauroporras

This comment has been minimized.

Copy link

commented Jan 1, 2018

Same issue on Android.

1 similar comment
@MedinaGitHub

This comment has been minimized.

Copy link

commented Jan 4, 2018

Same issue on Android.

@davidbuckleyni

This comment has been minimized.

Copy link

commented Mar 22, 2018

I have the same problem I added entity framework into a shared libary and created a context but when I launch the master detail app I get a blank white screen I am on api level 27

@eeeman1

This comment has been minimized.

Copy link

commented Apr 23, 2018

I confirm, the problem persists, what are the solutions?
"expo": "^25.0.0"
"sdkVersion": "25.0.0"

@davidbuckleyni

This comment has been minimized.

Copy link

commented Apr 23, 2018

@eeeman1

This comment has been minimized.

Copy link

commented Apr 23, 2018

version of what?

@aalices

This comment has been minimized.

Copy link
Contributor

commented May 10, 2018

Anyone still having the issue on a detached or standalone app? I can confirm there's a white flash inside Expo client that is going to be fixed and want to know if someone's still having issues.
There might be a specific reason for it to happen as I still didn't manage to reproduce

@eeeman1

This comment has been minimized.

Copy link

commented May 10, 2018

the problem is relevant, because of this I refused to use AppLoading and made my logic

@bakaa99

This comment has been minimized.

Copy link

commented May 11, 2018

"sdkVersion": "26.0.0",
working perfectly for ios

but for android:
after the splash screen in android
using apploading to check for permissions in construtor

the interval between it starts to check for permissions and the time the isReady(to render apploading or not) is set to true ,
i'm getting the white screen

@nntai

This comment has been minimized.

Copy link

commented Jun 15, 2018

"sdkVersion": "27.0.0",

I still get blank screen on android.

@mnemotiv

This comment has been minimized.

Copy link

commented Jun 15, 2018

sdk 28, same issue on Android

@aalices

This comment has been minimized.

Copy link
Contributor

commented Jun 18, 2018

Anyone reporting the issue, please include your app.json configuration, point out where the issue occurs (Expo client / standalone / detached). This would help us a lot!

@davidbuckleyni

This comment has been minimized.

Copy link

commented Jun 18, 2018

@anp

This comment has been minimized.

Copy link
Contributor

commented Jun 18, 2018

@davidbuckleyni I'm not seeing any Xamarin logs attached to your messages. Also, I'm not sure how Xamarin logs would help as Expo is built on top of React Native, not Xamarin.

@terrysahaidak

This comment has been minimized.

Copy link

commented Jun 19, 2018

Anyone reporting the issue, I've just tried to reproduce. Everything works as expected with SDK 28 (and even 27 in my production app). The issue doesn't reproduce using builded app, but does reproduce in Expo.

Here is the video: https://photos.app.goo.gl/3CABxs5mmj7fFTC16

And here is the code:

import React from 'react';
import { Image, Text, View, StyleSheet } from 'react-native';
import { Asset, AppLoading } from 'expo';

const delay = (shouldReject, timeout = 2000) =>
  new Promise((res, rej) =>
    setTimeout(shouldReject ? rej : res, timeout));

export default class App extends React.Component {
  state = {
    isReady: false,
  };

  render() {
    if (!this.state.isReady) {
      return (
        <AppLoading
          startAsync={this.asyncJob}
          onFinish={() => this.setState({ isReady: true })}
          onError={console.warn}
        />
      );
    }

    return (
      <View style={styles.container}>
        <Text>Hello world</Text>
      </View>
    );
  }

  asyncJob() {
    return Promise.all([
      delay(),
      delay(true, 1000), // even with rejecting
      // everything else
    ]);
  }
}

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

This comment has been minimized.

Copy link

commented Jun 25, 2018

@terrysahaidak Could you attach your app.json, please?

@FakhruddinAbdi

This comment has been minimized.

Copy link

commented Jun 29, 2018

Same issue on sdk version 28

app.json

{
      "expo": {
        "name": "App name",
        "description": "Some descrption",
        "slug": "App slug",
        "privacy": "public",
        "sdkVersion": "28.0.0",
        "version": "1.0.4",
        "orientation": "portrait",
        "primaryColor": "#5a227e",
        "icon": "./assets/icons/app-icon.png",
        "notification": {
          "icon": "./assets/icons/notification-icon.png",
          "color": "#000000"
        },
        "splash": {
          "image": "./assets/splash-screen.png",
          "backgroundColor": "#5a227e",
          "resizeMode": "cover"
        },
        "packagerOpts": {
          "assetExts": ["ttf"]
        },
        "ios": {
          "bundleIdentifier": "com.package.app",
          "supportsTablet": true
        },
        "android": {
          "versionCode": 7,
          "package": "com.package.app",
          "icon": "./assets/icons/app-icon-android.png",
          "config": {
            "fabric": {
              "apiKey": "[API KEY HERE]",
              "buildSecret": "[BUILD SECRET]"
            }
          }
        },
        "androidStatusBar": {
          "backgroundColor": "#34323"
        },
        "hooks": {
          "postPublish": [
            {
              "file": "sentry-expo/upload-sourcemaps",
              "config": {
                "organization": "orginizatino",
                "project": "App",
                "authToken": "[AUTH TOKEN]"
              }
            }
          ]
        }
      },
    }

works fine with ios.

In android -> standalone app when i lunch the app, i see a blank white screen with spinner for some seconds then the splash screen appear and the rest goes fine.

@Pavel-Mishin

This comment has been minimized.

Copy link

commented Jun 29, 2018

I'm not sure but it seems like the problem is caused by "./" in splash image path. If you'll see to the expo console, there will be paths like "xxhdpiUrl":"http://localhost:19001/assets/./assets/icons/icon.png" if in app.json
"xxhdpi":"./assets/icons/icon.png", so try to replace it with "xxhdpi":"assets/icons/icon.png". Also it may required to write splash config in android section, for each resolution.
It seems worked for me, but unfortunately i can't check it right now.

@FakhruddinAbdi

This comment has been minimized.

Copy link

commented Jul 7, 2018

I have change my app.json icon path to yours, But it didn't works . same as before @Pavel-Mishin

@mochfauz

This comment has been minimized.

Copy link

commented Jul 12, 2018

I got same problem

@rmushtaq21

This comment has been minimized.

Copy link

commented Jul 17, 2018

I'm experiencing the same issue:

{ "expo": { "name": "App Name", "version": "0.1.0", "slug": "App Slug", "sdkVersion": "28.0.0", "privacy": "unlisted", "ios": { "bundleIdentifier": "xxx" }, "android": { "package": "xxx" }} }

@Hypothesis-github

This comment has been minimized.

Copy link

commented Jul 18, 2018

Same issue, "sdkVersion": "27.0.0", looking for a workaround or fix

@FakhruddinAbdi

This comment has been minimized.

Copy link

commented Jul 18, 2018

Same issue sdkVersion": "28.0.0"
I just decided to detach and go ahead with native codes :(
Despite the simplicities expo brought to react native development, But it has some deal breakers which forced me to detach.
The next step after detach would be removing expo sdk completely to reduce app size.

@esamelson

This comment has been minimized.

Copy link
Member

commented Jul 18, 2018

Hi all -- really sorry this has been a pain point. Unfortunately it's very hard for us to provide any sort of help on an issue like this that has been open for almost a year. Lots of things have changed since this issue was opened, and it's nearly impossible to pinpoint anyone's problem without more context.

For all those who are still having an issue resembling this one, please first make sure you have followed @aalices 's suggestion from earlier in the thread, setting the android.splash images for every DPI in app.json (see https://docs.expo.io/versions/latest/guides/configuration.html#android at the very bottom of the page).

If that still doesn't help, please open a new issue and fill out the template there as completely as you can -- the more information you give, the more likely we'll be able to help.

Thanks!

@Symyon

This comment has been minimized.

Copy link

commented Apr 17, 2019

Looks like Expo AppLoading on Android is looking for the file with a specific name: "shell_launch_background_image.png" in Android drawable folders, even if you specify another one in app.json and use JS project folder (I had "./assets/splash.png" in my app.json).

So by placing "shell_launch_background_image.png" in xxxhdpi folder should be enough, file name is what matters here. Moving a file named splash.png from 'assets' to 'xxxhdpi' will not work.

You can obviously do that for all the other density folders as well if you like to provide a better quality. Also this is only for the AppLoading splash screen. For the the native splash screen you have to make the xml file.

My project: sdkVersion: 32 / detached (ExpoKit)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.