How to prevent 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. Is this the actual way to do it? I don' think manually adding padding is an actual way to solve it. Is there a more elegant way to fix this?

import React, { Component } from 'react';import { View, Text, Navigator } from 'react-native';export default class MyScene extends Component {    static get defaultProps() {            return {                    title : 'MyScene'            };      }       render() {            return (<View style={{padding: 20}}> //padding to prevent overlap<Text>Hi! My name is {this.props.title}.</Text></View>             )       }    }

Below shows the screenshots before and after the padding is added.