44 lines
974 B
TypeScript
44 lines
974 B
TypeScript
// 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,
|
|
},
|
|
|
|
}); |