How do you make a launch/splash screen for android in React-Native?
I've been searching for a while now and I have not found anything on how to add a launch/splash screen to my android app with react-native.
I've seen many examples of how to do this for iOS, but I also need it to work with android. I'd love something that can work cross-platform but if that is not possible with current react-native, I can implement it for both. I've also seen a way to do it with java, but I would really prefer not tainting my app with java code, trying to keep as much as I can written in react.
Would anyone know how this could be done?
javascript
android react-native splash-screen launch-screen asked Feb 11 '16 at 17:40
Ryan WilsonRyan Wilson
593617
add a comment |
I've been searching for a while now and I have not found anything on how to add a launch/splash screen to my android app with react-native.
I've seen many examples of how to do this for iOS, but I also need it to work with android. I'd love something that can work cross-platform but if that is not possible with current react-native, I can implement it for both. I've also seen a way to do it with java, but I would really prefer not tainting my app with java code, trying to keep as much as I can written in react.
Would anyone know how this could be done?
javascript
android react-native splash-screen launch-screen asked Feb 11 '16 at 17:40
Ryan WilsonRyan Wilson
593617
1
Possible duplicate of How to create some kind of Splash screen/Launching screen, which disappears after App loaded? (React Native)
– Jesús Carrera
Jan 8 '17 at 19:05
add a comment |
I've been searching for a while now and I have not found anything on how to add a launch/splash screen to my android app with react-native.
I've seen many examples of how to do this for iOS, but I also need it to work with android. I'd love something that can work cross-platform but if that is not possible with current react-native, I can implement it for both. I've also seen a way to do it with java, but I would really prefer not tainting my app with java code, trying to keep as much as I can written in react.
Would anyone know how this could be done?
javascript
android react-native splash-screen launch-screen asked Feb 11 '16 at 17:40
Ryan WilsonRyan Wilson
593617
I've been searching for a while now and I have not found anything on how to add a launch/splash screen to my android app with react-native.
I've seen many examples of how to do this for iOS, but I also need it to work with android. I'd love something that can work cross-platform but if that is not possible with current react-native, I can implement it for both. I've also seen a way to do it with java, but I would really prefer not tainting my app with java code, trying to keep as much as I can written in react.
Would anyone know how this could be done?
javascript
android react-native splash-screen launch-screen javascript
android react-native splash-screen launch-screen asked Feb 11 '16 at 17:40
Ryan WilsonRyan Wilson
593617
asked Feb 11 '16 at 17:40
Ryan WilsonRyan Wilson
593617
asked Feb 11 '16 at 17:40
Ryan WilsonRyan Wilson
593617
asked Feb 11 '16 at 17:40
Ryan WilsonRyan Wilson
593617
asked Feb 11 '16 at 17:40
Ryan WilsonRyan Wilson
593617
593617
1
Possible duplicate of How to create some kind of Splash screen/Launching screen, which disappears after App loaded? (React Native)
– Jesús Carrera
Jan 8 '17 at 19:05
add a comment |
1
Possible duplicate of How to create some kind of Splash screen/Launching screen, which disappears after App loaded? (React Native)
– Jesús Carrera
Jan 8 '17 at 19:05
1
1
Possible duplicate of How to create some kind of Splash screen/Launching screen, which disappears after App loaded? (React Native)
– Jesús Carrera
Jan 8 '17 at 19:05
Possible duplicate of How to create some kind of Splash screen/Launching screen, which disappears after App loaded? (React Native)
– Jesús Carrera
Jan 8 '17 at 19:05
add a comment |
1 Answer
1
active
oldest
votes
Splash screens are a built-in feature of iOS apps - you can't not have a splash screen on iOS.
However, generally Android apps don't have them. The apps that do tend to simulate it by having an image that displays for a couple of seconds when they first start.
That's pretty easy to do in react-native (use a setTimeout with setState({showSplashScreen:false}) or similar. Wrap it in a check for Android, and you're there.
EDIT: As the OP points out in the comments, this causes a 'white flash' while the app is loading, so it looks like for now the best solution is to use a plugin or custom Java code.
answered Feb 11 '16 at 19:00
Ben ClaytonBen Clayton
61.7k22111120
Thanks for the input, but whenever I do that it shows a white screen for a split second then the image. I do know there has to be a way to do it correctly because I have seen it in many apps. For example, the Weather Underground app doesn't show any white, as soon as you click it you see the image, also with Shazam and plenty others I have seen. However I have notice that the Facebook and Instagram apps (I assume they are using react-native since Facebook wrote it) show the white for a moment then load. So this could be an issue or something with react-native.
– Ryan Wilson
Feb 11 '16 at 20:35
Ah. Good point about the 'white flash' - most likely due to react native's async rendering. In that case your best best is most likely an android-only plugin, or to 'taint' your code with Java.
– Ben Clayton
Feb 11 '16 at 20:42
By the way, Facebook doesn't yet use react-native for the main Facebook app. I believe the other apps you mentioned are written in Java with the Android SDK too.
– Ben Clayton
Feb 11 '16 at 20:43
Ah, well good to know. I thought this much, I'm trying to keep it as much react-native as I can but from everything I've seen, looks like I might need to use some java if I want this splash screen. I appreciate the help though.
– Ryan Wilson
Feb 11 '16 at 20:59
The Facebook F8 app uses a splash screen for iOS and none for Android. On iOS, the splash screen is followed by a blank white screen for a moment before moving on to the main screen. On Android, there is a blank white screen on startup before the main screen. I've implemented a splash screen on my Android app and I get similar behaviour of splash screen => white screen => main screen... so I'm wondering if that white screen is not a screen that's rendered by my app that I can control.
– Ryan H.
Jul 8 '16 at 16:54
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f35346328%2fhow-do-you-make-a-launch-splash-screen-for-android-in-react-native%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Splash screens are a built-in feature of iOS apps - you can't not have a splash screen on iOS.
However, generally Android apps don't have them. The apps that do tend to simulate it by having an image that displays for a couple of seconds when they first start.
That's pretty easy to do in react-native (use a setTimeout with setState({showSplashScreen:false}) or similar. Wrap it in a check for Android, and you're there.
EDIT: As the OP points out in the comments, this causes a 'white flash' while the app is loading, so it looks like for now the best solution is to use a plugin or custom Java code.
answered Feb 11 '16 at 19:00
Ben ClaytonBen Clayton
61.7k22111120
Thanks for the input, but whenever I do that it shows a white screen for a split second then the image. I do know there has to be a way to do it correctly because I have seen it in many apps. For example, the Weather Underground app doesn't show any white, as soon as you click it you see the image, also with Shazam and plenty others I have seen. However I have notice that the Facebook and Instagram apps (I assume they are using react-native since Facebook wrote it) show the white for a moment then load. So this could be an issue or something with react-native.
– Ryan Wilson
Feb 11 '16 at 20:35
Ah. Good point about the 'white flash' - most likely due to react native's async rendering. In that case your best best is most likely an android-only plugin, or to 'taint' your code with Java.
– Ben Clayton
Feb 11 '16 at 20:42
By the way, Facebook doesn't yet use react-native for the main Facebook app. I believe the other apps you mentioned are written in Java with the Android SDK too.
– Ben Clayton
Feb 11 '16 at 20:43
Ah, well good to know. I thought this much, I'm trying to keep it as much react-native as I can but from everything I've seen, looks like I might need to use some java if I want this splash screen. I appreciate the help though.
– Ryan Wilson
Feb 11 '16 at 20:59
The Facebook F8 app uses a splash screen for iOS and none for Android. On iOS, the splash screen is followed by a blank white screen for a moment before moving on to the main screen. On Android, there is a blank white screen on startup before the main screen. I've implemented a splash screen on my Android app and I get similar behaviour of splash screen => white screen => main screen... so I'm wondering if that white screen is not a screen that's rendered by my app that I can control.
– Ryan H.
Jul 8 '16 at 16:54
add a comment |
Splash screens are a built-in feature of iOS apps - you can't not have a splash screen on iOS.
However, generally Android apps don't have them. The apps that do tend to simulate it by having an image that displays for a couple of seconds when they first start.
That's pretty easy to do in react-native (use a setTimeout with setState({showSplashScreen:false}) or similar. Wrap it in a check for Android, and you're there.
EDIT: As the OP points out in the comments, this causes a 'white flash' while the app is loading, so it looks like for now the best solution is to use a plugin or custom Java code.
answered Feb 11 '16 at 19:00
Ben ClaytonBen Clayton
61.7k22111120
Thanks for the input, but whenever I do that it shows a white screen for a split second then the image. I do know there has to be a way to do it correctly because I have seen it in many apps. For example, the Weather Underground app doesn't show any white, as soon as you click it you see the image, also with Shazam and plenty others I have seen. However I have notice that the Facebook and Instagram apps (I assume they are using react-native since Facebook wrote it) show the white for a moment then load. So this could be an issue or something with react-native.
– Ryan Wilson
Feb 11 '16 at 20:35
Ah. Good point about the 'white flash' - most likely due to react native's async rendering. In that case your best best is most likely an android-only plugin, or to 'taint' your code with Java.
– Ben Clayton
Feb 11 '16 at 20:42
By the way, Facebook doesn't yet use react-native for the main Facebook app. I believe the other apps you mentioned are written in Java with the Android SDK too.
– Ben Clayton
Feb 11 '16 at 20:43
Ah, well good to know. I thought this much, I'm trying to keep it as much react-native as I can but from everything I've seen, looks like I might need to use some java if I want this splash screen. I appreciate the help though.
– Ryan Wilson
Feb 11 '16 at 20:59
The Facebook F8 app uses a splash screen for iOS and none for Android. On iOS, the splash screen is followed by a blank white screen for a moment before moving on to the main screen. On Android, there is a blank white screen on startup before the main screen. I've implemented a splash screen on my Android app and I get similar behaviour of splash screen => white screen => main screen... so I'm wondering if that white screen is not a screen that's rendered by my app that I can control.
– Ryan H.
Jul 8 '16 at 16:54
add a comment |
Splash screens are a built-in feature of iOS apps - you can't not have a splash screen on iOS.
However, generally Android apps don't have them. The apps that do tend to simulate it by having an image that displays for a couple of seconds when they first start.
That's pretty easy to do in react-native (use a setTimeout with setState({showSplashScreen:false}) or similar. Wrap it in a check for Android, and you're there.
EDIT: As the OP points out in the comments, this causes a 'white flash' while the app is loading, so it looks like for now the best solution is to use a plugin or custom Java code.
answered Feb 11 '16 at 19:00
Ben ClaytonBen Clayton
61.7k22111120
Splash screens are a built-in feature of iOS apps - you can't not have a splash screen on iOS.
However, generally Android apps don't have them. The apps that do tend to simulate it by having an image that displays for a couple of seconds when they first start.
That's pretty easy to do in react-native (use a setTimeout with setState({showSplashScreen:false}) or similar. Wrap it in a check for Android, and you're there.
EDIT: As the OP points out in the comments, this causes a 'white flash' while the app is loading, so it looks like for now the best solution is to use a plugin or custom Java code.
answered Feb 11 '16 at 19:00
Ben ClaytonBen Clayton
61.7k22111120
edited Nov 13 '18 at 17:30
answered Feb 11 '16 at 19:00
Ben ClaytonBen Clayton
61.7k22111120
answered Feb 11 '16 at 19:00
Ben ClaytonBen Clayton
61.7k22111120
answered Feb 11 '16 at 19:00
Ben ClaytonBen Clayton
61.7k22111120
61.7k22111120
Thanks for the input, but whenever I do that it shows a white screen for a split second then the image. I do know there has to be a way to do it correctly because I have seen it in many apps. For example, the Weather Underground app doesn't show any white, as soon as you click it you see the image, also with Shazam and plenty others I have seen. However I have notice that the Facebook and Instagram apps (I assume they are using react-native since Facebook wrote it) show the white for a moment then load. So this could be an issue or something with react-native.
– Ryan Wilson
Feb 11 '16 at 20:35
Ah. Good point about the 'white flash' - most likely due to react native's async rendering. In that case your best best is most likely an android-only plugin, or to 'taint' your code with Java.
– Ben Clayton
Feb 11 '16 at 20:42
By the way, Facebook doesn't yet use react-native for the main Facebook app. I believe the other apps you mentioned are written in Java with the Android SDK too.
– Ben Clayton
Feb 11 '16 at 20:43
Ah, well good to know. I thought this much, I'm trying to keep it as much react-native as I can but from everything I've seen, looks like I might need to use some java if I want this splash screen. I appreciate the help though.
– Ryan Wilson
Feb 11 '16 at 20:59
The Facebook F8 app uses a splash screen for iOS and none for Android. On iOS, the splash screen is followed by a blank white screen for a moment before moving on to the main screen. On Android, there is a blank white screen on startup before the main screen. I've implemented a splash screen on my Android app and I get similar behaviour of splash screen => white screen => main screen... so I'm wondering if that white screen is not a screen that's rendered by my app that I can control.
– Ryan H.
Jul 8 '16 at 16:54
add a comment |
Thanks for the input, but whenever I do that it shows a white screen for a split second then the image. I do know there has to be a way to do it correctly because I have seen it in many apps. For example, the Weather Underground app doesn't show any white, as soon as you click it you see the image, also with Shazam and plenty others I have seen. However I have notice that the Facebook and Instagram apps (I assume they are using react-native since Facebook wrote it) show the white for a moment then load. So this could be an issue or something with react-native.
– Ryan Wilson
Feb 11 '16 at 20:35
Ah. Good point about the 'white flash' - most likely due to react native's async rendering. In that case your best best is most likely an android-only plugin, or to 'taint' your code with Java.
– Ben Clayton
Feb 11 '16 at 20:42
By the way, Facebook doesn't yet use react-native for the main Facebook app. I believe the other apps you mentioned are written in Java with the Android SDK too.
– Ben Clayton
Feb 11 '16 at 20:43
Ah, well good to know. I thought this much, I'm trying to keep it as much react-native as I can but from everything I've seen, looks like I might need to use some java if I want this splash screen. I appreciate the help though.
– Ryan Wilson
Feb 11 '16 at 20:59
The Facebook F8 app uses a splash screen for iOS and none for Android. On iOS, the splash screen is followed by a blank white screen for a moment before moving on to the main screen. On Android, there is a blank white screen on startup before the main screen. I've implemented a splash screen on my Android app and I get similar behaviour of splash screen => white screen => main screen... so I'm wondering if that white screen is not a screen that's rendered by my app that I can control.
– Ryan H.
Jul 8 '16 at 16:54
Thanks for the input, but whenever I do that it shows a white screen for a split second then the image. I do know there has to be a way to do it correctly because I have seen it in many apps. For example, the Weather Underground app doesn't show any white, as soon as you click it you see the image, also with Shazam and plenty others I have seen. However I have notice that the Facebook and Instagram apps (I assume they are using react-native since Facebook wrote it) show the white for a moment then load. So this could be an issue or something with react-native.
– Ryan Wilson
Feb 11 '16 at 20:35
Thanks for the input, but whenever I do that it shows a white screen for a split second then the image. I do know there has to be a way to do it correctly because I have seen it in many apps. For example, the Weather Underground app doesn't show any white, as soon as you click it you see the image, also with Shazam and plenty others I have seen. However I have notice that the Facebook and Instagram apps (I assume they are using react-native since Facebook wrote it) show the white for a moment then load. So this could be an issue or something with react-native.
– Ryan Wilson
Feb 11 '16 at 20:35
Ah. Good point about the 'white flash' - most likely due to react native's async rendering. In that case your best best is most likely an android-only plugin, or to 'taint' your code with Java.
– Ben Clayton
Feb 11 '16 at 20:42
Ah. Good point about the 'white flash' - most likely due to react native's async rendering. In that case your best best is most likely an android-only plugin, or to 'taint' your code with Java.
– Ben Clayton
Feb 11 '16 at 20:42
By the way, Facebook doesn't yet use react-native for the main Facebook app. I believe the other apps you mentioned are written in Java with the Android SDK too.
– Ben Clayton
Feb 11 '16 at 20:43
By the way, Facebook doesn't yet use react-native for the main Facebook app. I believe the other apps you mentioned are written in Java with the Android SDK too.
– Ben Clayton
Feb 11 '16 at 20:43
Ah, well good to know. I thought this much, I'm trying to keep it as much react-native as I can but from everything I've seen, looks like I might need to use some java if I want this splash screen. I appreciate the help though.
– Ryan Wilson
Feb 11 '16 at 20:59
Ah, well good to know. I thought this much, I'm trying to keep it as much react-native as I can but from everything I've seen, looks like I might need to use some java if I want this splash screen. I appreciate the help though.
– Ryan Wilson
Feb 11 '16 at 20:59
The Facebook F8 app uses a splash screen for iOS and none for Android. On iOS, the splash screen is followed by a blank white screen for a moment before moving on to the main screen. On Android, there is a blank white screen on startup before the main screen. I've implemented a splash screen on my Android app and I get similar behaviour of splash screen => white screen => main screen... so I'm wondering if that white screen is not a screen that's rendered by my app that I can control.
– Ryan H.
Jul 8 '16 at 16:54
The Facebook F8 app uses a splash screen for iOS and none for Android. On iOS, the splash screen is followed by a blank white screen for a moment before moving on to the main screen. On Android, there is a blank white screen on startup before the main screen. I've implemented a splash screen on my Android app and I get similar behaviour of splash screen => white screen => main screen... so I'm wondering if that white screen is not a screen that's rendered by my app that I can control.
– Ryan H.
Jul 8 '16 at 16:54
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f35346328%2fhow-do-you-make-a-launch-splash-screen-for-android-in-react-native%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Possible duplicate of How to create some kind of Splash screen/Launching screen, which disappears after App loaded? (React Native)
– Jesús Carrera
Jan 8 '17 at 19:05