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; }