diff --git a/.changeset/olive-rockets-take.md b/.changeset/olive-rockets-take.md
new file mode 100644
index 00000000..4bf34611
--- /dev/null
+++ b/.changeset/olive-rockets-take.md
@@ -0,0 +1,5 @@
+---
+'react-native-bottom-tabs': patch
+---
+
+feat: support material3 expressive
diff --git a/docs/docs/docs/guides/android-native-styling.mdx b/docs/docs/docs/guides/android-native-styling.mdx
index 88c1e830..bf30591d 100644
--- a/docs/docs/docs/guides/android-native-styling.mdx
+++ b/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
```
+For Material Design 3 Expressive styling, you can use `Theme.Material3Expressive.DayNight.NoActionBar`:
+
+```diff
+
+-
+
+```
+
diff --git a/packages/react-native-bottom-tabs/android/build.gradle b/packages/react-native-bottom-tabs/android/build.gradle
index babf4f18..f0892bd0 100644
--- a/packages/react-native-bottom-tabs/android/build.gradle
+++ b/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}")
diff --git a/packages/react-native-bottom-tabs/src/expo.ts b/packages/react-native-bottom-tabs/src/expo.ts
index 161cc6bb..a558d25e 100644
--- a/packages/react-native-bottom-tabs/src/expo.ts
+++ b/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 = (config, options) => {
@@ -28,6 +34,8 @@ const withMaterial3Theme: ConfigPlugin = (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;
}