Nativebase: Change color of StatusBar

Created on 26 Nov 2016 · 22Comments · Source: GeekyAnts/NativeBase

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>

Source

Deepankar01

Most helpful comment

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'}}/>

nacmonad on 11 May 2017

👍99 🎉33 ❤25 😄19 🚀9 👎2 👀1

All 22 comments

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

sankhadeeproy007 on 28 Nov 2016

😕6 👎5 👍3

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

mmmoli on 28 Jan 2017

👍3

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>

yossijacob on 4 Feb 2017

👎7 👍3

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

HyperSimon on 5 Apr 2017

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 ( ... );
  }
}

PhiSpindler on 7 Apr 2017

👎13 👍2

@PhiSpindler setColor is not a function

jasonnathan on 13 Apr 2017

🎉2

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

PhiSpindler on 13 Apr 2017

nacmonad on 11 May 2017

👍99 🎉33 ❤25 😄19 🚀9 👎2 👀1

Finally @nacmonad!!! Thanks!!

jacobokoenig on 20 Jun 2017

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!

prayash on 13 Jul 2017

👍21 🎉8 ❤6

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

Amin52J on 15 Jul 2017

👍25 🎉8 ❤7 👎5

hi , how can i make my statusbar background gradient ?

Minaghorbaani on 3 Aug 2017

👍7

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

```
render() {
return (

backgroundColor="#ff1c1c"
barStyle="light-content" />
//rest of your content

);
}

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

render() {
return (

backgroundColor="#ff1c1c"
barStyle="light-content" />
// other header elements

// you content

);
}

```

Abhishekgarg727 on 5 Sep 2018

👍5 ❤2

thank you so much @nacmonad

msmahesh91 on 20 Dec 2018

@PhiSpindler setColor is not a function

It works only in Android.

shimatai on 26 Dec 2018

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 !!!!

harikrishna1213 on 1 Mar 2019

👍2

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

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

ashwithags on 6 Mar 2019

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

This can be helpfull

kajeevan025 on 24 Apr 2019

👍1

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

thanhluantl2304 on 6 Sep 2019

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.

brownieboy on 27 Sep 2019

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,