feat: introduce material you theme for Expo Config Plugin (#244)

* feat: introduce material you dynamic style

* docs: update contributing readme, various documentaion fixes

Author: okwasniewski

.changeset/cyan-horses-tie.md

@@ -0,0 +1,5 @@
+---
+'react-native-bottom-tabs': patch
+---
+
+feat: introduce material you theme for Expo plugin

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).

docs/docs/docs/getting-started/quick-start.mdx

@@ -6,6 +6,10 @@ import { PackageManagerTabs } from '@theme';
 
 <PackageManagerTabs command="install react-native-bottom-tabs" />
 
+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`.
+
+<PackageManagerTabs command="install @bottom-tabs/react-navigation" />
+
 <details>
   <summary>If you use React Native <b>version 0.75 or lower</b></summary>
 

docs/docs/docs/guides/android-native-styling.md renamed to 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.
+
+<div style={{ display: 'flex', justifyContent: 'center' }}>
+  <video controls width="350" src="https://github.com/user-attachments/assets/8846e85b-c646-4aab-b668-59d0997ca007" />
+</div>
+
 ## 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
 </resources>
 ```
 
+For Material 3 Dynamic theming (Material You), you can use `Theme.Material3.DynamicColors.DayNight.NoActionBar`:
+
+```diff
+<resources>
+- <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
++ <style name="AppTheme" parent="Theme.Material3.DynamicColors.DayNight.NoActionBar">
+    <!-- … -->
+  </style>
+</resources>
+```
+
 If you want to use Material Design 2, you can extend from `Theme.MaterialComponents.DayNight.NoActionBar`:
 
 ```diff

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
 {

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)
 

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.
 

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<ConfigProps> = (config, options) => {
@@ -22,7 +24,9 @@ const withMaterial3Theme: ConfigPlugin<ConfigProps> = (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;