diff --git a/.changeset/cyan-horses-tie.md b/.changeset/cyan-horses-tie.md
new file mode 100644
index 00000000..5ac5397b
--- /dev/null
+++ b/.changeset/cyan-horses-tie.md
@@ -0,0 +1,5 @@
+---
+'react-native-bottom-tabs': patch
+---
+
+feat: introduce material you theme for Expo plugin
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 30a81af9..e4f8fb4a 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -42,6 +42,14 @@ yarn workspace react-native-bottom-tabs-example android
To run the React Native example app on iOS:
+Make sure to install [`cocoapods-swift-modular-headers`](https://github.com/callstack/cocoapods-swift-modular-headers) gem, otherwise `pod install` will fail.
+
+```sh
+gem install cocoapods-swift-modular-headers
+```
+
+Next you can install cocoapods.
+
```sh
cd apps/example/ios
pod install
@@ -55,20 +63,20 @@ To run the Expo example:
yarn workspace example-expo start
```
-By default, the example is configured to build with the old architecture. To run the example with the new architecture, you can do the following:
+By default, the example is configured to build with the new architecture. To run the example with the old architecture, you can do the following:
1. For Android, run:
```sh
cd apps/example
- ORG_GRADLE_PROJECT_newArchEnabled=true yarn android
+ ORG_GRADLE_PROJECT_newArchEnabled=false yarn android
```
2. For iOS, run:
```sh
cd apps/example/ios
- RCT_NEW_ARCH_ENABLED=1 pod install
+ RCT_NEW_ARCH_ENABLED=0 pod install
cd -
yarn example ios
```
@@ -82,7 +90,7 @@ yarn clean
To confirm that the app is running with the new architecture, you can check the Metro logs for a message like this:
```sh
-Running "SwiftuiTabviewExample" with {"fabric":true,"initialProps":{"concurrentRoot":true},"rootTag":1}
+Running "ReactNativeBottomTabsExample" with {"fabric":true,"initialProps":{"concurrentRoot":true},"rootTag":1}
```
Note the `"fabric":true` and `"concurrentRoot":true` properties.
@@ -129,26 +137,14 @@ Our pre-commit hooks verify that the linter and tests pass when committing.
### Publishing to npm
-We use [release-it](https://github.com/release-it/release-it) to make it easier to publish new versions. It handles common tasks like bumping version based on semver, creating tags and releases etc.
+We use [changesets](https://github.com/changesets/changesets) to make it easier to publish new versions. It handles common tasks like bumping version based on semver, creating tags and releases etc.
To publish new versions, run the following:
```sh
-yarn release
+yarn publish-packages
```
-### Scripts
-
-The `package.json` file contains various scripts for common tasks:
-
-- `yarn`: setup project by installing dependencies.
-- `yarn typecheck`: type-check files with TypeScript.
-- `yarn lint`: lint files with ESLint.
-- `yarn test`: run unit tests with Jest.
-- `yarn workspace react-native-bottom-tabs-example start`: start the Metro server for the example app.
-- `yarn workspace react-native-bottom-tabs-example android`: run the example app on Android.
-- `yarn workspace react-native-bottom-tabs-example ios`: run the example app on iOS.
-
### Sending a pull request
> **Working on your first pull request?** You can learn how from this _free_ series: [How to Contribute to an Open Source Project on GitHub](https://app.egghead.io/playlists/how-to-contribute-to-an-open-source-project-on-github).
diff --git a/docs/docs/docs/getting-started/quick-start.mdx b/docs/docs/docs/getting-started/quick-start.mdx
index 50ef1344..57addd88 100644
--- a/docs/docs/docs/getting-started/quick-start.mdx
+++ b/docs/docs/docs/getting-started/quick-start.mdx
@@ -6,6 +6,10 @@ import { PackageManagerTabs } from '@theme';
+If you are going to use [React Navigation / Expo Router Integration](/docs/guides/usage-with-react-navigation) make sure to install `@bottom-tabs/react-navigation`.
+
+
+
If you use React Native version 0.75 or lower
diff --git a/docs/docs/docs/guides/android-native-styling.md b/docs/docs/docs/guides/android-native-styling.mdx
similarity index 53%
rename from docs/docs/docs/guides/android-native-styling.md
rename to docs/docs/docs/guides/android-native-styling.mdx
index 2f287c7e..88c1e830 100644
--- a/docs/docs/docs/guides/android-native-styling.md
+++ b/docs/docs/docs/guides/android-native-styling.mdx
@@ -1,5 +1,11 @@
# Android Native Styling
+React Native Bottom Tabs uses native platform primitives to ensure a consistent look and feel across platforms. This means that the appearance of the tabs is controlled by the native platform styling.
+
+
+
+
+
## Expo users
Use Expo Config Plugin for Material 3 styling:
@@ -21,6 +27,12 @@ If you want to use Material2 styling, you can pass `theme` option to the plugin:
}
```
+Available options:
+
+- `material2` - Material Design 2 styling
+- `material3` - Material Design 3 styling
+- `material3-dynamic` - Material Design 3 styling with dynamic theming (Material You)
+
## React Native Community CLI users
Inside of your `android/app/src/main/res/values/styles.xml` file you can customize the appearance of the native bottom tabs.
@@ -35,6 +47,17 @@ Inside of your `android/app/src/main/res/values/styles.xml` file you can customi
```
+For Material 3 Dynamic theming (Material You), you can use `Theme.Material3.DynamicColors.DayNight.NoActionBar`:
+
+```diff
+
+-
+
+```
+
If you want to use Material Design 2, you can extend from `Theme.MaterialComponents.DayNight.NoActionBar`:
```diff
diff --git a/docs/docs/docs/guides/edge-to-edge-support.md b/docs/docs/docs/guides/edge-to-edge-support.md
index 8b3a3f62..8058cee1 100644
--- a/docs/docs/docs/guides/edge-to-edge-support.md
+++ b/docs/docs/docs/guides/edge-to-edge-support.md
@@ -6,7 +6,7 @@ In order to enable edge-to-edge follow installation instructions for [react-nati
:::note
-When using `react-native-edge-to-edge` config plugin, you don't need `react-native-bottom-tabs` config plugin. Make sure to set `parentTheme` to be either `Material2` or `Material3`.
+When using `react-native-edge-to-edge` config plugin, you don't need `react-native-bottom-tabs` config plugin. Make sure to set `parentTheme` to be one of `Material2` or `Material3` themes.
```json
{
diff --git a/docs/docs/docs/guides/usage-with-expo-router.mdx b/docs/docs/docs/guides/usage-with-expo-router.mdx
index 013461ec..86f2b752 100644
--- a/docs/docs/docs/guides/usage-with-expo-router.mdx
+++ b/docs/docs/docs/guides/usage-with-expo-router.mdx
@@ -46,5 +46,5 @@ export default function TabLayout() {
For props and more information, see the [React Navigation integration guide](/docs/guides/usage-with-react-navigation).
-Example: [EvanBacon/expo-router-react-native-bottom-tabs](https://github.com/EvanBacon/expo-router-react-native-bottom-tabs)
+Example: [okwasniewski/ExpoNativeTabs](https://github.com/okwasniewski/ExpoNativeTabs)
diff --git a/docs/docs/docs/guides/usage-with-react-navigation.mdx b/docs/docs/docs/guides/usage-with-react-navigation.mdx
index f4e8c3a9..feaa265f 100644
--- a/docs/docs/docs/guides/usage-with-react-navigation.mdx
+++ b/docs/docs/docs/guides/usage-with-react-navigation.mdx
@@ -123,11 +123,11 @@ Available options:
It's recommended to use `transparent` or `opaque` without lazy loading as the tab bar background flashes when a view is rendered lazily.
:::
-### `tabBarActiveTintColor`
+#### `tabBarActiveTintColor`
Color for the active tab.
-### `tabBarInactiveTintColor`
+#### `tabBarInactiveTintColor`
Color for the inactive tabs.
@@ -280,7 +280,7 @@ React.useEffect(() => {
### Hooks
-`useBottomTabBarHeight`
+#### `useBottomTabBarHeight`
This hook returns the height of the bottom tab bar. This is useful when you want to place a component above the tab bar on iOS. It's not needed to offset the content of the screen as the navigator does it automatically.
diff --git a/packages/react-native-bottom-tabs/src/expo.ts b/packages/react-native-bottom-tabs/src/expo.ts
index f31dc9cd..161cc6bb 100644
--- a/packages/react-native-bottom-tabs/src/expo.ts
+++ b/packages/react-native-bottom-tabs/src/expo.ts
@@ -4,6 +4,8 @@ import {
withAndroidStyles,
} from '@expo/config-plugins';
+const MATERIAL3_THEME_DYANMIC =
+ 'Theme.Material3.DynamicColors.DayNight.NoActionBar';
const MATERIAL3_THEME = 'Theme.Material3.DayNight.NoActionBar';
const MATERIAL2_THEME = 'Theme.MaterialComponents.DayNight.NoActionBar';
@@ -12,7 +14,7 @@ type ConfigProps = {
* Define theme that should be used.
* @default 'material3'
*/
- theme: 'material2' | 'material3';
+ theme: 'material2' | 'material3' | 'material3-dynamic';
};
const withMaterial3Theme: ConfigPlugin = (config, options) => {
@@ -22,7 +24,9 @@ const withMaterial3Theme: ConfigPlugin = (config, options) => {
stylesConfig.modResults.resources.style =
stylesConfig.modResults.resources.style?.map((style) => {
if (style.$.name === 'AppTheme') {
- if (theme === 'material2') {
+ if (theme === 'material3-dynamic') {
+ style.$.parent = MATERIAL3_THEME_DYANMIC;
+ } else if (theme === 'material2') {
style.$.parent = MATERIAL2_THEME;
} else {
style.$.parent = MATERIAL3_THEME;