Styjun

Is it possible to Ready a spell to be cast just before the start of your next turn by having the trigger be an ally's attack?

How to stop co-workers from teasing me because I know Russian?

Need help understanding harmonic series and intervals

Transfer over $10k

Has any spacecraft ever had the ability to directly communicate with civilian air traffic control?

Does the EU Common Fisheries Policy cover British Overseas Territories?

Is it possible to measure lightning discharges as Nikola Tesla?

Will tsunami waves travel forever if there was no land?

Why is the origin of “threshold” uncertain?

Multiple options for Pseudonyms

What does 「再々起」mean?

Sci-fi novel series with instant travel between planets through gates. A river runs through the gates

Single Colour Mastermind Problem

Do I have an "anti-research" personality?

Asahi Dry Black beer can

How to create an ad-hoc wireless network in Ubuntu

Confused by notation of atomic number Z and mass number A on periodic table of elements

Modify locally tikzset

Packing rectangles: Does rotation ever help?

Illegal assignment from SObject to Contact

Why do TACANs not have a symbol for compulsory reporting on IFR Enroute Low Altitude charts?

What is the difference between `a[bc]d` (brackets) and `ab,cd` (braces)?

Binary Numbers Magic Trick

Any examples of headwear for races with animal ears?

How to remove black overlay on status bar on android with React Native

How do save an Android Activity state using save instance state?Why is the Android emulator so slow? How can we speed up the Android emulator?Height of status bar in AndroidHow to change Status Bar text color in iOSHow to change the status bar color in androidStatus bar color, Androidapple-mobile-web-app-status-bar-style in ios 10How to add icon (image, logo..) to the status barReact Native iOS StatusBar invisible after build?React Native change status bar text color in iOS

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

6

I'm learning React Native (without React knowledge), but my problem is the status bar always get a translucent black background and I can remove it. I tried every stackoverflow answer, and even React Native and Expo documentation. But nothing...

Here is my problem:

The status bar has a white background supposedly, and get this grey overlay, that is what I want to remove.

Here is my code:

render() 
 return (
 <View>
 <StatusBar background="white" />
 <Button title="Sign in!" onPress=this._signInAsync />
 </View>
 );

I even tried this, on app.js

"androidStatusBar": 
 "backgroundColor": "#C2185B"
,

I'm starting to think, this is related to Expo.

android react-native expo statusbar

share|improve this question

asked Mar 20 at 18:54

rafaelsntsrafaelsnts

4191232

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  On two of my older Android devices the StatusBar backgroudColor works. On my OP 6T it just displays grey bar. iPhoneXR on simulator is transparent it seems no matter what I do. I'm struggling to find an acceptable setting that works for all devices even if I reluctantly accept the grey bar on my modern Android. The best I have come up with is setting backgroundColor to white (my app has white background) and icons to dark. Looks bad on the grey bar Android OP 6T as it's black icons on grey bar but I'll have to live with it for now.
  
  – Max
  Mar 21 at 18:23
  
  

  
  
  
  

add a comment | 

6

I'm learning React Native (without React knowledge), but my problem is the status bar always get a translucent black background and I can remove it. I tried every stackoverflow answer, and even React Native and Expo documentation. But nothing...

Here is my problem:

The status bar has a white background supposedly, and get this grey overlay, that is what I want to remove.

Here is my code:

render() 
 return (
 <View>
 <StatusBar background="white" />
 <Button title="Sign in!" onPress=this._signInAsync />
 </View>
 );

I even tried this, on app.js

"androidStatusBar": 
 "backgroundColor": "#C2185B"
,

I'm starting to think, this is related to Expo.

android react-native expo statusbar

share|improve this question

asked Mar 20 at 18:54

rafaelsntsrafaelsnts

4191232

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  On two of my older Android devices the StatusBar backgroudColor works. On my OP 6T it just displays grey bar. iPhoneXR on simulator is transparent it seems no matter what I do. I'm struggling to find an acceptable setting that works for all devices even if I reluctantly accept the grey bar on my modern Android. The best I have come up with is setting backgroundColor to white (my app has white background) and icons to dark. Looks bad on the grey bar Android OP 6T as it's black icons on grey bar but I'll have to live with it for now.
  
  – Max
  Mar 21 at 18:23
  
  

  
  
  
  

add a comment | 

I'm learning React Native (without React knowledge), but my problem is the status bar always get a translucent black background and I can remove it. I tried every stackoverflow answer, and even React Native and Expo documentation. But nothing...

Here is my problem:

The status bar has a white background supposedly, and get this grey overlay, that is what I want to remove.

Here is my code:

render() 
 return (
 <View>
 <StatusBar background="white" />
 <Button title="Sign in!" onPress=this._signInAsync />
 </View>
 );

I even tried this, on app.js

"androidStatusBar": 
 "backgroundColor": "#C2185B"
,

I'm starting to think, this is related to Expo.

