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;