explore Groups

src/components/AppView.tsx

@@ -1,17 +1,23 @@
 import React from "react";
-import { StatusBar, StyleSheet, View } from "react-native";
+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 = 16, // default
+  paddingTop = 8, // default
+  style,
 }: AppViewProps) {
   return (
     <SafeAreaView style={[styles.safeArea, { backgroundColor }]}>
@@ -20,7 +26,15 @@ export default function AppView({
         backgroundColor={backgroundColor}
         barStyle={barStyle}
       />
-      <View style={styles.container}>{children}</View>
+      <View
+        style={[
+          styles.container,
+          { paddingHorizontal, paddingTop },
+          style, // user custom overrides
+        ]}
+      >
+        {children}
+      </View>
     </SafeAreaView>
   );
 }
@@ -31,7 +45,5 @@ const styles = StyleSheet.create({
   },
   container: {
     flex: 1,
-    paddingHorizontal: 16,
-    paddingTop: 8,
   },
 });