Skip to content

Commit 3da9f5f

Browse files
sidorchukandrewsidorchukandrew
authored
Add support for Material3Expressive styles (#89)
1 parent ec0edb9 commit 3da9f5f

File tree

8 files changed

+152
-12
lines changed

8 files changed

+152
-12
lines changed

‎README.md‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -47,16 +47,20 @@ $ yarn add react-native-edge-to-edge
4747

4848
This library requires you to update the parent of your Android `AppTheme` to an edge-to-edge version. Don't worry, it's very easy to understand! You just need to choose a theme based on the current value:
4949

50-
| If you currently have… | …you should use |
51-
| :--------------------------------------------------- | :----------------------------------------- |
52-
| `Theme.AppCompat.DayNight.NoActionBar` | `Theme.EdgeToEdge` |
53-
| `Theme.MaterialComponents.DayNight.NoActionBar` | `Theme.EdgeToEdge.Material2` |
54-
| `Theme.Material3.DayNight.NoActionBar` | `Theme.EdgeToEdge.Material3` |
55-
| `Theme.Material3.DynamicColors.DayNight.NoActionBar` | `Theme.EdgeToEdge.Material3.Dynamic` |
56-
| `Theme.AppCompat.Light.NoActionBar` | `Theme.EdgeToEdge.Light` |
57-
| `Theme.MaterialComponents.Light.NoActionBar` | `Theme.EdgeToEdge.Material2.Light` |
58-
| `Theme.Material3.Light.NoActionBar` | `Theme.EdgeToEdge.Material3.Light` |
59-
| `Theme.Material3.DynamicColors.Light.NoActionBar` | `Theme.EdgeToEdge.Material3.Dynamic.Light` |
50+
| If you currently have… | …you should use |
51+
| :------------------------------------------------------------- | :--------------------------------------------------- |
52+
| `Theme.AppCompat.DayNight.NoActionBar` | `Theme.EdgeToEdge` |
53+
| `Theme.MaterialComponents.DayNight.NoActionBar` | `Theme.EdgeToEdge.Material2` |
54+
| `Theme.Material3.DayNight.NoActionBar` | `Theme.EdgeToEdge.Material3` |
55+
| `Theme.Material3.DynamicColors.DayNight.NoActionBar` | `Theme.EdgeToEdge.Material3.Dynamic` |
56+
| `Theme.Material3Expressive.DayNight.NoActionBar` | `Theme.EdgeToEdge.Material3Expressive` |
57+
| `Theme.Material3Expressive.DynamicColors.DayNight.NoActionBar` | `Theme.EdgeToEdge.Material3Expressive.Dynamic` |
58+
| `Theme.AppCompat.Light.NoActionBar` | `Theme.EdgeToEdge.Light` |
59+
| `Theme.MaterialComponents.Light.NoActionBar` | `Theme.EdgeToEdge.Material2.Light` |
60+
| `Theme.Material3.Light.NoActionBar` | `Theme.EdgeToEdge.Material3.Light` |
61+
| `Theme.Material3.DynamicColors.Light.NoActionBar` | `Theme.EdgeToEdge.Material3.Dynamic.Light` |
62+
| `Theme.Material3Expressive.Light.NoActionBar` | `Theme.EdgeToEdge.Material3Expressive.Light` |
63+
| `Theme.Material3Expressive.DynamicColors.Light.NoActionBar` | `Theme.EdgeToEdge.Material3Expressive.Dynamic.Light` |
6064

6165
### Expo
6266

‎android/build.gradle‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,5 +70,5 @@ repositories {
7070
dependencies {
7171
//noinspection GradleDynamicVersion
7272
implementation "com.facebook.react:react-native:+" // From node_modules
73-
implementation "com.google.android.material:material:${safeExtGet("materialVersion", "1.12.0")}"
73+
implementation "com.google.android.material:material:${safeExtGet("materialVersion", "1.14.0-alpha03")}"
7474
}

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,16 @@
2020
<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
2121
</style>
2222

23+
<style name="Theme.EdgeToEdge.Material3Expressive" parent="Theme.EdgeToEdge.Material3Expressive.DayNight.Common">
24+
<item name="android:windowLightNavigationBar">@bool/windowLightSystemBars</item>
25+
<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
26+
</style>
27+
28+
<style name="Theme.EdgeToEdge.Material3Expressive.Dynamic" parent="Theme.EdgeToEdge.Material3Expressive.Dynamic.DayNight.Common">
29+
<item name="android:windowLightNavigationBar">@bool/windowLightSystemBars</item>
30+
<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
31+
</style>
32+
2333
<style name="Theme.EdgeToEdge.Light" parent="Theme.EdgeToEdge.Light.Common">
2434
<item name="android:windowLightNavigationBar">true</item>
2535
<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
@@ -39,4 +49,14 @@
3949
<item name="android:windowLightNavigationBar">true</item>
4050
<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
4151
</style>
52+
53+
<style name="Theme.EdgeToEdge.Material3Expressive.Light" parent="Theme.EdgeToEdge.Material3Expressive.Light.Common">
54+
<item name="android:windowLightNavigationBar">true</item>
55+
<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
56+
</style>
57+
58+
<style name="Theme.EdgeToEdge.Material3Expressive.Dynamic.Light" parent="Theme.EdgeToEdge.Material3Expressive.Dynamic.Light.Common">
59+
<item name="android:windowLightNavigationBar">true</item>
60+
<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
61+
</style>
4262
</resources>

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,20 @@
2828
<item name="android:enforceNavigationBarContrast">?enforceNavigationBarContrast</item>
2929
</style>
3030

31+
<style name="Theme.EdgeToEdge.Material3Expressive" parent="Theme.EdgeToEdge.Material3Expressive.DayNight.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">?enforceNavigationBarContrast</item>
36+
</style>
37+
38+
<style name="Theme.EdgeToEdge.Material3Expressive.Dynamic" parent="Theme.EdgeToEdge.Material3Expressive.Dynamic.DayNight.Common">
39+
<item name="android:windowLightNavigationBar">@bool/windowLightSystemBars</item>
40+
<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
41+
<item name="android:enforceStatusBarContrast">false</item>
42+
<item name="android:enforceNavigationBarContrast">?enforceNavigationBarContrast</item>
43+
</style>
44+
3145
<style name="Theme.EdgeToEdge.Light" parent="Theme.EdgeToEdge.Light.Common">
3246
<item name="android:windowLightNavigationBar">true</item>
3347
<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
@@ -55,4 +69,18 @@
5569
<item name="android:enforceStatusBarContrast">false</item>
5670
<item name="android:enforceNavigationBarContrast">?enforceNavigationBarContrast</item>
5771
</style>
72+
73+
<style name="Theme.EdgeToEdge.Material3Expressive.Light" parent="Theme.EdgeToEdge.Material3Expressive.Light.Common">
74+
<item name="android:windowLightNavigationBar">true</item>
75+
<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
76+
<item name="android:enforceStatusBarContrast">false</item>
77+
<item name="android:enforceNavigationBarContrast">?enforceNavigationBarContrast</item>
78+
</style>
79+
80+
<style name="Theme.EdgeToEdge.Material3Expressive.Dynamic.Light" parent="Theme.EdgeToEdge.Material3Expressive.Dynamic.Light.Common">
81+
<item name="android:windowLightNavigationBar">true</item>
82+
<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
83+
<item name="android:enforceStatusBarContrast">false</item>
84+
<item name="android:enforceNavigationBarContrast">?enforceNavigationBarContrast</item>
85+
</style>
5886
</resources>

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,20 @@
2828
<item name="android:enforceNavigationBarContrast">?enforceNavigationBarContrast</item>
2929
</style>
3030

31+
<style name="Theme.EdgeToEdge.Material3Expressive" parent="Theme.EdgeToEdge.Material3Expressive.DayNight.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">?enforceNavigationBarContrast</item>
36+
</style>
37+
38+
<style name="Theme.EdgeToEdge.Material3Expressive.Dynamic" parent="Theme.EdgeToEdge.Material3Expressive.Dynamic.DayNight.Common">
39+
<item name="android:windowLightNavigationBar">@bool/windowLightSystemBars</item>
40+
<item name="android:windowLayoutInDisplayCutoutMode">always</item>
41+
<item name="android:enforceStatusBarContrast">false</item>
42+
<item name="android:enforceNavigationBarContrast">?enforceNavigationBarContrast</item>
43+
</style>
44+
3145
<style name="Theme.EdgeToEdge.Light" parent="Theme.EdgeToEdge.Light.Common">
3246
<item name="android:windowLightNavigationBar">true</item>
3347
<item name="android:windowLayoutInDisplayCutoutMode">always</item>
@@ -55,4 +69,18 @@
5569
<item name="android:enforceStatusBarContrast">false</item>
5670
<item name="android:enforceNavigationBarContrast">?enforceNavigationBarContrast</item>
5771
</style>
72+
73+
<style name="Theme.EdgeToEdge.Material3Expressive.Light" parent="Theme.EdgeToEdge.Material3Expressive.Light.Common">
74+
<item name="android:windowLightNavigationBar">true</item>
75+
<item name="android:windowLayoutInDisplayCutoutMode">always</item>
76+
<item name="android:enforceStatusBarContrast">false</item>
77+
<item name="android:enforceNavigationBarContrast">?enforceNavigationBarContrast</item>
78+
</style>
79+
80+
<style name="Theme.EdgeToEdge.Material3Expressive.Dynamic.Light" parent="Theme.EdgeToEdge.Material3Expressive.Dynamic.Light.Common">
81+
<item name="android:windowLightNavigationBar">true</item>
82+
<item name="android:windowLayoutInDisplayCutoutMode">always</item>
83+
<item name="android:enforceStatusBarContrast">false</item>
84+
<item name="android:enforceNavigationBarContrast">?enforceNavigationBarContrast</item>
85+
</style>
5886
</resources>

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,13 @@
66
<public name="Theme.EdgeToEdge.Material2" type="style" />
77
<public name="Theme.EdgeToEdge.Material3" type="style" />
88
<public name="Theme.EdgeToEdge.Material3.Dynamic" type="style" />
9+
<public name="Theme.EdgeToEdge.Material3Expressive" type="style" />
10+
<public name="Theme.EdgeToEdge.Material3Expressive.Dynamic" type="style" />
911

1012
<public name="Theme.EdgeToEdge.Light" type="style" />
1113
<public name="Theme.EdgeToEdge.Material2.Light" type="style" />
1214
<public name="Theme.EdgeToEdge.Material3.Light" type="style" />
1315
<public name="Theme.EdgeToEdge.Material3.Dynamic.Light" type="style" />
16+
<public name="Theme.EdgeToEdge.Material3Expressive.Light" type="style" />
17+
<public name="Theme.EdgeToEdge.Material3Expressive.Dynamic.Light" type="style" />
1418
</resources>

‎android/src/main/res/values/styles.xml‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,28 @@
4444
<item name="android:windowLightStatusBar">@bool/windowLightSystemBars</item>
4545
</style>
4646

47+
<style name="Theme.EdgeToEdge.Material3Expressive.DayNight.Common" parent="Theme.Material3Expressive.DayNight.NoActionBar">
48+
<item name="enforceNavigationBarContrast">true</item>
49+
<item name="enforceSystemBarsLightTheme">false</item>
50+
51+
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
52+
<item name="android:fitsSystemWindows">false</item>
53+
<item name="android:navigationBarColor">@color/navigationBarColor</item>
54+
<item name="android:statusBarColor">@android:color/transparent</item>
55+
<item name="android:windowLightStatusBar">@bool/windowLightSystemBars</item>
56+
</style>
57+
58+
<style name="Theme.EdgeToEdge.Material3Expressive.Dynamic.DayNight.Common" parent="Theme.Material3Expressive.DynamicColors.DayNight.NoActionBar">
59+
<item name="enforceNavigationBarContrast">true</item>
60+
<item name="enforceSystemBarsLightTheme">false</item>
61+
62+
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
63+
<item name="android:fitsSystemWindows">false</item>
64+
<item name="android:navigationBarColor">@color/navigationBarColor</item>
65+
<item name="android:statusBarColor">@android:color/transparent</item>
66+
<item name="android:windowLightStatusBar">@bool/windowLightSystemBars</item>
67+
</style>
68+
4769
<style name="Theme.EdgeToEdge.Light.Common" parent="Theme.AppCompat.Light.NoActionBar">
4870
<item name="enforceNavigationBarContrast">true</item>
4971
<item name="enforceSystemBarsLightTheme">true</item>
@@ -88,13 +110,39 @@
88110
<item name="android:windowLightStatusBar">true</item>
89111
</style>
90112

113+
<style name="Theme.EdgeToEdge.Material3Expressive.Light.Common" parent="Theme.Material3Expressive.Light.NoActionBar">
114+
<item name="enforceNavigationBarContrast">true</item>
115+
<item name="enforceSystemBarsLightTheme">false</item>
116+
117+
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
118+
<item name="android:fitsSystemWindows">false</item>
119+
<item name="android:navigationBarColor">@color/navigationBarColor</item>
120+
<item name="android:statusBarColor">@android:color/transparent</item>
121+
<item name="android:windowLightStatusBar">@bool/windowLightSystemBars</item>
122+
</style>
123+
124+
<style name="Theme.EdgeToEdge.Material3Expressive.Dynamic.Light.Common" parent="Theme.Material3Expressive.DynamicColors.Light.NoActionBar">
125+
<item name="enforceNavigationBarContrast">true</item>
126+
<item name="enforceSystemBarsLightTheme">false</item>
127+
128+
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
129+
<item name="android:fitsSystemWindows">false</item>
130+
<item name="android:navigationBarColor">@color/navigationBarColor</item>
131+
<item name="android:statusBarColor">@android:color/transparent</item>
132+
<item name="android:windowLightStatusBar">@bool/windowLightSystemBars</item>
133+
</style>
134+
91135
<style name="Theme.EdgeToEdge" parent="Theme.EdgeToEdge.DayNight.Common" />
92136
<style name="Theme.EdgeToEdge.Material2" parent="Theme.EdgeToEdge.Material2.DayNight.Common" />
93137
<style name="Theme.EdgeToEdge.Material3" parent="Theme.EdgeToEdge.Material3.DayNight.Common" />
94138
<style name="Theme.EdgeToEdge.Material3.Dynamic" parent="Theme.EdgeToEdge.Material3.Dynamic.DayNight.Common" />
139+
<style name="Theme.EdgeToEdge.Material3Expressive" parent="Theme.EdgeToEdge.Material3Expressive.DayNight.Common" />
140+
<style name="Theme.EdgeToEdge.Material3Expressive.Dynamic" parent="Theme.EdgeToEdge.Material3Expressive.Dynamic.DayNight.Common" />
95141

96142
<style name="Theme.EdgeToEdge.Light" parent="Theme.EdgeToEdge.Light.Common" />
97143
<style name="Theme.EdgeToEdge.Material2.Light" parent="Theme.EdgeToEdge.Material2.Light.Common" />
98144
<style name="Theme.EdgeToEdge.Material3.Light" parent="Theme.EdgeToEdge.Material3.Light.Common" />
99145
<style name="Theme.EdgeToEdge.Material3.Dynamic.Light" parent="Theme.EdgeToEdge.Material3.Dynamic.Light.Common" />
146+
<style name="Theme.EdgeToEdge.Material3Expressive.Light" parent="Theme.EdgeToEdge.Material3Expressive.Light.Common" />
147+
<style name="Theme.EdgeToEdge.Material3Expressive.Dynamic.Light" parent="Theme.EdgeToEdge.Material3Expressive.Dynamic.Light.Common" />
100148
</resources>

‎src/expo.ts‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,14 @@ type ParentTheme =
99
| "Material2"
1010
| "Material3"
1111
| "Material3.Dynamic"
12+
| "Material3Expressive"
13+
| "Material3Expressive.Dynamic"
1214
| "Light"
1315
| "Material2.Light"
1416
| "Material3.Light"
15-
| "Material3.Dynamic.Light";
17+
| "Material3.Dynamic.Light"
18+
| "Material3Expressive.Light"
19+
| "Material3Expressive.Dynamic.Light";
1620

1721
type AndroidProps = {
1822
enforceNavigationBarContrast?: boolean;
@@ -30,11 +34,15 @@ const withAndroidEdgeToEdgeTheme: ConfigPlugin<Props> = (
3034
Material2: "Theme.EdgeToEdge.Material2",
3135
Material3: "Theme.EdgeToEdge.Material3",
3236
"Material3.Dynamic": "Theme.EdgeToEdge.Material3.Dynamic",
37+
"Material3Expressive": "Theme.EdgeToEdge.Material3Expressive",
38+
"Material3Expressive.Dynamic": "Theme.EdgeToEdge.Material3Expressive.Dynamic",
3339

3440
Light: "Theme.EdgeToEdge.Light",
3541
"Material2.Light": "Theme.EdgeToEdge.Material2.Light",
3642
"Material3.Light": "Theme.EdgeToEdge.Material3.Light",
3743
"Material3.Dynamic.Light": "Theme.EdgeToEdge.Material3.Dynamic.Light",
44+
"Material3Expressive.Light": "Theme.EdgeToEdge.Material3Expressive.Light",
45+
"Material3Expressive.Dynamic.Light": "Theme.EdgeToEdge.Material3Expressive.Dynamic.Light"
3846
};
3947

4048
const cleanupList = new Set([

0 commit comments

Comments
 (0)