50 lines
1.1 KiB
TypeScript
50 lines
1.1 KiB
TypeScript
import React from "react";
|
|
import { StatusBar, StyleSheet, View, ViewStyle } from "react-native";
|
|
import { SafeAreaView } from "react-native-safe-area-context";
|
|
|
|
type AppViewProps = {
|
|
children: React.ReactNode;
|
|
backgroundColor?: string;
|
|
barStyle?: "default" | "light-content" | "dark-content";
|
|
paddingHorizontal?: number;
|
|
paddingTop?: number;
|
|
style?: ViewStyle;
|
|
};
|
|
|
|
export default function AppView({
|
|
children,
|
|
backgroundColor = "#f5f5f5",
|
|
barStyle = "dark-content",
|
|
paddingHorizontal = 12, // default
|
|
paddingTop = 8, // default
|
|
style,
|
|
}: AppViewProps) {
|
|
return (
|
|
<SafeAreaView style={[styles.safeArea, { backgroundColor }]}>
|
|
<StatusBar
|
|
translucent={false}
|
|
backgroundColor={backgroundColor}
|
|
barStyle={barStyle}
|
|
/>
|
|
<View
|
|
style={[
|
|
styles.container,
|
|
{ paddingHorizontal, paddingTop },
|
|
style, // user custom overrides
|
|
]}
|
|
>
|
|
{children}
|
|
</View>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
safeArea: {
|
|
flex: 1,
|
|
},
|
|
container: {
|
|
flex: 1,
|
|
},
|
|
});
|