react-native-reanimated-tab-view

An implementation of Tab View fully managed by react-native-reanimated library.

⚠️ This library is currently under development, production use is not recommended. ⚠️

Feel free to open new issue.

Installation

yarn add react-native-reanimated-tab-view

To run properly, it needs to install two other dependencies:.

Library	Supported version
react-native-reanimated	>=3.3.0
react-native-gesture-handler	>= 2.12.0

Dependency Installation

yarn add react-native-reanimated react-native-gesture-handler

According to react-native-reanimated documentation, it needs to add this line in babel.config.js

module.exports = {
  presets: [/*...*/],
  plugins: [/* other plugins, */ 'react-native-reanimated/plugin'], // <-- add this (the reanimated's plugin MUST BE the last)
};

Usage Example

import React, { useMemo, useState } from 'react';
import { View } from 'react-native';
import { ReanimatedTabView, SceneMap } from 'react-native-reanimated-tab-view';

export const TabView = () => {
  const [index, setIndex] = useState(0);
  const renderScene = SceneMap({
    first: <View style={{ flex: 1, backgroundColor: 'blue' }} />,
    second: <View style={{ flex: 1, backgroundColor: 'yellow' }} />,
    third: <View style={{ flex: 1, backgroundColor: 'red' }} />,
  });

  const routes = useMemo(
    () => [
      { key: 'first', title: 'Posts' },
      { key: 'second', title: 'Reels' },
      { key: 'third', title: 'Tagged' },
    ],
    []
  );
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <ReanimatedTabView
        navigationState={{ index, routes }}
        renderScene={renderScene}
        onIndexChange={setIndex}
      />
    </View>
  );
};

To see full implementation, see example folder

Properties

Property	Description	Type	Required	Default
renderScene	Used to render each card specified in the code	function	true	-
navigationState	Object accepts index and routes to manage the visible screen	NavigationState	true	-
onIndexChange	Callback to pass the current index on the parent component	function	true	-
percentageTrigger	The portion of screen you have to swipe before change tab	number	false	0.4
positionInterpolation	Object to manipulate animation passed to TabBar component	PositionInterpolation	false	-
lazy	Decide to render only visible tabs or all tabs at component's mount	boolean	false	false
LazyPlaceholder	Component to render when lazy is true	function	false	null
renderTabBar	Used to render a TabBar custom component	function	false	-

Types

Route { key: string; title: string }

NavigationState { index: number; routes: Route[] }

PositionInterpolation { input: number[]; output: number[] }

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with create-react-native-library