1

I'm having some trouble with React Native. I have a screen where I need to have a custom header (with icons and more stuff), so in the navigationOptions I'll be using headerTitle instead of title.

The problem is, when using a headerTitle, the status bar is not included in the component. So I have something like this:

headerTitle: () => <MyHeader />

and then:

const MyHeader = props => {
  return(
    <View style={{flex: 1, backgroundColor: 'red', height: '100%', padding: 10, justifyContent: 'center'}}>
      <Text style={{color: 'white'}}>Testing</Text>
    </View>
  )
}

And I get this:

enter image description here

I tried doing this:

How to set iOS status bar background color in React Native?

But didn't work.

This is my intended result:

enter image description here

I can do it using headerStyle and headerTitleStyle in navigationOptions but then I can't use a custom component...

aabcabca12
  • 353
  • 1
  • 4
  • 17

2 Answers2

1

You can use headerStyle

const MyHeader = props => {
  return(
    <View style={{flex: 1, backgroundColor: 'red', height: '100%', padding: 10, justifyContent: 'center'}}>
      <Text style={{color: 'white'}}>Testing</Text>
    </View>
  )
}

static navigationOptions = {
    headerTitle: () => <MyHeader />,
    headerStyle: {
      backgroundColor: 'red',
    }
  };

IOS

enter image description here

Android

enter image description here

hong developer
  • 13,291
  • 4
  • 38
  • 68
0

simple . use StatusBarIOS component.

Nahid Hasan
  • 687
  • 1
  • 10
  • 34
  • Actually, after some testing I found out I can use `headerStyle` AND `headerTitle` with a custom component and it still works! – aabcabca12 Nov 04 '19 at 14:22