react-native-edge-to-edge 1.1.2 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +82 -66
- package/android/src/main/java/com/zoontek/rnedgetoedge/EdgeToEdgeModuleImpl.kt +1 -0
- package/android/src/main/res/values/public.xml +4 -0
- package/android/src/main/res/values/styles.xml +34 -6
- package/android/src/main/res/values-v27/styles.xml +18 -3
- package/android/src/main/res/values-v29/styles.xml +24 -3
- package/android/src/main/res/values-v30/styles.xml +24 -3
- package/dist/commonjs/SystemBars.js +36 -34
- package/dist/commonjs/SystemBars.js.map +1 -1
- package/dist/commonjs/expo.js +6 -2
- package/dist/commonjs/expo.js.map +1 -1
- package/dist/module/SystemBars.js +36 -34
- package/dist/module/SystemBars.js.map +1 -1
- package/dist/module/expo.js +6 -2
- package/dist/module/expo.js.map +1 -1
- package/dist/typescript/SystemBars.d.ts.map +1 -1
- package/dist/typescript/expo.d.ts +1 -1
- package/dist/typescript/expo.d.ts.map +1 -1
- package/package.json +5 -5
- package/src/SystemBars.ts +46 -44
- package/src/expo.ts +16 -4
package/README.md
CHANGED
|
@@ -29,14 +29,14 @@ Recently, Google introduced a significant change: apps targeting SDK 35 will hav
|
|
|
29
29
|
|
|
30
30
|
Currently, new React Native projects target SDK 34.
|
|
31
31
|
|
|
32
|
-
### Immersive mode
|
|
33
|
-
|
|
34
|
-
[Immersive mode](https://developer.android.com/develop/ui/views/layout/immersive) allows you to hide the status and navigation bars, making it ideal for full-screen experiences. Currently, the built-in [`StatusBar`](https://reactnative.dev/docs/statusbar) component uses [`FLAG_FULLSCREEN`](https://developer.android.com/reference/android/view/WindowManager.LayoutParams#FLAG_FULLSCREEN), a flag that has been deprecated since Android 11.
|
|
35
|
-
|
|
36
32
|
### Consistency
|
|
37
33
|
|
|
38
34
|
iOS has long used edge-to-edge displays, so adopting this design across all platforms ensures a consistent user experience. It also simplifies managing safe areas, eliminating the need for special cases specific to Android.
|
|
39
35
|
|
|
36
|
+
### Immersive mode
|
|
37
|
+
|
|
38
|
+
[Immersive mode](https://developer.android.com/develop/ui/views/layout/immersive) allows you to hide the status and navigation bars, making it ideal for full-screen experiences. Currently, the built-in [`StatusBar`](https://reactnative.dev/docs/statusbar) component uses [`FLAG_FULLSCREEN`](https://developer.android.com/reference/android/view/WindowManager.LayoutParams#FLAG_FULLSCREEN), a flag that has been deprecated since Android 11.
|
|
39
|
+
|
|
40
40
|
## Installation
|
|
41
41
|
|
|
42
42
|
```bash
|
|
@@ -47,12 +47,14 @@ $ yarn add react-native-edge-to-edge
|
|
|
47
47
|
|
|
48
48
|
### Expo
|
|
49
49
|
|
|
50
|
-
Add the library plugin in your `app.json` config file and [create a new build](https://docs.expo.dev/develop/development-builds/create-a-build/)
|
|
50
|
+
Add the library plugin in your `app.json` config file and [create a new build](https://docs.expo.dev/develop/development-builds/create-a-build/) 👷:
|
|
51
51
|
|
|
52
52
|
```diff
|
|
53
53
|
{
|
|
54
54
|
"expo": {
|
|
55
|
-
+ "plugins": [
|
|
55
|
+
+ "plugins": [
|
|
56
|
+
+ ["react-native-edge-to-edge", { "android": { "parentTheme": "Light" } }]
|
|
57
|
+
+ ]
|
|
56
58
|
}
|
|
57
59
|
}
|
|
58
60
|
```
|
|
@@ -60,10 +62,18 @@ Add the library plugin in your `app.json` config file and [create a new build](h
|
|
|
60
62
|
_📌 The available plugins options are:_
|
|
61
63
|
|
|
62
64
|
```ts
|
|
65
|
+
type Theme =
|
|
66
|
+
| "Default" // Theme.EdgeToEdge (default)
|
|
67
|
+
| "Material2" // Theme.EdgeToEdge.Material2
|
|
68
|
+
| "Material3" // Theme.EdgeToEdge.Material3
|
|
69
|
+
| "Light" // Theme.EdgeToEdge.Light
|
|
70
|
+
| "Material2.Light" // Theme.EdgeToEdge.Material2.Light
|
|
71
|
+
| "Material3.Light"; // Theme.EdgeToEdge.Material3.Light
|
|
72
|
+
|
|
63
73
|
type Options = {
|
|
64
74
|
android?: {
|
|
65
|
-
// use an edge-to-edge version of `Theme.{MaterialComponents,Material3}.DayNight.NoActionBar`
|
|
66
|
-
parentTheme?:
|
|
75
|
+
// use an edge-to-edge version of `Theme.{MaterialComponents,Material3}.{DayNight,Light}.NoActionBar`
|
|
76
|
+
parentTheme?: Theme; // optional
|
|
67
77
|
};
|
|
68
78
|
};
|
|
69
79
|
```
|
|
@@ -77,7 +87,10 @@ Edit your `android/app/src/main/res/values/styles.xml` file to inherit from one
|
|
|
77
87
|
|
|
78
88
|
```diff
|
|
79
89
|
<resources>
|
|
80
|
-
<!-- inherit from
|
|
90
|
+
<!-- inherit from one of the provided edge-to-edge parent themes:
|
|
91
|
+
- Theme.EdgeToEdge / Theme.EdgeToEdge.Light
|
|
92
|
+
- Theme.EdgeToEdge.Material2 / Theme.EdgeToEdge.Material2.Light
|
|
93
|
+
- Theme.EdgeToEdge.Material3 / Theme.EdgeToEdge.Material3.Light -->
|
|
81
94
|
- <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
|
|
82
95
|
+ <style name="AppTheme" parent="Theme.EdgeToEdge">
|
|
83
96
|
<!-- … -->
|
|
@@ -87,63 +100,9 @@ Edit your `android/app/src/main/res/values/styles.xml` file to inherit from one
|
|
|
87
100
|
|
|
88
101
|
## Considerations
|
|
89
102
|
|
|
90
|
-
### Third-party libraries
|
|
91
|
-
|
|
92
|
-
Many libraries expose options that you can set to account for the transparency of status and navigation bars. For example, the [`useHideAnimation`](https://github.com/zoontek/react-native-bootsplash?tab=readme-ov-file#usehideanimation) hook in `react-native-bootsplash` has `statusBarTranslucent` and `navigationBarTranslucent` options, the [`useAnimatedKeyboard`](https://docs.swmansion.com/react-native-reanimated/docs/device/useAnimatedKeyboard) in `react-native-reanimated` has an `isStatusBarTranslucentAndroid` option, etc.
|
|
93
|
-
|
|
94
|
-
> [!IMPORTANT]
|
|
95
|
-
> Until third-party libraries officially add support for `react-native-edge-to-edge` to set these options automatically, you may need to adjust these options to prevent interference with the library.
|
|
96
|
-
|
|
97
|
-
For library authors, we provide a lightweight package called `react-native-is-edge-to-edge` (note the `-is-`!), which checks whether `react-native-edge-to-edge` is installed, making it easy to update your library accordingly:
|
|
98
|
-
|
|
99
|
-
```ts
|
|
100
|
-
import {
|
|
101
|
-
controlEdgeToEdgeValues,
|
|
102
|
-
isEdgeToEdge,
|
|
103
|
-
} from "react-native-is-edge-to-edge";
|
|
104
|
-
|
|
105
|
-
const EDGE_TO_EDGE = isEdgeToEdge();
|
|
106
|
-
|
|
107
|
-
function MyAwesomeLibraryComponent({
|
|
108
|
-
statusBarTranslucent,
|
|
109
|
-
navigationBarTranslucent,
|
|
110
|
-
}) {
|
|
111
|
-
if (__DEV__) {
|
|
112
|
-
// warn the user once about unnecessary defined values
|
|
113
|
-
controlEdgeToEdgeValues({
|
|
114
|
-
statusBarTranslucent,
|
|
115
|
-
navigationBarTranslucent,
|
|
116
|
-
});
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
return (
|
|
120
|
-
<MyAwesomeLibraryNativeComponent
|
|
121
|
-
statusBarTranslucent={EDGE_TO_EDGE || statusBarTranslucent}
|
|
122
|
-
navigationBarTranslucent={EDGE_TO_EDGE || navigationBarTranslucent}
|
|
123
|
-
// …
|
|
124
|
-
/>
|
|
125
|
-
);
|
|
126
|
-
}
|
|
127
|
-
```
|
|
128
|
-
|
|
129
|
-
If you want to check for the library's presence on the native side to bypass certain parts of your code, consider using this small utility:
|
|
130
|
-
|
|
131
|
-
```kotlin
|
|
132
|
-
object EdgeToEdgeUtil {
|
|
133
|
-
val ENABLED: Boolean
|
|
134
|
-
get() = try {
|
|
135
|
-
// we cannot detect edge-to-edge, but we can detect react-native-edge-to-edge install
|
|
136
|
-
Class.forName("com.zoontek.rnedgetoedge.EdgeToEdgePackage")
|
|
137
|
-
true
|
|
138
|
-
} catch (exception: ClassNotFoundException) {
|
|
139
|
-
false
|
|
140
|
-
}
|
|
141
|
-
}
|
|
142
|
-
```
|
|
143
|
-
|
|
144
103
|
### Keyboard management
|
|
145
104
|
|
|
146
|
-
Enabling edge-to-edge display disrupts
|
|
105
|
+
Enabling edge-to-edge display disrupts Android keyboard management (`android:windowSoftInputMode="adjustResize"`), requiring an alternative solution. While [`KeyboardAvoidingView`](https://reactnative.dev/docs/keyboardavoidingview) is a viable option, we recommend using [react-native-keyboard-controller](https://github.com/kirillzyusko/react-native-keyboard-controller) for its enhanced capabilities.
|
|
147
106
|
|
|
148
107
|
### Safe area management
|
|
149
108
|
|
|
@@ -151,13 +110,17 @@ Effective safe area management is essential to prevent content from being displa
|
|
|
151
110
|
|
|
152
111
|
### Modal component quirks
|
|
153
112
|
|
|
154
|
-
|
|
113
|
+
Edge-to-edge support for the built-in [`Modal`](https://reactnative.dev/docs/modal) component will be available in [React Native 0.77](https://github.com/facebook/react-native/pull/47254). Meanwhile, we recommend using the [react-navigation modals](https://reactnavigation.org/docs/modal) or the [`expo-router` modal screens](https://docs.expo.dev/router/advanced/modals/#modal-screen-using-expo-router).
|
|
114
|
+
|
|
115
|
+
### 3-button navigation mode
|
|
116
|
+
|
|
117
|
+
This library follows the default [AndroidX `enableEdgeToEdge`](https://developer.android.com/develop/ui/views/layout/edge-to-edge) behavior. The system bars are transparent, except in 3-button navigation mode, where the navigation bar becomes translucent (semi-opaque). Its color adjusts based on light or dark theme.
|
|
155
118
|
|
|
156
119
|
## API
|
|
157
120
|
|
|
158
121
|
### `<SystemBars />`
|
|
159
122
|
|
|
160
|
-
A component for managing your app's system bars.
|
|
123
|
+
A component for managing your app's system bars. Replace all occurrences of [`StatusBar`](https://reactnative.dev/docs/statusbar), [`expo-status-bar`](https://docs.expo.dev/versions/latest/sdk/status-bar) and [`expo-navigation-bar`](https://docs.expo.dev/versions/latest/sdk/navigation-bar/) with it (they uses a lot of now [deprecated APIs](https://developer.android.com/about/versions/15/behavior-changes-15#deprecated-apis) and interfere with edge-to-edge).
|
|
161
124
|
|
|
162
125
|
```tsx
|
|
163
126
|
import { SystemBars } from "react-native-edge-to-edge";
|
|
@@ -200,3 +163,56 @@ const entry: SystemBarsEntry = SystemBars.replaceStackEntry(
|
|
|
200
163
|
props /*: SystemBarsProps */,
|
|
201
164
|
);
|
|
202
165
|
```
|
|
166
|
+
|
|
167
|
+
## Third-party
|
|
168
|
+
|
|
169
|
+
Many libraries expose options that you can set to account for the transparency of status and navigation bars. For example, the [`useHideAnimation`](https://github.com/zoontek/react-native-bootsplash?tab=readme-ov-file#usehideanimation) hook in `react-native-bootsplash` has `statusBarTranslucent` and `navigationBarTranslucent` options, the [`useAnimatedKeyboard`](https://docs.swmansion.com/react-native-reanimated/docs/device/useAnimatedKeyboard) in `react-native-reanimated` has an `isStatusBarTranslucentAndroid` option, etc.
|
|
170
|
+
|
|
171
|
+
> [!IMPORTANT]
|
|
172
|
+
> Until third-party libraries officially add support for `react-native-edge-to-edge` to set these options automatically, you may need to adjust these options to prevent interference with the library.
|
|
173
|
+
|
|
174
|
+
For library authors, we provide a lightweight package called `react-native-is-edge-to-edge` (note the `-is-`!), which checks whether `react-native-edge-to-edge` is installed, making it easy to update your library accordingly:
|
|
175
|
+
|
|
176
|
+
```ts
|
|
177
|
+
import {
|
|
178
|
+
controlEdgeToEdgeValues,
|
|
179
|
+
isEdgeToEdge,
|
|
180
|
+
} from "react-native-is-edge-to-edge";
|
|
181
|
+
|
|
182
|
+
const EDGE_TO_EDGE = isEdgeToEdge();
|
|
183
|
+
|
|
184
|
+
function MyAwesomeLibraryComponent({
|
|
185
|
+
statusBarTranslucent,
|
|
186
|
+
navigationBarTranslucent,
|
|
187
|
+
}) {
|
|
188
|
+
if (__DEV__) {
|
|
189
|
+
// warn the user once about unnecessary defined values
|
|
190
|
+
controlEdgeToEdgeValues({
|
|
191
|
+
statusBarTranslucent,
|
|
192
|
+
navigationBarTranslucent,
|
|
193
|
+
});
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
return (
|
|
197
|
+
<MyAwesomeLibraryNativeComponent
|
|
198
|
+
statusBarTranslucent={EDGE_TO_EDGE || statusBarTranslucent}
|
|
199
|
+
navigationBarTranslucent={EDGE_TO_EDGE || navigationBarTranslucent}
|
|
200
|
+
// …
|
|
201
|
+
/>
|
|
202
|
+
);
|
|
203
|
+
}
|
|
204
|
+
```
|
|
205
|
+
|
|
206
|
+
If you want to check for the library's presence on the native side to bypass certain parts of your code, consider using this small utility:
|
|
207
|
+
|
|
208
|
+
```kotlin
|
|
209
|
+
object EdgeToEdge {
|
|
210
|
+
// we cannot detect edge-to-edge, but we can detect react-native-edge-to-edge install
|
|
211
|
+
val ENABLED: Boolean = try {
|
|
212
|
+
Class.forName("com.zoontek.rnedgetoedge.EdgeToEdgePackage")
|
|
213
|
+
true
|
|
214
|
+
} catch (exception: ClassNotFoundException) {
|
|
215
|
+
false
|
|
216
|
+
}
|
|
217
|
+
}
|
|
218
|
+
```
|
|
@@ -18,6 +18,7 @@ import com.facebook.react.common.ReactConstants
|
|
|
18
18
|
object EdgeToEdgeModuleImpl {
|
|
19
19
|
const val NAME = "RNEdgeToEdge"
|
|
20
20
|
|
|
21
|
+
@Suppress("DEPRECATION")
|
|
21
22
|
fun applyEdgeToEdge(reactContext: ReactApplicationContext) {
|
|
22
23
|
val activity = reactContext.currentActivity
|
|
23
24
|
?: return FLog.w(ReactConstants.TAG, "$NAME: Ignored, current activity is null.")
|
|
@@ -3,4 +3,8 @@
|
|
|
3
3
|
<public name="Theme.EdgeToEdge" type="style" />
|
|
4
4
|
<public name="Theme.EdgeToEdge.Material2" type="style" />
|
|
5
5
|
<public name="Theme.EdgeToEdge.Material3" type="style" />
|
|
6
|
+
|
|
7
|
+
<public name="Theme.EdgeToEdge.Light" type="style" />
|
|
8
|
+
<public name="Theme.EdgeToEdge.Material2.Light" type="style" />
|
|
9
|
+
<public name="Theme.EdgeToEdge.Material3.Light" type="style" />
|
|
6
10
|
</resources>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<?xml version="1.0" encoding="utf-8"?>
|
|
2
2
|
<resources>
|
|
3
|
-
<style name="Theme.EdgeToEdge.Common" parent="Theme.AppCompat.DayNight.NoActionBar">
|
|
3
|
+
<style name="Theme.EdgeToEdge.DayNight.Common" parent="Theme.AppCompat.DayNight.NoActionBar">
|
|
4
4
|
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
|
|
5
5
|
<item name="android:fitsSystemWindows">false</item>
|
|
6
6
|
<item name="android:navigationBarColor">@color/navigationBarColor</item>
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
<item name="android:windowLightStatusBar">@bool/windowLightSystemBars</item>
|
|
9
9
|
</style>
|
|
10
10
|
|
|
11
|
-
<style name="Theme.EdgeToEdge.Material2.Common" parent="Theme.MaterialComponents.DayNight.NoActionBar">
|
|
11
|
+
<style name="Theme.EdgeToEdge.Material2.DayNight.Common" parent="Theme.MaterialComponents.DayNight.NoActionBar">
|
|
12
12
|
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
|
|
13
13
|
<item name="android:fitsSystemWindows">false</item>
|
|
14
14
|
<item name="android:navigationBarColor">@color/navigationBarColor</item>
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
<item name="android:windowLightStatusBar">@bool/windowLightSystemBars</item>
|
|
17
17
|
</style>
|
|
18
18
|
|
|
19
|
-
<style name="Theme.EdgeToEdge.Material3.Common" parent="Theme.Material3.DayNight.NoActionBar">
|
|
19
|
+
<style name="Theme.EdgeToEdge.Material3.DayNight.Common" parent="Theme.Material3.DayNight.NoActionBar">
|
|
20
20
|
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
|
|
21
21
|
<item name="android:fitsSystemWindows">false</item>
|
|
22
22
|
<item name="android:navigationBarColor">@color/navigationBarColor</item>
|
|
@@ -24,7 +24,35 @@
|
|
|
24
24
|
<item name="android:windowLightStatusBar">@bool/windowLightSystemBars</item>
|
|
25
25
|
</style>
|
|
26
26
|
|
|
27
|
-
<style name="Theme.EdgeToEdge" parent="Theme.
|
|
28
|
-
|
|
29
|
-
|
|
27
|
+
<style name="Theme.EdgeToEdge.Light.Common" parent="Theme.AppCompat.Light.NoActionBar">
|
|
28
|
+
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
|
|
29
|
+
<item name="android:fitsSystemWindows">false</item>
|
|
30
|
+
<item name="android:navigationBarColor">@color/navigationBarColor</item>
|
|
31
|
+
<item name="android:statusBarColor">@android:color/transparent</item>
|
|
32
|
+
<item name="android:windowLightStatusBar">@bool/windowLightSystemBars</item>
|
|
33
|
+
</style>
|
|
34
|
+
|
|
35
|
+
<style name="Theme.EdgeToEdge.Material2.Light.Common" parent="Theme.MaterialComponents.Light.NoActionBar">
|
|
36
|
+
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
|
|
37
|
+
<item name="android:fitsSystemWindows">false</item>
|
|
38
|
+
<item name="android:navigationBarColor">@color/navigationBarColor</item>
|
|
39
|
+
<item name="android:statusBarColor">@android:color/transparent</item>
|
|
40
|
+
<item name="android:windowLightStatusBar">@bool/windowLightSystemBars</item>
|
|
41
|
+
</style>
|
|
42
|
+
|
|
43
|
+
<style name="Theme.EdgeToEdge.Material3.Light.Common" parent="Theme.Material3.Light.NoActionBar">
|
|
44
|
+
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
|
|
45
|
+
<item name="android:fitsSystemWindows">false</item>
|
|
46
|
+
<item name="android:navigationBarColor">@color/navigationBarColor</item>
|
|
47
|
+
<item name="android:statusBarColor">@android:color/transparent</item>
|
|
48
|
+
<item name="android:windowLightStatusBar">@bool/windowLightSystemBars</item>
|
|
49
|
+
</style>
|
|
50
|
+
|
|
51
|
+
<style name="Theme.EdgeToEdge" parent="Theme.EdgeToEdge.DayNight.Common" />
|
|
52
|
+
<style name="Theme.EdgeToEdge.Material2" parent="Theme.EdgeToEdge.Material2.DayNight.Common" />
|
|
53
|
+
<style name="Theme.EdgeToEdge.Material3" parent="Theme.EdgeToEdge.Material3.DayNight.Common" />
|
|
54
|
+
|
|
55
|
+
<style name="Theme.EdgeToEdge.Light" parent="Theme.EdgeToEdge.Light.Common" />
|
|
56
|
+
<style name="Theme.EdgeToEdge.Material2.Light" parent="Theme.EdgeToEdge.Material2.Light.Common" />
|
|
57
|
+
<style name="Theme.EdgeToEdge.Material3.Light" parent="Theme.EdgeToEdge.Material3.Light.Common" />
|
|
30
58
|
</resources>
|
|
@@ -1,16 +1,31 @@
|
|
|
1
1
|
<?xml version="1.0" encoding="utf-8"?>
|
|
2
2
|
<resources>
|
|
3
|
-
<style name="Theme.EdgeToEdge" parent="Theme.EdgeToEdge.Common">
|
|
3
|
+
<style name="Theme.EdgeToEdge" parent="Theme.EdgeToEdge.DayNight.Common">
|
|
4
4
|
<item name="android:windowLightNavigationBar">@bool/windowLightSystemBars</item>
|
|
5
5
|
<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
|
|
6
6
|
</style>
|
|
7
7
|
|
|
8
|
-
<style name="Theme.EdgeToEdge.Material2" parent="Theme.EdgeToEdge.Material2.Common">
|
|
8
|
+
<style name="Theme.EdgeToEdge.Material2" parent="Theme.EdgeToEdge.Material2.DayNight.Common">
|
|
9
9
|
<item name="android:windowLightNavigationBar">@bool/windowLightSystemBars</item>
|
|
10
10
|
<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
|
|
11
11
|
</style>
|
|
12
12
|
|
|
13
|
-
<style name="Theme.EdgeToEdge.Material3" parent="Theme.EdgeToEdge.Material3.Common">
|
|
13
|
+
<style name="Theme.EdgeToEdge.Material3" parent="Theme.EdgeToEdge.Material3.DayNight.Common">
|
|
14
|
+
<item name="android:windowLightNavigationBar">@bool/windowLightSystemBars</item>
|
|
15
|
+
<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
|
|
16
|
+
</style>
|
|
17
|
+
|
|
18
|
+
<style name="Theme.EdgeToEdge.Light" parent="Theme.EdgeToEdge.Light.Common">
|
|
19
|
+
<item name="android:windowLightNavigationBar">@bool/windowLightSystemBars</item>
|
|
20
|
+
<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
|
|
21
|
+
</style>
|
|
22
|
+
|
|
23
|
+
<style name="Theme.EdgeToEdge.Material2.Light" parent="Theme.EdgeToEdge.Material2.Light.Common">
|
|
24
|
+
<item name="android:windowLightNavigationBar">@bool/windowLightSystemBars</item>
|
|
25
|
+
<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
|
|
26
|
+
</style>
|
|
27
|
+
|
|
28
|
+
<style name="Theme.EdgeToEdge.Material3.Light" parent="Theme.EdgeToEdge.Material3.Light.Common">
|
|
14
29
|
<item name="android:windowLightNavigationBar">@bool/windowLightSystemBars</item>
|
|
15
30
|
<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
|
|
16
31
|
</style>
|
|
@@ -1,20 +1,41 @@
|
|
|
1
1
|
<?xml version="1.0" encoding="utf-8"?>
|
|
2
2
|
<resources>
|
|
3
|
-
<style name="Theme.EdgeToEdge" parent="Theme.EdgeToEdge.Common">
|
|
3
|
+
<style name="Theme.EdgeToEdge" parent="Theme.EdgeToEdge.DayNight.Common">
|
|
4
4
|
<item name="android:windowLightNavigationBar">@bool/windowLightSystemBars</item>
|
|
5
5
|
<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
|
|
6
6
|
<item name="android:enforceStatusBarContrast">false</item>
|
|
7
7
|
<item name="android:enforceNavigationBarContrast">true</item>
|
|
8
8
|
</style>
|
|
9
9
|
|
|
10
|
-
<style name="Theme.EdgeToEdge.Material2" parent="Theme.EdgeToEdge.Material2.Common">
|
|
10
|
+
<style name="Theme.EdgeToEdge.Material2" parent="Theme.EdgeToEdge.Material2.DayNight.Common">
|
|
11
11
|
<item name="android:windowLightNavigationBar">@bool/windowLightSystemBars</item>
|
|
12
12
|
<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
|
|
13
13
|
<item name="android:enforceStatusBarContrast">false</item>
|
|
14
14
|
<item name="android:enforceNavigationBarContrast">true</item>
|
|
15
15
|
</style>
|
|
16
16
|
|
|
17
|
-
<style name="Theme.EdgeToEdge.Material3" parent="Theme.EdgeToEdge.Material3.Common">
|
|
17
|
+
<style name="Theme.EdgeToEdge.Material3" parent="Theme.EdgeToEdge.Material3.DayNight.Common">
|
|
18
|
+
<item name="android:windowLightNavigationBar">@bool/windowLightSystemBars</item>
|
|
19
|
+
<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
|
|
20
|
+
<item name="android:enforceStatusBarContrast">false</item>
|
|
21
|
+
<item name="android:enforceNavigationBarContrast">true</item>
|
|
22
|
+
</style>
|
|
23
|
+
|
|
24
|
+
<style name="Theme.EdgeToEdge.Light" parent="Theme.EdgeToEdge.Light.Common">
|
|
25
|
+
<item name="android:windowLightNavigationBar">@bool/windowLightSystemBars</item>
|
|
26
|
+
<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
|
|
27
|
+
<item name="android:enforceStatusBarContrast">false</item>
|
|
28
|
+
<item name="android:enforceNavigationBarContrast">true</item>
|
|
29
|
+
</style>
|
|
30
|
+
|
|
31
|
+
<style name="Theme.EdgeToEdge.Material2.Light" parent="Theme.EdgeToEdge.Material2.Light.Common">
|
|
32
|
+
<item name="android:windowLightNavigationBar">@bool/windowLightSystemBars</item>
|
|
33
|
+
<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
|
|
34
|
+
<item name="android:enforceStatusBarContrast">false</item>
|
|
35
|
+
<item name="android:enforceNavigationBarContrast">true</item>
|
|
36
|
+
</style>
|
|
37
|
+
|
|
38
|
+
<style name="Theme.EdgeToEdge.Material3.Light" parent="Theme.EdgeToEdge.Material3.Light.Common">
|
|
18
39
|
<item name="android:windowLightNavigationBar">@bool/windowLightSystemBars</item>
|
|
19
40
|
<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
|
|
20
41
|
<item name="android:enforceStatusBarContrast">false</item>
|
|
@@ -1,20 +1,41 @@
|
|
|
1
1
|
<?xml version="1.0" encoding="utf-8"?>
|
|
2
2
|
<resources>
|
|
3
|
-
<style name="Theme.EdgeToEdge" parent="Theme.EdgeToEdge.Common">
|
|
3
|
+
<style name="Theme.EdgeToEdge" parent="Theme.EdgeToEdge.DayNight.Common">
|
|
4
4
|
<item name="android:windowLightNavigationBar">@bool/windowLightSystemBars</item>
|
|
5
5
|
<item name="android:windowLayoutInDisplayCutoutMode">always</item>
|
|
6
6
|
<item name="android:enforceStatusBarContrast">false</item>
|
|
7
7
|
<item name="android:enforceNavigationBarContrast">true</item>
|
|
8
8
|
</style>
|
|
9
9
|
|
|
10
|
-
<style name="Theme.EdgeToEdge.Material2" parent="Theme.EdgeToEdge.Material2.Common">
|
|
10
|
+
<style name="Theme.EdgeToEdge.Material2" parent="Theme.EdgeToEdge.Material2.DayNight.Common">
|
|
11
11
|
<item name="android:windowLightNavigationBar">@bool/windowLightSystemBars</item>
|
|
12
12
|
<item name="android:windowLayoutInDisplayCutoutMode">always</item>
|
|
13
13
|
<item name="android:enforceStatusBarContrast">false</item>
|
|
14
14
|
<item name="android:enforceNavigationBarContrast">true</item>
|
|
15
15
|
</style>
|
|
16
16
|
|
|
17
|
-
<style name="Theme.EdgeToEdge.Material3" parent="Theme.EdgeToEdge.Material3.Common">
|
|
17
|
+
<style name="Theme.EdgeToEdge.Material3" parent="Theme.EdgeToEdge.Material3.DayNight.Common">
|
|
18
|
+
<item name="android:windowLightNavigationBar">@bool/windowLightSystemBars</item>
|
|
19
|
+
<item name="android:windowLayoutInDisplayCutoutMode">always</item>
|
|
20
|
+
<item name="android:enforceStatusBarContrast">false</item>
|
|
21
|
+
<item name="android:enforceNavigationBarContrast">true</item>
|
|
22
|
+
</style>
|
|
23
|
+
|
|
24
|
+
<style name="Theme.EdgeToEdge.Light" parent="Theme.EdgeToEdge.Light.Common">
|
|
25
|
+
<item name="android:windowLightNavigationBar">@bool/windowLightSystemBars</item>
|
|
26
|
+
<item name="android:windowLayoutInDisplayCutoutMode">always</item>
|
|
27
|
+
<item name="android:enforceStatusBarContrast">false</item>
|
|
28
|
+
<item name="android:enforceNavigationBarContrast">true</item>
|
|
29
|
+
</style>
|
|
30
|
+
|
|
31
|
+
<style name="Theme.EdgeToEdge.Material2.Light" parent="Theme.EdgeToEdge.Material2.Light.Common">
|
|
32
|
+
<item name="android:windowLightNavigationBar">@bool/windowLightSystemBars</item>
|
|
33
|
+
<item name="android:windowLayoutInDisplayCutoutMode">always</item>
|
|
34
|
+
<item name="android:enforceStatusBarContrast">false</item>
|
|
35
|
+
<item name="android:enforceNavigationBarContrast">true</item>
|
|
36
|
+
</style>
|
|
37
|
+
|
|
38
|
+
<style name="Theme.EdgeToEdge.Material3.Light" parent="Theme.EdgeToEdge.Material3.Light.Common">
|
|
18
39
|
<item name="android:windowLightNavigationBar">@bool/windowLightSystemBars</item>
|
|
19
40
|
<item name="android:windowLayoutInDisplayCutoutMode">always</item>
|
|
20
41
|
<item name="android:enforceStatusBarContrast">false</item>
|
|
@@ -58,43 +58,45 @@ let currentMergedEntries = null;
|
|
|
58
58
|
* Updates the native system bars with the entries from the stack.
|
|
59
59
|
*/
|
|
60
60
|
function updateEntriesStack() {
|
|
61
|
-
if (
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
if (
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
61
|
+
if (_reactNative.Platform.OS === "android" || _reactNative.Platform.OS === "ios") {
|
|
62
|
+
if (updateImmediate != null) {
|
|
63
|
+
clearImmediate(updateImmediate);
|
|
64
|
+
}
|
|
65
|
+
updateImmediate = setImmediate(() => {
|
|
66
|
+
const mergedEntries = mergeEntriesStack(entriesStack);
|
|
67
|
+
if (mergedEntries != null) {
|
|
68
|
+
const {
|
|
69
|
+
statusBarHidden,
|
|
70
|
+
navigationBarHidden
|
|
71
|
+
} = mergedEntries;
|
|
72
|
+
const statusBarStyle = mergedEntries.statusBarStyle === "auto" ? getColorScheme() === "light" ? "dark" : "light" : mergedEntries.statusBarStyle;
|
|
73
|
+
if (currentMergedEntries?.statusBarStyle !== statusBarStyle || currentMergedEntries?.statusBarHidden !== statusBarHidden || currentMergedEntries?.navigationBarHidden !== navigationBarHidden) {
|
|
74
|
+
if (_reactNative.Platform.OS === "android") {
|
|
75
|
+
_NativeEdgeToEdgeModule.default?.setSystemBarsConfig({
|
|
76
|
+
statusBarStyle,
|
|
77
|
+
statusBarHidden,
|
|
78
|
+
navigationBarHidden
|
|
79
|
+
});
|
|
80
|
+
} else {
|
|
81
|
+
// Emulate android behavior with react-native StatusBar
|
|
82
|
+
if (statusBarStyle != null) {
|
|
83
|
+
_reactNative.StatusBar.setBarStyle(`${statusBarStyle}-content`, true);
|
|
84
|
+
}
|
|
85
|
+
if (statusBarHidden != null) {
|
|
86
|
+
_reactNative.StatusBar.setHidden(statusBarHidden, "fade"); // 'slide' doesn't work in this context
|
|
87
|
+
}
|
|
86
88
|
}
|
|
87
89
|
}
|
|
90
|
+
currentMergedEntries = {
|
|
91
|
+
statusBarStyle,
|
|
92
|
+
statusBarHidden,
|
|
93
|
+
navigationBarHidden
|
|
94
|
+
};
|
|
95
|
+
} else {
|
|
96
|
+
currentMergedEntries = null;
|
|
88
97
|
}
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
statusBarHidden,
|
|
92
|
-
navigationBarHidden
|
|
93
|
-
};
|
|
94
|
-
} else {
|
|
95
|
-
currentMergedEntries = null;
|
|
96
|
-
}
|
|
97
|
-
});
|
|
98
|
+
});
|
|
99
|
+
}
|
|
98
100
|
}
|
|
99
101
|
|
|
100
102
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","require","_reactNative","_NativeEdgeToEdgeModule","_interopRequireDefault","e","__esModule","default","getColorScheme","Appearance","mergeEntriesStack","entriesStack","mergedEntry","reduce","prev","cur","prop","statusBarStyle","undefined","statusBarHidden","navigationBarHidden","createStackEntry","props","style","hidden","statusBar","navigationBar","updateImmediate","currentMergedEntries","updateEntriesStack","
|
|
1
|
+
{"version":3,"names":["_react","require","_reactNative","_NativeEdgeToEdgeModule","_interopRequireDefault","e","__esModule","default","getColorScheme","Appearance","mergeEntriesStack","entriesStack","mergedEntry","reduce","prev","cur","prop","statusBarStyle","undefined","statusBarHidden","navigationBarHidden","createStackEntry","props","style","hidden","statusBar","navigationBar","updateImmediate","currentMergedEntries","updateEntriesStack","Platform","OS","clearImmediate","setImmediate","mergedEntries","NativeEdgeToEdgeModule","setSystemBarsConfig","StatusBar","setBarStyle","setHidden","pushStackEntry","entry","push","popStackEntry","index","indexOf","splice","replaceStackEntry","newEntry","SystemBars","stableProps","useMemo","colorScheme","useColorScheme","stackEntryRef","useRef","useEffect","current"],"sourceRoot":"../../src","sources":["SystemBars.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,uBAAA,GAAAC,sBAAA,CAAAH,OAAA;AAAoE,SAAAG,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAGpE,SAASG,cAAcA,CAAA,EAAqB;EAC1C,OAAOC,uBAAU,EAAED,cAAc,CAAC,CAAC,IAAI,OAAO;AAChD;;AAEA;AACA;AACA;AACA,SAASE,iBAAiBA,CACxBC,YAA+B,EACP;EACxB,MAAMC,WAAW,GAAGD,YAAY,CAACE,MAAM,CACrC,CAACC,IAAI,EAAEC,GAAG,KAAK;IACb,KAAK,MAAMC,IAAI,IAAID,GAAG,EAAE;MACtB,IAAIA,GAAG,CAACC,IAAI,CAA0B,IAAI,IAAI,EAAE;QAC9C;QACAF,IAAI,CAACE,IAAI,CAAC,GAAGD,GAAG,CAACC,IAAI,CAAC;MACxB;IACF;IACA,OAAOF,IAAI;EACb,CAAC,EACD;IACEG,cAAc,EAAEC,SAAS;IACzBC,eAAe,EAAED,SAAS;IAC1BE,mBAAmB,EAAEF;EACvB,CACF,CAAC;EAED,IACEN,WAAW,CAACK,cAAc,IAAI,IAAI,IAClCL,WAAW,CAACO,eAAe,IAAI,IAAI,IACnCP,WAAW,CAACQ,mBAAmB,IAAI,IAAI,EACvC;IACA,OAAO,IAAI;EACb,CAAC,MAAM;IACL,OAAOR,WAAW;EACpB;AACF;;AAEA;AACA;AACA;AACA,SAASS,gBAAgBA,CAACC,KAAsB,EAAmB;EACjE,OAAO;IACLL,cAAc,EAAEK,KAAK,CAACC,KAAK;IAC3BJ,eAAe,EACb,OAAOG,KAAK,CAACE,MAAM,KAAK,SAAS,GAC7BF,KAAK,CAACE,MAAM,GACZF,KAAK,CAACE,MAAM,EAAEC,SAAS;IAC7BL,mBAAmB,EACjB,OAAOE,KAAK,CAACE,MAAM,KAAK,SAAS,GAC7BF,KAAK,CAACE,MAAM,GACZF,KAAK,CAACE,MAAM,EAAEE;EACtB,CAAC;AACH;AAEA,MAAMf,YAA+B,GAAG,EAAE;;AAE1C;AACA,IAAIgB,eAAwC,GAAG,IAAI;;AAEnD;AACA,IAAIC,oBAII,GAAG,IAAI;;AAEf;AACA;AACA;AACA,SAASC,kBAAkBA,CAAA,EAAG;EAC5B,IAAIC,qBAAQ,CAACC,EAAE,KAAK,SAAS,IAAID,qBAAQ,CAACC,EAAE,KAAK,KAAK,EAAE;IACtD,IAAIJ,eAAe,IAAI,IAAI,EAAE;MAC3BK,cAAc,CAACL,eAAe,CAAC;IACjC;IAEAA,eAAe,GAAGM,YAAY,CAAC,MAAM;MACnC,MAAMC,aAAa,GAAGxB,iBAAiB,CAACC,YAAY,CAAC;MAErD,IAAIuB,aAAa,IAAI,IAAI,EAAE;QACzB,MAAM;UAAEf,eAAe;UAAEC;QAAoB,CAAC,GAAGc,aAAa;QAE9D,MAAMjB,cAA4C,GAChDiB,aAAa,CAACjB,cAAc,KAAK,MAAM,GACnCT,cAAc,CAAC,CAAC,KAAK,OAAO,GAC1B,MAAM,GACN,OAAO,GACT0B,aAAa,CAACjB,cAAc;QAElC,IACEW,oBAAoB,EAAEX,cAAc,KAAKA,cAAc,IACvDW,oBAAoB,EAAET,eAAe,KAAKA,eAAe,IACzDS,oBAAoB,EAAER,mBAAmB,KAAKA,mBAAmB,EACjE;UACA,IAAIU,qBAAQ,CAACC,EAAE,KAAK,SAAS,EAAE;YAC7BI,+BAAsB,EAAEC,mBAAmB,CAAC;cAC1CnB,cAAc;cACdE,eAAe;cACfC;YACF,CAAC,CAAC;UACJ,CAAC,MAAM;YACL;YACA,IAAIH,cAAc,IAAI,IAAI,EAAE;cAC1BoB,sBAAS,CAACC,WAAW,CAAC,GAAGrB,cAAc,UAAU,EAAE,IAAI,CAAC;YAC1D;YACA,IAAIE,eAAe,IAAI,IAAI,EAAE;cAC3BkB,sBAAS,CAACE,SAAS,CAACpB,eAAe,EAAE,MAAM,CAAC,CAAC,CAAC;YAChD;UACF;QACF;QAEAS,oBAAoB,GAAG;UACrBX,cAAc;UACdE,eAAe;UACfC;QACF,CAAC;MACH,CAAC,MAAM;QACLQ,oBAAoB,GAAG,IAAI;MAC7B;IACF,CAAC,CAAC;EACJ;AACF;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,SAASY,cAAcA,CAAClB,KAAsB,EAAmB;EAC/D,MAAMmB,KAAK,GAAGpB,gBAAgB,CAACC,KAAK,CAAC;EACrCX,YAAY,CAAC+B,IAAI,CAACD,KAAK,CAAC;EACxBZ,kBAAkB,CAAC,CAAC;EACpB,OAAOY,KAAK;AACd;;AAEA;AACA;AACA;AACA;AACA;AACA,SAASE,aAAaA,CAACF,KAAsB,EAAQ;EACnD,MAAMG,KAAK,GAAGjC,YAAY,CAACkC,OAAO,CAACJ,KAAK,CAAC;EACzC,IAAIG,KAAK,KAAK,CAAC,CAAC,EAAE;IAChBjC,YAAY,CAACmC,MAAM,CAACF,KAAK,EAAE,CAAC,CAAC;EAC/B;EACAf,kBAAkB,CAAC,CAAC;AACtB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,SAASkB,iBAAiBA,CACxBN,KAAsB,EACtBnB,KAAsB,EACL;EACjB,MAAM0B,QAAQ,GAAG3B,gBAAgB,CAACC,KAAK,CAAC;EACxC,MAAMsB,KAAK,GAAGjC,YAAY,CAACkC,OAAO,CAACJ,KAAK,CAAC;EACzC,IAAIG,KAAK,KAAK,CAAC,CAAC,EAAE;IAChBjC,YAAY,CAACiC,KAAK,CAAC,GAAGI,QAAQ;EAChC;EACAnB,kBAAkB,CAAC,CAAC;EACpB,OAAOmB,QAAQ;AACjB;AAEO,SAASC,UAAUA,CAAC;EAAEzB,MAAM;EAAED;AAAuB,CAAC,EAAE;EAC7D,MAAMJ,eAAe,GACnB,OAAOK,MAAM,KAAK,SAAS,GAAGA,MAAM,GAAGA,MAAM,EAAEC,SAAS;EAC1D,MAAML,mBAAmB,GACvB,OAAOI,MAAM,KAAK,SAAS,GAAGA,MAAM,GAAGA,MAAM,EAAEE,aAAa;EAE9D,MAAMwB,WAAW,GAAG,IAAAC,cAAO,EACzB,OAAO;IACL3B,MAAM,EACJL,eAAe,KAAKC,mBAAmB,GACnCD,eAAe,GACf;MAAEM,SAAS,EAAEN,eAAe;MAAEO,aAAa,EAAEN;IAAoB,CAAC;IACxEG;EACF,CAAC,CAAC,EACF,CAACA,KAAK,EAAEJ,eAAe,EAAEC,mBAAmB,CAC9C,CAAC;EAED,MAAMgC,WAAW,GAAG,IAAAC,2BAAc,EAAC,CAAC;EACpC,MAAMC,aAAa,GAAG,IAAAC,aAAM,EAAyB,IAAI,CAAC;EAE1D,IAAAC,gBAAS,EAAC,MAAM;IACd;IACA;IACA;IACA;IACAF,aAAa,CAACG,OAAO,GAAGjB,cAAc,CAACU,WAAW,CAAC;IAEnD,OAAO,MAAM;MACX;MACA;MACA,IAAII,aAAa,CAACG,OAAO,EAAE;QACzBd,aAAa,CAACW,aAAa,CAACG,OAAO,CAAC;MACtC;IACF,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAEN,IAAAD,gBAAS,EAAC,MAAM;IACd,IAAIF,aAAa,CAACG,OAAO,EAAE;MACzBH,aAAa,CAACG,OAAO,GAAGV,iBAAiB,CACvCO,aAAa,CAACG,OAAO,EACrBP,WACF,CAAC;IACH;EACF,CAAC,EAAE,CAACE,WAAW,EAAEF,WAAW,CAAC,CAAC;EAE9B,OAAO,IAAI;AACb;AAEAD,UAAU,CAACT,cAAc,GAAGA,cAAc;AAC1CS,UAAU,CAACN,aAAa,GAAGA,aAAa;AACxCM,UAAU,CAACF,iBAAiB,GAAGA,iBAAiB","ignoreList":[]}
|
package/dist/commonjs/expo.js
CHANGED
|
@@ -7,8 +7,12 @@ exports.default = void 0;
|
|
|
7
7
|
var _configPlugins = require("@expo/config-plugins");
|
|
8
8
|
const withAndroidEdgeToEdgeTheme = (config, props = {}) => {
|
|
9
9
|
const themes = {
|
|
10
|
+
Default: "Theme.EdgeToEdge",
|
|
10
11
|
Material2: "Theme.EdgeToEdge.Material2",
|
|
11
|
-
Material3: "Theme.EdgeToEdge.Material3"
|
|
12
|
+
Material3: "Theme.EdgeToEdge.Material3",
|
|
13
|
+
Light: "Theme.EdgeToEdge.Light",
|
|
14
|
+
"Material2.Light": "Theme.EdgeToEdge.Material2.Light",
|
|
15
|
+
"Material3.Light": "Theme.EdgeToEdge.Material3.Light"
|
|
12
16
|
};
|
|
13
17
|
const ignoreList = new Set(["android:enforceNavigationBarContrast", "android:enforceStatusBarContrast", "android:fitsSystemWindows", "android:navigationBarColor", "android:statusBarColor", "android:windowDrawsSystemBarBackgrounds", "android:windowLayoutInDisplayCutoutMode", "android:windowLightNavigationBar", "android:windowLightStatusBar", "android:windowTranslucentNavigation", "android:windowTranslucentStatus"]);
|
|
14
18
|
return (0, _configPlugins.withAndroidStyles)(config, config => {
|
|
@@ -27,7 +31,7 @@ const withAndroidEdgeToEdgeTheme = (config, props = {}) => {
|
|
|
27
31
|
} = android;
|
|
28
32
|
config.modResults.resources.style = config.modResults.resources.style?.map(style => {
|
|
29
33
|
if (style.$.name === "AppTheme") {
|
|
30
|
-
style.$.parent = themes[parentTheme] ?? "
|
|
34
|
+
style.$.parent = themes[parentTheme] ?? themes["Default"];
|
|
31
35
|
if (style.item != null) {
|
|
32
36
|
style.item = style.item.filter(item => !ignoreList.has(item.$.name));
|
|
33
37
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_configPlugins","require","withAndroidEdgeToEdgeTheme","config","props","themes","Material2","Material3","ignoreList","Set","withAndroidStyles","androidStatusBar","userInterfaceStyle","barStyle","android","parentTheme","modResults","resources","style","map","$","name","parent","item","filter","has","push","_","String","_default","exports","default","createRunOncePlugin"],"sourceRoot":"../../src","sources":["expo.ts"],"mappings":";;;;;;AAAA,IAAAA,cAAA,GAAAC,OAAA;
|
|
1
|
+
{"version":3,"names":["_configPlugins","require","withAndroidEdgeToEdgeTheme","config","props","themes","Default","Material2","Material3","Light","ignoreList","Set","withAndroidStyles","androidStatusBar","userInterfaceStyle","barStyle","android","parentTheme","modResults","resources","style","map","$","name","parent","item","filter","has","push","_","String","_default","exports","default","createRunOncePlugin"],"sourceRoot":"../../src","sources":["expo.ts"],"mappings":";;;;;;AAAA,IAAAA,cAAA,GAAAC,OAAA;AAgBA,MAAMC,0BAA+C,GAAGA,CACtDC,MAAM,EACNC,KAAK,GAAG,CAAC,CAAC,KACP;EACH,MAAMC,MAA6B,GAAG;IACpCC,OAAO,EAAE,kBAAkB;IAC3BC,SAAS,EAAE,4BAA4B;IACvCC,SAAS,EAAE,4BAA4B;IAEvCC,KAAK,EAAE,wBAAwB;IAC/B,iBAAiB,EAAE,kCAAkC;IACrD,iBAAiB,EAAE;EACrB,CAAC;EAED,MAAMC,UAAU,GAAG,IAAIC,GAAG,CAAC,CACzB,sCAAsC,EACtC,kCAAkC,EAClC,2BAA2B,EAC3B,4BAA4B,EAC5B,wBAAwB,EACxB,yCAAyC,EACzC,yCAAyC,EACzC,kCAAkC,EAClC,8BAA8B,EAC9B,qCAAqC,EACrC,iCAAiC,CAClC,CAAC;EAEF,OAAO,IAAAC,gCAAiB,EAACT,MAAM,EAAGA,MAAM,IAAK;IAC3C,MAAM;MAAEU,gBAAgB,GAAG,CAAC,CAAC;MAAEC,kBAAkB,GAAG;IAAQ,CAAC,GAAGX,MAAM;IACtE,MAAM;MAAEY;IAAS,CAAC,GAAGF,gBAAgB;IACrC,MAAM;MAAEG,OAAO,GAAG,CAAC;IAAE,CAAC,GAAGZ,KAAK;IAC9B,MAAM;MAAEa,WAAW,GAAG;IAAU,CAAC,GAAGD,OAAO;IAE3Cb,MAAM,CAACe,UAAU,CAACC,SAAS,CAACC,KAAK,GAAGjB,MAAM,CAACe,UAAU,CAACC,SAAS,CAACC,KAAK,EAAEC,GAAG,CACvED,KAAK,IAAmB;MACvB,IAAIA,KAAK,CAACE,CAAC,CAACC,IAAI,KAAK,UAAU,EAAE;QAC/BH,KAAK,CAACE,CAAC,CAACE,MAAM,GAAGnB,MAAM,CAACY,WAAW,CAAC,IAAIZ,MAAM,CAAC,SAAS,CAAC;QAEzD,IAAIe,KAAK,CAACK,IAAI,IAAI,IAAI,EAAE;UACtBL,KAAK,CAACK,IAAI,GAAGL,KAAK,CAACK,IAAI,CAACC,MAAM,CAC3BD,IAAI,IAAK,CAACf,UAAU,CAACiB,GAAG,CAACF,IAAI,CAACH,CAAC,CAACC,IAAI,CACvC,CAAC;QACH;QAEA,IAAIR,QAAQ,IAAI,IAAI,EAAE;UACpBK,KAAK,CAACK,IAAI,CAACG,IAAI,CAAC;YACdN,CAAC,EAAE;cAAEC,IAAI,EAAE;YAA+B,CAAC;YAC3CM,CAAC,EAAEC,MAAM,CAACf,QAAQ,KAAK,cAAc;UACvC,CAAC,CAAC;QACJ,CAAC,MAAM,IAAID,kBAAkB,KAAK,WAAW,EAAE;UAC7CM,KAAK,CAACK,IAAI,CAACG,IAAI,CAAC;YACdN,CAAC,EAAE;cAAEC,IAAI,EAAE;YAA+B,CAAC;YAC3CM,CAAC,EAAEC,MAAM,CAAChB,kBAAkB,KAAK,OAAO;UAC1C,CAAC,CAAC;QACJ;MACF;MAEA,OAAOM,KAAK;IACd,CACF,CAAC;IAED,OAAOjB,MAAM;EACf,CAAC,CAAC;AACJ,CAAC;AAAC,IAAA4B,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEa,IAAAC,kCAAmB,EAChChC,0BAA0B,EAC1B,2BACF,CAAC","ignoreList":[]}
|
|
@@ -53,43 +53,45 @@ let currentMergedEntries = null;
|
|
|
53
53
|
* Updates the native system bars with the entries from the stack.
|
|
54
54
|
*/
|
|
55
55
|
function updateEntriesStack() {
|
|
56
|
-
if (
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
if (
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
56
|
+
if (Platform.OS === "android" || Platform.OS === "ios") {
|
|
57
|
+
if (updateImmediate != null) {
|
|
58
|
+
clearImmediate(updateImmediate);
|
|
59
|
+
}
|
|
60
|
+
updateImmediate = setImmediate(() => {
|
|
61
|
+
const mergedEntries = mergeEntriesStack(entriesStack);
|
|
62
|
+
if (mergedEntries != null) {
|
|
63
|
+
const {
|
|
64
|
+
statusBarHidden,
|
|
65
|
+
navigationBarHidden
|
|
66
|
+
} = mergedEntries;
|
|
67
|
+
const statusBarStyle = mergedEntries.statusBarStyle === "auto" ? getColorScheme() === "light" ? "dark" : "light" : mergedEntries.statusBarStyle;
|
|
68
|
+
if (currentMergedEntries?.statusBarStyle !== statusBarStyle || currentMergedEntries?.statusBarHidden !== statusBarHidden || currentMergedEntries?.navigationBarHidden !== navigationBarHidden) {
|
|
69
|
+
if (Platform.OS === "android") {
|
|
70
|
+
NativeEdgeToEdgeModule?.setSystemBarsConfig({
|
|
71
|
+
statusBarStyle,
|
|
72
|
+
statusBarHidden,
|
|
73
|
+
navigationBarHidden
|
|
74
|
+
});
|
|
75
|
+
} else {
|
|
76
|
+
// Emulate android behavior with react-native StatusBar
|
|
77
|
+
if (statusBarStyle != null) {
|
|
78
|
+
StatusBar.setBarStyle(`${statusBarStyle}-content`, true);
|
|
79
|
+
}
|
|
80
|
+
if (statusBarHidden != null) {
|
|
81
|
+
StatusBar.setHidden(statusBarHidden, "fade"); // 'slide' doesn't work in this context
|
|
82
|
+
}
|
|
81
83
|
}
|
|
82
84
|
}
|
|
85
|
+
currentMergedEntries = {
|
|
86
|
+
statusBarStyle,
|
|
87
|
+
statusBarHidden,
|
|
88
|
+
navigationBarHidden
|
|
89
|
+
};
|
|
90
|
+
} else {
|
|
91
|
+
currentMergedEntries = null;
|
|
83
92
|
}
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
statusBarHidden,
|
|
87
|
-
navigationBarHidden
|
|
88
|
-
};
|
|
89
|
-
} else {
|
|
90
|
-
currentMergedEntries = null;
|
|
91
|
-
}
|
|
92
|
-
});
|
|
93
|
+
});
|
|
94
|
+
}
|
|
93
95
|
}
|
|
94
96
|
|
|
95
97
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useEffect","useMemo","useRef","Appearance","Platform","StatusBar","useColorScheme","NativeEdgeToEdgeModule","getColorScheme","mergeEntriesStack","entriesStack","mergedEntry","reduce","prev","cur","prop","statusBarStyle","undefined","statusBarHidden","navigationBarHidden","createStackEntry","props","style","hidden","statusBar","navigationBar","updateImmediate","currentMergedEntries","updateEntriesStack","clearImmediate","setImmediate","mergedEntries","
|
|
1
|
+
{"version":3,"names":["useEffect","useMemo","useRef","Appearance","Platform","StatusBar","useColorScheme","NativeEdgeToEdgeModule","getColorScheme","mergeEntriesStack","entriesStack","mergedEntry","reduce","prev","cur","prop","statusBarStyle","undefined","statusBarHidden","navigationBarHidden","createStackEntry","props","style","hidden","statusBar","navigationBar","updateImmediate","currentMergedEntries","updateEntriesStack","OS","clearImmediate","setImmediate","mergedEntries","setSystemBarsConfig","setBarStyle","setHidden","pushStackEntry","entry","push","popStackEntry","index","indexOf","splice","replaceStackEntry","newEntry","SystemBars","stableProps","colorScheme","stackEntryRef","current"],"sourceRoot":"../../src","sources":["SystemBars.ts"],"mappings":"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","ignoreList":[]}
|
package/dist/module/expo.js
CHANGED
|
@@ -3,8 +3,12 @@
|
|
|
3
3
|
import { createRunOncePlugin, withAndroidStyles } from "@expo/config-plugins";
|
|
4
4
|
const withAndroidEdgeToEdgeTheme = (config, props = {}) => {
|
|
5
5
|
const themes = {
|
|
6
|
+
Default: "Theme.EdgeToEdge",
|
|
6
7
|
Material2: "Theme.EdgeToEdge.Material2",
|
|
7
|
-
Material3: "Theme.EdgeToEdge.Material3"
|
|
8
|
+
Material3: "Theme.EdgeToEdge.Material3",
|
|
9
|
+
Light: "Theme.EdgeToEdge.Light",
|
|
10
|
+
"Material2.Light": "Theme.EdgeToEdge.Material2.Light",
|
|
11
|
+
"Material3.Light": "Theme.EdgeToEdge.Material3.Light"
|
|
8
12
|
};
|
|
9
13
|
const ignoreList = new Set(["android:enforceNavigationBarContrast", "android:enforceStatusBarContrast", "android:fitsSystemWindows", "android:navigationBarColor", "android:statusBarColor", "android:windowDrawsSystemBarBackgrounds", "android:windowLayoutInDisplayCutoutMode", "android:windowLightNavigationBar", "android:windowLightStatusBar", "android:windowTranslucentNavigation", "android:windowTranslucentStatus"]);
|
|
10
14
|
return withAndroidStyles(config, config => {
|
|
@@ -23,7 +27,7 @@ const withAndroidEdgeToEdgeTheme = (config, props = {}) => {
|
|
|
23
27
|
} = android;
|
|
24
28
|
config.modResults.resources.style = config.modResults.resources.style?.map(style => {
|
|
25
29
|
if (style.$.name === "AppTheme") {
|
|
26
|
-
style.$.parent = themes[parentTheme] ?? "
|
|
30
|
+
style.$.parent = themes[parentTheme] ?? themes["Default"];
|
|
27
31
|
if (style.item != null) {
|
|
28
32
|
style.item = style.item.filter(item => !ignoreList.has(item.$.name));
|
|
29
33
|
}
|
package/dist/module/expo.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["createRunOncePlugin","withAndroidStyles","withAndroidEdgeToEdgeTheme","config","props","themes","Material2","Material3","ignoreList","Set","androidStatusBar","userInterfaceStyle","barStyle","android","parentTheme","modResults","resources","style","map","$","name","parent","item","filter","has","push","_","String"],"sourceRoot":"../../src","sources":["expo.ts"],"mappings":";;AAAA,SAEEA,mBAAmB,EACnBC,iBAAiB,QACZ,sBAAsB;
|
|
1
|
+
{"version":3,"names":["createRunOncePlugin","withAndroidStyles","withAndroidEdgeToEdgeTheme","config","props","themes","Default","Material2","Material3","Light","ignoreList","Set","androidStatusBar","userInterfaceStyle","barStyle","android","parentTheme","modResults","resources","style","map","$","name","parent","item","filter","has","push","_","String"],"sourceRoot":"../../src","sources":["expo.ts"],"mappings":";;AAAA,SAEEA,mBAAmB,EACnBC,iBAAiB,QACZ,sBAAsB;AAY7B,MAAMC,0BAA+C,GAAGA,CACtDC,MAAM,EACNC,KAAK,GAAG,CAAC,CAAC,KACP;EACH,MAAMC,MAA6B,GAAG;IACpCC,OAAO,EAAE,kBAAkB;IAC3BC,SAAS,EAAE,4BAA4B;IACvCC,SAAS,EAAE,4BAA4B;IAEvCC,KAAK,EAAE,wBAAwB;IAC/B,iBAAiB,EAAE,kCAAkC;IACrD,iBAAiB,EAAE;EACrB,CAAC;EAED,MAAMC,UAAU,GAAG,IAAIC,GAAG,CAAC,CACzB,sCAAsC,EACtC,kCAAkC,EAClC,2BAA2B,EAC3B,4BAA4B,EAC5B,wBAAwB,EACxB,yCAAyC,EACzC,yCAAyC,EACzC,kCAAkC,EAClC,8BAA8B,EAC9B,qCAAqC,EACrC,iCAAiC,CAClC,CAAC;EAEF,OAAOV,iBAAiB,CAACE,MAAM,EAAGA,MAAM,IAAK;IAC3C,MAAM;MAAES,gBAAgB,GAAG,CAAC,CAAC;MAAEC,kBAAkB,GAAG;IAAQ,CAAC,GAAGV,MAAM;IACtE,MAAM;MAAEW;IAAS,CAAC,GAAGF,gBAAgB;IACrC,MAAM;MAAEG,OAAO,GAAG,CAAC;IAAE,CAAC,GAAGX,KAAK;IAC9B,MAAM;MAAEY,WAAW,GAAG;IAAU,CAAC,GAAGD,OAAO;IAE3CZ,MAAM,CAACc,UAAU,CAACC,SAAS,CAACC,KAAK,GAAGhB,MAAM,CAACc,UAAU,CAACC,SAAS,CAACC,KAAK,EAAEC,GAAG,CACvED,KAAK,IAAmB;MACvB,IAAIA,KAAK,CAACE,CAAC,CAACC,IAAI,KAAK,UAAU,EAAE;QAC/BH,KAAK,CAACE,CAAC,CAACE,MAAM,GAAGlB,MAAM,CAACW,WAAW,CAAC,IAAIX,MAAM,CAAC,SAAS,CAAC;QAEzD,IAAIc,KAAK,CAACK,IAAI,IAAI,IAAI,EAAE;UACtBL,KAAK,CAACK,IAAI,GAAGL,KAAK,CAACK,IAAI,CAACC,MAAM,CAC3BD,IAAI,IAAK,CAACd,UAAU,CAACgB,GAAG,CAACF,IAAI,CAACH,CAAC,CAACC,IAAI,CACvC,CAAC;QACH;QAEA,IAAIR,QAAQ,IAAI,IAAI,EAAE;UACpBK,KAAK,CAACK,IAAI,CAACG,IAAI,CAAC;YACdN,CAAC,EAAE;cAAEC,IAAI,EAAE;YAA+B,CAAC;YAC3CM,CAAC,EAAEC,MAAM,CAACf,QAAQ,KAAK,cAAc;UACvC,CAAC,CAAC;QACJ,CAAC,MAAM,IAAID,kBAAkB,KAAK,WAAW,EAAE;UAC7CM,KAAK,CAACK,IAAI,CAACG,IAAI,CAAC;YACdN,CAAC,EAAE;cAAEC,IAAI,EAAE;YAA+B,CAAC;YAC3CM,CAAC,EAAEC,MAAM,CAAChB,kBAAkB,KAAK,OAAO;UAC1C,CAAC,CAAC;QACJ;MACF;MAEA,OAAOM,KAAK;IACd,CACF,CAAC;IAED,OAAOhB,MAAM;EACf,CAAC,CAAC;AACJ,CAAC;AAED,eAAeH,mBAAmB,CAChCE,0BAA0B,EAC1B,2BACF,CAAC","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SystemBars.d.ts","sourceRoot":"","sources":["../../src/SystemBars.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"SystemBars.d.ts","sourceRoot":"","sources":["../../src/SystemBars.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AA0K3D,wBAAgB,UAAU,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,eAAe,QA8C5D;yBA9Ce,UAAU;gCAvCK,eAAe,KAAG,eAAe;+BAYlC,eAAe,KAAG,IAAI;mCAe3C,eAAe,SACf,eAAe,KACrB,eAAe"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"expo.d.ts","sourceRoot":"","sources":["../../src/expo.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EAGb,MAAM,sBAAsB,CAAC;AAE9B,KAAK,KAAK,
|
|
1
|
+
{"version":3,"file":"expo.d.ts","sourceRoot":"","sources":["../../src/expo.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EAGb,MAAM,sBAAsB,CAAC;AAE9B,KAAK,KAAK,GACN,SAAS,GACT,WAAW,GACX,WAAW,GACX,OAAO,GACP,iBAAiB,GACjB,iBAAiB,CAAC;AAEtB,KAAK,KAAK,GAAG;IAAE,OAAO,CAAC,EAAE;QAAE,WAAW,CAAC,EAAE,KAAK,CAAA;KAAE,CAAA;CAAE,GAAG,SAAS,CAAC;;AAoE/D,wBAGE"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-edge-to-edge",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.2.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "Effortlessly enable edge-to-edge display in React Native",
|
|
6
6
|
"author": "Mathieu Acthernoene <zoontek@gmail.com>",
|
|
@@ -60,12 +60,12 @@
|
|
|
60
60
|
"@babel/preset-env": "^7.25.3",
|
|
61
61
|
"@expo/config-plugins": "^7.0.0 || ^8.0.0 || ^9.0.0",
|
|
62
62
|
"@types/react": "^18.2.6",
|
|
63
|
-
"prettier": "^3.
|
|
63
|
+
"prettier": "^3.4.2",
|
|
64
64
|
"prettier-plugin-organize-imports": "^4.1.0",
|
|
65
65
|
"react": "18.3.1",
|
|
66
|
-
"react-native": "0.76.
|
|
67
|
-
"react-native-builder-bob": "^0.
|
|
68
|
-
"typescript": "^5.
|
|
66
|
+
"react-native": "0.76.5",
|
|
67
|
+
"react-native-builder-bob": "^0.35.2",
|
|
68
|
+
"typescript": "^5.7.2"
|
|
69
69
|
},
|
|
70
70
|
"codegenConfig": {
|
|
71
71
|
"name": "RNEdgeToEdge",
|
package/src/SystemBars.ts
CHANGED
|
@@ -74,54 +74,56 @@ let currentMergedEntries: {
|
|
|
74
74
|
* Updates the native system bars with the entries from the stack.
|
|
75
75
|
*/
|
|
76
76
|
function updateEntriesStack() {
|
|
77
|
-
if (
|
|
78
|
-
|
|
79
|
-
|
|
77
|
+
if (Platform.OS === "android" || Platform.OS === "ios") {
|
|
78
|
+
if (updateImmediate != null) {
|
|
79
|
+
clearImmediate(updateImmediate);
|
|
80
|
+
}
|
|
80
81
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
82
|
+
updateImmediate = setImmediate(() => {
|
|
83
|
+
const mergedEntries = mergeEntriesStack(entriesStack);
|
|
84
|
+
|
|
85
|
+
if (mergedEntries != null) {
|
|
86
|
+
const { statusBarHidden, navigationBarHidden } = mergedEntries;
|
|
87
|
+
|
|
88
|
+
const statusBarStyle: "light" | "dark" | undefined =
|
|
89
|
+
mergedEntries.statusBarStyle === "auto"
|
|
90
|
+
? getColorScheme() === "light"
|
|
91
|
+
? "dark"
|
|
92
|
+
: "light"
|
|
93
|
+
: mergedEntries.statusBarStyle;
|
|
94
|
+
|
|
95
|
+
if (
|
|
96
|
+
currentMergedEntries?.statusBarStyle !== statusBarStyle ||
|
|
97
|
+
currentMergedEntries?.statusBarHidden !== statusBarHidden ||
|
|
98
|
+
currentMergedEntries?.navigationBarHidden !== navigationBarHidden
|
|
99
|
+
) {
|
|
100
|
+
if (Platform.OS === "android") {
|
|
101
|
+
NativeEdgeToEdgeModule?.setSystemBarsConfig({
|
|
102
|
+
statusBarStyle,
|
|
103
|
+
statusBarHidden,
|
|
104
|
+
navigationBarHidden,
|
|
105
|
+
});
|
|
106
|
+
} else {
|
|
107
|
+
// Emulate android behavior with react-native StatusBar
|
|
108
|
+
if (statusBarStyle != null) {
|
|
109
|
+
StatusBar.setBarStyle(`${statusBarStyle}-content`, true);
|
|
110
|
+
}
|
|
111
|
+
if (statusBarHidden != null) {
|
|
112
|
+
StatusBar.setHidden(statusBarHidden, "fade"); // 'slide' doesn't work in this context
|
|
113
|
+
}
|
|
112
114
|
}
|
|
113
115
|
}
|
|
114
|
-
}
|
|
115
116
|
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
117
|
+
currentMergedEntries = {
|
|
118
|
+
statusBarStyle,
|
|
119
|
+
statusBarHidden,
|
|
120
|
+
navigationBarHidden,
|
|
121
|
+
};
|
|
122
|
+
} else {
|
|
123
|
+
currentMergedEntries = null;
|
|
124
|
+
}
|
|
125
|
+
});
|
|
126
|
+
}
|
|
125
127
|
}
|
|
126
128
|
|
|
127
129
|
/**
|
package/src/expo.ts
CHANGED
|
@@ -4,17 +4,29 @@ import {
|
|
|
4
4
|
withAndroidStyles,
|
|
5
5
|
} from "@expo/config-plugins";
|
|
6
6
|
|
|
7
|
-
type Theme =
|
|
7
|
+
type Theme =
|
|
8
|
+
| "Default"
|
|
9
|
+
| "Material2"
|
|
10
|
+
| "Material3"
|
|
11
|
+
| "Light"
|
|
12
|
+
| "Material2.Light"
|
|
13
|
+
| "Material3.Light";
|
|
14
|
+
|
|
8
15
|
type Props = { android?: { parentTheme?: Theme } } | undefined;
|
|
9
16
|
|
|
10
17
|
const withAndroidEdgeToEdgeTheme: ConfigPlugin<Props> = (
|
|
11
18
|
config,
|
|
12
19
|
props = {},
|
|
13
20
|
) => {
|
|
14
|
-
const themes: Record<
|
|
21
|
+
const themes: Record<Theme, string> = {
|
|
22
|
+
Default: "Theme.EdgeToEdge",
|
|
15
23
|
Material2: "Theme.EdgeToEdge.Material2",
|
|
16
24
|
Material3: "Theme.EdgeToEdge.Material3",
|
|
17
|
-
|
|
25
|
+
|
|
26
|
+
Light: "Theme.EdgeToEdge.Light",
|
|
27
|
+
"Material2.Light": "Theme.EdgeToEdge.Material2.Light",
|
|
28
|
+
"Material3.Light": "Theme.EdgeToEdge.Material3.Light",
|
|
29
|
+
};
|
|
18
30
|
|
|
19
31
|
const ignoreList = new Set([
|
|
20
32
|
"android:enforceNavigationBarContrast",
|
|
@@ -39,7 +51,7 @@ const withAndroidEdgeToEdgeTheme: ConfigPlugin<Props> = (
|
|
|
39
51
|
config.modResults.resources.style = config.modResults.resources.style?.map(
|
|
40
52
|
(style): typeof style => {
|
|
41
53
|
if (style.$.name === "AppTheme") {
|
|
42
|
-
style.$.parent = themes[parentTheme] ?? "
|
|
54
|
+
style.$.parent = themes[parentTheme] ?? themes["Default"];
|
|
43
55
|
|
|
44
56
|
if (style.item != null) {
|
|
45
57
|
style.item = style.item.filter(
|