Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
TabView
✓ import { TabView } from 'react-native-tab-view';
✗ const TabView = require('react-native-tab-view');
The primary TabView component. Ensure you use named import. CommonJS `require` is generally discouraged in modern React Native projects, especially for libraries designed with ESM in mind, and can lead to issues with tree-shaking and TypeScript inference.
SceneMap
✓ import { SceneMap } from 'react-native-tab-view';
✗ import SceneMap from 'react-native-tab-view/lib/SceneMap';
A utility function to efficiently map routes to scene components. Always import directly from the main package. Importing from internal `lib` or `src` subpaths is an anti-pattern and not guaranteed to be stable across versions.
TabBar
✓ import { TabBar } from 'react-native-tab-view';
✗ import { TabBar } from 'react-native-tab-view/src/TabBar';
The default TabBar component, which can be customized or replaced. Similar to SceneMap, avoid direct imports from internal directories.
NavigationState
✓ import type { NavigationState, Route } from 'react-native-tab-view';
TypeScript types for defining the tab view's navigation state and individual route objects. Use `import type` for clarity and to ensure type-only imports are correctly handled by bundlers.
This quickstart demonstrates a basic TabView with three tabs, using `SceneMap` for efficient scene rendering and `useWindowDimensions` for responsive layout. It also includes an example of a customized `TabBar`.
import * as React from 'react';
import { View, StyleSheet, useWindowDimensions, Text } from 'react-native';
import { TabView, SceneMap, TabBar, NavigationState, Route } from 'react-native-tab-view';
// Define your scene components
const FirstRoute = () => (
<View style={[styles.scene, { backgroundColor: '#ff4081' }]}>
<Text>First Tab Content</Text>
</View>
);
const SecondRoute = () => (
<View style={[styles.scene, { backgroundColor: '#673ab7' }]}>
<Text>Second Tab Content</Text>
</View>
);
const ThirdRoute = () => (
<View style={[styles.scene, { backgroundColor: '#00bcd4' }]}>
<Text>Third Tab Content</Text>
</View>
);
// Map routes to scenes using SceneMap for performance optimization
const renderScene = SceneMap({
first: FirstRoute,
second: SecondRoute,
third: ThirdRoute,
});
export default function MyTabView() {
const layout = useWindowDimensions();
const [index, setIndex] = React.useState(0);
const [routes] = React.useState<Route[]>([
{ key: 'first', title: 'First' },
{ key: 'second', title: 'Second' },
{ key: 'third', title: 'Third' },
]);
// Custom tab bar styling example
const renderTabBar = (props: any) => (
<TabBar
{...props}
indicatorStyle={{ backgroundColor: 'white' }}
style={{ backgroundColor: '#2196f3' }}
renderLabel={({ route, focused, color }) => (
<Text style={{ color, margin: 8, fontWeight: focused ? 'bold' : 'normal' }}>
{route.title}
</Text>
)}
/>
);
return (
<TabView
navigationState={{ index, routes }}
renderScene={renderScene}
onIndexChange={setIndex}
initialLayout={{ width: layout.width }}
renderTabBar={renderTabBar} // Pass the custom TabBar
style={styles.container}
/>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
scene: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
Errors
Common errors & fixes
Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of SceneView .
A scene component passed to `SceneMap` or `renderScene` is not correctly imported, exported, or is an inline function.
fixEnsure all scene components are properly defined, exported, and imported as named or default exports. If using `SceneMap`, pass direct references to component functions, not inline arrow functions.
Invariant Violation: requireNativeComponent: "RNCViewPager" was not found in the UIManager. This error usually happens when there are issues with the native setup. Make sure you're running on a physical device or a properly configured emulator and that all native dependencies are linked correctly.
The native module for `react-native-pager-view` (or `ViewPagerAndroid` in older versions) is not correctly linked or installed, which is a required peer dependency for `react-native-tab-view` v4+.
fixInstall `react-native-pager-view` (`yarn add react-native-pager-view` or `npm install react-native-pager-view`). For iOS, navigate to your `ios/` directory and run `npx pod-install`. Rebuild your native app.
Type '{ layout: Layout; position: AnimatedInterpolation; jumpTo: (key: string) => void; navigationState: NavigationState<Route>; }' is missing the following properties from type '{ navigationState: NavigationState<Route>; scrollEnabled?: boolean | undefined; bounces?: boolean | undefined; activeColor?: string | undefined; inactiveColor?: string | undefined; ... }'
You are creating a custom `TabBar` component in TypeScript and its props do not match the expected `TabBarProps` interface, often missing optional properties or having incorrect types for required ones.
fixWhen defining props for a custom `TabBar`, it's often safest to infer the full set of props using `React.ComponentProps<typeof TabBar>` or ensure your custom interface strictly extends `TabBarProps<Route>`. Explicitly define all required properties or mark them as optional if they have defaults.
Audit
Dependencies
reactrequiredReact runtime for component lifecycle and rendering.
react-nativerequiredReact Native core components and APIs.
react-native-pager-viewrequiredProvides the underlying pager functionality for swipe gestures and scene management. Required since v4.