{"size": 1273, "ext": "js", "max_stars_repo_path": "components/SafeArea.js", "max_stars_repo_name": "KPS250/CollapsibleToolbar-ReactNative", "max_stars_repo_stars_event_min_datetime": "2020-05-28T03:02:30.000Z", "max_stars_repo_stars_event_max_datetime": "2022-01-14T20:55:53.000Z", "max_issues_repo_path": "components/SafeArea.js", "max_issues_repo_name": "KPS250/CollapsibleToolbar-ReactNative", "max_issues_repo_issues_event_min_datetime": "2020-12-04T07:37:26.000Z", "max_issues_repo_issues_event_max_datetime": "2021-05-10T21:17:15.000Z", "max_forks_repo_path": "components/SafeArea.js", "max_forks_repo_name": "KPS250/CollapsibleToolbar-ReactNative", "max_forks_repo_forks_event_min_datetime": "2020-03-01T18:11:26.000Z", "max_forks_repo_forks_event_max_datetime": "2021-09-22T04:01:50.000Z"}
{"max_stars_count": 4, "max_issues_count": 2, "max_forks_count": 4, "avg_line_length": 24.0188679245, "max_line_length": 71, "alphanum_fraction": 0.5443833464}
import React, {Component, Fragment} from 'react';
import {SafeAreaView, View, StatusBar, StyleSheet} from 'react-native';
import {Colors} from '../utils/Colors';

export default class SafeArea extends Component {
  render() {
    return (
      <Fragment>
        <SafeAreaView
          style={[
            styles.safeAreaTop,
            {
              backgroundColor: this.props.statusBarColor
                ? this.props.statusBarColor
                : Colors.white,
            },
          ]}
        />
        <StatusBar
          backgroundColor={this.props.statusBarColor}
          barStyle={this.props.statusBarStyle}
        />
        <SafeAreaView
          style={[
            styles.safeAreaBottom,
            {
              backgroundColor: this.props.bottomBarColor
                ? this.props.bottomBarColor
                : Colors.white,
            },
          ]}>
          <View style={styles.container}>{this.props.children}</View>
        </SafeAreaView>
      </Fragment>
    );
  }
}

const styles = StyleSheet.create({
  safeAreaTop: {
    flex: 0,
    backgroundColor: Colors.white,
  },
  safeAreaBottom: {
    flex: 1,
    backgroundColor: Colors.gray,
  },
  container: {
    flex: 1,
    backgroundColor: Colors.white,
  },
});
