Skip to main content
Version: 1.x (Reanimated v4)

Quick Start

Here's a minimal example to get you started with Reanimated Tab View.

Basic usage​

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

const FirstRoute = () => (
  <View style={{ flex: 1, backgroundColor: '#ff4081' }} />
);

const SecondRoute = () => (
  <View style={{ flex: 1, backgroundColor: '#673ab7' }} />
);

const renderScene = ({ route }) => {
  switch (route.key) {
    case 'first':
      return <FirstRoute />;
    case 'second':
      return <SecondRoute />;
    default:
      return null;
  }
};

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={{ tabView: { width: layout.width } }}
    />
  );
}

Key concepts​

The navigationState prop controls which tab is active and defines the available routes:

const [index, setIndex] = React.useState(0);
const [routes] = React.useState([
  { key: 'first', title: 'First' },
  { key: 'second', title: 'Second' },
  { key: 'third', title: 'Third' },
]);

Each route must have a unique key and an optional title displayed in the tab bar.

Scene rendering​

The renderScene function receives a route object and should return the component for that tab:

const renderScene = ({ route }) => {
  switch (route.key) {
    case 'first':
      return <FirstRoute />;
    case 'second':
      return <SecondRoute />;
    default:
      return null;
  }
};

Initial layout​

initialLayout is optional. The tab view measures its header, tab bar and carousel synchronously before the first paint, so the correct dimensions are already in place on the first render.

Pass it when you already know the dimensions and want to skip the extra render that the first measurement would otherwise trigger:

<TabView
  initialLayout={{ tabView: { width: layout.width } }}
  // ...other props
/>

Next steps​