瀏覽代碼

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

Jacob Parker 5 年之前
父節點
當前提交
0f5420067c
No account linked to committer's email address
共有 5 個檔案被更改,包括 60 行新增5 行删除
  1. 26
    5
      README.md
  2. 23
    0
      ios/SafeAreaView/RNCSafeAreaViewManager.m
  3. 3
    0
      src/InitialWindowSafeAreaInsets.ios.ts
  4. 4
    0
      src/InitialWindowSafeAreaInsets.ts
  5. 4
    0
      src/index.tsx

+ 26
- 5
README.md 查看文件

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 查看文件

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 查看文件

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

+ 4
- 0
src/InitialWindowSafeAreaInsets.ts 查看文件

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

+ 4
- 0
src/index.tsx 查看文件

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 {