diff --git a/docs/docs/guides/09-bottom-navigation.md b/docs/docs/guides/09-bottom-navigation.md index 21776718c9..a151e58353 100644 --- a/docs/docs/guides/09-bottom-navigation.md +++ b/docs/docs/guides/09-bottom-navigation.md @@ -3,242 +3,88 @@ title: Using BottomNavigation with React Navigation --- :::caution -The `createMaterialBottomTabNavigator` has been deprecated as of `react-native-paper@5.14.0`. Instead, use `@react-navigation/bottom-tabs` version `7.x` or later, combined with `BottomNavigation.Bar` to achieve a Material Design look. - -For implementation details, see the [dedicated example](https://callstack.github.io/react-native-paper/docs/components/BottomNavigation/BottomNavigationBar#with-react-navigation). +`createMaterialBottomTabNavigator` was deprecated in `react-native-paper@5.14.0` and removed in `react-native-paper@6.0.0`. Use [`@react-navigation/bottom-tabs`](https://reactnavigation.org/docs/bottom-tab-navigator) (v7+) with [`BottomNavigation.Bar`](https://callstack.github.io/react-native-paper/docs/components/BottomNavigation/BottomNavigationBar) instead. ::: -A material-design themed tab bar on the bottom of the screen that lets you switch between different routes with animation. Routes are lazily initialized - their screen components are not mounted until they are first focused. +Build a Material Design bottom tab bar by combining two pieces: -This wraps the [`BottomNavigation`](https://callstack.github.io/react-native-paper/docs/components/BottomNavigation/) component from `react-native-paper`, however if you [configure the Babel plugin](https://callstack.github.io/react-native-paper/docs/guides/getting-started/), it won't include the whole library in your bundle. +- `@react-navigation/bottom-tabs` handles routing, state, and screen options. +- `BottomNavigation.Bar` renders the Material 3 tab bar (ripple, badges, shifting/labeled modes). :::info -To use this navigator, ensure that you have [`@react-navigation/native` and its dependencies (follow this guide)](https://reactnavigation.org/docs/getting-started): +Install [`@react-navigation/native`](https://reactnavigation.org/docs/getting-started) and [`@react-navigation/bottom-tabs@^7`](https://reactnavigation.org/docs/bottom-tab-navigator) first. ::: -> ๐Ÿ‘‰ For a complete example please visit `createMaterialBottomTabNavigator` [snack](https://snack.expo.dev/@react-native-paper/creatematerialbottomtabnavigator) - -## API Definition +## Quick example -To use this tab navigator, import it from `react-native-paper/react-navigation`: +Pass a `BottomNavigation.Bar` to the navigator's `tabBar` prop. The bar reads navigation state and dispatches `tabPress` events back: -```js -import { createMaterialBottomTabNavigator } from 'react-native-paper/react-navigation'; +```jsx +import { CommonActions } from '@react-navigation/native'; +import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; +import { BottomNavigation } from 'react-native-paper'; +import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons'; -const Tab = createMaterialBottomTabNavigator(); - -function MyTabs() { - return ( - - - - - ); -} -``` - -> ๐Ÿ‘‰ For a complete usage guide please visit [Tab Navigation](https://reactnavigation.org/docs/tab-based-navigation/) - -### Props - -The `Tab.Navigator` component accepts following props: - -#### `id` - -Optional unique ID for the navigator. This can be used with [`navigation.getParent`](https://reactnavigation.org/docs/navigation-prop#getparent) to refer to this navigator in a child navigator. - -#### `initialRouteName` - -The name of the route to render on first load of the navigator. - -#### `screenOptions` - -Default options to use for the screens in the navigator. - -#### `backBehavior` - -This controls what happens when `goBack` is called in the navigator. This includes pressing the device's back button or back gesture on Android. - -It supports the following values: - -- `firstRoute` - return to the first screen defined in the navigator (default) -- `initialRoute` - return to initial screen passed in `initialRouteName` prop, if not passed, defaults to the first screen -- `order` - return to screen defined before the focused screen -- `history` - return to last visited screen in the navigator; if the same screen is visited multiple times, the older entries are dropped from the history -- `none` - do not handle back button - -#### `shifting` - -Whether the shifting style is used, the active tab icon shifts up to show the label and the inactive tabs won't have a label. - -By default, this is `true` when you have more than 3 tabs. Pass `shifting={false}` to explicitly disable this animation, or `shifting={true}` to always use this animation. - -#### `labeled` - -Whether to show labels in tabs. When `false`, only icons will be displayed. - -#### `activeColor` - -Custom color for icon and label in the active tab. - -#### `inactiveColor` - -Custom color for icon and label in the inactive tab. - -#### `barStyle` - -Style for the bottom navigation bar. You can pass custom background color here: - -```js - - {/* ... */} - -``` - -If you have a translucent navigation bar on Android, you can also set a bottom padding here: - -```js - - {/* ... */} - -``` - -#### `theme` - -Enables the customization of default theme attributes (e.g. colors) or facilitates the utilization of a personalized custom theme. - -### Options - -The following [options](https://reactnavigation.org/docs/screen-options) can be used to configure the screens in the navigator: - -#### `title` - -Generic title that can be used as a fallback for `headerTitle` and `tabBarLabel`. - -#### `tabBarIcon` - -Function that given `{ focused: boolean, color: string }` returns a React.Node, to display in the tab bar. - -#### `tabBarColor`
In v5.x works only with theme version 2.
- -Color for the tab bar when the tab corresponding to the screen is active. Used for the ripple effect. This is only supported when `shifting` is `true`. - -#### `tabBarLabel` - -Title string of a tab displayed in the tab bar. When undefined, scene `title` is used. To hide, see `labeled` option in the previous section. - -#### `tabBarBadge` - -Badge to show on the tab icon, can be `true` to show a dot, `string` or `number` to show text. - -#### `tabBarAccessibilityLabel` - -Accessibility label for the tab button. This is read by the screen reader when the user taps the tab. It's recommended to set this if you don't have a label for the tab. - -#### `tabBarTestID` - -ID to locate this tab button in tests. - -### Events - -The navigator can [emit events](https://reactnavigation.org/docs/navigation-events) on certain actions. Supported events are: - -#### `tabPress` - -This event is fired when the user presses the tab button for the current screen in the tab bar. By default a tab press does several things: - -- If the tab is not focused, tab press will focus that tab -- If the tab is already focused: - - If the screen for the tab renders a scroll view, you can use [`useScrollToTop`](https://reactnavigation.org/docs/use-scroll-to-top) to scroll it to top - - If the screen for the tab renders a stack navigator, a `popToTop` action is performed on the stack - -To prevent the default behavior, you can call `event.preventDefault`: - -```js -React.useEffect(() => { - const unsubscribe = navigation.addListener('tabPress', (e) => { - // Prevent default behavior - - e.preventDefault(); - // Do something manually - // ... - }); - - return unsubscribe; -}, [navigation]); -``` - -### Helpers - -The tab navigator adds the following methods to the navigation prop: - -#### `jumpTo` - -Navigates to an existing screen in the tab navigator. The method accepts following arguments: - -- `name` - _string_ - Name of the route to jump to. -- `params` - _object_ - Screen params to pass to the destination route. - - - -```js -navigation.jumpTo('Profile', { name: 'Michaล›' }); -``` - -## Example - -```js -import { createMaterialBottomTabNavigator } from 'react-native-paper/react-navigation'; -import MaterialDesignIcons from '@react-native-vector-icons/material-design-icons'; - -const Tab = createMaterialBottomTabNavigator(); +const Tab = createBottomTabNavigator(); function MyTabs() { return ( ( + { + const event = navigation.emit({ + type: 'tabPress', + target: route.key, + canPreventDefault: true, + }); + if (event.defaultPrevented) { + preventDefault(); + } else { + navigation.dispatch({ + ...CommonActions.navigate(route.name, route.params), + target: state.key, + }); + } + }} + renderIcon={({ route, focused, color }) => + descriptors[route.key].options.tabBarIcon?.({ + focused, + color, + size: 24, + }) ?? null + } + getLabelText={({ route }) => { + const { options } = descriptors[route.key]; + return typeof options.tabBarLabel === 'string' + ? options.tabBarLabel + : typeof options.title === 'string' + ? options.title + : route.name; + }} + /> + )} > ( - + ), }} /> ( - - ), - }} - /> - ( - + ), }} /> @@ -246,3 +92,20 @@ function MyTabs() { ); } ``` + +## References + +- [`BottomNavigation.Bar` props](https://callstack.github.io/react-native-paper/docs/components/BottomNavigation/BottomNavigationBar): `activeColor`, `inactiveColor`, `shifting`, `labeled`, `barStyle`, `theme`, badges. +- [`BottomNavigation.Bar` example](https://callstack.github.io/react-native-paper/docs/components/BottomNavigation/BottomNavigationBar#with-react-navigation): static-config and dynamic-tree variants. +- [React Navigation bottom-tabs](https://reactnavigation.org/docs/bottom-tab-navigator): navigator props, screen options (`tabBarIcon`, `tabBarLabel`, `tabBarBadge`), `tabPress` events, `jumpTo` helper. + +## Migration + +| Old (removed) | New | +|---|---| +| `createMaterialBottomTabNavigator()` | `createBottomTabNavigator()` from `@react-navigation/bottom-tabs` | +| `` | Pass the same props to `` inside `tabBar` | +| `options.tabBarIcon` / `tabBarLabel` / `tabBarBadge` | Same names; read via `descriptors[route.key].options` in `renderIcon` / `getLabelText` | +| `options.tabBarColor` (theme v2) | Removed. MD3 uses tonal surface colors. | +| `navigation.jumpTo(name, params)` | Same. Provided by `@react-navigation/bottom-tabs`. | +| `tabPress` event | Same. Emitted by `@react-navigation/bottom-tabs`. | diff --git a/docs/src/components/BannerExample.tsx b/docs/src/components/BannerExample.tsx index 7f4acdc7bc..59ec60634a 100644 --- a/docs/src/components/BannerExample.tsx +++ b/docs/src/components/BannerExample.tsx @@ -9,8 +9,8 @@ import { Avatar, Button, FAB, - MD3DarkTheme as DarkTheme, - MD3LightTheme as DefaultTheme, + DarkTheme, + LightTheme, ProgressBar, PaperProvider, RadioButton, @@ -167,7 +167,7 @@ const Shimmer = () => { const ThemedBannerExample = () => { const isDarkTheme = useColorMode().colorMode === 'dark'; return ( - + ); diff --git a/docs/src/components/GetStartedButtons.tsx b/docs/src/components/GetStartedButtons.tsx index 4debe5b5ac..fd00420b46 100644 --- a/docs/src/components/GetStartedButtons.tsx +++ b/docs/src/components/GetStartedButtons.tsx @@ -9,8 +9,8 @@ import Link from '@docusaurus/Link'; import { useColorMode } from '@docusaurus/theme-common'; import { Button, - MD3DarkTheme as DarkTheme, - MD3LightTheme as DefaultTheme, + DarkTheme, + LightTheme, PaperProvider, } from 'react-native-paper'; @@ -95,7 +95,7 @@ const Shimmer = () => { const ThemedGetStarted = () => { const isDarkTheme = useColorMode().colorMode === 'dark'; return ( - + ); diff --git a/example/src/DrawerItems.tsx b/example/src/DrawerItems.tsx index 7974fd6678..deac6e0fb5 100644 --- a/example/src/DrawerItems.tsx +++ b/example/src/DrawerItems.tsx @@ -9,7 +9,7 @@ import { Button, Dialog, Drawer, - MD3Colors, + Palette, Switch, Text, TouchableRipple, @@ -136,8 +136,8 @@ function DrawerItems() { const coloredLabelTheme = { colors: { - secondaryContainer: MD3Colors.tertiary80, - onSecondaryContainer: MD3Colors.tertiary20, + secondaryContainer: Palette.tertiary80, + onSecondaryContainer: Palette.tertiary20, }, }; diff --git a/example/src/Examples/ActivityIndicatorExample.tsx b/example/src/Examples/ActivityIndicatorExample.tsx index 15686054fa..e3e5e72e3c 100644 --- a/example/src/Examples/ActivityIndicatorExample.tsx +++ b/example/src/Examples/ActivityIndicatorExample.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { StyleSheet, View } from 'react-native'; -import { ActivityIndicator, FAB, List, MD3Colors } from 'react-native-paper'; +import { ActivityIndicator, FAB, List, Palette } from 'react-native-paper'; import ScreenWrapper from '../ScreenWrapper'; @@ -41,7 +41,7 @@ const ActivityIndicatorExample = () => { diff --git a/example/src/Examples/AnimatedFABExample/AnimatedFABExample.tsx b/example/src/Examples/AnimatedFABExample/AnimatedFABExample.tsx index f9b2303fad..3699bd0f3e 100644 --- a/example/src/Examples/AnimatedFABExample/AnimatedFABExample.tsx +++ b/example/src/Examples/AnimatedFABExample/AnimatedFABExample.tsx @@ -3,7 +3,7 @@ import type { NativeScrollEvent, NativeSyntheticEvent } from 'react-native'; import { Animated, FlatList, Platform, StyleSheet, View } from 'react-native'; import Icon from '@expo/vector-icons/MaterialCommunityIcons'; -import { Avatar, MD3Colors, Text } from 'react-native-paper'; +import { Avatar, Palette, Text } from 'react-native-paper'; import CustomFAB from './CustomFAB'; import CustomFABControls, { @@ -46,7 +46,7 @@ const AnimatedFABExample = () => { @@ -89,7 +89,7 @@ const AnimatedFABExample = () => { setVisible(!visible)} diff --git a/example/src/Examples/AppbarExample.tsx b/example/src/Examples/AppbarExample.tsx index 3425254732..d1eec2cef6 100644 --- a/example/src/Examples/AppbarExample.tsx +++ b/example/src/Examples/AppbarExample.tsx @@ -6,7 +6,7 @@ import { Appbar, FAB, List, - MD3Colors, + Palette, RadioButton, Snackbar, Switch, @@ -32,7 +32,6 @@ const AppbarExample = ({ navigation }: Props) => { const [showSearchIcon, setShowSearchIcon] = React.useState(true); const [showMoreIcon, setShowMoreIcon] = React.useState(true); const [showCustomColor, setShowCustomColor] = React.useState(false); - const [showExactTheme, setShowExactTheme] = React.useState(false); const [appbarMode, setAppbarMode] = React.useState('small'); const [showCalendarIcon, setShowCalendarIcon] = React.useState(false); const [showElevated, setShowElevated] = React.useState(false); @@ -49,9 +48,6 @@ const AppbarExample = ({ navigation }: Props) => { header: () => ( @@ -80,7 +76,6 @@ const AppbarExample = ({ navigation }: Props) => { showSearchIcon, showMoreIcon, showCustomColor, - showExactTheme, appbarMode, showCalendarIcon, isCenterAlignedMode, @@ -129,10 +124,6 @@ const AppbarExample = ({ navigation }: Props) => { Custom Color - - Exact Dark Theme - - Elevated @@ -186,7 +177,6 @@ const AppbarExample = ({ navigation }: Props) => { }, ]} safeAreaInsets={{ bottom, left, right }} - theme={{ mode: showExactTheme ? 'exact' : 'adaptive' }} > {}} /> {}} /> @@ -231,6 +221,6 @@ const styles = StyleSheet.create({ right: 16, }, customColor: { - backgroundColor: MD3Colors.secondary80, + backgroundColor: Palette.secondary80, }, }); diff --git a/example/src/Examples/AvatarExample.tsx b/example/src/Examples/AvatarExample.tsx index 229c2f4a0b..94a7da8570 100644 --- a/example/src/Examples/AvatarExample.tsx +++ b/example/src/Examples/AvatarExample.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { StyleSheet, View } from 'react-native'; -import { Avatar, List, MD3Colors } from 'react-native-paper'; +import { Avatar, List, Palette } from 'react-native-paper'; import ScreenWrapper from '../ScreenWrapper'; @@ -14,11 +14,11 @@ const AvatarExample = () => { style={[ styles.avatar, { - backgroundColor: MD3Colors.error70, + backgroundColor: Palette.error70, }, ]} label="XD" - color={MD3Colors.primary0} + color={Palette.primary0} /> @@ -30,11 +30,11 @@ const AvatarExample = () => { style={[ styles.avatar, { - backgroundColor: MD3Colors.error70, + backgroundColor: Palette.error70, }, ]} icon="folder" - color={MD3Colors.primary0} + color={Palette.primary0} /> diff --git a/example/src/Examples/BadgeExample.tsx b/example/src/Examples/BadgeExample.tsx index 3269dc70a8..c3df954659 100644 --- a/example/src/Examples/BadgeExample.tsx +++ b/example/src/Examples/BadgeExample.tsx @@ -5,7 +5,7 @@ import { Badge, IconButton, List, - MD3Colors, + Palette, Text, Switch, } from 'react-native-paper'; @@ -41,7 +41,7 @@ const BadgeExample = () => { style={[ styles.badge, { - backgroundColor: MD3Colors.primary80, + backgroundColor: Palette.primary80, }, ]} > diff --git a/example/src/Examples/BannerExample.tsx b/example/src/Examples/BannerExample.tsx index 7ec874a283..b469946981 100644 --- a/example/src/Examples/BannerExample.tsx +++ b/example/src/Examples/BannerExample.tsx @@ -8,7 +8,7 @@ import { View, } from 'react-native'; -import { Banner, FAB, MD3Colors } from 'react-native-paper'; +import { Banner, FAB, Palette } from 'react-native-paper'; import { useExampleTheme } from '../hooks/useExampleTheme'; import ScreenWrapper from '../ScreenWrapper'; @@ -33,12 +33,12 @@ const BannerExample = () => { ...defaultTheme, colors: { ...defaultTheme.colors, - onSurface: MD3Colors.tertiary100, + onSurface: Palette.tertiary100, elevation: { ...defaultTheme.colors.elevation, - level1: MD3Colors.tertiary50, + level1: Palette.tertiary50, }, - primary: MD3Colors.tertiary10, + primary: Palette.tertiary10, }, }; diff --git a/example/src/Examples/CheckboxExample.tsx b/example/src/Examples/CheckboxExample.tsx index 06088a646a..10ac45e11d 100644 --- a/example/src/Examples/CheckboxExample.tsx +++ b/example/src/Examples/CheckboxExample.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { StyleSheet, View } from 'react-native'; -import { Checkbox, MD3Colors, Text, TouchableRipple } from 'react-native-paper'; +import { Checkbox, Palette, Text, TouchableRipple } from 'react-native-paper'; import ScreenWrapper from '../ScreenWrapper'; @@ -26,7 +26,7 @@ const CheckboxExample = () => { Custom diff --git a/example/src/Examples/ChipExample.tsx b/example/src/Examples/ChipExample.tsx index 211ebfde49..8ee757fa0e 100644 --- a/example/src/Examples/ChipExample.tsx +++ b/example/src/Examples/ChipExample.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { Image, StyleSheet, View } from 'react-native'; import color from 'color'; -import { Chip, List, MD3Colors, Snackbar, Text } from 'react-native-paper'; +import { Chip, List, Palette, Snackbar, Text } from 'react-native-paper'; import ScreenWrapper from '../ScreenWrapper'; @@ -11,7 +11,7 @@ const ChipExample = () => { visible: false, text: '', }); - const customColor = MD3Colors.error50; + const customColor = Palette.error50; return ( <> diff --git a/example/src/Examples/Dialogs/DialogWithCustomColors.tsx b/example/src/Examples/Dialogs/DialogWithCustomColors.tsx index e3bffafd60..c811523b9e 100644 --- a/example/src/Examples/Dialogs/DialogWithCustomColors.tsx +++ b/example/src/Examples/Dialogs/DialogWithCustomColors.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { Button, Portal, Dialog, MD3Colors } from 'react-native-paper'; +import { Button, Portal, Dialog, Palette } from 'react-native-paper'; import { TextComponent } from './DialogTextComponent'; @@ -16,20 +16,18 @@ const DialogWithCustomColors = ({ - - Alert - + Alert - + This is a dialog with custom colors - diff --git a/example/src/Examples/Dialogs/DialogWithDismissableBackButton.tsx b/example/src/Examples/Dialogs/DialogWithDismissableBackButton.tsx index 261b7ff9e6..21f647e75c 100644 --- a/example/src/Examples/Dialogs/DialogWithDismissableBackButton.tsx +++ b/example/src/Examples/Dialogs/DialogWithDismissableBackButton.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { Button, Portal, Dialog, MD3Colors } from 'react-native-paper'; +import { Button, Portal, Dialog, Palette } from 'react-native-paper'; import { TextComponent } from './DialogTextComponent'; @@ -26,7 +26,7 @@ const DialogWithDismissableBackButton = ({ - diff --git a/example/src/Examples/Dialogs/DialogWithIcon.tsx b/example/src/Examples/Dialogs/DialogWithIcon.tsx index d939d4e401..f12089193d 100644 --- a/example/src/Examples/Dialogs/DialogWithIcon.tsx +++ b/example/src/Examples/Dialogs/DialogWithIcon.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { StyleSheet } from 'react-native'; -import { Button, Portal, Dialog, MD3Colors } from 'react-native-paper'; +import { Button, Portal, Dialog, Palette } from 'react-native-paper'; import { TextComponent } from './DialogTextComponent'; @@ -24,7 +24,7 @@ const DialogWithIcon = ({ - diff --git a/example/src/Examples/Dialogs/DialogWithLoadingIndicator.tsx b/example/src/Examples/Dialogs/DialogWithLoadingIndicator.tsx index 5860737e3e..86cbe67c0d 100644 --- a/example/src/Examples/Dialogs/DialogWithLoadingIndicator.tsx +++ b/example/src/Examples/Dialogs/DialogWithLoadingIndicator.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { ActivityIndicator, Platform, StyleSheet, View } from 'react-native'; -import { Dialog, MD3Colors, Portal } from 'react-native-paper'; +import { Dialog, Palette, Portal } from 'react-native-paper'; import { TextComponent } from './DialogTextComponent'; @@ -21,7 +21,7 @@ const DialogWithLoadingIndicator = ({ diff --git a/example/src/Examples/Dialogs/UndismissableDialog.tsx b/example/src/Examples/Dialogs/UndismissableDialog.tsx index ded4896fe2..3a9fe10cb8 100644 --- a/example/src/Examples/Dialogs/UndismissableDialog.tsx +++ b/example/src/Examples/Dialogs/UndismissableDialog.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { Button, Portal, Dialog, MD3Colors } from 'react-native-paper'; +import { Button, Portal, Dialog, Palette } from 'react-native-paper'; import { TextComponent } from './DialogTextComponent'; @@ -18,7 +18,7 @@ const UndismissableDialog = ({ This is an undismissable dialog!! - diff --git a/example/src/Examples/IconButtonExample.tsx b/example/src/Examples/IconButtonExample.tsx index 2b90a4ebd4..5d2a22e235 100644 --- a/example/src/Examples/IconButtonExample.tsx +++ b/example/src/Examples/IconButtonExample.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { StyleSheet, View } from 'react-native'; -import { IconButton, List, MD3Colors } from 'react-native-paper'; +import { IconButton, List, Palette } from 'react-native-paper'; import ScreenWrapper from '../ScreenWrapper'; @@ -121,7 +121,7 @@ const ButtonExample = () => { {}} /> { mode="contained" style={styles.square} size={24} - iconColor={MD3Colors.tertiary50} + iconColor={Palette.tertiary50} onPress={() => {}} /> { style={styles.slightlyRounded} size={24} contentStyle={styles.contentPadding} - iconColor={MD3Colors.tertiary50} + iconColor={Palette.tertiary50} onPress={() => {}} /> { mode="contained-tonal" style={styles.differentBorderRadius} size={24} - iconColor={MD3Colors.tertiary50} + iconColor={Palette.tertiary50} onPress={() => {}} /> { mode="outlined" style={styles.differentBorderRadius} size={24} - iconColor={MD3Colors.tertiary50} + iconColor={Palette.tertiary50} onPress={() => {}} /> {}} /> @@ -162,7 +162,7 @@ const ButtonExample = () => { icon="lock" size={36} onPress={() => {}} - containerColor={MD3Colors.tertiary60} + containerColor={Palette.tertiary60} /> {}} /> {}} loading /> diff --git a/example/src/Examples/ProgressBarExample.tsx b/example/src/Examples/ProgressBarExample.tsx index 5ab797bb1d..da1e93ad0d 100644 --- a/example/src/Examples/ProgressBarExample.tsx +++ b/example/src/Examples/ProgressBarExample.tsx @@ -4,7 +4,7 @@ import { View, StyleSheet, Animated } from 'react-native'; import { Button, ProgressBar, - MD3Colors, + Palette, ProgressBarProps, Text, } from 'react-native-paper'; @@ -62,7 +62,7 @@ const ProgressBarExample = () => { @@ -73,9 +73,9 @@ const ProgressBarExample = () => { diff --git a/example/src/Examples/RadioButtonExample.tsx b/example/src/Examples/RadioButtonExample.tsx index 7e3b3cf754..6ab1869dd9 100644 --- a/example/src/Examples/RadioButtonExample.tsx +++ b/example/src/Examples/RadioButtonExample.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { StyleSheet, View } from 'react-native'; import { - MD3Colors, + Palette, RadioButton, Text, TouchableRipple, @@ -45,7 +45,7 @@ const RadioButtonExample = () => { diff --git a/example/src/Examples/SearchbarExample.tsx b/example/src/Examples/SearchbarExample.tsx index c5b5eaca15..452af2ec34 100644 --- a/example/src/Examples/SearchbarExample.tsx +++ b/example/src/Examples/SearchbarExample.tsx @@ -3,13 +3,7 @@ import { Keyboard, StyleSheet } from 'react-native'; import type { DrawerNavigationProp } from '@react-navigation/drawer'; import type { StackNavigationProp } from '@react-navigation/stack'; -import { - List, - MD3Colors, - Searchbar, - Snackbar, - Avatar, -} from 'react-native-paper'; +import { List, Palette, Searchbar, Snackbar, Avatar } from 'react-native-paper'; import { useExampleTheme } from '../hooks/useExampleTheme'; import ScreenWrapper from '../ScreenWrapper'; @@ -57,7 +51,7 @@ const SearchExample = ({ navigation }: Props) => { value={searchQueries.traileringIcon} traileringIcon={'microphone'} traileringIconColor={ - isVisible ? MD3Colors.error40 : colors.onSurfaceVariant + isVisible ? Palette.error40 : colors.onSurfaceVariant } traileringIconAccessibilityLabel={'microphone button'} onTraileringIconPress={() => setIsVisible(true)} @@ -76,7 +70,7 @@ const SearchExample = ({ navigation }: Props) => { value={searchQueries.traileringIconWithRightItem} traileringIcon={'microphone'} traileringIconColor={ - isVisible ? MD3Colors.error40 : colors.onSurfaceVariant + isVisible ? Palette.error40 : colors.onSurfaceVariant } traileringIconAccessibilityLabel={'microphone button'} onTraileringIconPress={() => setIsVisible(true)} diff --git a/example/src/Examples/SurfaceExample.tsx b/example/src/Examples/SurfaceExample.tsx index 88ca904b10..b7e46b9053 100644 --- a/example/src/Examples/SurfaceExample.tsx +++ b/example/src/Examples/SurfaceExample.tsx @@ -1,13 +1,7 @@ import * as React from 'react'; import { ScrollView, StyleSheet, View } from 'react-native'; -import { - MD3Elevation, - Surface, - Text, - MD3Colors, - List, -} from 'react-native-paper'; +import { Elevation, Surface, Text, Palette, List } from 'react-native-paper'; import ScreenWrapper from '../ScreenWrapper'; @@ -19,7 +13,7 @@ const SurfaceExample = () => { key={index} style={[styles.surface, styles.v3Surface]} mode={mode} - elevation={index as MD3Elevation} + elevation={index as Elevation} > {`Elevation ${index === 1 ? '(default)' : ''} ${index}`} @@ -92,7 +86,7 @@ const styles = StyleSheet.create({ justifyContent: 'space-between', width: '100%', marginBottom: 20, - borderColor: MD3Colors.tertiary50, + borderColor: Palette.tertiary50, padding: 10, borderWidth: 1, }, @@ -105,7 +99,7 @@ const styles = StyleSheet.create({ justifyContent: 'space-between', width: '100%', marginBottom: 100, - borderColor: MD3Colors.tertiary50, + borderColor: Palette.tertiary50, padding: 10, borderWidth: 1, }, diff --git a/example/src/Examples/SwitchExample.tsx b/example/src/Examples/SwitchExample.tsx index 51baa12b01..da959eda47 100644 --- a/example/src/Examples/SwitchExample.tsx +++ b/example/src/Examples/SwitchExample.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { Platform, StyleSheet, View } from 'react-native'; -import { MD3Colors, Switch, Text, TouchableRipple } from 'react-native-paper'; +import { Palette, Switch, Text, TouchableRipple } from 'react-native-paper'; import ScreenWrapper from '../ScreenWrapper'; @@ -30,7 +30,7 @@ const SwitchExample = () => { Custom {switchValueCustomlLabel} - + @@ -57,7 +57,7 @@ const SwitchExample = () => { setCustomValue(!valueCustom)} - color={MD3Colors.tertiary50} + color={Palette.tertiary50} /> diff --git a/example/src/Examples/TextExample.tsx b/example/src/Examples/TextExample.tsx index 1cb96edfaf..ea814c1c18 100644 --- a/example/src/Examples/TextExample.tsx +++ b/example/src/Examples/TextExample.tsx @@ -3,7 +3,7 @@ import { Platform, StyleSheet, View } from 'react-native'; import { configureFonts, - MD3LightTheme, + LightTheme, PaperProvider, customText, } from 'react-native-paper'; @@ -30,7 +30,7 @@ const TextExample = () => { } as const; const theme = { - ...MD3LightTheme, + ...LightTheme, fonts: configureFonts({ config: fontConfig }), }; return ( diff --git a/example/src/Examples/TextInputExample.tsx b/example/src/Examples/TextInputExample.tsx index fbe11afd0a..598825a25f 100644 --- a/example/src/Examples/TextInputExample.tsx +++ b/example/src/Examples/TextInputExample.tsx @@ -13,7 +13,7 @@ import { configureFonts, HelperText, List, - MD3Colors, + Palette, TextInput, } from 'react-native-paper'; @@ -567,7 +567,7 @@ const TextInputExample = () => { * @@ -597,8 +597,8 @@ const TextInputExample = () => { onChangeText={(flatUnderlineColors) => inputActionHandler('flatUnderlineColors', flatUnderlineColors) } - underlineColor={MD3Colors.primary70} - activeUnderlineColor={MD3Colors.tertiary50} + underlineColor={Palette.primary70} + activeUnderlineColor={Palette.tertiary50} /> { onChangeText={(outlinedColors) => inputActionHandler('outlinedColors', outlinedColors) } - outlineColor={MD3Colors.primary70} - activeOutlineColor={MD3Colors.tertiary50} + outlineColor={Palette.primary70} + activeOutlineColor={Palette.tertiary50} /> void; @@ -9,7 +9,7 @@ export const PreferencesContext = React.createContext<{ toggleCustomFont: () => void; toggleRippleEffect: () => void; toggleShouldUseDynamicTheme?: () => void; - theme: MD3Theme; + theme: Theme; rtl: boolean; collapsed: boolean; customFontLoaded: boolean; diff --git a/example/src/hooks/useExampleTheme.ts b/example/src/hooks/useExampleTheme.ts index 059ab4d05c..7ac982fb22 100644 --- a/example/src/hooks/useExampleTheme.ts +++ b/example/src/hooks/useExampleTheme.ts @@ -1,3 +1,3 @@ -import { useTheme, type MD3Theme } from 'react-native-paper'; +import { useTheme, type Theme } from 'react-native-paper'; -export const useExampleTheme = () => useTheme(); +export const useExampleTheme = () => useTheme(); diff --git a/example/src/index.native.tsx b/example/src/index.native.tsx index 821386cc83..23b734fe4d 100644 --- a/example/src/index.native.tsx +++ b/example/src/index.native.tsx @@ -10,8 +10,8 @@ import { StatusBar } from 'expo-status-bar'; import * as Updates from 'expo-updates'; import { PaperProvider, - MD3DarkTheme, - MD3LightTheme, + DarkTheme, + LightTheme, DynamicLightTheme, DynamicDarkTheme, } from 'react-native-paper'; @@ -60,7 +60,7 @@ export default function PaperExample() { return isDarkMode ? DynamicDarkTheme : DynamicLightTheme; } - return isDarkMode ? MD3DarkTheme : MD3LightTheme; + return isDarkMode ? DarkTheme : LightTheme; }, [isDarkMode, shouldUseDynamicTheme]); React.useEffect(() => { diff --git a/example/src/index.tsx b/example/src/index.tsx index a6ee5ccc08..df291baf3f 100644 --- a/example/src/index.tsx +++ b/example/src/index.tsx @@ -5,7 +5,7 @@ import { createDrawerNavigator } from '@react-navigation/drawer'; import { InitialState, NavigationContainer } from '@react-navigation/native'; import { useFonts } from 'expo-font'; import { useKeepAwake } from 'expo-keep-awake'; -import { PaperProvider, MD3DarkTheme, MD3LightTheme } from 'react-native-paper'; +import { PaperProvider, DarkTheme, LightTheme } from 'react-native-paper'; import { SafeAreaInsetsContext } from 'react-native-safe-area-context'; import DrawerItems from './DrawerItems'; @@ -42,7 +42,7 @@ export default function PaperExample() { const [rippleEffectEnabled, setRippleEffectEnabled] = React.useState(true); const theme = React.useMemo( - () => (isDarkMode ? MD3DarkTheme : MD3LightTheme), + () => (isDarkMode ? DarkTheme : LightTheme), [isDarkMode] ); diff --git a/example/utils/index.ts b/example/utils/index.ts index d0856f19a5..bd26ae81e6 100644 --- a/example/utils/index.ts +++ b/example/utils/index.ts @@ -1,6 +1,6 @@ import { Platform } from 'react-native'; -import { MD3DarkTheme, MD3LightTheme, MD3Theme } from 'react-native-paper'; +import { DarkTheme, LightTheme, Theme } from 'react-native-paper'; type ReducerAction = { payload: State[T]; @@ -1155,80 +1155,80 @@ const darkCyanColors = { export const colorThemes = { paper: { - light: MD3LightTheme, - dark: MD3DarkTheme, + light: LightTheme, + dark: DarkTheme, }, pink: { light: { - ...MD3LightTheme, - colors: { ...MD3LightTheme.colors, ...lightPinkColors.colors }, + ...LightTheme, + colors: { ...LightTheme.colors, ...lightPinkColors.colors }, }, dark: { - ...MD3DarkTheme, - colors: { ...MD3DarkTheme.colors, ...darkPinkColors.colors }, + ...DarkTheme, + colors: { ...DarkTheme.colors, ...darkPinkColors.colors }, }, }, green: { light: { - ...MD3LightTheme, - colors: { ...MD3LightTheme.colors, ...lightGreenColors.colors }, + ...LightTheme, + colors: { ...LightTheme.colors, ...lightGreenColors.colors }, }, dark: { - ...MD3DarkTheme, - colors: { ...MD3DarkTheme.colors, ...darkGreenColors.colors }, + ...DarkTheme, + colors: { ...DarkTheme.colors, ...darkGreenColors.colors }, }, }, blue: { light: { - ...MD3LightTheme, - colors: { ...MD3LightTheme.colors, ...lightBlueColors.colors }, + ...LightTheme, + colors: { ...LightTheme.colors, ...lightBlueColors.colors }, }, dark: { - ...MD3DarkTheme, - colors: { ...MD3DarkTheme.colors, ...darkBlueColors.colors }, + ...DarkTheme, + colors: { ...DarkTheme.colors, ...darkBlueColors.colors }, }, }, orange: { light: { - ...MD3LightTheme, - colors: { ...MD3LightTheme.colors, ...lightOrangeColors.colors }, + ...LightTheme, + colors: { ...LightTheme.colors, ...lightOrangeColors.colors }, }, dark: { - ...MD3DarkTheme, - colors: { ...MD3DarkTheme.colors, ...darkOrangeColors.colors }, + ...DarkTheme, + colors: { ...DarkTheme.colors, ...darkOrangeColors.colors }, }, }, red: { light: { - ...MD3LightTheme, - colors: { ...MD3LightTheme.colors, ...lightRedColors.colors }, + ...LightTheme, + colors: { ...LightTheme.colors, ...lightRedColors.colors }, }, dark: { - ...MD3DarkTheme, - colors: { ...MD3DarkTheme.colors, ...darkRedColors.colors }, + ...DarkTheme, + colors: { ...DarkTheme.colors, ...darkRedColors.colors }, }, }, yellow: { light: { - ...MD3LightTheme, - colors: { ...MD3LightTheme.colors, ...lightYellowColors.colors }, + ...LightTheme, + colors: { ...LightTheme.colors, ...lightYellowColors.colors }, }, dark: { - ...MD3DarkTheme, - colors: { ...MD3DarkTheme.colors, ...darkYellowColors.colors }, + ...DarkTheme, + colors: { ...DarkTheme.colors, ...darkYellowColors.colors }, }, }, cyan: { light: { - ...MD3LightTheme, - colors: { ...MD3LightTheme.colors, ...lightCyanColors.colors }, + ...LightTheme, + colors: { ...LightTheme.colors, ...lightCyanColors.colors }, }, dark: { - ...MD3DarkTheme, - colors: { ...MD3DarkTheme.colors, ...darkCyanColors.colors }, + ...DarkTheme, + colors: { ...DarkTheme.colors, ...darkCyanColors.colors }, }, }, -} as { [key: string]: { light: MD3Theme; dark: MD3Theme } }; +} as { [key: string]: { light: Theme; dark: Theme } }; export const songsData = [ { diff --git a/example/utils/themes.ts b/example/utils/themes.ts index 85e4bb4f81..956b383ab1 100644 --- a/example/utils/themes.ts +++ b/example/utils/themes.ts @@ -4,39 +4,40 @@ import { } from '@react-navigation/native'; import { adaptNavigationTheme, - MD3DarkTheme, - MD3LightTheme, + DarkTheme, + LightTheme, configureFonts, } from 'react-native-paper'; -const { LightTheme, DarkTheme } = adaptNavigationTheme({ - reactNavigationLight: NavigationDefaultTheme, - reactNavigationDark: NavigationDarkTheme, -}); +const { LightTheme: NavLightTheme, DarkTheme: NavDarkTheme } = + adaptNavigationTheme({ + reactNavigationLight: NavigationDefaultTheme, + reactNavigationDark: NavigationDarkTheme, + }); export const CombinedDefaultTheme = { - ...MD3LightTheme, ...LightTheme, + ...NavLightTheme, colors: { - ...MD3LightTheme.colors, ...LightTheme.colors, + ...NavLightTheme.colors, }, fonts: { - ...MD3LightTheme.fonts, ...LightTheme.fonts, + ...NavLightTheme.fonts, }, }; export const CombinedDarkTheme = { - ...MD3DarkTheme, ...DarkTheme, + ...NavDarkTheme, colors: { - ...MD3DarkTheme.colors, ...DarkTheme.colors, + ...NavDarkTheme.colors, }, fonts: { - ...MD3DarkTheme.fonts, ...DarkTheme.fonts, + ...NavDarkTheme.fonts, }, }; diff --git a/src/babel/__fixtures__/rewrite-imports/code.js b/src/babel/__fixtures__/rewrite-imports/code.js index 544929c6d4..f1253a5e08 100644 --- a/src/babel/__fixtures__/rewrite-imports/code.js +++ b/src/babel/__fixtures__/rewrite-imports/code.js @@ -5,9 +5,10 @@ import { Button, FAB, Appbar, - MD3Colors, + Palette, NonExistent, NonExistentSecond as Stuff, ThemeProvider, withTheme, + LightTheme, } from 'react-native-paper'; diff --git a/src/babel/__fixtures__/rewrite-imports/output.js b/src/babel/__fixtures__/rewrite-imports/output.js index 3ca12bfeaa..bbe342ad0d 100644 --- a/src/babel/__fixtures__/rewrite-imports/output.js +++ b/src/babel/__fixtures__/rewrite-imports/output.js @@ -4,7 +4,7 @@ import BottomNavigation from "react-native-paper/lib/module/components/BottomNav import Button from "react-native-paper/lib/module/components/Button/Button"; import FAB from "react-native-paper/lib/module/components/FAB"; import Appbar from "react-native-paper/lib/module/components/Appbar"; -import { MD3Colors } from "react-native-paper/lib/module/deprecated"; -import { NonExistent, NonExistentSecond as Stuff } from "react-native-paper/lib/module/index.js"; +import { Palette } from "react-native-paper/lib/module/theme/tokens"; +import { NonExistent, NonExistentSecond as Stuff, LightTheme } from "react-native-paper/lib/module/index.js"; import { ThemeProvider } from "react-native-paper/lib/module/core/theming"; import { withTheme } from "react-native-paper/lib/module/core/theming"; diff --git a/src/components/BottomNavigation/BottomNavigation.tsx b/src/components/BottomNavigation/BottomNavigation.tsx index d0cd447295..2fefd896a6 100644 --- a/src/components/BottomNavigation/BottomNavigation.tsx +++ b/src/components/BottomNavigation/BottomNavigation.tsx @@ -26,10 +26,6 @@ export type BaseRoute = { focusedIcon?: IconSource; unfocusedIcon?: IconSource; badge?: string | number | boolean; - /** - * @deprecated In v5.x works only with theme version 2. - */ - color?: string; accessibilityLabel?: string; testID?: string; lazy?: boolean; @@ -83,7 +79,6 @@ export type Props = { * - `title`: title of the route to use as the tab label * - `focusedIcon`: icon to use as the focused tab icon, can be a string, an image source or a react component @renamed Renamed from 'icon' to 'focusedIcon' in v5.x * - `unfocusedIcon`: icon to use as the unfocused tab icon, can be a string, an image source or a react component @supported Available in v5.x with theme version 3 - * - `color`: color to use as background color for shifting bottom navigation @deprecatedProperty In v5.x works only with theme version 2. * - `badge`: badge to show on the tab icon, can be `true` to show a dot, `string` or `number` to show text. * - `accessibilityLabel`: accessibility label for the tab button * - `testID`: test id for the tab button diff --git a/src/components/BottomNavigation/BottomNavigationBar.tsx b/src/components/BottomNavigation/BottomNavigationBar.tsx index 3992463322..a79807d950 100644 --- a/src/components/BottomNavigation/BottomNavigationBar.tsx +++ b/src/components/BottomNavigation/BottomNavigationBar.tsx @@ -37,10 +37,6 @@ type BaseRoute = { focusedIcon?: IconSource; unfocusedIcon?: IconSource; badge?: string | number | boolean; - /** - * @deprecated In v5.x works only with theme version 2. - */ - color?: string; accessibilityLabel?: string; testID?: string; lazy?: boolean; @@ -94,7 +90,6 @@ export type Props = { * - `title`: title of the route to use as the tab label * - `focusedIcon`: icon to use as the focused tab icon, can be a string, an image source or a react component @renamed Renamed from 'icon' to 'focusedIcon' in v5.x * - `unfocusedIcon`: icon to use as the unfocused tab icon, can be a string, an image source or a react component @supported Available in v5.x with theme version 3 - * - `color`: color to use as background color for shifting bottom navigation @deprecatedProperty In v5.x works only with theme version 2. * - `badge`: badge to show on the tab icon, can be `true` to show a dot, `string` or `number` to show text. * - `accessibilityLabel`: accessibility label for the tab button * - `testID`: test id for the tab button diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index 59cebe3a93..d0843535e2 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -50,11 +50,6 @@ export type Props = $Omit, 'mode'> & { * Use a compact look, useful for `text` buttons in a row. */ compact?: boolean; - /** - * @deprecated Deprecated in v5.x - use `buttonColor` or `textColor` instead. - * Custom text color for flat button, or background color for contained button. - */ - color?: string; /** * Custom button's background color. */ diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx index c1522e5bf5..99a34d7197 100644 --- a/src/components/Card/Card.tsx +++ b/src/components/Card/Card.tsx @@ -172,65 +172,24 @@ const Card = ( onPressOut, }); - // Default animated value const { current: elevation } = React.useRef( new Animated.Value(cardElevation) ); - // Dark adaptive animated value, used in case of toggling the theme, - // it prevents animating the background with native drivers inside Surface - const { current: elevationDarkAdaptive } = React.useRef( - new Animated.Value(cardElevation) - ); - const { animation, dark, mode } = theme; - - const prevDarkRef = React.useRef(dark); - React.useEffect(() => { - prevDarkRef.current = dark; - }); + const { animation } = theme; - const prevDark = prevDarkRef.current; - const isAdaptiveMode = mode === 'adaptive'; const animationDuration = 150 * animation.scale; - React.useEffect(() => { - /** - * Resets animations values if updating to dark adaptive mode, - * otherwise, any card that is in the middle of animation while - * toggling the theme will stay at that animated value until - * the next press-in - */ - if (dark && isAdaptiveMode && !prevDark) { - elevation.setValue(cardElevation); - elevationDarkAdaptive.setValue(cardElevation); - } - }, [ - prevDark, - dark, - isAdaptiveMode, - cardElevation, - elevation, - elevationDarkAdaptive, - ]); - const runElevationAnimation = (pressType: HandlePressType) => { if (isMode('contained')) { return; } const isPressTypeIn = pressType === 'in'; - if (dark && isAdaptiveMode) { - Animated.timing(elevationDarkAdaptive, { - toValue: isPressTypeIn ? 2 : cardElevation, - duration: animationDuration, - useNativeDriver: false, - }).start(); - } else { - Animated.timing(elevation, { - toValue: isPressTypeIn ? 2 : cardElevation, - duration: animationDuration, - useNativeDriver: false, - }).start(); - } + Animated.timing(elevation, { + toValue: isPressTypeIn ? 2 : cardElevation, + duration: animationDuration, + useNativeDriver: false, + }).start(); }; const handlePressIn = useLatestCallback((e: GestureResponderEvent) => { @@ -249,8 +208,7 @@ const Card = ( ? (child.type as any).displayName : null ); - const computedElevation = - dark && isAdaptiveMode ? elevationDarkAdaptive : elevation; + const computedElevation = elevation; const { backgroundColor, borderColor: themedBorderColor } = getCardColors({ theme, diff --git a/src/components/FAB/FAB.tsx b/src/components/FAB/FAB.tsx index c78a550a9f..3f9838eb0c 100644 --- a/src/components/FAB/FAB.tsx +++ b/src/components/FAB/FAB.tsx @@ -68,12 +68,6 @@ export type Props = $Omit<$RemoveChildren, 'mode'> & { * Whether an icon change is animated. */ animated?: boolean; - /** - * @deprecated Deprecated in v.5x - use prop size="small". - * - * Whether FAB is mini-sized, used to create visual continuity with other elements. This has no effect if `label` is specified. - */ - small?: boolean; /** * Custom color for the icon and label of the `FAB`. */ diff --git a/src/deprecated.ts b/src/deprecated.ts deleted file mode 100644 index ded0e3f10d..0000000000 --- a/src/deprecated.ts +++ /dev/null @@ -1,44 +0,0 @@ -/** - * Compatibility aliases for v5 API names that were renamed in v6. - * - * This file is the single home for every `@deprecated` re-export so that, when - * the time comes to remove them, deletion is a single `rm src/deprecated.ts` - * (plus removing the corresponding re-export block from `src/index.tsx`). - * - * Do not add anything here that isn't a deprecated alias. - */ - -import { DarkTheme } from './theme/schemes/DarkTheme'; -import { LightTheme } from './theme/schemes/LightTheme'; -import { Palette } from './theme/tokens'; -import type { Theme, Elevation, TypescaleKey } from './types'; - -/** - * @deprecated Use `LightTheme` instead. Will be removed in a future version. - */ -export const MD3LightTheme = LightTheme; - -/** - * @deprecated Use `DarkTheme` instead. Will be removed in a future version. - */ -export const MD3DarkTheme = DarkTheme; - -/** - * @deprecated Use `Palette` instead. Will be removed in a future version. - */ -export const MD3Colors = Palette; - -/** - * @deprecated Use `TypescaleKey` instead. Will be removed in a future version. - */ -export type MD3TypescaleKey = TypescaleKey; - -/** - * @deprecated Use `Theme` instead. Will be removed in a future version. - */ -export type MD3Theme = Theme; - -/** - * @deprecated Use `Elevation` instead. Will be removed in a future version. - */ -export type MD3Elevation = Elevation; diff --git a/src/index.tsx b/src/index.tsx index 35f040ed9a..2d673c4a1f 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -136,25 +136,5 @@ export type { Props as TextProps } from './components/Typography/Text'; export type { Props as SegmentedButtonsProps } from './components/SegmentedButtons/SegmentedButtons'; export type { Props as ListImageProps } from './components/List/ListImage'; export type { Props as TooltipProps } from './components/Tooltip/Tooltip'; -export type { - MaterialBottomTabNavigationEventMap, - MaterialBottomTabNavigationOptions, - MaterialBottomTabNavigationProp, - MaterialBottomTabScreenProps, -} from './react-navigation'; - -export { - TypescaleKey, - type Theme, - type ThemeBase, - type Elevation, -} from './types'; -export { - MD3LightTheme, - MD3DarkTheme, - MD3Colors, - MD3TypescaleKey, - type MD3Theme, - type MD3Elevation, -} from './deprecated'; +export { TypescaleKey, type Theme, type Elevation } from './types'; diff --git a/src/react-navigation/__tests__/index.test.tsx b/src/react-navigation/__tests__/index.test.tsx deleted file mode 100644 index a04495639d..0000000000 --- a/src/react-navigation/__tests__/index.test.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import * as React from 'react'; -import { Button, Text, View } from 'react-native'; - -import { NavigationContainer, ParamListBase } from '@react-navigation/native'; -import { fireEvent, render } from '@testing-library/react-native'; - -import PaperProvider from '../../core/PaperProvider'; -import { - createMaterialBottomTabNavigator, - MaterialBottomTabScreenProps, -} from '../index'; - -it('renders a material bottom tab navigator with screens', async () => { - const Test = ({ - route, - navigation, - }: MaterialBottomTabScreenProps) => ( - - Screen {route.name} -