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 ) { 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 ) { 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>); } param props export function Screen ( props ) { if ( isNonScrolling ( props . preset ) ) { return < ScreenWithoutScrolling { ... props } / > ; } else { return < ScreenWithScrolling { ... props } / > ; } }