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.

[zeabdelkhalek]

same issue

[gomes042]

same issue here.

[gomes042]

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?

[gomes042]

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...

[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?

[edritech93]

issue when enable debug, if disable debug no have issue

[brunofariasd]

issue when enable debug, if disable debug no have issue

how to resolve this ?

[dccabao]

any update?

[Mohamed-Raid]

any updates ??

[nicolaosm]

Any updates please?

[dccabao]

Hello,

Apologies, something urgent came up. I can no longer attend this interview.

Regards, Don Christian C. Abao

On Tue, May 3, 2022, 5:41 PM Mohamed-Raid @.***> wrote:

any updates ??

— Reply to this email directly, view it on GitHub https://github.com/satya164/react-native-tab-view/issues/1091#issuecomment-1115911360, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4AYUOCXD5IUJMLFW47BG3VIDYETANCNFSM4TF3HUHQ . You are receiving this because you commented.Message ID: @.***>

[zholmes1]

I think the problem arises from mounting and unmounting so many views all at once. My use-case was a bottom tab navigation without swiping, so it was pretty easy to build the navigation myself. In the main top content, I control tab visibility via opacity, not display, and definitely not conditional rendering. This solution may cause additional strain on the device (and more backend calls) since all tabs are always rendered and mounted. But it does accomplish the goal of absolutely instantaneous transition when clicking on tabs. There is no delay.

[Jamal-ReachFirst]

Facing same issue, (swipe faster but delay and lag on tab press). I am using material top tabbar