Преглед на файлове

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 {