{"action":"opened","issue":{"url":"https://api.github.com/repos/expo/expo/issues/1923","repository_url":"https://api.github.com/repos/expo/expo","labels_url":"https://api.github.com/repos/expo/expo/issues/1923/labels{/name}","comments_url":"https://api.github.com/repos/expo/expo/issues/1923/comments","events_url":"https://api.github.com/repos/expo/expo/issues/1923/events","html_url":"https://github.com/expo/expo/issues/1923","id":336212253,"node_id":"MDU6SXNzdWUzMzYyMTIyNTM=","number":1923,"title":"[RFC] AppLoading / SplashScreen usability issues","user":{"login":"slorber","id":749374,"node_id":"MDQ6VXNlcjc0OTM3NA==","avatar_url":"https://avatars0.githubusercontent.com/u/749374?v=4","gravatar_id":"","url":"https://api.github.com/users/slorber","html_url":"https://github.com/slorber","followers_url":"https://api.github.com/users/slorber/followers","following_url":"https://api.github.com/users/slorber/following{/other_user}","gists_url":"https://api.github.com/users/slorber/gists{/gist_id}","starred_url":"https://api.github.com/users/slorber/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/slorber/subscriptions","organizations_url":"https://api.github.com/users/slorber/orgs","repos_url":"https://api.github.com/users/slorber/repos","events_url":"https://api.github.com/users/slorber/events{/privacy}","received_events_url":"https://api.github.com/users/slorber/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-06-27T12:40:46Z","updated_at":"2018-06-27T12:40:46Z","closed_at":null,"author_association":"NONE","body":"Hi,\r\n\r\nI've been using `<AppLoading/>` for a while now and have faced some issues with it.\r\n\r\nI'm using a component to load resources on app so that while loading resources, the splash screen remains visible. It can also handle retry on loading failure.\r\n\r\nhttps://gist.github.com/slorber/9b190091f52111b5fef71a36a7ef5dfa\r\n\r\n\r\nI have an HOC chain (based on above generic HOC) to do so \r\n\r\n```\r\nlet MyApp = () => {...};\r\n\r\nMyApp = compose(\r\n  provideFonts,\r\n  provideDeviceLanguage,\r\n  provideStartupAsyncStorageData,\r\n  provideAuthentication,\r\n  provideBootstrapData,\r\n)(MyApp);\r\n```\r\n\r\n`provideAuthentication` is a bit different, because it shows a login screen if the user is not authenticated, and show wrapped comp if authenticated\r\n\r\n\r\n\r\n\r\n----------------------------\r\n\r\n\r\nFirst, I think my HOC works fine but it is unclear to me where in it I am supposed to set the state of the data I got through the promise. Even if not necessary, I think if there was an \"onSuccess\" prop, the API would be more clear. If you can suggest me how can I make my HOC better please tell me.\r\n\r\n\r\n----------------------------\r\n\r\n\r\nSecond: as you can see, the provideBootstrapData HOC runs after the authentication protection, which may display a screen. The thing is, if the user starts the app being authenticated, I want to display the splash screen until the bootstrap datas are loaded, and if the user starts unauthenticated, he will have to login, so I want to present the login screen and then load the bootstrap datas with a regular spinner. \r\n\r\nAlso, in the retry logic of my HOC, as we have to present a screen to the user, the splash screen gets removed, and then rendering <AppLoading/> again will actually render a blank screen.\r\n\r\nAs far as I know, there is no way to know when the splash screen is actually dismissed so I can't switch between SplashScreen and spinner, currently I get SplashScreen or blank (which produce a weird visual effect).\r\n\r\nI'd like to be able to write:\r\n\r\n```js\r\n        if ( SplashScreen.isVisible() ) {\r\n          return (\r\n            <AppLoading\r\n              startAsync={this.loadAsyncData}\r\n              onFinish={() => this.setState({ isReady: true })}\r\n            />\r\n          );\r\n        }\r\n        else {\r\n          return <ActivityIndicator/>\r\n       }\r\n```\r\n\r\nAlternatively, I think it would be nice to be able to provide a fallback component to the `<AppLoading/>` component, so that if the splash screen is already dismissed and we render `<AppLoading/>`, it renders something else than a blank screen:\r\n\r\n```js\r\n            <AppLoading\r\n              startAsync={this.loadAsyncData}\r\n              onFinish={() => this.setState({ isReady: true })}\r\n              fallback={<ActivityIndicator/>}\r\n            />\r\n```\r\n\r\nI don't know which API would be better, just want to open the discussion and share my issues with current implementation, so please comment and don't hesitate to give me workarounds if you have any."}}
{"actor":{"display_login":"slorber"}}