Skip to content

Commit 2700489

Browse files
committed
Add light themes
1 parent ac2c4df commit 2700489

File tree

8 files changed

+138
-24
lines changed

8 files changed

+138
-24
lines changed

README.md

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -52,18 +52,28 @@ Add the library plugin in your `app.json` config file and [create a new build](h
5252
```diff
5353
{
5454
"expo": {
55-
+ "plugins": ["react-native-edge-to-edge"]
55+
+ "plugins": [
56+
+ ["react-native-edge-to-edge", { "android": { "parentTheme": "Light" } }]
57+
+ ]
5658
}
5759
}
5860
```
5961

6062
_📌 The available plugins options are:_
6163

6264
```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+
6373
type Options = {
6474
android?: {
65-
// use an edge-to-edge version of `Theme.{MaterialComponents,Material3}.DayNight.NoActionBar`
66-
parentTheme?: "Material2" | "Material3"; // optional, default is `undefined` (`Theme.EdgeToEdge`)
75+
// use an edge-to-edge version of `Theme.{MaterialComponents,Material3}.{DayNight,Light}.NoActionBar`
76+
parentTheme?: Theme; // optional
6777
};
6878
};
6979
```
@@ -77,7 +87,10 @@ Edit your `android/app/src/main/res/values/styles.xml` file to inherit from one
7787

7888
```diff
7989
<resources>
80-
<!-- inherit from Theme.EdgeToEdge / Theme.EdgeToEdge.Material2 / Theme.EdgeToEdge.Material3 -->
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 -->
8194
- <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
8295
+ <style name="AppTheme" parent="Theme.EdgeToEdge">
8396
<!-- … -->

android/src/main/res/values-v27/styles.xml

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,31 @@
11
<?xml version="1.0" encoding="utf-8"?>
22
<resources>
3-
<style name="Theme.EdgeToEdge" parent="Theme.EdgeToEdge.Common">
3+
<style name="Theme.EdgeToEdge" parent="Theme.EdgeToEdge.DayNight.Common">
44
<item name="android:windowLightNavigationBar">@bool/windowLightSystemBars</item>
55
<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
66
</style>
77

8-
<style name="Theme.EdgeToEdge.Material2" parent="Theme.EdgeToEdge.Material2.Common">
8+
<style name="Theme.EdgeToEdge.Material2" parent="Theme.EdgeToEdge.Material2.DayNight.Common">
99
<item name="android:windowLightNavigationBar">@bool/windowLightSystemBars</item>
1010
<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
1111
</style>
1212

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">
1429
<item name="android:windowLightNavigationBar">@bool/windowLightSystemBars</item>
1530
<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
1631
</style>

android/src/main/res/values-v29/styles.xml

Lines changed: 24 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,41 @@
11
<?xml version="1.0" encoding="utf-8"?>
22
<resources>
3-
<style name="Theme.EdgeToEdge" parent="Theme.EdgeToEdge.Common">
3+
<style name="Theme.EdgeToEdge" parent="Theme.EdgeToEdge.DayNight.Common">
44
<item name="android:windowLightNavigationBar">@bool/windowLightSystemBars</item>
55
<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
66
<item name="android:enforceStatusBarContrast">false</item>
77
<item name="android:enforceNavigationBarContrast">true</item>
88
</style>
99

10-
<style name="Theme.EdgeToEdge.Material2" parent="Theme.EdgeToEdge.Material2.Common">
10+
<style name="Theme.EdgeToEdge.Material2" parent="Theme.EdgeToEdge.Material2.DayNight.Common">
1111
<item name="android:windowLightNavigationBar">@bool/windowLightSystemBars</item>
1212
<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
1313
<item name="android:enforceStatusBarContrast">false</item>
1414
<item name="android:enforceNavigationBarContrast">true</item>
1515
</style>
1616

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">
1839
<item name="android:windowLightNavigationBar">@bool/windowLightSystemBars</item>
1940
<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
2041
<item name="android:enforceStatusBarContrast">false</item>

android/src/main/res/values-v30/styles.xml

Lines changed: 24 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,41 @@
11
<?xml version="1.0" encoding="utf-8"?>
22
<resources>
3-
<style name="Theme.EdgeToEdge" parent="Theme.EdgeToEdge.Common">
3+
<style name="Theme.EdgeToEdge" parent="Theme.EdgeToEdge.DayNight.Common">
44
<item name="android:windowLightNavigationBar">@bool/windowLightSystemBars</item>
55
<item name="android:windowLayoutInDisplayCutoutMode">always</item>
66
<item name="android:enforceStatusBarContrast">false</item>
77
<item name="android:enforceNavigationBarContrast">true</item>
88
</style>
99

10-
<style name="Theme.EdgeToEdge.Material2" parent="Theme.EdgeToEdge.Material2.Common">
10+
<style name="Theme.EdgeToEdge.Material2" parent="Theme.EdgeToEdge.Material2.DayNight.Common">
1111
<item name="android:windowLightNavigationBar">@bool/windowLightSystemBars</item>
1212
<item name="android:windowLayoutInDisplayCutoutMode">always</item>
1313
<item name="android:enforceStatusBarContrast">false</item>
1414
<item name="android:enforceNavigationBarContrast">true</item>
1515
</style>
1616

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">
1839
<item name="android:windowLightNavigationBar">@bool/windowLightSystemBars</item>
1940
<item name="android:windowLayoutInDisplayCutoutMode">always</item>
2041
<item name="android:enforceStatusBarContrast">false</item>

android/src/main/res/values/public.xml

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,8 @@
33
<public name="Theme.EdgeToEdge" type="style" />
44
<public name="Theme.EdgeToEdge.Material2" type="style" />
55
<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" />
610
</resources>
Lines changed: 34 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,58 @@
11
<?xml version="1.0" encoding="utf-8"?>
22
<resources>
3-
<style name="Theme.EdgeToEdge.Common" parent="Theme.AppCompat.DayNight.NoActionBar">
3+
<style name="Theme.EdgeToEdge.DayNight.Common" parent="Theme.AppCompat.DayNight.NoActionBar">
44
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
55
<item name="android:fitsSystemWindows">false</item>
66
<item name="android:navigationBarColor">@color/navigationBarColor</item>
77
<item name="android:statusBarColor">@android:color/transparent</item>
88
<item name="android:windowLightStatusBar">@bool/windowLightSystemBars</item>
99
</style>
1010

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">
1212
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
1313
<item name="android:fitsSystemWindows">false</item>
1414
<item name="android:navigationBarColor">@color/navigationBarColor</item>
1515
<item name="android:statusBarColor">@android:color/transparent</item>
1616
<item name="android:windowLightStatusBar">@bool/windowLightSystemBars</item>
1717
</style>
1818

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">
2020
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
2121
<item name="android:fitsSystemWindows">false</item>
2222
<item name="android:navigationBarColor">@color/navigationBarColor</item>
2323
<item name="android:statusBarColor">@android:color/transparent</item>
2424
<item name="android:windowLightStatusBar">@bool/windowLightSystemBars</item>
2525
</style>
2626

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" />
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" />
3058
</resources>

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-native-edge-to-edge",
3-
"version": "1.1.3",
3+
"version": "1.2.0",
44
"license": "MIT",
55
"description": "Effortlessly enable edge-to-edge display in React Native",
66
"author": "Mathieu Acthernoene <[email protected]>",

src/expo.ts

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,29 @@ import {
44
withAndroidStyles,
55
} from "@expo/config-plugins";
66

7-
type Theme = "Material2" | "Material3";
7+
type Theme =
8+
| "Default"
9+
| "Material2"
10+
| "Material3"
11+
| "Light"
12+
| "Material2.Light"
13+
| "Material3.Light";
14+
815
type Props = { android?: { parentTheme?: Theme } } | undefined;
916

1017
const withAndroidEdgeToEdgeTheme: ConfigPlugin<Props> = (
1118
config,
1219
props = {},
1320
) => {
14-
const themes: Record<string, string> = {
21+
const themes: Record<Theme, string> = {
22+
Default: "Theme.EdgeToEdge",
1523
Material2: "Theme.EdgeToEdge.Material2",
1624
Material3: "Theme.EdgeToEdge.Material3",
17-
} satisfies Record<Theme, string>;
25+
26+
Light: "Theme.EdgeToEdge.Light",
27+
"Material2.Light": "Theme.EdgeToEdge.Material2.Light",
28+
"Material3.Light": "Theme.EdgeToEdge.Material3.Light",
29+
};
1830

1931
const ignoreList = new Set([
2032
"android:enforceNavigationBarContrast",
@@ -39,7 +51,7 @@ const withAndroidEdgeToEdgeTheme: ConfigPlugin<Props> = (
3951
config.modResults.resources.style = config.modResults.resources.style?.map(
4052
(style): typeof style => {
4153
if (style.$.name === "AppTheme") {
42-
style.$.parent = themes[parentTheme] ?? "Theme.EdgeToEdge";
54+
style.$.parent = themes[parentTheme] ?? themes["Default"];
4355

4456
if (style.item != null) {
4557
style.item = style.item.filter(

0 commit comments

Comments
 (0)