An implementation of Tab View fully managed by react-native-reanimated library.
Feel free to open new issue.
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 |
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)
};
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
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 | - |
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT
Made with create-react-native-library