Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: 2234 - Remove SafeAreaView in favor of useSafeAreaInsets hook #2238

Merged
merged 3 commits into from Oct 4, 2022
Merged

fix: 2234 - Remove SafeAreaView in favor of useSafeAreaInsets hook #2238

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cd922b4
Remove SafeAreaView in favor of useSafeAreaInsets hook
carlinisaacson Sep 30, 2022
516968d
Merge branch 'master' into fix/2234-safe-area-insets
carlinisaacson Sep 30, 2022
2867f5c
Update to suggested cleaner syntax
carlinisaacson Oct 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
31 changes: 18 additions & 13 deletions boilerplate/app/components/Screen.tsx
View file
Open in desktop
Expand Up @@ -11,7 +11,7 @@ import {
ViewStyle,
} from "react-native"
import { StatusBar, StatusBarProps } from "expo-status-bar"
import { Edge, SafeAreaView, SafeAreaViewProps } from "react-native-safe-area-context"
import { Edge, useSafeAreaInsets } from "react-native-safe-area-context"
import { useScrollToTop } from "@react-navigation/native"
import { colors } from "../theme"

Expand Down Expand Up @@ -44,10 +44,6 @@ interface BaseScreenProps {
* By how much should we offset the keyboard? Defaults to 0.
*/
keyboardOffset?: number
/**
* Pass any additional props directly to the SafeAreaView component.
*/
SafeAreaViewProps?: SafeAreaViewProps
/**
* Pass any additional props directly to the StatusBar component.
*/
Expand Down Expand Up @@ -141,6 +137,18 @@ function useAutoPreset(props: AutoScreenProps) {
}
}

function useSafeAreaInsetPadding(safeAreaEdges?: Edge[]) {
const insets = useSafeAreaInsets()

const insetStyles: ViewStyle = {}
safeAreaEdges?.forEach((edge: Edge) => {
const paddingProp = `padding${edge.charAt(0).toUpperCase()}${edge.slice(1)}`
insetStyles[paddingProp] = insets[edge]
})

return insetStyles
}

function ScreenWithoutScrolling(props: ScreenProps) {
const { style, contentContainerStyle, children } = props
return (
Expand Down Expand Up @@ -197,18 +205,15 @@ export function Screen(props: ScreenProps) {
KeyboardAvoidingViewProps,
keyboardOffset = 0,
safeAreaEdges,
SafeAreaViewProps,
StatusBarProps,
statusBarStyle = "dark",
} = props

const Wrapper = safeAreaEdges?.length ? SafeAreaView : View
const insetPadding = useSafeAreaInsetPadding(safeAreaEdges)

return (
<Wrapper
edges={safeAreaEdges}
{...SafeAreaViewProps}
style={[$safeAreaStyle, SafeAreaViewProps?.style, { backgroundColor }]}
<View
style={[$containerStyle, { backgroundColor }, insetPadding ]}
>
<StatusBar style={statusBarStyle} {...StatusBarProps} />

Expand All @@ -224,11 +229,11 @@ export function Screen(props: ScreenProps) {
<ScreenWithScrolling {...props} />
)}
</KeyboardAvoidingView>
</Wrapper>
</View>
)
}

const $safeAreaStyle: ViewStyle = {
const $containerStyle: ViewStyle = {
flex: 1,
height: "100%",
width: "100%",
Expand Down