React-native-tab-view: Delay When Click on Tabs Change (in swap fast and without delay)

[ebeliejinfren]

Hello
When i Click on tabs, Changing tabs has a delay (may for render content) but in swap change tabs it works correct and without delay
if it's because render, there is any way to change tab then render content ?

my code :

const renderTabBar = props => (
    <TabBar
      {...props}
      indicatorStyle={{ backgroundColor: '#639' , height: '100%' , borderRadius: 20 }}
      style={{ backgroundColor: '#000000' , height: 30 , marginHorizontal: 10 }}
      labelStyle={{fontFamily: 'Vazir'  , height: 30 , marginTop: -10}}
      tabStyle={{height: 30}}
      pressColor='#00000000'
    />
  );

const renderScene = SceneMap({
    day: Day,
    week: Week,
    month: Month,
  });

<TabView
navigationState={{ index, routes }}
renderScene={renderScene}
onIndexChange={setIndex}
initialLayout={initialLayout}
renderTabBar={renderTabBar}
swipeEnabled={false}
removeClippedSubviews={true} //in IOS Must be False (don't use in IOS)
lazy={true}
renderLazyPlaceholder={() => <View style={{flex: 1}}></View>}
/> 

"react-native": "0.63.2",
"react-native-reanimated": "^1.13.0",
"react-native-gesture-handler": "^1.7.0",
"react-native-tab-view": "^2.15.2",

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• react-native
• react-native-tab-view
• react-native-gesture-handler
• react-native-reanimated

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[AbdelkhalekESI]

same issue

[3GOMESz]

same issue here.

[3GOMESz]

same issue here.

In my case the delay initially does not seem so long (although I notice a difference compared to the manual slide that is instantaneous) but I noticed that if you keep clicking for a while several times on the different buttons on the TabBar the delay will accumulate causing the application several seconds to complete all index exchange requests and their animations.

• The bug still happens with timingConfig={{duration: 0}} or timingConfig={{duration: 1}}
• Sliding your finger manually to change index is less buggy than click on TabBar's buttons
• Even following all the optimization tips described in Optimization Tips doesn't seem to help with the delay problems inside a TabBar change index buttons.
• Buttons outside a TabBar also result in the same. Any index change that is requested by code seems to contain a slight delay that increases with several requests after other. (Not totally sure)

[matapo]

same issue

[giraaaaaa]

same issue

[Gutyn]

Same, any news? Do you guys need more info?

[3GOMESz]

Smooth manual slide

Delay on click custom tabbar Item. Note that after clicking several times and moving the cursor off the screen, the transitions still continue for a few seconds until all queued index exchange requests are finished. (Wait for the GIF to be fully loaded to see it better)

---

OBS: Top tab bar with icons (on example project) don't have this delay issue...

[3GOMESz]

Well, I recommend using react-native-viewpager, that project is updated more frequently and the index change is practically instantaneous with much less visual bugs than react-native-tab-view.

[InovaXion]

Same issue here the problem appear when i used

navigationState={this.state}
and
onIndexChange={index => this.setState({index})}
instead of

  const [index, setIndex] = React.useState(0);
  const [routes] = React.useState([
    { key: 'first', title: 'First' },
    { key: 'second', title: 'Second' },
  ]);

cause i need to know the index where i am.
I tried to do some pureComponents but it's the same..

[KPS250]

+1 There seems to be a delay in changing tabs due to setState.

[moniquealtero]

I'm facing this same issue and even after I follow all steps recommended in 'Optimization tips' guide it's super laggy. I read that onTabPress set a new index state and swipe movement does not because it uses jumTo method, so I tried to:

const renderTabBar = (props: any): ReactNode => (
    <TabBar
      {...props}
      onTabPress={({ route, preventDefault }) => {
        preventDefault();
        props.jumpTo(route.key);
      }}/>

...And nothing changed. I have a custom renderScene map and I'm trying to implement jumpTo on my routes. Something like:

const renderScene = ({ route, jumpTo }) => {
    switch (route.key) {
      case 'GENERAL':
        return (
          <ExtractPointsList
            content={pointsTransactions.pointTransactions}
            emptyMessage={emptyMessages.get('GENERAL')}
            onRequestTransactions={onRequestTransactions}
            jumpTo={jumpTo}
         />

Swipe movement is working nice with my big list but onPress is suffering. :(

[matapo]

has anyone tried to use a class component instead of a functional component and see if this issue still persists?

[moniquealtero]

Any update?