react-native-edge-to-edge 1.0.1 → 1.1.1
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 +54 -5
- package/android/build.gradle +1 -0
- package/android/src/main/res/values/bools.xml +4 -0
- package/android/src/main/res/values/public.xml +2 -0
- package/android/src/main/res/values/styles.xml +20 -6
- package/android/src/main/res/values-night/bools.xml +4 -0
- package/android/src/main/res/values-night-v27/bools.xml +4 -0
- package/android/src/main/res/values-v27/bools.xml +4 -0
- package/android/src/main/res/values-v27/styles.xml +10 -4
- package/android/src/main/res/values-v29/styles.xml +15 -0
- package/android/src/main/res/values-v30/styles.xml +15 -0
- package/dist/commonjs/expo.js +12 -2
- package/dist/commonjs/expo.js.map +1 -1
- package/dist/module/expo.js +12 -2
- package/dist/module/expo.js.map +1 -1
- package/dist/typescript/expo.d.ts +7 -1
- package/dist/typescript/expo.d.ts.map +1 -1
- package/package.json +5 -5
- package/src/expo.ts +15 -2
- package/android/src/main/res/values-night/styles.xml +0 -6
- package/android/src/main/res/values-night-v27/styles.xml +0 -7
package/README.md
CHANGED
|
@@ -25,7 +25,7 @@ It is supporting the **latest version**, and the **two previous minor series**.
|
|
|
25
25
|
|
|
26
26
|
### Android 15
|
|
27
27
|
|
|
28
|
-
|
|
28
|
+
Recently, Google introduced a significant change: apps targeting SDK 35 will have edge-to-edge display [enforced by default](https://developer.android.com/about/versions/15/behavior-changes-15#edge-to-edge) on Android 15+. Google is _likely_ to mandate that app updates on the Play Store target SDK 35 starting on August 31, 2025. This assumption is based on the [previous years' requirements following a similar timeline](https://support.google.com/googleplay/android-developer/answer/11926878?sjid=11853000253346477363-EU#zippy=%2Care-there-any-exceptions-for-existing-apps-targeting-api-or-below:~:text=App%20update%20requirements).
|
|
29
29
|
|
|
30
30
|
Currently, new React Native projects target SDK 34.
|
|
31
31
|
|
|
@@ -57,15 +57,27 @@ Add the library plugin in your `app.json` config file and [create a new build](h
|
|
|
57
57
|
}
|
|
58
58
|
```
|
|
59
59
|
|
|
60
|
+
_📌 The available plugins options are:_
|
|
61
|
+
|
|
62
|
+
```ts
|
|
63
|
+
type Options = {
|
|
64
|
+
android?: {
|
|
65
|
+
// use an edge-to-edge version of `Theme.{MaterialComponents,Material3}.DayNight.NoActionBar`
|
|
66
|
+
parentTheme?: "Material2" | "Material3"; // optional, default is `undefined` (`Theme.EdgeToEdge`)
|
|
67
|
+
};
|
|
68
|
+
};
|
|
69
|
+
```
|
|
70
|
+
|
|
60
71
|
> [!NOTE]
|
|
61
72
|
> This library is not yet supported in the [Expo Go](https://expo.dev/go) sandbox app.
|
|
62
73
|
|
|
63
74
|
### Bare React Native
|
|
64
75
|
|
|
65
|
-
Edit your `android/app/src/main/res/values/styles.xml` file to inherit from the provided
|
|
76
|
+
Edit your `android/app/src/main/res/values/styles.xml` file to inherit from one of the provided themes:
|
|
66
77
|
|
|
67
78
|
```diff
|
|
68
79
|
<resources>
|
|
80
|
+
<!-- inherit from Theme.EdgeToEdge / Theme.EdgeToEdge.Material2 / Theme.EdgeToEdge.Material3 -->
|
|
69
81
|
- <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
|
|
70
82
|
+ <style name="AppTheme" parent="Theme.EdgeToEdge">
|
|
71
83
|
<!-- … -->
|
|
@@ -85,10 +97,47 @@ Many libraries expose options that you can set to account for the transparency o
|
|
|
85
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:
|
|
86
98
|
|
|
87
99
|
```ts
|
|
88
|
-
import {
|
|
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
|
+
```
|
|
89
128
|
|
|
90
|
-
|
|
91
|
-
|
|
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
|
+
}
|
|
92
141
|
}
|
|
93
142
|
```
|
|
94
143
|
|
package/android/build.gradle
CHANGED
|
@@ -1,16 +1,30 @@
|
|
|
1
1
|
<?xml version="1.0" encoding="utf-8"?>
|
|
2
2
|
<resources>
|
|
3
|
-
<style name="Theme.EdgeToEdge.
|
|
4
|
-
<item name="android:
|
|
3
|
+
<style name="Theme.EdgeToEdge.Common" parent="Theme.AppCompat.DayNight.NoActionBar">
|
|
4
|
+
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
|
|
5
|
+
<item name="android:fitsSystemWindows">false</item>
|
|
6
|
+
<item name="android:navigationBarColor">@color/navigationBarColor</item>
|
|
7
|
+
<item name="android:statusBarColor">@android:color/transparent</item>
|
|
8
|
+
<item name="android:windowLightStatusBar">@bool/windowLightSystemBars</item>
|
|
5
9
|
</style>
|
|
6
10
|
|
|
7
|
-
<style name="Theme.EdgeToEdge.Common" parent="Theme.
|
|
8
|
-
<item name="android:fitsSystemWindows">false</item>
|
|
11
|
+
<style name="Theme.EdgeToEdge.Material2.Common" parent="Theme.MaterialComponents.DayNight.NoActionBar">
|
|
9
12
|
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
|
|
10
|
-
<item name="android:
|
|
13
|
+
<item name="android:fitsSystemWindows">false</item>
|
|
11
14
|
<item name="android:navigationBarColor">@color/navigationBarColor</item>
|
|
15
|
+
<item name="android:statusBarColor">@android:color/transparent</item>
|
|
16
|
+
<item name="android:windowLightStatusBar">@bool/windowLightSystemBars</item>
|
|
12
17
|
</style>
|
|
13
18
|
|
|
14
|
-
<style name="Theme.EdgeToEdge" parent="Theme.
|
|
19
|
+
<style name="Theme.EdgeToEdge.Material3.Common" parent="Theme.Material3.DayNight.NoActionBar">
|
|
20
|
+
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
|
|
21
|
+
<item name="android:fitsSystemWindows">false</item>
|
|
22
|
+
<item name="android:navigationBarColor">@color/navigationBarColor</item>
|
|
23
|
+
<item name="android:statusBarColor">@android:color/transparent</item>
|
|
24
|
+
<item name="android:windowLightStatusBar">@bool/windowLightSystemBars</item>
|
|
15
25
|
</style>
|
|
26
|
+
|
|
27
|
+
<style name="Theme.EdgeToEdge" parent="Theme.EdgeToEdge.Common" />
|
|
28
|
+
<style name="Theme.EdgeToEdge.Material2" parent="Theme.EdgeToEdge.Material2.Common" />
|
|
29
|
+
<style name="Theme.EdgeToEdge.Material3" parent="Theme.EdgeToEdge.Material3.Common" />
|
|
16
30
|
</resources>
|
|
@@ -1,11 +1,17 @@
|
|
|
1
1
|
<?xml version="1.0" encoding="utf-8"?>
|
|
2
2
|
<resources>
|
|
3
|
-
<style name="Theme.EdgeToEdge
|
|
4
|
-
<item name="android:
|
|
5
|
-
<item name="android:
|
|
3
|
+
<style name="Theme.EdgeToEdge" parent="Theme.EdgeToEdge.Common">
|
|
4
|
+
<item name="android:windowLightNavigationBar">@bool/windowLightSystemBars</item>
|
|
5
|
+
<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
|
|
6
6
|
</style>
|
|
7
7
|
|
|
8
|
-
<style name="Theme.EdgeToEdge" parent="Theme.EdgeToEdge.Common">
|
|
8
|
+
<style name="Theme.EdgeToEdge.Material2" parent="Theme.EdgeToEdge.Material2.Common">
|
|
9
|
+
<item name="android:windowLightNavigationBar">@bool/windowLightSystemBars</item>
|
|
10
|
+
<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
|
|
11
|
+
</style>
|
|
12
|
+
|
|
13
|
+
<style name="Theme.EdgeToEdge.Material3" parent="Theme.EdgeToEdge.Material3.Common">
|
|
14
|
+
<item name="android:windowLightNavigationBar">@bool/windowLightSystemBars</item>
|
|
9
15
|
<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
|
|
10
16
|
</style>
|
|
11
17
|
</resources>
|
|
@@ -1,6 +1,21 @@
|
|
|
1
1
|
<?xml version="1.0" encoding="utf-8"?>
|
|
2
2
|
<resources>
|
|
3
3
|
<style name="Theme.EdgeToEdge" parent="Theme.EdgeToEdge.Common">
|
|
4
|
+
<item name="android:windowLightNavigationBar">@bool/windowLightSystemBars</item>
|
|
5
|
+
<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
|
|
6
|
+
<item name="android:enforceStatusBarContrast">false</item>
|
|
7
|
+
<item name="android:enforceNavigationBarContrast">true</item>
|
|
8
|
+
</style>
|
|
9
|
+
|
|
10
|
+
<style name="Theme.EdgeToEdge.Material2" parent="Theme.EdgeToEdge.Material2.Common">
|
|
11
|
+
<item name="android:windowLightNavigationBar">@bool/windowLightSystemBars</item>
|
|
12
|
+
<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
|
|
13
|
+
<item name="android:enforceStatusBarContrast">false</item>
|
|
14
|
+
<item name="android:enforceNavigationBarContrast">true</item>
|
|
15
|
+
</style>
|
|
16
|
+
|
|
17
|
+
<style name="Theme.EdgeToEdge.Material3" parent="Theme.EdgeToEdge.Material3.Common">
|
|
18
|
+
<item name="android:windowLightNavigationBar">@bool/windowLightSystemBars</item>
|
|
4
19
|
<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
|
|
5
20
|
<item name="android:enforceStatusBarContrast">false</item>
|
|
6
21
|
<item name="android:enforceNavigationBarContrast">true</item>
|
|
@@ -1,6 +1,21 @@
|
|
|
1
1
|
<?xml version="1.0" encoding="utf-8"?>
|
|
2
2
|
<resources>
|
|
3
3
|
<style name="Theme.EdgeToEdge" parent="Theme.EdgeToEdge.Common">
|
|
4
|
+
<item name="android:windowLightNavigationBar">@bool/windowLightSystemBars</item>
|
|
5
|
+
<item name="android:windowLayoutInDisplayCutoutMode">always</item>
|
|
6
|
+
<item name="android:enforceStatusBarContrast">false</item>
|
|
7
|
+
<item name="android:enforceNavigationBarContrast">true</item>
|
|
8
|
+
</style>
|
|
9
|
+
|
|
10
|
+
<style name="Theme.EdgeToEdge.Material2" parent="Theme.EdgeToEdge.Material2.Common">
|
|
11
|
+
<item name="android:windowLightNavigationBar">@bool/windowLightSystemBars</item>
|
|
12
|
+
<item name="android:windowLayoutInDisplayCutoutMode">always</item>
|
|
13
|
+
<item name="android:enforceStatusBarContrast">false</item>
|
|
14
|
+
<item name="android:enforceNavigationBarContrast">true</item>
|
|
15
|
+
</style>
|
|
16
|
+
|
|
17
|
+
<style name="Theme.EdgeToEdge.Material3" parent="Theme.EdgeToEdge.Material3.Common">
|
|
18
|
+
<item name="android:windowLightNavigationBar">@bool/windowLightSystemBars</item>
|
|
4
19
|
<item name="android:windowLayoutInDisplayCutoutMode">always</item>
|
|
5
20
|
<item name="android:enforceStatusBarContrast">false</item>
|
|
6
21
|
<item name="android:enforceNavigationBarContrast">true</item>
|
package/dist/commonjs/expo.js
CHANGED
|
@@ -5,7 +5,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _configPlugins = require("@expo/config-plugins");
|
|
8
|
-
const withAndroidEdgeToEdgeTheme = config => {
|
|
8
|
+
const withAndroidEdgeToEdgeTheme = (config, props = {}) => {
|
|
9
|
+
const themes = {
|
|
10
|
+
Material2: "Theme.EdgeToEdge.Material2",
|
|
11
|
+
Material3: "Theme.EdgeToEdge.Material3"
|
|
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 (0, _configPlugins.withAndroidStyles)(config, config => {
|
|
11
15
|
const {
|
|
@@ -15,9 +19,15 @@ const withAndroidEdgeToEdgeTheme = config => {
|
|
|
15
19
|
const {
|
|
16
20
|
barStyle
|
|
17
21
|
} = androidStatusBar;
|
|
22
|
+
const {
|
|
23
|
+
android = {}
|
|
24
|
+
} = props;
|
|
25
|
+
const {
|
|
26
|
+
parentTheme = "Default"
|
|
27
|
+
} = android;
|
|
18
28
|
config.modResults.resources.style = config.modResults.resources.style?.map(style => {
|
|
19
29
|
if (style.$.name === "AppTheme") {
|
|
20
|
-
style.$.parent = "Theme.EdgeToEdge";
|
|
30
|
+
style.$.parent = themes[parentTheme] ?? "Theme.EdgeToEdge";
|
|
21
31
|
if (style.item != null) {
|
|
22
32
|
style.item = style.item.filter(item => !ignoreList.has(item.$.name));
|
|
23
33
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_configPlugins","require","withAndroidEdgeToEdgeTheme","config","ignoreList","Set","withAndroidStyles","androidStatusBar","userInterfaceStyle","barStyle","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","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;AASA,MAAMC,0BAA+C,GAAGA,CACtDC,MAAM,EACNC,KAAK,GAAG,CAAC,CAAC,KACP;EACH,MAAMC,MAA8B,GAAG;IACrCC,SAAS,EAAE,4BAA4B;IACvCC,SAAS,EAAE;EACb,CAAiC;EAEjC,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,EAACP,MAAM,EAAGA,MAAM,IAAK;IAC3C,MAAM;MAAEQ,gBAAgB,GAAG,CAAC,CAAC;MAAEC,kBAAkB,GAAG;IAAQ,CAAC,GAAGT,MAAM;IACtE,MAAM;MAAEU;IAAS,CAAC,GAAGF,gBAAgB;IACrC,MAAM;MAAEG,OAAO,GAAG,CAAC;IAAE,CAAC,GAAGV,KAAK;IAC9B,MAAM;MAAEW,WAAW,GAAG;IAAU,CAAC,GAAGD,OAAO;IAE3CX,MAAM,CAACa,UAAU,CAACC,SAAS,CAACC,KAAK,GAAGf,MAAM,CAACa,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,GAAGjB,MAAM,CAACU,WAAW,CAAC,IAAI,kBAAkB;QAE1D,IAAIG,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,OAAOf,MAAM;EACf,CAAC,CAAC;AACJ,CAAC;AAAC,IAAA0B,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEa,IAAAC,kCAAmB,EAChC9B,0BAA0B,EAC1B,2BACF,CAAC","ignoreList":[]}
|
package/dist/module/expo.js
CHANGED
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
import { createRunOncePlugin, withAndroidStyles } from "@expo/config-plugins";
|
|
4
|
-
const withAndroidEdgeToEdgeTheme = config => {
|
|
4
|
+
const withAndroidEdgeToEdgeTheme = (config, props = {}) => {
|
|
5
|
+
const themes = {
|
|
6
|
+
Material2: "Theme.EdgeToEdge.Material2",
|
|
7
|
+
Material3: "Theme.EdgeToEdge.Material3"
|
|
8
|
+
};
|
|
5
9
|
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"]);
|
|
6
10
|
return withAndroidStyles(config, config => {
|
|
7
11
|
const {
|
|
@@ -11,9 +15,15 @@ const withAndroidEdgeToEdgeTheme = config => {
|
|
|
11
15
|
const {
|
|
12
16
|
barStyle
|
|
13
17
|
} = androidStatusBar;
|
|
18
|
+
const {
|
|
19
|
+
android = {}
|
|
20
|
+
} = props;
|
|
21
|
+
const {
|
|
22
|
+
parentTheme = "Default"
|
|
23
|
+
} = android;
|
|
14
24
|
config.modResults.resources.style = config.modResults.resources.style?.map(style => {
|
|
15
25
|
if (style.$.name === "AppTheme") {
|
|
16
|
-
style.$.parent = "Theme.EdgeToEdge";
|
|
26
|
+
style.$.parent = themes[parentTheme] ?? "Theme.EdgeToEdge";
|
|
17
27
|
if (style.item != null) {
|
|
18
28
|
style.item = style.item.filter(item => !ignoreList.has(item.$.name));
|
|
19
29
|
}
|
package/dist/module/expo.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["createRunOncePlugin","withAndroidStyles","withAndroidEdgeToEdgeTheme","config","ignoreList","Set","androidStatusBar","userInterfaceStyle","barStyle","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","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;AAK7B,MAAMC,0BAA+C,GAAGA,CACtDC,MAAM,EACNC,KAAK,GAAG,CAAC,CAAC,KACP;EACH,MAAMC,MAA8B,GAAG;IACrCC,SAAS,EAAE,4BAA4B;IACvCC,SAAS,EAAE;EACb,CAAiC;EAEjC,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,OAAOR,iBAAiB,CAACE,MAAM,EAAGA,MAAM,IAAK;IAC3C,MAAM;MAAEO,gBAAgB,GAAG,CAAC,CAAC;MAAEC,kBAAkB,GAAG;IAAQ,CAAC,GAAGR,MAAM;IACtE,MAAM;MAAES;IAAS,CAAC,GAAGF,gBAAgB;IACrC,MAAM;MAAEG,OAAO,GAAG,CAAC;IAAE,CAAC,GAAGT,KAAK;IAC9B,MAAM;MAAEU,WAAW,GAAG;IAAU,CAAC,GAAGD,OAAO;IAE3CV,MAAM,CAACY,UAAU,CAACC,SAAS,CAACC,KAAK,GAAGd,MAAM,CAACY,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,GAAGhB,MAAM,CAACS,WAAW,CAAC,IAAI,kBAAkB;QAE1D,IAAIG,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,OAAOd,MAAM;EACf,CAAC,CAAC;AACJ,CAAC;AAED,eAAeH,mBAAmB,CAChCE,0BAA0B,EAC1B,2BACF,CAAC","ignoreList":[]}
|
|
@@ -1,4 +1,10 @@
|
|
|
1
1
|
import { ConfigPlugin } from "@expo/config-plugins";
|
|
2
|
-
|
|
2
|
+
type Theme = "Material2" | "Material3";
|
|
3
|
+
type Props = {
|
|
4
|
+
android?: {
|
|
5
|
+
parentTheme?: Theme;
|
|
6
|
+
};
|
|
7
|
+
} | undefined;
|
|
8
|
+
declare const _default: ConfigPlugin<Props>;
|
|
3
9
|
export default _default;
|
|
4
10
|
//# sourceMappingURL=expo.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"expo.d.ts","sourceRoot":"","sources":["../../src/expo.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EAGb,MAAM,sBAAsB,CAAC;;
|
|
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,GAAG,WAAW,GAAG,WAAW,CAAC;AACvC,KAAK,KAAK,GAAG;IAAE,OAAO,CAAC,EAAE;QAAE,WAAW,CAAC,EAAE,KAAK,CAAA;KAAE,CAAA;CAAE,GAAG,SAAS,CAAC;;AA+D/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.1.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "Effortlessly enable edge-to-edge display in React Native",
|
|
6
6
|
"author": "Mathieu Acthernoene <zoontek@gmail.com>",
|
|
@@ -56,15 +56,15 @@
|
|
|
56
56
|
"react-native": ">=0.73.0"
|
|
57
57
|
},
|
|
58
58
|
"devDependencies": {
|
|
59
|
-
"@babel/core": "^7.
|
|
60
|
-
"@babel/preset-env": "^7.
|
|
59
|
+
"@babel/core": "^7.25.2",
|
|
60
|
+
"@babel/preset-env": "^7.25.3",
|
|
61
61
|
"@expo/config-plugins": "^7.0.0 || ^8.0.0",
|
|
62
62
|
"@types/react": "^18.2.6",
|
|
63
63
|
"prettier": "^3.3.3",
|
|
64
64
|
"prettier-plugin-organize-imports": "^4.1.0",
|
|
65
65
|
"react": "18.3.1",
|
|
66
|
-
"react-native": "0.
|
|
67
|
-
"react-native-builder-bob": "^0.30.
|
|
66
|
+
"react-native": "0.76.1",
|
|
67
|
+
"react-native-builder-bob": "^0.30.3",
|
|
68
68
|
"typescript": "^5.6.3"
|
|
69
69
|
},
|
|
70
70
|
"codegenConfig": {
|
package/src/expo.ts
CHANGED
|
@@ -4,7 +4,18 @@ import {
|
|
|
4
4
|
withAndroidStyles,
|
|
5
5
|
} from "@expo/config-plugins";
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
type Theme = "Material2" | "Material3";
|
|
8
|
+
type Props = { android?: { parentTheme?: Theme } } | undefined;
|
|
9
|
+
|
|
10
|
+
const withAndroidEdgeToEdgeTheme: ConfigPlugin<Props> = (
|
|
11
|
+
config,
|
|
12
|
+
props = {},
|
|
13
|
+
) => {
|
|
14
|
+
const themes: Record<string, string> = {
|
|
15
|
+
Material2: "Theme.EdgeToEdge.Material2",
|
|
16
|
+
Material3: "Theme.EdgeToEdge.Material3",
|
|
17
|
+
} satisfies Record<Theme, string>;
|
|
18
|
+
|
|
8
19
|
const ignoreList = new Set([
|
|
9
20
|
"android:enforceNavigationBarContrast",
|
|
10
21
|
"android:enforceStatusBarContrast",
|
|
@@ -22,11 +33,13 @@ const withAndroidEdgeToEdgeTheme: ConfigPlugin = (config) => {
|
|
|
22
33
|
return withAndroidStyles(config, (config) => {
|
|
23
34
|
const { androidStatusBar = {}, userInterfaceStyle = "light" } = config;
|
|
24
35
|
const { barStyle } = androidStatusBar;
|
|
36
|
+
const { android = {} } = props;
|
|
37
|
+
const { parentTheme = "Default" } = android;
|
|
25
38
|
|
|
26
39
|
config.modResults.resources.style = config.modResults.resources.style?.map(
|
|
27
40
|
(style): typeof style => {
|
|
28
41
|
if (style.$.name === "AppTheme") {
|
|
29
|
-
style.$.parent = "Theme.EdgeToEdge";
|
|
42
|
+
style.$.parent = themes[parentTheme] ?? "Theme.EdgeToEdge";
|
|
30
43
|
|
|
31
44
|
if (style.item != null) {
|
|
32
45
|
style.item = style.item.filter(
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
<?xml version="1.0" encoding="utf-8"?>
|
|
2
|
-
<resources>
|
|
3
|
-
<style name="Theme.EdgeToEdge.Base" parent="Theme.AppCompat.DayNight.NoActionBar">
|
|
4
|
-
<item name="android:windowLightStatusBar">false</item>
|
|
5
|
-
<item name="android:windowLightNavigationBar">false</item>
|
|
6
|
-
</style>
|
|
7
|
-
</resources>
|