React Native Modal is not drawn below the StatusBar on Android
In React Native (With EXPO), I'm showing a Modal.
The Modal gets drawn behind the StatusBar in iOS but it's not happening on Android.
Do you know why? I could not find any solution for this.
The StatusBar has already set the translucent={true} prop. That's why you are able to see the Map behind the StatusBar on Android. But I can not draw the Modal component behind it (as I can do on iOS).
Here I add a couple of screenshots and an online viewer to check this behavior: https://snack.expo.io/BJR4oF4A7
Another weird behavior that I'm seeing is that it doesn't matter which translucent value I set, it always works in the same way (it's always translucent, even when I set it to false).
In case that this is impossible, how can I set the background to #FFF and the font-color to #000 on the StatusBar on Android?
I want to know:
- Why there are different behaviors in iOS and Android.
- Why changing the props of
StatusBarstill not changing its behavior (can be seen in the online viewer, changingtranslucent, orbackgroundColorvalues) - If it's impossible to get the modal drawn behind the StatusBar, so, how can I change the background and the font-color of it when a Modal is opened? (in Android) (with no hiding it)
Android
iOS
android react-native mobile expo asked Nov 22 at 19:43
Broda Noel
578619
add a comment |
In React Native (With EXPO), I'm showing a Modal.
The Modal gets drawn behind the StatusBar in iOS but it's not happening on Android.
Do you know why? I could not find any solution for this.
The StatusBar has already set the translucent={true} prop. That's why you are able to see the Map behind the StatusBar on Android. But I can not draw the Modal component behind it (as I can do on iOS).
Here I add a couple of screenshots and an online viewer to check this behavior: https://snack.expo.io/BJR4oF4A7
Another weird behavior that I'm seeing is that it doesn't matter which translucent value I set, it always works in the same way (it's always translucent, even when I set it to false).
In case that this is impossible, how can I set the background to #FFF and the font-color to #000 on the StatusBar on Android?
I want to know:
- Why there are different behaviors in iOS and Android.
- Why changing the props of
StatusBarstill not changing its behavior (can be seen in the online viewer, changingtranslucent, orbackgroundColorvalues) - If it's impossible to get the modal drawn behind the StatusBar, so, how can I change the background and the font-color of it when a Modal is opened? (in Android) (with no hiding it)
Android
iOS
android react-native mobile expo asked Nov 22 at 19:43
Broda Noel
578619
add a comment |
In React Native (With EXPO), I'm showing a Modal.
The Modal gets drawn behind the StatusBar in iOS but it's not happening on Android.
Do you know why? I could not find any solution for this.
The StatusBar has already set the translucent={true} prop. That's why you are able to see the Map behind the StatusBar on Android. But I can not draw the Modal component behind it (as I can do on iOS).
Here I add a couple of screenshots and an online viewer to check this behavior: https://snack.expo.io/BJR4oF4A7
Another weird behavior that I'm seeing is that it doesn't matter which translucent value I set, it always works in the same way (it's always translucent, even when I set it to false).
In case that this is impossible, how can I set the background to #FFF and the font-color to #000 on the StatusBar on Android?
I want to know:
- Why there are different behaviors in iOS and Android.
- Why changing the props of
StatusBarstill not changing its behavior (can be seen in the online viewer, changingtranslucent, orbackgroundColorvalues) - If it's impossible to get the modal drawn behind the StatusBar, so, how can I change the background and the font-color of it when a Modal is opened? (in Android) (with no hiding it)
Android
iOS
android react-native mobile expo asked Nov 22 at 19:43
Broda Noel
578619
In React Native (With EXPO), I'm showing a Modal.
The Modal gets drawn behind the StatusBar in iOS but it's not happening on Android.
Do you know why? I could not find any solution for this.
The StatusBar has already set the translucent={true} prop. That's why you are able to see the Map behind the StatusBar on Android. But I can not draw the Modal component behind it (as I can do on iOS).
Here I add a couple of screenshots and an online viewer to check this behavior: https://snack.expo.io/BJR4oF4A7
Another weird behavior that I'm seeing is that it doesn't matter which translucent value I set, it always works in the same way (it's always translucent, even when I set it to false).
In case that this is impossible, how can I set the background to #FFF and the font-color to #000 on the StatusBar on Android?
I want to know:
- Why there are different behaviors in iOS and Android.
- Why changing the props of
StatusBarstill not changing its behavior (can be seen in the online viewer, changingtranslucent, orbackgroundColorvalues) - If it's impossible to get the modal drawn behind the StatusBar, so, how can I change the background and the font-color of it when a Modal is opened? (in Android) (with no hiding it)
Android
iOS
android react-native mobile expo android react-native mobile expo asked Nov 22 at 19:43
Broda Noel
578619
asked Nov 22 at 19:43
Broda Noel
578619
edited Nov 24 at 23:16
asked Nov 22 at 19:43
Broda Noel
578619
asked Nov 22 at 19:43
Broda Noel
578619
asked Nov 22 at 19:43
Broda Noel
578619
578619
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
- I believe you need to try the app as a standalone application, not using the Expo client. It somehow sometimes has hard time dealing with StatusBar (I've already experienced it too).
- You may use the
hiddenproperty that is working on both platforms, based on your current state:<StatusBar hidden={!!this.state.isModalShown} />
This will simply hide the status bar whenever your modal is opened.
answered Nov 24 at 23:11
Arnaud
219110
I should try on the standalone app. True. On another hand, I don't want to hide the StatusBar, I just want to change the font-color to #000 and the background color to #FFF
– Broda Noel
Nov 24 at 23:17
For your first question, after checking their implementation, I believe it's related to the iOS "presentationStyle" property
– Arnaud
Nov 24 at 23:28
add a comment |
Set the barStyle to be the contrasting backgroundColor.
Black writing on white background, so have dark-content on white status bar.
<StatusBar barStyle="dark-content" backgroundColor={"#fff"} />
answered Dec 1 at 2:36
CodeYute
214
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%2f53437241%2freact-native-modal-is-not-drawn-below-the-statusbar-on-android%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
- I believe you need to try the app as a standalone application, not using the Expo client. It somehow sometimes has hard time dealing with StatusBar (I've already experienced it too).
- You may use the
hiddenproperty that is working on both platforms, based on your current state:<StatusBar hidden={!!this.state.isModalShown} />
This will simply hide the status bar whenever your modal is opened.
answered Nov 24 at 23:11
Arnaud
219110
I should try on the standalone app. True. On another hand, I don't want to hide the StatusBar, I just want to change the font-color to #000 and the background color to #FFF
– Broda Noel
Nov 24 at 23:17
For your first question, after checking their implementation, I believe it's related to the iOS "presentationStyle" property
– Arnaud
Nov 24 at 23:28
add a comment |
- I believe you need to try the app as a standalone application, not using the Expo client. It somehow sometimes has hard time dealing with StatusBar (I've already experienced it too).
- You may use the
hiddenproperty that is working on both platforms, based on your current state:<StatusBar hidden={!!this.state.isModalShown} />
This will simply hide the status bar whenever your modal is opened.
answered Nov 24 at 23:11
Arnaud
219110
I should try on the standalone app. True. On another hand, I don't want to hide the StatusBar, I just want to change the font-color to #000 and the background color to #FFF
– Broda Noel
Nov 24 at 23:17
For your first question, after checking their implementation, I believe it's related to the iOS "presentationStyle" property
– Arnaud
Nov 24 at 23:28
add a comment |
- I believe you need to try the app as a standalone application, not using the Expo client. It somehow sometimes has hard time dealing with StatusBar (I've already experienced it too).
- You may use the
hiddenproperty that is working on both platforms, based on your current state:<StatusBar hidden={!!this.state.isModalShown} />
This will simply hide the status bar whenever your modal is opened.
answered Nov 24 at 23:11
Arnaud
219110
- I believe you need to try the app as a standalone application, not using the Expo client. It somehow sometimes has hard time dealing with StatusBar (I've already experienced it too).
- You may use the
hiddenproperty that is working on both platforms, based on your current state:<StatusBar hidden={!!this.state.isModalShown} />
This will simply hide the status bar whenever your modal is opened.
answered Nov 24 at 23:11
Arnaud
219110
answered Nov 24 at 23:11
Arnaud
219110
answered Nov 24 at 23:11
Arnaud
219110
answered Nov 24 at 23:11
Arnaud
219110
219110
I should try on the standalone app. True. On another hand, I don't want to hide the StatusBar, I just want to change the font-color to #000 and the background color to #FFF
– Broda Noel
Nov 24 at 23:17
For your first question, after checking their implementation, I believe it's related to the iOS "presentationStyle" property
– Arnaud
Nov 24 at 23:28
add a comment |
I should try on the standalone app. True. On another hand, I don't want to hide the StatusBar, I just want to change the font-color to #000 and the background color to #FFF
– Broda Noel
Nov 24 at 23:17
For your first question, after checking their implementation, I believe it's related to the iOS "presentationStyle" property
– Arnaud
Nov 24 at 23:28
I should try on the standalone app. True. On another hand, I don't want to hide the StatusBar, I just want to change the font-color to #000 and the background color to #FFF
– Broda Noel
Nov 24 at 23:17
I should try on the standalone app. True. On another hand, I don't want to hide the StatusBar, I just want to change the font-color to #000 and the background color to #FFF
– Broda Noel
Nov 24 at 23:17
For your first question, after checking their implementation, I believe it's related to the iOS "presentationStyle" property
– Arnaud
Nov 24 at 23:28
For your first question, after checking their implementation, I believe it's related to the iOS "presentationStyle" property
– Arnaud
Nov 24 at 23:28
add a comment |
Set the barStyle to be the contrasting backgroundColor.
Black writing on white background, so have dark-content on white status bar.
<StatusBar barStyle="dark-content" backgroundColor={"#fff"} />
answered Dec 1 at 2:36
CodeYute
214
add a comment |
Set the barStyle to be the contrasting backgroundColor.
Black writing on white background, so have dark-content on white status bar.
<StatusBar barStyle="dark-content" backgroundColor={"#fff"} />
answered Dec 1 at 2:36
CodeYute
214
add a comment |
Set the barStyle to be the contrasting backgroundColor.
Black writing on white background, so have dark-content on white status bar.
<StatusBar barStyle="dark-content" backgroundColor={"#fff"} />
answered Dec 1 at 2:36
CodeYute
214
Set the barStyle to be the contrasting backgroundColor.
Black writing on white background, so have dark-content on white status bar.
<StatusBar barStyle="dark-content" backgroundColor={"#fff"} />
answered Dec 1 at 2:36
CodeYute
214
answered Dec 1 at 2:36
CodeYute
214
answered Dec 1 at 2:36
CodeYute
214
answered Dec 1 at 2:36
CodeYute
214
214
add a comment |
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f53437241%2freact-native-modal-is-not-drawn-below-the-statusbar-on-android%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
