Add Material2 / Material3 themes (#42)

zoontek · web-flow · commit 458c0de16143 · 2024-11-09T14:00:30.000+01:00
diff --git a/README.md b/README.md
@@ -57,15 +57,27 @@ Add the library plugin in your `app.json` config file and [create a new build](h
 }
 ```
 
+_📌 The available plugins options are:_
+
+```ts
+type Options = {
+  android?: {
+    // use an edge-to-edge version of `Theme.{MaterialComponents,Material3}.DayNight.NoActionBar`
+    parentTheme?: "Material2" | "Material3"; // optional, default is `undefined` (`Theme.EdgeToEdge`)
+  };
+};
+```
+
 > [!NOTE]
 > This library is not yet supported in the [Expo Go](https://expo.dev/go) sandbox app.
 
 ### Bare React Native
 
-Edit your `android/app/src/main/res/values/styles.xml` file to inherit from the provided theme:
+Edit your `android/app/src/main/res/values/styles.xml` file to inherit from one of the provided themes:
 
 ```diff
 <resources>
+  <!-- inherit from Theme.EdgeToEdge / Theme.EdgeToEdge.Material2 / Theme.EdgeToEdge.Material3 -->
 - <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
 + <style name="AppTheme" parent="Theme.EdgeToEdge">
     <!-- … -->
diff --git a/android/build.gradle b/android/build.gradle
@@ -70,4 +70,5 @@ repositories {
 dependencies {
     //noinspection GradleDynamicVersion
     implementation "com.facebook.react:react-native:+" // From node_modules
+    implementation "com.google.android.material:material:${safeExtGet("materialVersion", "1.12.0")}"
 }
diff --git a/android/src/main/res/values-night-v27/bools.xml b/android/src/main/res/values-night-v27/bools.xml
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <bool name="windowLightSystemBars">false</bool>
+</resources>
diff --git a/android/src/main/res/values-night-v27/styles.xml b/android/src/main/res/values-night-v27/styles.xml
diff --git a/android/src/main/res/values-night/bools.xml b/android/src/main/res/values-night/bools.xml
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <bool name="windowLightSystemBars">false</bool>
+</resources>
diff --git a/android/src/main/res/values-night/styles.xml b/android/src/main/res/values-night/styles.xml
diff --git a/android/src/main/res/values-v27/bools.xml b/android/src/main/res/values-v27/bools.xml
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <bool name="windowLightSystemBars">true</bool>
+</resources>
diff --git a/android/src/main/res/values-v27/styles.xml b/android/src/main/res/values-v27/styles.xml
@@ -1,11 +1,17 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <style name="Theme.EdgeToEdge.Base" parent="Theme.AppCompat.DayNight.NoActionBar">
-        <item name="android:windowLightStatusBar">true</item>
-        <item name="android:windowLightNavigationBar">true</item>
+    <style name="Theme.EdgeToEdge" parent="Theme.EdgeToEdge.Common">
+        <item name="android:windowLightNavigationBar">@bool/windowLightSystemBars</item>
+        <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
     </style>
 
-    <style name="Theme.EdgeToEdge" parent="Theme.EdgeToEdge.Common">
+    <style name="Theme.EdgeToEdge.Material2" parent="Theme.EdgeToEdge.Material2.Common">
+        <item name="android:windowLightNavigationBar">@bool/windowLightSystemBars</item>
+        <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
+    </style>
+
+    <style name="Theme.EdgeToEdge.Material3" parent="Theme.EdgeToEdge.Material3.Common">
+        <item name="android:windowLightNavigationBar">@bool/windowLightSystemBars</item>
         <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
     </style>
 </resources>
diff --git a/android/src/main/res/values-v29/styles.xml b/android/src/main/res/values-v29/styles.xml
@@ -1,6 +1,21 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
     <style name="Theme.EdgeToEdge" parent="Theme.EdgeToEdge.Common">
+        <item name="android:windowLightNavigationBar">@bool/windowLightSystemBars</item>
+        <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
+        <item name="android:enforceStatusBarContrast">false</item>
+        <item name="android:enforceNavigationBarContrast">true</item>
+    </style>
+
+    <style name="Theme.EdgeToEdge.Material2" parent="Theme.EdgeToEdge.Material2.Common">
+        <item name="android:windowLightNavigationBar">@bool/windowLightSystemBars</item>
+        <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
+        <item name="android:enforceStatusBarContrast">false</item>
+        <item name="android:enforceNavigationBarContrast">true</item>
+    </style>
+
+    <style name="Theme.EdgeToEdge.Material3" parent="Theme.EdgeToEdge.Material3.Common">
+        <item name="android:windowLightNavigationBar">@bool/windowLightSystemBars</item>
         <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
         <item name="android:enforceStatusBarContrast">false</item>
         <item name="android:enforceNavigationBarContrast">true</item>
diff --git a/android/src/main/res/values-v30/styles.xml b/android/src/main/res/values-v30/styles.xml
@@ -1,6 +1,21 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
     <style name="Theme.EdgeToEdge" parent="Theme.EdgeToEdge.Common">
+        <item name="android:windowLightNavigationBar">@bool/windowLightSystemBars</item>
+        <item name="android:windowLayoutInDisplayCutoutMode">always</item>
+        <item name="android:enforceStatusBarContrast">false</item>
+        <item name="android:enforceNavigationBarContrast">true</item>
+    </style>
+
+    <style name="Theme.EdgeToEdge.Material2" parent="Theme.EdgeToEdge.Material2.Common">
+        <item name="android:windowLightNavigationBar">@bool/windowLightSystemBars</item>
+        <item name="android:windowLayoutInDisplayCutoutMode">always</item>
+        <item name="android:enforceStatusBarContrast">false</item>
+        <item name="android:enforceNavigationBarContrast">true</item>
+    </style>
+
+    <style name="Theme.EdgeToEdge.Material3" parent="Theme.EdgeToEdge.Material3.Common">
+        <item name="android:windowLightNavigationBar">@bool/windowLightSystemBars</item>
         <item name="android:windowLayoutInDisplayCutoutMode">always</item>
         <item name="android:enforceStatusBarContrast">false</item>
         <item name="android:enforceNavigationBarContrast">true</item>
diff --git a/android/src/main/res/values/bools.xml b/android/src/main/res/values/bools.xml
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <bool name="windowLightSystemBars">true</bool>
+</resources>
diff --git a/android/src/main/res/values/public.xml b/android/src/main/res/values/public.xml
@@ -1,4 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
     <public name="Theme.EdgeToEdge" type="style" />
+    <public name="Theme.EdgeToEdge.Material2" type="style" />
+    <public name="Theme.EdgeToEdge.Material3" type="style" />
 </resources>
diff --git a/android/src/main/res/values/styles.xml b/android/src/main/res/values/styles.xml
@@ -1,16 +1,30 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <style name="Theme.EdgeToEdge.Base" parent="Theme.AppCompat.DayNight.NoActionBar">
-        <item name="android:windowLightStatusBar">true</item>
+    <style name="Theme.EdgeToEdge.Common" parent="Theme.AppCompat.DayNight.NoActionBar">
+        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
+        <item name="android:fitsSystemWindows">false</item>
+        <item name="android:navigationBarColor">@color/navigationBarColor</item>
+        <item name="android:statusBarColor">@android:color/transparent</item>
+        <item name="android:windowLightStatusBar">@bool/windowLightSystemBars</item>
     </style>
 
-    <style name="Theme.EdgeToEdge.Common" parent="Theme.EdgeToEdge.Base">
-        <item name="android:fitsSystemWindows">false</item>
+    <style name="Theme.EdgeToEdge.Material2.Common" parent="Theme.MaterialComponents.DayNight.NoActionBar">
         <item name="android:windowDrawsSystemBarBackgrounds">true</item>
-        <item name="android:statusBarColor">@android:color/transparent</item>
+        <item name="android:fitsSystemWindows">false</item>
         <item name="android:navigationBarColor">@color/navigationBarColor</item>
+        <item name="android:statusBarColor">@android:color/transparent</item>
+        <item name="android:windowLightStatusBar">@bool/windowLightSystemBars</item>
     </style>
 
-    <style name="Theme.EdgeToEdge" parent="Theme.EdgeToEdge.Common">
+    <style name="Theme.EdgeToEdge.Material3.Common" parent="Theme.Material3.DayNight.NoActionBar">
+        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
+        <item name="android:fitsSystemWindows">false</item>
+        <item name="android:navigationBarColor">@color/navigationBarColor</item>
+        <item name="android:statusBarColor">@android:color/transparent</item>
+        <item name="android:windowLightStatusBar">@bool/windowLightSystemBars</item>
     </style>
+
+    <style name="Theme.EdgeToEdge" parent="Theme.EdgeToEdge.Common" />
+    <style name="Theme.EdgeToEdge.Material2" parent="Theme.EdgeToEdge.Material2.Common" />
+    <style name="Theme.EdgeToEdge.Material3" parent="Theme.EdgeToEdge.Material3.Common" />
 </resources>
diff --git a/example/Gemfile.lock b/example/Gemfile.lock
@@ -5,8 +5,9 @@ GEM
       base64
       nkf
       rexml
-    activesupport (7.2.1.2)
+    activesupport (7.2.2)
       base64
+      benchmark (>= 0.3)
       bigdecimal
       concurrent-ruby (~> 1.0, >= 1.3.1)
       connection_pool (>= 2.2.5)
@@ -23,6 +24,7 @@ GEM
       json (>= 1.5.1)
     atomos (0.1.3)
     base64 (0.2.0)
+    benchmark (0.3.0)
     bigdecimal (3.1.8)
     claide (1.1.0)
     cocoapods (1.15.2)
@@ -76,7 +78,7 @@ GEM
     httpclient (2.8.3)
     i18n (1.14.6)
       concurrent-ruby (~> 1.0)
-    json (2.7.5)
+    json (2.7.6)
     logger (1.6.1)
     minitest (5.25.1)
     molinillo (0.8.0)
@@ -112,4 +114,4 @@ RUBY VERSION
    ruby 3.3.4p94
 
 BUNDLED WITH
-   2.5.14
+   2.5.18
diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
@@ -1242,7 +1242,7 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
-  - react-native-safe-area-context (4.12.0):
+  - react-native-safe-area-context (4.14.0):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1255,8 +1255,8 @@ PODS:
     - React-featureflags
     - React-graphics
     - React-ImageManager
-    - react-native-safe-area-context/common (= 4.12.0)
-    - react-native-safe-area-context/fabric (= 4.12.0)
+    - react-native-safe-area-context/common (= 4.14.0)
+    - react-native-safe-area-context/fabric (= 4.14.0)
     - React-NativeModulesApple
     - React-RCTFabric
     - React-rendererdebug
@@ -1265,7 +1265,7 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
-  - react-native-safe-area-context/common (4.12.0):
+  - react-native-safe-area-context/common (4.14.0):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1286,7 +1286,7 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
-  - react-native-safe-area-context/fabric (4.12.0):
+  - react-native-safe-area-context/fabric (4.14.0):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1870,7 +1870,7 @@ SPEC CHECKSUMS:
   React-logger: 97c9dafae1f1a638001a9d1d0e93d431f2f9cb7b
   React-Mapbuffer: 3146a13424f9fec2ea1f1462d49d566e4d69b732
   React-microtasksnativemodule: 02d218c79c72d373a92a8552183f4ead0d1c6e05
-  react-native-safe-area-context: 458f6b948437afcb59198016b26bbd02ff9c3b47
+  react-native-safe-area-context: 2500e4fe998caad50ad3bc51ec23ef951308569e
   react-native-segmented-control: 6a1ba93bd548d4706df5f472e8c71aea84874d92
   React-nativeconfig: 93fe8c85a8c40820c57814e30f3e44b94c995a7b
   React-NativeModulesApple: b3e076fd0d7b73417fe1e8c8b26e3c57ae9b74aa
diff --git a/example/package.json b/example/package.json
@@ -18,7 +18,7 @@
     "react": "18.3.1",
     "react-native": "0.76.1",
     "react-native-edge-to-edge": "link:../",
-    "react-native-safe-area-context": "4.12.0",
+    "react-native-safe-area-context": "4.14.0",
     "react-native-screens": "3.35.0"
   },
   "devDependencies": {
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -4,11 +4,10 @@ import {
   createNativeStackNavigator,
   NativeStackScreenProps,
 } from "@react-navigation/native-stack";
-import { ReactNode, useState } from "react";
+import { ReactNode, useEffect, useState } from "react";
 import {
   Appearance,
   Text as BaseText,
-  ColorSchemeName,
   Modal,
   Platform,
   StyleProp,
@@ -101,6 +100,7 @@ const Button = ({
   );
 };
 
+const SCHEMES = ["system", "light", "dark"];
 const STYLES: SystemBarStyle[] = ["auto", "light", "dark"];
 
 type StackParamList = {
@@ -160,11 +160,18 @@ export const HomeScreen = ({
     ? { false: "#1c1c1f", true: "#2b3e55" }
     : { false: "#eeeef0", true: "#ccd8e5" };
 
+  const [schemeIndex, setSchemeIndex] = useState(0);
   const [styleIndex, setStyleIndex] = useState(0);
   const [statusBarHidden, setStatusBarHidden] = useState(false);
   const [navigationBarHidden, setNavigationBarHidden] = useState(false);
   const [reactNativeModalVisible, setReactNativeModalVisible] = useState(false);
 
+  useEffect(() => {
+    const value = SCHEMES[schemeIndex];
+    const scheme = value === "light" || value === "dark" ? value : null;
+    Appearance.setColorScheme(scheme);
+  }, [schemeIndex]);
+
   const closeReactNativeModal = () => {
     setReactNativeModalVisible(false);
   };
@@ -182,10 +189,10 @@ export const HomeScreen = ({
       <Title>Theme</Title>
 
       <SegmentedControl
-        values={["light", "dark"] satisfies ColorSchemeName[]}
-        selectedIndex={dark ? 1 : 0}
+        values={SCHEMES}
+        selectedIndex={schemeIndex}
         onValueChange={(value) => {
-          Appearance.setColorScheme(value as ColorSchemeName);
+          setSchemeIndex(SCHEMES.indexOf(value));
         }}
       />
 
diff --git a/example/yarn.lock b/example/yarn.lock
diff --git a/package.json b/package.json
diff --git a/src/expo.ts b/src/expo.ts
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -70,4 +70,5 @@ repositories {`
`70`	`70`	`dependencies {`
`71`	`71`	`//noinspection GradleDynamicVersion`
`72`	`72`	`implementation "com.facebook.react:react-native:+" // From node_modules`
	`73`	`+ implementation "com.google.android.material:material:${safeExtGet("materialVersion", "1.12.0")}"`
`73`	`74`	`}`