Reanimated Tab View

A custom Tab View component implemented using react-native-reanimated and react-native-gesture-handler. Props are almost entirely inter-compatible with react-native-tab-view

• The example/ folder contains reference code to use the library.

Demo

Features

reanimated-tab-view provides the following features that are provided by react-native-tab-view

• Smooth animations and gestures
• Scrollable tabs
• Supports both top and bottom tab bars
• Follows Material Design spec
• Highly customizable
• Fully typed with TypeScript

Additionally, reanimated-tab-view also provides the following features

• Collapsible headers

  • Currently supported on ios and android

• 3 render modes to render the tab view ("all", "windowed" and "lazy"). Can be modified using the renderMode prop.

  • All render mode renders all the scenes in one go, during the initial tab view mount. When the number of scenes is large, it is recommended to use the window mode/lazy mode. This is the default render mode.
  • Windowed render mode renders a window of scenes, including the current scene and the scenes adjascent to it. It is recommended to use this render mode when the number of scenes is large but when the render cost of each scene is not high.
  • Lazy render mode renders the scenes one by one when they are first mounted to the view. It is recommended to use this render mode when the number of scenes is large and when the render cost of each scene is high.

• Dynamic widths for tabs, based on the tab title length. For eg., if the tab title is "Tab one", the width of the tab will be smaller than if the tab title is "Tab hundred one". Can be modified using the tabBarDynamicWidthEnabled prop.

  • This feature is in accordance with the Material Design spec.

  • By default, this feature is enabled when the tabBarType prop is set to 'primary'.

• Customisable jump-to animations (smooth jump or scroll jump). Can be modified using the jumpMode prop.

  • Scrolling jump: When jumped from tab one to tab four, the jump animation scrolls through the scenes in between (scenes of tab two and tab three). In case the scenes in between haven't been already rendered (while using lazy/windowed render modes), the jump-to animation will result in a momentary blank splash.

  • Smooth jump: When jumped from tab one to tab four, the jump animation smoothly animates to the target scene of tab four without scrolling through the scenes in between. This helps prevent blank splashes when using lazy/windowed render modes. This is enabled by default.

  • No animation: When jumped from tab one to tab four, the jump animation does not animate to the target scene of tab four. This is useful when you want to jump to a scene without any animation.

    | Smooth Jump | Scroll Jump | | :----------------------------------------------: | :----------------------------------------------: | | | |

Upcoming features

• Accessibility
• RTL support

Motivation

1. The original react-native-tab-view is an amazing package, no doubt. However, it is dependent on react-native-pager-view. This dependency complicates solving issues such as

• TabView tab index not really controlled
• Tab label aligning vertically in some devices when render single tab.
• Screen getting stuck when switching between the tabs while keyboard opened..

reanimated-tab-view depends purely on react-native-reanimated, and as such, the above issues won't be encountered.

2. The swipe and jump-to behaviors in reanimated-tab-view are more controllable. Our implementation of the swipe and jump-to behaviors are built from scratch using the animation and gesture primitives offered by react-native-reanimated and react-native-gesture-handler.

3. We can't have collapsible headers in the original react-native-tab-view.

Installation

Install react-native-reanimated (>=2.x) and react-native-gesture-handler (>=2.x).

• https://docs.swmansion.com/react-native-reanimated/docs/2.x/fundamentals/installation
• https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/installation

Open a Terminal in the project root and run:

yarn add reanimated-tab-view

Quick Start

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

Props

| Name | Description | Required | Type | Default | | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------------------------------------------------------- | --------- | | navigationState | The state of the navigation including the index and routes. | Yes | {index: number; routes: Route;} | | | initialLayout | The initial layout of the tab view. | No | Partial<{width: number; height: number;}> | undefined | | sceneContainerStyle | The style for the scene container. | No | StyleProp<Animated.AnimateStyle<StyleProp<ViewStyle>>> | undefined | | sceneContainerGap | The gap between each scene. | No | Number | 0 | | keyboardDismissMode | Specifies how to dismiss the keyboard. | No | 'auto'\|'on-drag'\|'none' | 'auto' | | animatedRouteIndex | A callback equivalent. Pass a shared value and its value gets updated when tab view is swipeds | No | SharedValue<number> | undefined | | swipeEnabled | Enables or disables swipe gestures. | No | Boolean | true | | sceneContainerGap | The gap between each scene. | No | Number | 0 | | renderMode | Specifies the layout mode of the tab view. | No | 'windowed'\|'lazy'\|'all' | "all" | | jumpMode | Specifies the jump mode of the tab view. | No | 'smooth'\|'scrolling'\|'no-animation' | "smooth" | | tabBarConfig | Configuration for the tab bar. | No | TabBarConfig- For details, see below. | undefined | | TabViewHeaderComponent | A component to render as the tab view header. | No | React.ReactNode | undefined | | renderScene | A function that renders the scene for a given route. Use RTVScrollView or RTVFlatList in order to render collapsible headers through the renderHeader prop. | No | (props: HeaderRendererProps) => React.ReactNode | | | renderHeader | A function that renders the header for the tab view. | No | (props: SceneRendererProps) => React.ReactNode | undefined | | onIndexChange | A function that is called when the index changes. | Yes | (index:number) => void | | | onSwipeEnd | Callback function for when a swipe gesture ends. | No | Function | undefined | | onSwipeStart | Callback function for when a swipe gesture starts. | No | Function | undefined |

tabBarConfig properties are as follows:

| Name | Description | Required | Type | Default | | ------------------------- | -------------------------------------------------------------------------- | -------- | -------------------------------------------------------- | ----------------------------------------------------- | | tabBarPosition | Specifies the position of the tab bar. | No | 'top'\|'bottom' | 'top' | | tabBarType | Specifies the type of the tab bar, according to the Material Design spec. | No | 'primary'\|'secondary' | 'secondary' | | tabBarScrollEnabled | Enables or disables scrollable tab bar. | No | Boolean | true | | tabBarDynamicWidthEnabled | Enables dynamic width for tabs. | No | Boolean | true for primary tab bar, false for secondary tab bar | | scrollableTabWidth | The width of each tab. Applicable ONLY when tabBarScrollEnabled is true. | No | Number | 100 | | tabBarStyle | Used to modify the style for the tab bar. | No | StyleProp<ViewStyle> | undefined | | tabStyle | Used to modify the style for each style. | No | StyleProp<Animated.AnimateStyle<StyleProp<ViewStyle>>> | undefined | | tabBarIndicatorStyle | Used to modify the style for the tab bar indicator. | No | StyleProp<Animated.AnimateStyle<StyleProp<ViewStyle>>> | undefined | | renderTabBar | Custom method to render the tab bar. | No | Function | undefined |

ref methods

• jumpTo(routeKey: string): Jump to a specific route.

Author

• Adithya Viswamithiran

License

MIT