feat: add animateOnIndexChange to enable/disable animation

Author: mlecoq

README.md

@@ -316,6 +316,10 @@ Callback which is called when the swipe gesture starts, i.e. the user touches th
 
 Callback which is called when the swipe gesture ends, i.e. the user lifts their finger from the screen after the swipe gesture.
 
+##### `animateOnIndexChange`
+
+Function which determines whether the animation is executed on index change
+
 ##### `initialLayout`
 
 Object containing the initial height and width of the screens. Passing this will improve the initial rendering performance. For most apps, this is a good default:

example/src/App.tsx

@@ -22,6 +22,7 @@ import CustomIndicatorExample from './CustomIndicatorExample';
 import CustomTabBarExample from './CustomTabBarExample';
 import CoverflowExample from './CoverflowExample';
 import TabBarGapExample from './TabBarGapExample';
+import CustomAnimationExample from './CustomAnimationExample';
 
 type ExampleComponentType = React.ComponentType<{}> & {
   title: string;
@@ -43,6 +44,7 @@ const EXAMPLE_COMPONENTS: ExampleComponentType[] = [
   CustomTabBarExample,
   CoverflowExample,
   TabBarGapExample,
+  CustomAnimationExample,
 ];
 
 const ExampleList = () => {

example/src/CustomAnimationExample.tsx

@@ -0,0 +1,87 @@
+import * as React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  TabView,
+  TabBar,
+  SceneMap,
+  NavigationState,
+  SceneRendererProps,
+} from 'react-native-tab-view';
+import Article from './Shared/Article';
+import Albums from './Shared/Albums';
+import Chat from './Shared/Chat';
+import Contacts from './Shared/Contacts';
+
+type State = NavigationState<{
+  key: string;
+  title: string;
+}>;
+
+const animateOnIndexChange = (currentIndex: number, nextIndex: number) => {
+  return Math.abs(currentIndex - nextIndex) === 1;
+};
+
+const CustomAnimationExample = () => {
+  const [index, onIndexChange] = React.useState(1);
+  const [routes] = React.useState([
+    { key: 'article', title: 'Article' },
+    { key: 'contacts', title: 'Contacts' },
+    { key: 'albums', title: 'Albums' },
+    { key: 'chat', title: 'Chat' },
+  ]);
+
+  const renderTabBar = (
+    props: SceneRendererProps & { navigationState: State }
+  ) => (
+    <TabBar
+      {...props}
+      scrollEnabled
+      indicatorStyle={styles.indicator}
+      style={styles.tabbar}
+      tabStyle={styles.tab}
+      labelStyle={styles.label}
+    />
+  );
+
+  const renderScene = SceneMap({
+    albums: Albums,
+    contacts: Contacts,
+    article: Article,
+    chat: Chat,
+  });
+
+  return (
+    <TabView
+      lazy
+      navigationState={{
+        index,
+        routes,
+      }}
+      renderScene={renderScene}
+      renderTabBar={renderTabBar}
+      onIndexChange={onIndexChange}
+      animateOnIndexChange={animateOnIndexChange}
+    />
+  );
+};
+
+CustomAnimationExample.title = 'Custom Animation';
+CustomAnimationExample.backgroundColor = '#3f51b5';
+CustomAnimationExample.appbarElevation = 0;
+
+export default CustomAnimationExample;
+
+const styles = StyleSheet.create({
+  tabbar: {
+    backgroundColor: '#3f51b5',
+  },
+  tab: {
+    width: 'auto',
+  },
+  indicator: {
+    backgroundColor: '#ffeb3b',
+  },
+  label: {
+    fontWeight: '400',
+  },
+});

src/PagerViewAdapter.tsx

@@ -40,6 +40,7 @@ export default function PagerViewAdapter<T extends Route>({
   onSwipeStart,
   onSwipeEnd,
   children,
+  animateOnIndexChange,
   style,
   ...rest
 }: Props<T>) {
@@ -58,23 +59,40 @@ export default function PagerViewAdapter<T extends Route>({
     navigationStateRef.current = navigationState;
   });
 
-  const jumpTo = React.useCallback((key: string) => {
-    const index = navigationStateRef.current.routes.findIndex(
-      (route: { key: string }) => route.key === key
-    );
-
-    pagerRef.current?.setPage(index);
-  }, []);
+  const jumpTo = React.useCallback(
+    (key: string) => {
+      const index = navigationStateRef.current.routes.findIndex(
+        (route: { key: string }) => route.key === key
+      );
+      if (
+        animateOnIndexChange &&
+        !animateOnIndexChange(indexRef.current, index)
+      ) {
+        pagerRef.current?.setPageWithoutAnimation(index);
+      } else {
+        pagerRef.current?.setPage(index);
+      }
+    },
+    [animateOnIndexChange]
+  );
 
   React.useEffect(() => {
     if (keyboardDismissMode === 'auto') {
       Keyboard.dismiss();
     }
 
     if (indexRef.current !== index) {
-      pagerRef.current?.setPage(index);
+      if (
+        animateOnIndexChange &&
+        !animateOnIndexChange(indexRef.current, index)
+      ) {
+        pagerRef.current?.setPageWithoutAnimation(index);
+        position.setValue(index);
+      } else {
+        pagerRef.current?.setPage(index);
+      }
     }
-  }, [keyboardDismissMode, index]);
+  }, [keyboardDismissMode, index, animateOnIndexChange, position]);
 
   const onPageScrollStateChanged = (
     state: PageScrollStateChangedNativeEvent

src/PanResponderAdapter.tsx

@@ -57,6 +57,7 @@ export default function PanResponderAdapter<T extends Route>({
   onSwipeStart,
   onSwipeEnd,
   children,
+  animateOnIndexChange,
   style,
 }: Props<T>) {
   const { routes, index } = navigationState;
@@ -80,23 +81,30 @@ export default function PanResponderAdapter<T extends Route>({
       const offset = -index * layoutRef.current.width;
 
       const { timing, ...transitionConfig } = DefaultTransitionSpec;
-
-      Animated.parallel([
-        timing(panX, {
-          ...transitionConfig,
-          toValue: offset,
-          useNativeDriver: false,
-        }),
-      ]).start(({ finished }) => {
-        if (finished) {
-          onIndexChangeRef.current(index);
-          pendingIndexRef.current = undefined;
-        }
-      });
+      if (
+        animateOnIndexChange &&
+        !animateOnIndexChange(currentIndexRef.current, index)
+      ) {
+        panX.setValue(offset);
+        onIndexChangeRef.current(index);
+      } else {
+        Animated.parallel([
+          timing(panX, {
+            ...transitionConfig,
+            toValue: offset,
+            useNativeDriver: false,
+          }),
+        ]).start(({ finished }) => {
+          if (finished) {
+            onIndexChangeRef.current(index);
+            pendingIndexRef.current = undefined;
+          }
+        });
+      }
 
       pendingIndexRef.current = index;
     },
-    [panX]
+    [animateOnIndexChange, panX]
   );
 
   React.useEffect(() => {

src/TabView.tsx

@@ -51,6 +51,7 @@ export default function TabView<T extends Route>({
   style,
   swipeEnabled = true,
   tabBarPosition = 'top',
+  animateOnIndexChange,
 }: Props<T>) {
   const [layout, setLayout] = React.useState({
     width: 0,
@@ -87,6 +88,7 @@ export default function TabView<T extends Route>({
         onSwipeEnd={onSwipeEnd}
         onIndexChange={jumpToIndex}
         style={pagerStyle}
+        animateOnIndexChange={animateOnIndexChange}
       >
         {({ position, render, addEnterListener, jumpTo }) => {
           // All of the props here must not change between re-renders

src/types.tsx

@@ -55,4 +55,5 @@ export type PagerProps = Omit<
   swipeEnabled?: boolean;
   onSwipeStart?: () => void;
   onSwipeEnd?: () => void;
+  animateOnIndexChange?: (currentIndex: number, nextIndex: number) => boolean;
 };