summaryrefslogtreecommitdiff
path: root/app_expo/components/screen/screen.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'app_expo/components/screen/screen.tsx')
-rw-r--r--app_expo/components/screen/screen.tsx66
1 files changed, 66 insertions, 0 deletions
diff --git a/app_expo/components/screen/screen.tsx b/app_expo/components/screen/screen.tsx
new file mode 100644
index 0000000..dafe36e
--- /dev/null
+++ b/app_expo/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} />
+ }
+}