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,30 +74,39 @@ protected List<ReactPackage> getPackages() {
74 74
 ```
75 75
 </details>
76 76
 
77
-## Example
77
+## Usage
78
+
79
+Add `SafeAreaProvider` in your app root component:
78 80
 
79 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 84
 function App() {
85 85
   return (
86 86
     <SafeAreaProvider>
87
-      <HookComponent />
88
-      <ClassComponent />
87
+      ...
89 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 98
 function HookComponent() {
95 99
   const insets = useSafeArea();
96 100
 
97 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 110
 class ClassComponent extends React.Component {
102 111
   render() {
103 112
     return (
@@ -107,6 +116,4 @@ class ClassComponent extends React.Component {
107 116
     );
108 117
   }
109 118
 }
110
-
111
-
112 119
 ```