|
@@ -79,19 +79,34 @@ protected List<ReactPackage> getPackages() {
|
79
|
79
|
```js
|
80
|
80
|
import React from 'react';
|
81
|
81
|
import { View } from 'react-native';
|
82
|
|
-import { SafeAreaProvider, useSafeArea } from 'react-native-safe-area-context';
|
83
|
|
-
|
84
|
|
-function SomeComponent() {
|
85
|
|
- const insets = useSafeArea();
|
86
|
|
-
|
87
|
|
- return <View style={{ paddingTop: insets.top }} />;
|
88
|
|
-}
|
|
82
|
+import { SafeAreaProvider, SafeAreaConsumer, useSafeArea } from 'react-native-safe-area-context';
|
89
|
83
|
|
90
|
84
|
function App() {
|
91
|
85
|
return (
|
92
|
86
|
<SafeAreaProvider>
|
93
|
|
- <SomeComponent />
|
|
87
|
+ <HookComponent />
|
|
88
|
+ <ClassComponent />
|
94
|
89
|
</SafeAreaProvider>
|
95
|
90
|
);
|
96
|
91
|
}
|
|
92
|
+
|
|
93
|
+// With hooks
|
|
94
|
+function HookComponent() {
|
|
95
|
+ const insets = useSafeArea();
|
|
96
|
+
|
|
97
|
+ return <View style={{ paddingTop: insets.top }} />;
|
|
98
|
+}
|
|
99
|
+
|
|
100
|
+// With consumer
|
|
101
|
+class ClassComponent extends React.Component {
|
|
102
|
+ render() {
|
|
103
|
+ return (
|
|
104
|
+ <SafeAreaConsumer>
|
|
105
|
+ {insets => <View style={{ paddingTop: insets.top }} />}
|
|
106
|
+ </SafeAreaConsumer>
|
|
107
|
+ );
|
|
108
|
+ }
|
|
109
|
+}
|
|
110
|
+
|
|
111
|
+
|
97
|
112
|
```
|