Browse Source

Update example

Janic Duplessis 5 years ago
parent
commit
d12858ccde
1 changed files with 17 additions and 10 deletions
  1. 17
    10
      README.md

+ 17
- 10
README.md View File

74
 ```
74
 ```
75
 </details>
75
 </details>
76
 
76
 
77
-## Example
77
+## Usage
78
+
79
+Add `SafeAreaProvider` in your app root component:
78
 
80
 
79
 ```js
81
 ```js
80
-import React from 'react';
81
-import { View } from 'react-native';
82
-import { SafeAreaProvider, SafeAreaConsumer, useSafeArea } from 'react-native-safe-area-context';
82
+import { SafeAreaProvider } from 'react-native-safe-area-context';
83
 
83
 
84
 function App() {
84
 function App() {
85
   return (
85
   return (
86
     <SafeAreaProvider>
86
     <SafeAreaProvider>
87
-      <HookComponent />
88
-      <ClassComponent />
87
+      ...
89
     </SafeAreaProvider>
88
     </SafeAreaProvider>
90
   );
89
   );
91
 }
90
 }
91
+```
92
+
93
+Usage with hooks api:
94
+
95
+```js
96
+import { useSafeArea } from 'react-native-safe-area-context';
92
 
97
 
93
-// With hooks
94
 function HookComponent() {
98
 function HookComponent() {
95
   const insets = useSafeArea();
99
   const insets = useSafeArea();
96
 
100
 
97
   return <View style={{ paddingTop: insets.top }} />;
101
   return <View style={{ paddingTop: insets.top }} />;
98
 }
102
 }
103
+```
104
+
105
+Usage with consumer api:
106
+
107
+```js
108
+import { SafeAreaConsumer } from 'react-native-safe-area-context';
99
 
109
 
100
-// With consumer
101
 class ClassComponent extends React.Component {
110
 class ClassComponent extends React.Component {
102
   render() {
111
   render() {
103
     return (
112
     return (
107
     );
116
     );
108
   }
117
   }
109
 }
118
 }
110
-
111
-
112
 ```
119
 ```