feat: added support for switch native driver usage in react native ta…

packages/material-top-tabs/src/navigators/createMaterialTopTabNavigator.tsx

@@ -35,6 +35,7 @@ function MaterialTopTabNavigator({
   screenListeners,
   screenOptions,
   screenLayout,
+  useNativeDriver = true,
   ...rest
 }: Props) {
   const { state, descriptors, navigation, NavigationContent } =
@@ -62,6 +63,7 @@ function MaterialTopTabNavigator({
         state={state}
         navigation={navigation}
         descriptors={descriptors}
+        useNativeDriver={useNativeDriver}
       />
     </NavigationContent>
   );

packages/material-top-tabs/src/views/MaterialTopTabBar.tsx

@@ -43,6 +43,7 @@ export function MaterialTopTabBar({
   state,
   navigation,
   descriptors,
+  useNativeDriver = true,
   ...rest
 }: MaterialTopTabBarProps) {
   const { colors } = useTheme();
@@ -91,6 +92,7 @@ export function MaterialTopTabBar({
       bounces={focusedOptions.tabBarBounces}
       activeColor={activeColor}
       inactiveColor={inactiveColor}
+      useNativeDriver={useNativeDriver}
       pressColor={focusedOptions.tabBarPressColor}
       pressOpacity={focusedOptions.tabBarPressOpacity}
       tabStyle={focusedOptions.tabBarItemStyle}

packages/material-top-tabs/src/views/MaterialTopTabView.tsx

@@ -30,6 +30,7 @@ export function MaterialTopTabView({
   navigation,
   descriptors,
   sceneContainerStyle,
+  useNativeDriver = true,
   ...rest
 }: Props) {
   const { colors } = useTheme();
@@ -41,6 +42,7 @@ export function MaterialTopTabView({
       state: state,
       navigation: navigation,
       descriptors: descriptors,
+      useNativeDriver: useNativeDriver,
     });
   };
 
@@ -64,6 +66,7 @@ export function MaterialTopTabView({
       )}
       navigationState={state}
       renderTabBar={renderTabBar}
+      useNativeDriver={useNativeDriver}
       renderLazyPlaceholder={({ route }) =>
         descriptors[route.key].options.lazyPlaceholder?.() ?? null
       }

packages/react-native-tab-view/src/PagerViewAdapter.tsx

@@ -43,6 +43,7 @@ export function PagerViewAdapter<T extends Route>({
   children,
   style,
   animationEnabled,
+  useNativeDriver = true,
   ...rest
 }: Props<T>) {
   const { index } = navigationState;
@@ -157,7 +158,7 @@ export function PagerViewAdapter<T extends Route>({
               },
             },
           ],
-          { useNativeDriver: true }
+          { useNativeDriver: useNativeDriver }
         )}
         onPageSelected={(e) => {
           const index = e.nativeEvent.position;

packages/react-native-tab-view/src/PanResponderAdapter.tsx

@@ -60,6 +60,7 @@ export function PanResponderAdapter<T extends Route>({
   style,
   animationEnabled = false,
   layoutDirection = 'ltr',
+  useNativeDriver = true,
 }: Props<T>) {
   const { routes, index } = navigationState;
 
@@ -88,7 +89,7 @@ export function PanResponderAdapter<T extends Route>({
           timing(panX, {
             ...transitionConfig,
             toValue: offset,
-            useNativeDriver: false,
+            useNativeDriver: useNativeDriver,
           }),
         ]).start(({ finished }) => {
           if (finished) {
@@ -103,7 +104,7 @@ export function PanResponderAdapter<T extends Route>({
         pendingIndexRef.current = undefined;
       }
     },
-    [animationEnabled, panX]
+    [animationEnabled, panX, useNativeDriver]
   );
 
   React.useEffect(() => {

packages/react-native-tab-view/src/TabBar.tsx

@@ -351,6 +351,7 @@ export function TabBar<T extends Route>({
   layout: propLayout,
   testID,
   android_ripple,
+  useNativeDriver = true,
   options,
   commonOptions,
 }: Props<T>) {
@@ -597,9 +598,9 @@ export function TabBar<T extends Route>({
             },
           },
         ],
-        { useNativeDriver: true }
+        { useNativeDriver: useNativeDriver }
       ),
-    [scrollAmount]
+    [scrollAmount, useNativeDriver]
   );
 
   const handleViewableItemsChanged = useLatestCallback(

packages/react-native-tab-view/src/TabBarIndicator.tsx

@@ -62,6 +62,7 @@ export function TabBarIndicator<T extends Route>({
   gap,
   style,
   children,
+  useNativeDriver = true,
 }: Props<T>) {
   const isIndicatorShown = React.useRef(false);
   const isWidthDynamic = width === 'auto';
@@ -89,15 +90,15 @@ export function TabBarIndicator<T extends Route>({
           toValue: 1,
           duration: 150,
           easing: Easing.in(Easing.linear),
-          useNativeDriver: true,
+          useNativeDriver: useNativeDriver,
         }).start();
       }
     };
 
     fadeInIndicator();
 
     return () => opacity.stopAnimation();
-  }, [indicatorVisible, isWidthDynamic, opacity]);
+  }, [indicatorVisible, isWidthDynamic, opacity, useNativeDriver]);
 
   const { routes } = navigationState;
 

packages/react-native-tab-view/src/TabView.tsx

@@ -59,6 +59,7 @@ export function TabView<T extends Route>({
   tabBarPosition = 'top',
   animationEnabled = true,
   overScrollMode,
+  useNativeDriver = true,
 }: Props<T>) {
   if (
     Platform.OS !== 'web' &&
@@ -109,6 +110,7 @@ export function TabView<T extends Route>({
         overScrollMode={overScrollMode}
         style={pagerStyle}
         layoutDirection={direction}
+        useNativeDriver={useNativeDriver}
       >
         {({ position, render, addEnterListener, jumpTo }) => {
           // All the props here must not change between re-renders
@@ -125,6 +127,7 @@ export function TabView<T extends Route>({
                 renderTabBar({
                   ...sceneRendererProps,
                   navigationState,
+                  useNativeDriver: useNativeDriver,
                 })}
               {render(
                 navigationState.routes.map((route, i) => {
@@ -155,6 +158,7 @@ export function TabView<T extends Route>({
                 renderTabBar({
                   ...sceneRendererProps,
                   navigationState,
+                  useNativeDriver: useNativeDriver,
                 })}
             </React.Fragment>
           );

packages/react-native-tab-view/src/types.tsx

@@ -61,6 +61,13 @@ export type SceneRendererProps = {
   layout: Layout;
   position: Animated.AnimatedInterpolation<number>;
   jumpTo: (key: string) => void;
+
+  /**
+   * Whether to use js thread or native UI thread for running animations.
+   * Setting it true will run animations on UI thread else will run on js thread.
+   * Deafult value is set to true.
+   */
+  useNativeDriver?: boolean;
 };
 
 export type EventEmitterProps = {
@@ -82,4 +89,11 @@ export type PagerProps = Omit<
   animationEnabled?: boolean;
   onSwipeStart?: () => void;
   onSwipeEnd?: () => void;
+
+  /**
+   * Whether to use js thread or native UI thread for running animations.
+   * Setting it true will run animations on UI thread else will run on js thread.
+   * Deafult value is set to true.
+   */
+  useNativeDriver?: boolean;
 };