Material Top Tabs Navigator
A material-design themed tab bar on the top of the screen that lets you switch between different routes by tapping the tabs or swiping horizontally. Transitions are animated by default. Screen components for each route are mounted immediately.
This wraps react-native-tab-view
.
To use this navigator, ensure that you have @react-navigation/native
and its dependencies (follow this guide), then install @react-navigation/material-top-tabs
:
- npm
- Yarn
- pnpm
npm install @react-navigation/material-top-tabs@^5.x react-native-tab-view@^2.x
yarn add @react-navigation/material-top-tabs@^5.x react-native-tab-view@^2.x
pnpm add @react-navigation/material-top-tabs@^5.x react-native-tab-view@^2.x
API Definitionβ
π‘ If you encounter any bugs while using
createMaterialBottomTabNavigator
, please open issues onreact-native-paper
rather than thereact-navigation
repository!
To use this tab navigator, import it from @react-navigation/material-top-tabs
:
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
const Tab = createMaterialTopTabNavigator();
function MyTabs() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>
);
}
For a complete usage guide please visit Tab Navigation
Propsβ
The Tab.Navigator
component accepts following props:
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
β
Behavior of back button handling.
initialRoute
to return to initial taborder
to return to previous tab (in the order they are shown in the tab bar)history
to return to last visited tabnone
to not handle back button
tabBarPosition
β
Position of the tab bar in the tab view. Possible values are 'top'
and 'bottom'
. Defaults to 'top'
.
lazy
β
Boolean indicating whether to lazily render the scenes. When this is set to true
, screens will be rendered as they come into the viewport. By default all scenes are rendered to provide a smoother swipe experience. But you might want to defer the rendering of screens out of the viewport until the user sees them. To enable lazy rendering, set lazy
to true
.
When you enable lazy
, the lazy loaded screens will usually take some time to render when they come into the viewport. You can use the lazyPlaceholder
prop to customize what the user sees during this short period.
lazyPreloadDistance
β
When lazy
is enabled, you can specify how many adjacent routes should be preloaded in advance with this prop. This value defaults to 0
which means lazy pages are loaded as they come into the viewport.
lazyPlaceholder
β
Function that returns a React element to render for routes that haven't been rendered yet. Receives an object containing the route as the argument. The lazy
prop also needs to be enabled.
This view is usually only shown for a split second. Keep it lightweight.
By default, this renders null
.
removeClippedSubviews
β
Boolean indicating whether to remove invisible views (such as unfocused screens) from the native view hierarchy to improve memory usage. Defaults to false
.
Note: Don't enable this on iOS where this is buggy and views don't re-appear.
keyboardDismissMode
β
String indicating whether the keyboard gets dismissed in response to a drag gesture. Possible values are:
'auto'
(default): the keyboard is dismissed when the index changes.'on-drag'
: the keyboard is dismissed when a drag begins.'none'
: drags do not dismiss the keyboard.
swipeEnabled
β
Boolean indicating whether to enable swipe gestures. Swipe gestures are enabled by default. Passing false
will disable swipe gestures, but the user can still switch tabs by pressing the tab bar.
swipeVelocityImpact
β
Determines how relevant is a velocity while calculating next position while swiping. Defaults to 0.2
.
timingConfig
β
Configuration object for the timing animation which occurs when tapping on tabs. Supported properties are:
duration
(number
)
springConfig
β
Configuration object for the spring animation which occurs after swiping. Supported properties are:
damping
(number
)mass
(number
)stiffness
(number
)restSpeedThreshold
(number
)restDisplacementThreshold
(number
)
springVelocityScale
β
Number for determining how meaningful is gesture velocity for calculating initial velocity of spring animation. Defaults to 0
.