src/components/views/helpers/safearea.js

import React, { Component } from 'react';
import {SafeAreaView} from 'react-native';
import PropTypes from 'prop-types';

import { colours } from '../stylesheets/base-styles';

/**
 * Class to render a safe area on the screen. Also colours the status colour
 * @extends Component
 */
class SafeArea extends Component {
	/**
	 * Helper prop types.
	 */
	static propTypes = {
		overrideColour: PropTypes.string
	}

	/**
	 * Render the safe area.
	 */
	render() {
		return (
			<SafeAreaView 
				style={{ flex:0, backgroundColor: this.props.overrideColour ? this.props.overrideColour : colours.ppWhite }} 
				forceInset={{top: 'always'}} />
		);
	};
}

export default SafeArea;