android react-native expo statusbar

share|improve this question

asked Mar 20 at 18:54

rafaelsntsrafaelsnts

4191232

render() 
 return (
 <View>
 <StatusBar background="white" />
 <Button title="Sign in!" onPress=this._signInAsync />
 </View>
 );

"androidStatusBar": 
 "backgroundColor": "#C2185B"
,

android react-native expo statusbar

android react-native expo statusbar

share|improve this question

asked Mar 20 at 18:54

rafaelsntsrafaelsnts

4191232

share|improve this question

asked Mar 20 at 18:54

rafaelsntsrafaelsnts

4191232

asked Mar 20 at 18:54

rafaelsntsrafaelsnts

4191232

asked Mar 20 at 18:54

rafaelsntsrafaelsnts

4191232

2 Answers
2

active

oldest

votes

2

+50

If you want to have white status bar then use below code:

render() 
return (
 <View style=styles.container>
 <StatusBar backgroundColor='white' barStyle="dark-content" />
 <Text style=styles.welcome>Welcome to Pradnya's</Text>
 <Text style=styles.instructions>To get started, edit App.js</Text>
 <Text style=styles.instructions>instructions</Text>
 </View>
);

in the above code "backgroundColor" will change status bar color to white and barStyle="dark-content" will set text color to black as below output:

and if you want to set background color to suppose "red" then change barstyle="light-content" that will show below output:

This should solve your issue..

share|improve this answer

answered Mar 24 at 14:35

Pradnya ChoudhariPradnya Choudhari

36626

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I tried this and other suggestions, but it is still not working. Could it be because of Expo or react-navigation?
  
  – rafaelsnts
  Mar 25 at 8:48
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  documentation says "Expo makes the status bar translucent by default on Android which is consistent with iOS, and more in line with material design. Unfortunately some libraries don't support translucent status bar, e.g. - navigation libraries, libraries which provide a header bar etc." docs.expo.io/versions/latest/guides/configuring-statusbar It seems you have tried this but if not this link will provide you some info.
  
  – Pradnya Choudhari
  Mar 25 at 12:14
  
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  My conclusion, is that nothing can be done because of the plugins I use, specifically the combination between react-navigation and expo.
  
  – rafaelsnts
  Mar 26 at 13:47
  

  
  
  
  

add a comment | 

1

You can hide it with the hidden function of StatusBar.

<View>
 <StatusBar backgroundColor="blue" barStyle="light-content" />
 <View>
 <StatusBar hidden=route.statusBarHidden />
 ...
 </View>
</View>

See here for more information.

Please leave a comment for further comment.

share|improve this answer

answered Mar 21 at 0:48

hong develophong develop

36212

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Thanks for your help, but this hides my status bar. I want it to be visible, but without that black-transparent background
  
  – rafaelsnts
  Mar 21 at 9:02
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  You can use translucent prop in status bar which will help you to draw your app under status bar, so that you can set your own colour by giving a view with height 20 then you can customise the colour as per your requirement.
  
  – Maneesh
  Mar 23 at 7:17
  

  
  
  
  

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
);



);

draft saved

draft discarded

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

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55268225%2fhow-to-remove-black-overlay-on-status-bar-on-android-with-react-native%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

2

+50

If you want to have white status bar then use below code:

render() 
return (
 <View style=styles.container>
 <StatusBar backgroundColor='white' barStyle="dark-content" />
 <Text style=styles.welcome>Welcome to Pradnya's</Text>
 <Text style=styles.instructions>To get started, edit App.js</Text>
 <Text style=styles.instructions>instructions</Text>
 </View>
);

in the above code "backgroundColor" will change status bar color to white and barStyle="dark-content" will set text color to black as below output:

and if you want to set background color to suppose "red" then change barstyle="light-content" that will show below output:

This should solve your issue..

share|improve this answer

answered Mar 24 at 14:35

Pradnya ChoudhariPradnya Choudhari

36626

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I tried this and other suggestions, but it is still not working. Could it be because of Expo or react-navigation?
  
  – rafaelsnts
  Mar 25 at 8:48
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  documentation says "Expo makes the status bar translucent by default on Android which is consistent with iOS, and more in line with material design. Unfortunately some libraries don't support translucent status bar, e.g. - navigation libraries, libraries which provide a header bar etc." docs.expo.io/versions/latest/guides/configuring-statusbar It seems you have tried this but if not this link will provide you some info.
  
  – Pradnya Choudhari
  Mar 25 at 12:14
  
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  My conclusion, is that nothing can be done because of the plugins I use, specifically the combination between react-navigation and expo.
  
  – rafaelsnts
  Mar 26 at 13:47
  

  
  
  
  

add a comment | 

2

+50

If you want to have white status bar then use below code:

render() 
return (
 <View style=styles.container>
 <StatusBar backgroundColor='white' barStyle="dark-content" />
 <Text style=styles.welcome>Welcome to Pradnya's</Text>
 <Text style=styles.instructions>To get started, edit App.js</Text>
 <Text style=styles.instructions>instructions</Text>
 </View>
);

