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