CODEWITHSUNDEEP
reactjsreact-native
Kunal
Kunal

Reputation: 211

How to render react native app under the status bar?

I am learning app development in react native and my app is overlapping with the status bar of my phone. If I add padding to the top then the padding would differ for different phones. I tried using SafeAreaView but it is not working and I read somewhere it only works for iPhones. So is there any way that I can render the app under the status bar? Any suggestions would be appreciated.

The app getting overlapped with the status bar

Screen Shot

Upvotes: 2

Views: 12801

Answers (4)

JejeDev
JejeDev

Reputation: 528

You should use StatusBar like this :

import { View, StatusBar } from 'react-native';

export const myComponent = () => {
    return (
         <View>
               <StatusBar backgroundColor={colors.SECONDARY_COLOR} />
               ... // your code
         </View>
    )
}

It will set the status bar backgroud color and it will prevent from overlaping your status bar. If you don't want to set the background color you can just use :

<StatusBar />

Upvotes: 1

Kunal
Kunal

Reputation: 211

I finally solved it by simply adding paddingTop:StatusBar.currentHeight to the root view tag of my component.

Upvotes: 3

I Putu Yoga Permana
I Putu Yoga Permana

Reputation: 4220

For this problem, I created a reusable component wrapper for my screen utilize both SafeAreaView and View. Sample code.

import React, { Component } from 'react';
import { View, SafeAreaView, Platform, StatusBar } from 'react-native';

const styles = {
  container: { StatusBar.currentHeight }
};

/**
 * Screen Wrapper to apply padding space on status bar
 */
export const Screen = React.memo((props) => {
  if (Platform.OS === 'ios') {
    return (
      <SafeAreaView style={props.style}>
        {props.children}
      </SafeAreaView>
    );
  }

  return (
    <View style={[styles.container, props.style]}>
      {props.children}
    </View>
  );
});

and then I simply use it wherever my screen needs that padding space. Simple and works.

render() {
  <Screen>
    <Text>{'your screen content here'}</Text>
  </Screen>
};

Upvotes: 0

nipuna-g
nipuna-g

Reputation: 6652

You will need to find the statusbar height and set the top margin of your container to be equal to that amount.

Since Expo provides this value as a constant, you can use it to set the style of your parent component such that the content is always under the status bar.

You can follow this pattern from the github issue here

const App = StackNavigator({
  Home: { screen: HomeScreen },
  About: { screen: AboutScreen },
  }, {
    navigationOptions: { headerStyle: { marginTop: Expo.Constants.statusBarHeight } }
  })

Upvotes: 3

Related Questions