Change color of StatusBar #323

Deepankar01 · 2016-11-26T20:42:56Z

Is there any way i can change the color of StatusBar in NativeBase

i wrote this and nothing changed

<Header style={styles.header}>
                    <Container style={{flexDirection: 'row',}}>
                        <StatusBar
                            backgroundColor="blue"
                            barStyle="light-content"
                        />
                        <Navigator
                            initialRoute={{statusBarHidden: false}}
                            renderScene={(route, navigator) =>
                                <Container>
                                    <StatusBar hidden={route.statusBarHidden}/>
                                </Container>
                            }
                        />
                        <Image style={styles.headerIcon} source={images.Logo}>
                        </Image>

                    </Container>
                </Header>

The text was updated successfully, but these errors were encountered:

sankhadeeproy007 · 2016-11-28T10:16:35Z

'StatusBar' should ideally wrap the component in the topmost level.

mmmoli · 2017-01-28T21:44:46Z

Is there an example of this somewhere? Want to see some code.

yossijacob · 2017-02-04T11:02:50Z

Agree, not sure where am i supposed to put the StatusBar. if i put inside of content it works but only until the app returning from background. an example will be much appreciated.
In the react native docs they put it alongside the navigator but this does not work with native base.

from the react native docs

<View>
   <StatusBar
     backgroundColor="blue"
     barStyle="light-content"
   />
   <Navigator
     initialRoute={{statusBarHidden: true}}
     renderScene={(route, navigator) =>
       <View>
         <StatusBar hidden={route.statusBarHidden} />
         ...
       </View>
     }
   />
 </View>

HyperSimon · 2017-04-05T06:20:29Z

Is this problem solved? Is there any example? Why is this issue closed?

PhiSpindler · 2017-04-07T08:53:53Z

You could use the StatusBarManager as work-around.

import {NativeModules, processColor } from 'react-native';
const { StatusBarManager } = NativeModules;

export default class DiscoverScreen extends Component {
  componentDidMount() {
    StatusBarManager.setColor(processColor('#ff0000'), false); 👈
  }
  render() {
    return ( ... );
  }
}

jasonnathan · 2017-04-12T23:54:56Z

@PhiSpindler setColor is not a function

PhiSpindler · 2017-04-13T11:30:44Z

oh ok, my bad - I only tested it on android, there it worked

nacmonad · 2017-05-11T06:39:07Z

Hey! found a neat workaround/hack that you can implement inside any native-base <Container> component. the statusbar is a prop of the Header component, but when you want to change statusbar and not show the header, simply :
<Header androidStatusBarColor="#2c3e50" style={{display:'none'}}/>

jacobokoenig · 2017-06-19T22:02:51Z

Finally @nacmonad!!! Thanks!!

prayash · 2017-07-12T23:22:32Z

Checking out the Header component source it looks like it takes a iosBarStyle prop for iOS and androidStatusBarColor for Android.

This works for me in iOS:

<Header iosBarStyle="light-content"> </Header>

Hope that helps!

Amin52J · 2017-07-15T10:44:48Z

You can also simply import StatusBar from "react-native" module and put it inside the NativeBase Header component:

import {StatusBar} from 'react-native';
import {Container, Content, Header, Body, Title} from 'native-base';
.
.
.
export default class App extends React.Component {
  render() {
    return (
      <Container>
        <Header style={{backgroundColor:'#000'}}>
          <StatusBar barStyle="light-content"/>
          <Body>
            <Title style={{color:'#FFF'}}>My App</Title>
          </Body>
        </Header>
        <Content>
          //content of your app goes here
        </Content>
      </Container>
    );
  }
}

Minaghorbaani · 2017-08-03T08:26:34Z

hi , how can i make my statusbar background gradient ?

abhishekgargx · 2018-09-05T08:19:26Z

Just put it as top element in Content, and make sure to import {StatusBar} from 'react-native'

render() {
       return (
           <Container>
               <Content >
                       <StatusBar
                              backgroundColor="#ff1c1c"
                              barStyle="light-content" />
                    //rest of your content
               </Content>
         </Container>
       );
    }

if you are using Header of Native base . then put it inside as top element like below

 render() {
        return (
            <Container >
                <Header>
                        <StatusBar
                            backgroundColor="#ff1c1c"
                            barStyle="light-content" />
                    // other header elements 
                </Header>
               <Content> 
                   // you content
              </Content>
          </Container>
        );
     }

msmahesh91 · 2018-12-20T12:07:40Z

thank you so much @nacmonad

shimatai · 2018-12-26T08:31:10Z

@PhiSpindler setColor is not a function

It works only in Android.

harikrishna1213 · 2019-03-01T09:50:54Z

Hey! found a neat workaround/hack that you can implement inside any native-base <Container> component. the statusbar is a prop of the Header component, but when you want to change statusbar and not show the header, simply :
<Header androidStatusBarColor="#2c3e50" style={{display:'none'}}/>
it's working....!!! great !!!!

ashwithags · 2019-03-06T10:36:04Z

<Header iosBarStyle="light-content"> </Header>

this changed the text color to white. but the background color remain unchanged

kajeevan025 · 2019-04-24T06:55:50Z

<Header
        iosBarStyle="light-content"
        androidStatusBarColor="#2c3e50"
        style={{ backgroundColor: "#212B36" }}
      >
</Header>

This can be helpfull

thanhluantl2304 · 2019-09-06T04:36:51Z

You can also simply import StatusBar from "react-native" module and put it inside the NativeBase Header component:

