Browse Source

Add support for getting initial safe area insets on mount (#27)

Jacob Parker 5 years ago
parent
commit
0f5420067c
No account linked to committer's email address

+ 26
- 5
README.md View File

43
 Make the following changes:
43
 Make the following changes:
44
 
44
 
45
 #### `android/settings.gradle`
45
 #### `android/settings.gradle`
46
+
46
 ```groovy
47
 ```groovy
47
 include ':react-native-safe-area-context'
48
 include ':react-native-safe-area-context'
48
 project(':react-native-safe-area-context').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-safe-area-context/android')
49
 project(':react-native-safe-area-context').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-safe-area-context/android')
49
 ```
50
 ```
50
 
51
 
51
 #### `android/app/build.gradle`
52
 #### `android/app/build.gradle`
53
+
52
 ```groovy
54
 ```groovy
53
 dependencies {
55
 dependencies {
54
    ...
56
    ...
57
 ```
59
 ```
58
 
60
 
59
 #### `android/app/src/main/.../MainApplication.java`
61
 #### `android/app/src/main/.../MainApplication.java`
62
+
60
 On top, where imports are:
63
 On top, where imports are:
61
 
64
 
62
 ```java
65
 ```java
75
     );
78
     );
76
 }
79
 }
77
 ```
80
 ```
81
+
78
 </details>
82
 </details>
79
 
83
 
80
 ## Usage
84
 ## Usage
85
 import { SafeAreaProvider } from 'react-native-safe-area-context';
89
 import { SafeAreaProvider } from 'react-native-safe-area-context';
86
 
90
 
87
 function App() {
91
 function App() {
88
-  return (
89
-    <SafeAreaProvider>
90
-      ...
91
-    </SafeAreaProvider>
92
-  );
92
+  return <SafeAreaProvider>...</SafeAreaProvider>;
93
 }
93
 }
94
 ```
94
 ```
95
 
95
 
139
 
139
 
140
 If you are doing server side rendering on the web you can use `initialSafeAreaInsets` to inject insets value based on the device the user has, or simply pass zero values. Since insets measurement is async it will break rendering your page content otherwise.
140
 If you are doing server side rendering on the web you can use `initialSafeAreaInsets` to inject insets value based on the device the user has, or simply pass zero values. Since insets measurement is async it will break rendering your page content otherwise.
141
 
141
 
142
+### Optimization
143
+
144
+To speed up the initial render, you can import `initialWindowSafeAreaInsets` from this package and set as the `initialSafeAreaInsets` prop on the provider as described in Web SSR. You cannot do this if your provider remounts, or you are using `react-native-navigation`.
145
+
146
+Only supported on iOS at the moment.
147
+
148
+```js
149
+import {
150
+  SafeAreaProvider,
151
+  initialWindowSafeAreaInsets,
152
+} from 'react-native-safe-area-context';
153
+
154
+function App() {
155
+  return (
156
+    <SafeAreaProvider initialSafeAreaInsets={initialWindowSafeAreaInsets}>
157
+      ...
158
+    </SafeAreaProvider>
159
+  );
160
+}
161
+```
162
+
142
 ## Resources
163
 ## Resources
143
 
164
 
144
 - Great article about how this library can be used: https://dev.to/brunolemos/adding-notch-support-to-your-react-native-android-app-3ci3
165
 - Great article about how this library can be used: https://dev.to/brunolemos/adding-notch-support-to-your-react-native-android-app-3ci3

+ 23
- 0
ios/SafeAreaView/RNCSafeAreaViewManager.m View File

8
 
8
 
9
 RCT_EXPORT_VIEW_PROPERTY(onInsetsChange, RCTBubblingEventBlock)
9
 RCT_EXPORT_VIEW_PROPERTY(onInsetsChange, RCTBubblingEventBlock)
10
 
10
 
11
++ (BOOL)requiresMainQueueSetup
12
+{
13
+  return YES;
14
+}
15
+
11
 - (UIView *)view
16
 - (UIView *)view
12
 {
17
 {
13
   return [RNCSafeAreaView new];
18
   return [RNCSafeAreaView new];
14
 }
19
 }
15
 
20
 
21
+- (NSDictionary *)constantsToExport
22
+{
23
+  if (@available(iOS 11.0, *)) {
24
+    UIWindow* window = [[UIApplication sharedApplication] keyWindow];
25
+    UIEdgeInsets safeAreaInsets = window.safeAreaInsets;
26
+    return @{
27
+      @"initialWindowSafeAreaInsets": @{
28
+        @"top": @(safeAreaInsets.top),
29
+        @"right": @(safeAreaInsets.right),
30
+        @"bottom": @(safeAreaInsets.bottom),
31
+        @"left": @(safeAreaInsets.left),
32
+      }
33
+    };
34
+  } else {
35
+    return @{ @"initialWindowSafeAreaInsets": [NSNull null] };
36
+  }
37
+}
38
+
16
 @end
39
 @end

+ 3
- 0
src/InitialWindowSafeAreaInsets.ios.ts View File

1
+import { NativeModules } from 'react-native';
2
+
3
+export default NativeModules.RNCSafeAreaView.initialWindowSafeAreaInsets;

+ 4
- 0
src/InitialWindowSafeAreaInsets.ts View File

1
+import { EdgeInsets } from './SafeArea.types';
2
+
3
+const initialWindowSafeAreaInsets: EdgeInsets | null = null;
4
+export default initialWindowSafeAreaInsets;

+ 4
- 0
src/index.tsx View File

3
 import { EdgeInsets as EdgeInsetsT, InsetChangedEvent } from './SafeArea.types';
3
 import { EdgeInsets as EdgeInsetsT, InsetChangedEvent } from './SafeArea.types';
4
 import NativeSafeAreaView from './NativeSafeAreaView';
4
 import NativeSafeAreaView from './NativeSafeAreaView';
5
 
5
 
6
+export {
7
+  default as initialWindowSafeAreaInsets,
8
+} from './InitialWindowSafeAreaInsets';
9
+
6
 export const SafeAreaContext = React.createContext<EdgeInsetsT | null>(null);
10
 export const SafeAreaContext = React.createContext<EdgeInsetsT | null>(null);
7
 
11
 
8
 export interface SafeAreaViewProps {
12
 export interface SafeAreaViewProps {