// To address the issue of text being above the staus bar

import { 
    SafeAreaView, 
    StyleSheet, 
    ViewStyle, 
    Platform, 
    StatusBar } from 'react-native'

import React from 'react'

const Screen = ({
    children, //taking children as props
    style

}:{
    children: any; //returning children as any props
    style?: ViewStyle;

}) => {

  return (
    <SafeAreaView
        style={[styles.container, style]} //passing multiple styles to an array. We are using our own styles at bottom but adding this props in case we want to pass in specific styles
    >
        <StatusBar barStyle={"dark-content"}/>
        {children}

    </SafeAreaView>
  );

};

export default Screen

const styles = StyleSheet.create({
    container: {
        flex: 1,

        //if the operating system is android, we are going to give it a padding top, if not, set the height to zero.
        paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
    },

});