Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Avoid status bar overlap on all screens

I want all screens on my app to appear below the status bar on both iOS and Android, so I'd either have to add a StatusBar component or a paddingTop to all my screens.

Is there a way to do this globally? Where is the appropriate top level component to add the StatusBar in a Redux app? (e.g. which part of https://github.com/react-community/react-navigation/tree/master/examples/ReduxExample)?

like image 514
Avery235 Avatar asked Aug 09 '17 03:08

Avery235


People also ask

How do I keep my layout from overlapping with iOS status bar?

I am working on tutorial for React Native navigation. I found out that all layout starts loading from top of screen instead of below of the status bar. This causes most layouts to overlap with the status bar. I can fix this by adding a padding to the view when loading them.

Which of the following components is used to avoid the status bar?

React Native StatusBar Props It is used to hide and show the status bar.

What is status bar expo?

expo-status-bar gives you a component and imperative interface to control the app status bar to change its text color, background color, hide it, make it translucent or opaque, and apply animations to any of these changes.

What is status bar in react-native?

StatusBar is a component exported by the react-native library that helps to modify and style the native status bar in Android and iOS devices.


1 Answers

Step 1: Import Platform and StatusBar

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

Step 2: Add this style in parent View

paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0 

Full Code:

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

    export default class App extends Component {
      render() {
        return (
          <View style={{ paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0 }}>
            <Text>This is Text</Text>
          </View>
        );
      }
    }
like image 127
Jitendra Suthar Avatar answered Oct 09 '22 05:10

Jitendra Suthar