Responsive Ad Area

Share This Post

test

How to avoid status bar overlaping content?

How to avoid status bar overlaping content?

I am having an issue where the status bar is overlapping the content of my app.

This:
enter image description here

This is App.js which holds my top level component where I added SafeAreaView:

     <SafeAreaView style={{ flex: 1, backgroundColor: '#fff' }}>
        <KeyboardAvoidingView
          style={styles.container}
          behavior="padding"
          enabled
        >
          <ReduxProvider store={store}>
            {Platform.OS === 'ios' && <StatusBar barStyle="default" />}
            <AppNavigator />
          </ReduxProvider>
        </KeyboardAvoidingView>
      </SafeAreaView>

That Search bar component you see in the image has a margin:
<View style={{ marginTop: 22 }}>... which works properly on the rest of the iOS devices, but not on the new iPhones, like the XR for example which is the device on the screenshot.

So, any ideas on how do I set this margin dynamically so the status bar doesn’t overlap the UI content?


How to avoid status bar overlaping content?
How to avoid status bar overlaping content?
test
{$excerpt:n}

Share This Post

Leave a Reply

Your email address will not be Publishedd. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Skip to toolbar