Browse Source

Add consumer api

Janic Duplessis 5 years ago
parent
commit
826225bed7
2 changed files with 25 additions and 8 deletions
  1. 23
    8
      README.md
  2. 2
    0
      src/index.tsx

+ 23
- 8
README.md View File

79
 ```js
79
 ```js
80
 import React from 'react';
80
 import React from 'react';
81
 import { View } from 'react-native';
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
 function App() {
84
 function App() {
91
   return (
85
   return (
92
     <SafeAreaProvider>
86
     <SafeAreaProvider>
93
-      <SomeComponent />
87
+      <HookComponent />
88
+      <ClassComponent />
94
     </SafeAreaProvider>
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
 ```

+ 2
- 0
src/index.tsx View File

44
   fill: { flex: 1 },
44
   fill: { flex: 1 },
45
 });
45
 });
46
 
46
 
47
+export const SafeAreaConsumer = SafeAreaContext.Consumer;
48
+
47
 export function useSafeArea(): EdgeInsets {
49
 export function useSafeArea(): EdgeInsets {
48
   const safeArea = React.useContext(SafeAreaContext);
50
   const safeArea = React.useContext(SafeAreaContext);
49
   if (safeArea == null) {
51
   if (safeArea == null) {