react-native-tab-view

What is react-native-tab-view?

The react-native-tab-view package is a cross-platform Tab View component for React Native. It allows you to create swipeable tabs with smooth animations and customizable tab bars.

What are react-native-tab-view's main functionalities?

Basic Tab View

This code demonstrates a basic usage of the react-native-tab-view package. It sets up a Tab View with two tabs, each displaying a different colored view.

import * as React from 'react';
import { View, Text, StyleSheet, useWindowDimensions } from 'react-native';
import { TabView, SceneMap } from 'react-native-tab-view';

const FirstRoute = () => (
  <View style={[styles.scene, { backgroundColor: '#ff4081' }]} />
);

const SecondRoute = () => (
  <View style={[styles.scene, { backgroundColor: '#673ab7' }]} />
);

const renderScene = SceneMap({
  first: FirstRoute,
  second: SecondRoute,
});

export default function TabViewExample() {
  const layout = useWindowDimensions();
  const [index, setIndex] = React.useState(0);
  const [routes] = React.useState([
    { key: 'first', title: 'First' },
    { key: 'second', title: 'Second' },
  ]);

  return (
    <TabView
      navigationState={{ index, routes }}
      renderScene={renderScene}
      onIndexChange={setIndex}
      initialLayout={{ width: layout.width }}
    />
  );
}

const styles = StyleSheet.create({
  scene: {
    flex: 1,
  },
});

Custom Tab Bar

This code demonstrates how to customize the Tab Bar in react-native-tab-view. The Tab Bar is styled with a blue background and a white indicator.

import * as React from 'react';
import { View, Text, StyleSheet, useWindowDimensions } from 'react-native';
import { TabView, SceneMap, TabBar } from 'react-native-tab-view';

const FirstRoute = () => (
  <View style={[styles.scene, { backgroundColor: '#ff4081' }]} />
);

const SecondRoute = () => (
  <View style={[styles.scene, { backgroundColor: '#673ab7' }]} />
);

const renderScene = SceneMap({
  first: FirstRoute,
  second: SecondRoute,
});

const renderTabBar = props => (
  <TabBar
    {...props}
    indicatorStyle={{ backgroundColor: 'white' }}
    style={{ backgroundColor: 'blue' }}
  />
);

export default function TabViewExample() {
  const layout = useWindowDimensions();
  const [index, setIndex] = React.useState(0);
  const [routes] = React.useState([
    { key: 'first', title: 'First' },
    { key: 'second', title: 'Second' },
  ]);

  return (
    <TabView
      navigationState={{ index, routes }}
      renderScene={renderScene}
      renderTabBar={renderTabBar}
      onIndexChange={setIndex}
      initialLayout={{ width: layout.width }}
    />
  );
}

const styles = StyleSheet.create({
  scene: {
    flex: 1,
  },
});

Lazy Loading Tabs

This code demonstrates how to enable lazy loading in react-native-tab-view. The 'lazy' prop ensures that the tabs are loaded only when they are needed, improving performance.

import * as React from 'react';
import { View, Text, StyleSheet, useWindowDimensions } from 'react-native';
import { TabView, SceneMap } from 'react-native-tab-view';

const FirstRoute = () => (
  <View style={[styles.scene, { backgroundColor: '#ff4081' }]} />
);

const SecondRoute = () => (
  <View style={[styles.scene, { backgroundColor: '#673ab7' }]} />
);

const renderScene = SceneMap({
  first: FirstRoute,
  second: SecondRoute,
});

export default function TabViewExample() {
  const layout = useWindowDimensions();
  const [index, setIndex] = React.useState(0);
  const [routes] = React.useState([
    { key: 'first', title: 'First' },
    { key: 'second', title: 'Second' },
  ]);

  return (
    <TabView
      navigationState={{ index, routes }}
      renderScene={renderScene}
      onIndexChange={setIndex}
      initialLayout={{ width: layout.width }}
      lazy
    />
  );
}

const styles = StyleSheet.create({
  scene: {
    flex: 1,
  },
});

Other packages similar to react-native-tab-view

react-navigation

react-navigation is a popular library for routing and navigation in React Native applications. It provides a variety of navigators, including stack, tab, and drawer navigators. Compared to react-native-tab-view, react-navigation offers a more comprehensive solution for navigation, including deep linking and state persistence.

react-native-scrollable-tab-view

react-native-scrollable-tab-view is another library for creating tab views in React Native. It allows for scrollable tabs and provides more flexibility in terms of customization. However, it is less actively maintained compared to react-native-tab-view and may lack some of the latest features and optimizations.

react-native-pager-view

react-native-pager-view is a high-performance library for creating swipeable views in React Native. It is often used as a base for implementing tab views. While it provides excellent performance and smooth animations, it requires more manual setup compared to react-native-tab-view.

README

React Native Tab View

React Native Tab View is a cross-platform Tab View component for React Native implemented using react-native-pager-view on Android & iOS, and PanResponder on Web, macOS, and Windows.

Installation instructions and documentation can be found on the React Navigation website.