|  | @@ -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 |  ```
 |