|
@@ -1,5 +1,5 @@
|
1
|
1
|
import * as React from 'react';
|
2
|
|
-import { StyleSheet } from 'react-native';
|
|
2
|
+import { StyleSheet, Dimensions } from 'react-native';
|
3
|
3
|
import NativeSafeAreaView from './NativeSafeAreaView';
|
4
|
4
|
import { EdgeInsets, InsetChangedEvent, Metrics, Rect } from './SafeArea.types';
|
5
|
5
|
|
|
@@ -12,28 +12,43 @@ export const SafeAreaFrameContext = React.createContext<Rect | null>(null);
|
12
|
12
|
export interface SafeAreaViewProps {
|
13
|
13
|
children?: React.ReactNode;
|
14
|
14
|
initialMetrics?: Metrics | null;
|
|
15
|
+ /**
|
|
16
|
+ * @deprecated
|
|
17
|
+ */
|
|
18
|
+ initialSafeAreaInsets?: EdgeInsets | null;
|
15
|
19
|
}
|
16
|
20
|
|
17
|
21
|
export function SafeAreaProvider({
|
18
|
22
|
children,
|
19
|
23
|
initialMetrics,
|
|
24
|
+ initialSafeAreaInsets,
|
20
|
25
|
}: SafeAreaViewProps) {
|
21
|
26
|
const parentInsets = useParentSafeAreaInsets();
|
22
|
27
|
const parentFrame = useParentSafeAreaFrame();
|
23
|
28
|
const [insets, setInsets] = React.useState<EdgeInsets | null>(
|
24
|
|
- initialMetrics?.insets ?? parentInsets ?? null,
|
|
29
|
+ initialMetrics?.insets ?? initialSafeAreaInsets ?? parentInsets ?? null,
|
25
|
30
|
);
|
26
|
|
- const [frame, setFrame] = React.useState<Rect | null>(
|
27
|
|
- initialMetrics?.frame ?? parentFrame ?? null,
|
|
31
|
+ const [frame, setFrame] = React.useState<Rect>(
|
|
32
|
+ initialMetrics?.frame ??
|
|
33
|
+ parentFrame ?? {
|
|
34
|
+ // Backwards compat so we render anyway if we don't have frame.
|
|
35
|
+ x: 0,
|
|
36
|
+ y: 0,
|
|
37
|
+ width: Dimensions.get('window').width,
|
|
38
|
+ height: Dimensions.get('window').height,
|
|
39
|
+ },
|
28
|
40
|
);
|
29
|
41
|
const onInsetsChange = React.useCallback((event: InsetChangedEvent) => {
|
|
42
|
+ // Backwards compat with old native code that won't send frame.
|
|
43
|
+ if (event.nativeEvent.frame != null) {
|
|
44
|
+ setFrame(event.nativeEvent.frame);
|
|
45
|
+ }
|
30
|
46
|
setInsets(event.nativeEvent.insets);
|
31
|
|
- setFrame(event.nativeEvent.frame);
|
32
|
47
|
}, []);
|
33
|
48
|
|
34
|
49
|
return (
|
35
|
50
|
<NativeSafeAreaView style={styles.fill} onInsetsChange={onInsetsChange}>
|
36
|
|
- {insets != null && frame != null ? (
|
|
51
|
+ {insets != null ? (
|
37
|
52
|
<SafeAreaFrameContext.Provider value={frame}>
|
38
|
53
|
<SafeAreaInsetsContext.Provider value={insets}>
|
39
|
54
|
{children}
|
|
@@ -80,9 +95,6 @@ export function useSafeAreaFrame(): Rect {
|
80
|
95
|
* @deprecated
|
81
|
96
|
*/
|
82
|
97
|
export function useSafeArea(): EdgeInsets {
|
83
|
|
- React.useEffect(() => {
|
84
|
|
- console.warn('useSafeArea is deprecated, use useSafeAreaInsets instead.');
|
85
|
|
- }, []);
|
86
|
98
|
return useSafeAreaInsets();
|
87
|
99
|
}
|
88
|
100
|
|
|
@@ -92,10 +104,5 @@ export function useSafeArea(): EdgeInsets {
|
92
|
104
|
export function SafeAreaConsumer(
|
93
|
105
|
props: React.ComponentProps<typeof SafeAreaInsetsContext.Consumer>,
|
94
|
106
|
) {
|
95
|
|
- React.useEffect(() => {
|
96
|
|
- console.warn(
|
97
|
|
- 'SafeAreaConsumer is deprecated, use SafeAreaInsetsContext.Consumer instead.',
|
98
|
|
- );
|
99
|
|
- }, []);
|
100
|
107
|
return <SafeAreaInsetsContext.Consumer {...props} />;
|
101
|
108
|
}
|