import {StatusBar} from 'react-native';
import {Container, Content, Header, Body, Title} from 'native-base';
.
.
.
export default class App extends React.Component {
  render() {
    return (
      <Container>
        <Header style={{backgroundColor:'#000'}}>
          <StatusBar barStyle="light-content"/>
          <Body>
            <Title style={{color:'#FFF'}}>My App</Title>
          </Body>
        </Header>
        <Content>
          //content of your app goes here
        </Content>
      </Container>
    );
  }
}

Perfect! I tested and run successfully! :D

brownieboy · 2019-09-27T08:03:08Z

I must have tried the solutions on every one of these comments, but none of them worked for me. All I'm trying to do is get light coloured text for the status bar on iOS. (I already get light text by default on Android).

Is it tied to some particular version of NativeBase or React Native? I'm on React Native 0.59.1 and NativeBase 2.12.1. I'm not using Expo.

Update
It's working for me now.

I upgraded to RN 0.61 and putting <StatusBar barStyle="light-content"/> inside the <Header> component did the trick.

truongthanh1303 · 2019-12-17T03:22:17Z

I must have tried the solutions on every one of these comments, but none of them worked for me. All I'm trying to do is get light coloured text for the status bar on iOS. (I already get light text by default on Android).

Is it tied to some particular version of NativeBase or React Native? I'm on React Native 0.59.1 and NativeBase 2.12.1. I'm not using Expo.

Update
It's working for me now.

I upgraded to RN 0.61 and putting <StatusBar barStyle="light-content"/> inside the <Header> component did the trick.

Hi @brownieboy , I got the same issue with React Native 0.59.9, native-base 2.13.8. Do you have any ideas without upgrade the RN version?
Thanks,

brownieboy · 2019-12-17T09:44:52Z

@truongthanh1303,

Hi @brownieboy , I got the same issue with React Native 0.59.9, native-base 2.13.8. Do you have any ideas without upgrade the RN version?

Sorry, no.

The RN 0.61 upgrade also fixed a lot of other problems that I was having, so it was well worth the effort.

rajan-keypress · 2021-03-01T10:54:37Z

import {StatusBar} from 'react-native';
import {Container, Content, Header, Body, Title} from 'native-base';
.
.
.
export default class App extends React.Component {
render() {
return (

<Header style={{backgroundColor:'#000'}}>

<Title style={{color:'#FFF'}}>My App</Title>

//content of your app goes here

);
}
}

this is work for me

zoobibackups · 2021-04-17T09:29:05Z

Hey! found a neat workaround/hack that you can implement inside any native-base <Container> component. the statusbar is a prop of the Header component, but when you want to change statusbar and not show the header, simply :
<Header androidStatusBarColor="#2c3e50" style={{display:'none'}}/>

thank. it worked for me. I was searching for the solution in react native for the last 2 weeks.

himanshu-satija closed this as completed Dec 9, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Change color of StatusBar #323

Change color of StatusBar #323

Deepankar01 commented Nov 26, 2016 •

edited

sankhadeeproy007 commented Nov 28, 2016

mmmoli commented Jan 28, 2017

yossijacob commented Feb 4, 2017

HyperSimon commented Apr 5, 2017

PhiSpindler commented Apr 7, 2017 •

edited

jasonnathan commented Apr 12, 2017

PhiSpindler commented Apr 13, 2017

nacmonad commented May 11, 2017 •

edited

jacobokoenig commented Jun 19, 2017

prayash commented Jul 12, 2017

Amin52J commented Jul 15, 2017

Minaghorbaani commented Aug 3, 2017

abhishekgargx commented Sep 5, 2018 •

edited

msmahesh91 commented Dec 20, 2018

shimatai commented Dec 26, 2018

harikrishna1213 commented Mar 1, 2019

ashwithags commented Mar 6, 2019 •

edited

kajeevan025 commented Apr 24, 2019 •

edited

thanhluantl2304 commented Sep 6, 2019

brownieboy commented Sep 27, 2019 •

edited

truongthanh1303 commented Dec 17, 2019

brownieboy commented Dec 17, 2019 •

edited

rajan-keypress commented Mar 1, 2021

zoobibackups commented Apr 17, 2021

Change color of StatusBar #323

Change color of StatusBar #323

Comments

Deepankar01 commented Nov 26, 2016 • edited

sankhadeeproy007 commented Nov 28, 2016

mmmoli commented Jan 28, 2017

yossijacob commented Feb 4, 2017

HyperSimon commented Apr 5, 2017

PhiSpindler commented Apr 7, 2017 • edited

jasonnathan commented Apr 12, 2017

PhiSpindler commented Apr 13, 2017

nacmonad commented May 11, 2017 • edited

jacobokoenig commented Jun 19, 2017

prayash commented Jul 12, 2017

Amin52J commented Jul 15, 2017

Minaghorbaani commented Aug 3, 2017

abhishekgargx commented Sep 5, 2018 • edited

msmahesh91 commented Dec 20, 2018

shimatai commented Dec 26, 2018

harikrishna1213 commented Mar 1, 2019

ashwithags commented Mar 6, 2019 • edited

kajeevan025 commented Apr 24, 2019 • edited

thanhluantl2304 commented Sep 6, 2019

brownieboy commented Sep 27, 2019 • edited

truongthanh1303 commented Dec 17, 2019

brownieboy commented Dec 17, 2019 • edited

rajan-keypress commented Mar 1, 2021

zoobibackups commented Apr 17, 2021

Deepankar01 commented Nov 26, 2016 •

edited

PhiSpindler commented Apr 7, 2017 •

edited

nacmonad commented May 11, 2017 •

edited

abhishekgargx commented Sep 5, 2018 •

edited

ashwithags commented Mar 6, 2019 •

edited

kajeevan025 commented Apr 24, 2019 •

edited

brownieboy commented Sep 27, 2019 •

edited

brownieboy commented Dec 17, 2019 •

edited