in the above code "backgroundColor" will change status bar color to white and barStyle="dark-content" will set text color to black as below output:

and if you want to set background color to suppose "red" then change barstyle="light-content" that will show below output:

This should solve your issue..

share|improve this answer

answered Mar 24 at 14:35

Pradnya ChoudhariPradnya Choudhari

36626

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I tried this and other suggestions, but it is still not working. Could it be because of Expo or react-navigation?
  
  – rafaelsnts
  Mar 25 at 8:48
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  documentation says "Expo makes the status bar translucent by default on Android which is consistent with iOS, and more in line with material design. Unfortunately some libraries don't support translucent status bar, e.g. - navigation libraries, libraries which provide a header bar etc." docs.expo.io/versions/latest/guides/configuring-statusbar It seems you have tried this but if not this link will provide you some info.
  
  – Pradnya Choudhari
  Mar 25 at 12:14
  
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  My conclusion, is that nothing can be done because of the plugins I use, specifically the combination between react-navigation and expo.
  
  – rafaelsnts
  Mar 26 at 13:47
  

  
  
  
  

add a comment | 

If you want to have white status bar then use below code:

render() 
return (
 <View style=styles.container>
 <StatusBar backgroundColor='white' barStyle="dark-content" />
 <Text style=styles.welcome>Welcome to Pradnya's</Text>
 <Text style=styles.instructions>To get started, edit App.js</Text>
 <Text style=styles.instructions>instructions</Text>
 </View>
);

in the above code "backgroundColor" will change status bar color to white and barStyle="dark-content" will set text color to black as below output:

and if you want to set background color to suppose "red" then change barstyle="light-content" that will show below output:

This should solve your issue..

share|improve this answer

answered Mar 24 at 14:35

Pradnya ChoudhariPradnya Choudhari

36626

render() 
return (
 <View style=styles.container>
 <StatusBar backgroundColor='white' barStyle="dark-content" />
 <Text style=styles.welcome>Welcome to Pradnya's</Text>
 <Text style=styles.instructions>To get started, edit App.js</Text>
 <Text style=styles.instructions>instructions</Text>
 </View>
);

share|improve this answer

answered Mar 24 at 14:35

Pradnya ChoudhariPradnya Choudhari

36626

answered Mar 24 at 14:35

Pradnya ChoudhariPradnya Choudhari

36626

answered Mar 24 at 14:35

Pradnya ChoudhariPradnya Choudhari

36626

1

You can hide it with the hidden function of StatusBar.

<View>
 <StatusBar backgroundColor="blue" barStyle="light-content" />
 <View>
 <StatusBar hidden=route.statusBarHidden />
 ...
 </View>
</View>

See here for more information.

Please leave a comment for further comment.

share|improve this answer

answered Mar 21 at 0:48

hong develophong develop

36212

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Thanks for your help, but this hides my status bar. I want it to be visible, but without that black-transparent background
  
  – rafaelsnts
  Mar 21 at 9:02
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  You can use translucent prop in status bar which will help you to draw your app under status bar, so that you can set your own colour by giving a view with height 20 then you can customise the colour as per your requirement.
  
  – Maneesh
  Mar 23 at 7:17
  

  
  
  
  

add a comment | 

1

You can hide it with the hidden function of StatusBar.

<View>
 <StatusBar backgroundColor="blue" barStyle="light-content" />
 <View>
 <StatusBar hidden=route.statusBarHidden />
 ...
 </View>
</View>

See here for more information.

Please leave a comment for further comment.

share|improve this answer

answered Mar 21 at 0:48

hong develophong develop

36212

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Thanks for your help, but this hides my status bar. I want it to be visible, but without that black-transparent background
  
  – rafaelsnts
  Mar 21 at 9:02
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  You can use translucent prop in status bar which will help you to draw your app under status bar, so that you can set your own colour by giving a view with height 20 then you can customise the colour as per your requirement.
  
  – Maneesh
  Mar 23 at 7:17
  

  
  
  
  

add a comment | 

You can hide it with the hidden function of StatusBar.

<View>
 <StatusBar backgroundColor="blue" barStyle="light-content" />
 <View>
 <StatusBar hidden=route.statusBarHidden />
 ...
 </View>
</View>

See here for more information.

Please leave a comment for further comment.

share|improve this answer

answered Mar 21 at 0:48

hong develophong develop

36212

<View>
 <StatusBar backgroundColor="blue" barStyle="light-content" />
 <View>
 <StatusBar hidden=route.statusBarHidden />
 ...
 </View>
</View>

share|improve this answer

answered Mar 21 at 0:48

hong develophong develop

36212

answered Mar 21 at 0:48

hong develophong develop

36212

answered Mar 21 at 0:48

hong develophong develop

36212