Handling the status bar on iOS

Question

Is there a goto way to handle the status bar on iOS? For my app, I just want everything to be below the status bar.. but it looks like the only way to do that is to go to every single component and add padding? I would guess theres a way to do it in xcode but I have no clue!

Thanks!

Pritish Vaidya · Answer 1 · 2018-04-08T15:53:37.763

2

There is already a component in react-native for the StatusBar

You just need to add it as

<YourParentWrapper style={{flex: 1}}>
  <View style={{ height, backgroundColor }}>
        <StatusBar { ...props } />
    </View>
  // ... Your navigation or the child components
</YourParentWrapper>

where the height is

Platform.OS === 'ios' ? 20 : StatusBar.currentHeight

This will handle your components below the default status bar for all the devices

edited Apr 08 '18 at 15:53

answered Apr 08 '18 at 15:23

Pritish Vaidya

21,561
3
58
76

What about IphoneX? – Rishav Kumar Jan 31 '19 at 07:35
It is `44pt` instead of `20pt` – Pritish Vaidya Jan 31 '19 at 07:47
I know but how to handle it? – Rishav Kumar Jan 31 '19 at 08:02
There is optimised way of doing it by taking safeAreaView instead of View and it will automatically position the element keeping status bar in mind and for android, give safeAreaView of style {marginTop : Platform.OS === 'android' ? Statusbar.getCurrentHeight() : 0} . *Forgive me for the nameCasing, I just gave the logic : )* – Rishav Kumar Jan 31 '19 at 08:04

Handling the status bar on iOS

1 Answers1