feat: support material3 expressive (#444)

Author: okwasniewski

.changeset/olive-rockets-take.md

@@ -0,0 +1,5 @@
+---
+'react-native-bottom-tabs': patch
+---
+
+feat: support material3 expressive

docs/docs/docs/guides/android-native-styling.mdx

@@ -32,6 +32,7 @@ Available options:
 - `material2` - Material Design 2 styling
 - `material3` - Material Design 3 styling
 - `material3-dynamic` - Material Design 3 styling with dynamic theming (Material You)
+- `material3-expressive` - Material Design 3 Expressive styling
 
 ## React Native Community CLI users
 
@@ -69,3 +70,14 @@ If you want to use Material Design 2, you can extend from `Theme.MaterialCompone
 </resources>
 ```
 
+For Material Design 3 Expressive styling, you can use `Theme.Material3Expressive.DayNight.NoActionBar`:
+
+```diff
+<resources>
+- <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
++ <style name="AppTheme" parent="Theme.Material3Expressive.DayNight.NoActionBar">
+    <!-- … -->
+  </style>
+</resources>
+```
+

packages/react-native-bottom-tabs/android/build.gradle

@@ -107,7 +107,7 @@ dependencies {
   //noinspection GradleDynamicVersion
   implementation "com.facebook.react:react-native:+"
   implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
-  implementation 'com.google.android.material:material:1.13.0-alpha10'
+  implementation 'com.google.android.material:material:1.14.0-alpha05'
 
   implementation("io.coil-kt.coil3:coil:${COIL_VERSION}")
   implementation("io.coil-kt.coil3:coil-network-okhttp:${COIL_VERSION}")

packages/react-native-bottom-tabs/src/expo.ts

@@ -8,13 +8,19 @@ const MATERIAL3_THEME_DYANMIC =
   'Theme.Material3.DynamicColors.DayNight.NoActionBar';
 const MATERIAL3_THEME = 'Theme.Material3.DayNight.NoActionBar';
 const MATERIAL2_THEME = 'Theme.MaterialComponents.DayNight.NoActionBar';
+const MATERIAL3_EXPRESSIVE_THEME =
+  'Theme.Material3Expressive.DayNight.NoActionBar';
 
 type ConfigProps = {
   /*
    * Define theme that should be used.
    * @default 'material3'
    */
-  theme: 'material2' | 'material3' | 'material3-dynamic';
+  theme:
+    | 'material2'
+    | 'material3'
+    | 'material3-dynamic'
+    | 'material3-expressive';
 };
 
 const withMaterial3Theme: ConfigPlugin<ConfigProps> = (config, options) => {
@@ -28,6 +34,8 @@ const withMaterial3Theme: ConfigPlugin<ConfigProps> = (config, options) => {
             style.$.parent = MATERIAL3_THEME_DYANMIC;
           } else if (theme === 'material2') {
             style.$.parent = MATERIAL2_THEME;
+          } else if (theme === 'material3-expressive') {
+            style.$.parent = MATERIAL3_EXPRESSIVE_THEME;
           } else {
             style.$.parent = MATERIAL3_THEME;
           }