{"library":"react-native-tab-view","title":"React Native Tab View","description":"The `react-native-tab-view` package provides a highly customizable and performant tab view component for React Native applications. It allows developers to create intuitive interfaces where users can swipe horizontally between different content sections, similar to native tab patterns on iOS and Android. Currently at stable version 4.3.0, this library is actively maintained as part of the broader React Navigation ecosystem. Its release cadence aligns with the development cycle of its underlying dependencies and the React Navigation project, ensuring ongoing support and feature enhancements. Key differentiators include its reliance on `react-native-pager-view` for smooth, native-like gesture handling, support for lazy rendering of tab scenes to optimize performance, and a flexible API that allows for extensive customization of both the tab bar and individual tab content. This enables developers to build complex tab-based navigation patterns with rich user experience.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-native-tab-view"],"cli":null},"imports":["import { TabView } from 'react-native-tab-view';","import { SceneMap } from 'react-native-tab-view';","import { TabBar } from 'react-native-tab-view';","import type { NavigationState, Route } from 'react-native-tab-view';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import * as React from 'react';\nimport { View, StyleSheet, useWindowDimensions, Text } from 'react-native';\nimport { TabView, SceneMap, TabBar, NavigationState, Route } from 'react-native-tab-view';\n\n// Define your scene components\nconst FirstRoute = () => (\n  <View style={[styles.scene, { backgroundColor: '#ff4081' }]}>\n    <Text>First Tab Content</Text>\n  </View>\n);\n\nconst SecondRoute = () => (\n  <View style={[styles.scene, { backgroundColor: '#673ab7' }]}>\n    <Text>Second Tab Content</Text>\n  </View>\n);\n\nconst ThirdRoute = () => (\n  <View style={[styles.scene, { backgroundColor: '#00bcd4' }]}>\n    <Text>Third Tab Content</Text>\n  </View>\n);\n\n// Map routes to scenes using SceneMap for performance optimization\nconst renderScene = SceneMap({\n  first: FirstRoute,\n  second: SecondRoute,\n  third: ThirdRoute,\n});\n\nexport default function MyTabView() {\n  const layout = useWindowDimensions();\n\n  const [index, setIndex] = React.useState(0);\n  const [routes] = React.useState<Route[]>([\n    { key: 'first', title: 'First' },\n    { key: 'second', title: 'Second' },\n    { key: 'third', title: 'Third' },\n  ]);\n\n  // Custom tab bar styling example\n  const renderTabBar = (props: any) => (\n    <TabBar\n      {...props}\n      indicatorStyle={{ backgroundColor: 'white' }}\n      style={{ backgroundColor: '#2196f3' }}\n      renderLabel={({ route, focused, color }) => (\n        <Text style={{ color, margin: 8, fontWeight: focused ? 'bold' : 'normal' }}>\n          {route.title}\n        </Text>\n      )}\n    />\n  );\n\n  return (\n    <TabView\n      navigationState={{ index, routes }}\n      renderScene={renderScene}\n      onIndexChange={setIndex}\n      initialLayout={{ width: layout.width }}\n      renderTabBar={renderTabBar} // Pass the custom TabBar\n      style={styles.container}\n    />\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n  },\n  scene: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n});","lang":"typescript","description":"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`.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}