1 files changed, 66 insertions, 0 deletions
diff --git a/app/components/screen/screen.tsx b/app/components/screen/screen.tsx
new file mode 100644
index 0000000..ba84547
--- /dev/null
+++ b/app/components/screen/screen.tsx
@@ -0,0 +1,66 @@
+import * as React from "react"
+import { KeyboardAvoidingView, Platform, ScrollView, StatusBar, View } from "react-native"
+import { useSafeAreaInsets } from "react-native-safe-area-context"
+import { ScreenProps } from "./screen.props"
+import { isNonScrolling, offsets, presets } from "./screen.presets"
+
+const isIos = Platform.OS === "ios"
+
+function ScreenWithoutScrolling(props: ScreenProps) {
+  const insets = useSafeAreaInsets()
+  const preset = presets.fixed
+  const style = props.style || {}
+  const backgroundStyle = props.backgroundColor ? { backgroundColor: props.backgroundColor } : {}
+  const insetStyle = { paddingTop: props.unsafe ? 0 : insets.top }
+
+  return (
+    <KeyboardAvoidingView
+      style={[preset.outer, backgroundStyle]}
+      behavior={isIos ? "padding" : undefined}
+      keyboardVerticalOffset={offsets[props.keyboardOffset || "none"]}
+    >
+      <StatusBar barStyle={props.statusBar || "light-content"} />
+      <View style={[preset.inner, style, insetStyle]}>{props.children}</View>
+    </KeyboardAvoidingView>
+  )
+}
+
+function ScreenWithScrolling(props: ScreenProps) {
+  const insets = useSafeAreaInsets()
+  const preset = presets.scroll
+  const style = props.style || {}
+  const backgroundStyle = props.backgroundColor ? { backgroundColor: props.backgroundColor } : {}
+  const insetStyle = { paddingTop: props.unsafe ? 0 : insets.top }
+
+  return (
+    <KeyboardAvoidingView
+      style={[preset.outer, backgroundStyle]}
+      behavior={isIos ? "padding" : undefined}
+      keyboardVerticalOffset={offsets[props.keyboardOffset || "none"]}
+    >
+      <StatusBar barStyle={props.statusBar || "light-content"} />
+      <View style={[preset.outer, backgroundStyle, insetStyle]}>
+        <ScrollView
+          style={[preset.outer, backgroundStyle]}
+          contentContainerStyle={[preset.inner, style]}
+          keyboardShouldPersistTaps={props.keyboardShouldPersistTaps || "handled"}
+        >
+          {props.children}
+        </ScrollView>
+      </View>
+    </KeyboardAvoidingView>
+  )
+}
+
+/**
+ * The starting component on every screen in the app.
+ *
+ * @param props The screen props
+ */
+export function Screen(props: ScreenProps) {
+  if (isNonScrolling(props.preset)) {
+    return <ScreenWithoutScrolling {...props} />
+  } else {
+    return <ScreenWithScrolling {...props} />
+  }
+}