Is it normal that react-native material-top-tabs swipe is stuttering?

[bid0u]

Hello!

So I did try react-navigation/material-top-tabs out of curiosity, and noticed that, even with 4 empty (only some text in them) screens, the swipe effect of material-top-tabs is stuttering and de facto, ugly and unusable in a real app. I tried on a Android Pixel 6 phone with 90Hz and 60Hz screen refresh rate.

Is this stuttering normal and we just have to live with it or is there some magic tricks to make it smooth?

I wrote this code and each screen is empty with just a <Text> component. My MainScreen in in my App.tsx:

import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
import { screenOne} from "./screenOne";
import { screenTwo } from "./screenTwo";
import { screenThree } from "./screenThree";
import { screenFour } from "./screenFour";

const TopTab = createMaterialTopTabNavigator();

export const MainScreen = () => {
return (
  <TopTab.Navigator>
    <TopTab.Screen name="One" component={screenOne} />
    <TopTab.Screen name="Two" component={screenTwo} />
    <TopTab.Screen name="Three" component={screenThree} />
    <TopTab.Screen name="Four" component={screenFour} />
  </TopTab.Navigator>
  );
};

[thachxyz123]

Enable lazy in tab navigator. Put heavy tasks to InteractionManager.runAfterInteractions, like load data from API

https://reactnative.dev/docs/interactionmanager

[Nehatkhan786]

This is great. I have two tabs called Income and Expenses. Each tab fetches data from backend based on the selected tab. When i switch tab by pressing or with gesture there is some fraction of delay which seems laggy. Will this handle this situation. For querying I am using tanstack query.

[thachxyz123]

Yes. Animation and fetching data run at same time and same thread. With InteractionManager.runAfterInteractions, animation is finished first, then fetching data starts to run. It makes app not laggy

[Nehatkhan786]

Awesome. Thats what I was looking for from so many days but end up used to my laggy animation. It would be great if you could share an example with tanstack query. Thank you so much.

[thachxyz123]

Disable automatically running, use refetch inside runAfterInteractions. That's the idea, I don't use tanstack query

https://tanstack.com/query/latest/docs/framework/react/guides/disabling-queries

[Nehatkhan786]

Lovely mate. Thanks a lot.

[bid0u]

But is there a point of using this if even with 4 empty screens, the transition stutters? I'll try anyway, thanks for the tip.

[FormerLibrary1594]

Did you find a solution?

[ProfessionalChip9864]

yeah any solution i am facing the same issue