satya164 / react-native-tab-view

A cross-platform Tab View component for React Native
MIT License
5.13k stars 1.07k forks source link

Delay When Click on Tabs Change (in swap fast and without delay) #1091

Open ebeliejinfren opened 4 years ago

ebeliejinfren commented 4 years ago

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] commented 4 years ago

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

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

zeabdelkhalek commented 4 years ago

same issue

gomes42 commented 4 years ago

same issue here.

gomes42 commented 4 years ago

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.

matapo commented 4 years ago

same issue

giraaaaaa commented 4 years ago

same issue

Gutyn commented 4 years ago

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

gomes42 commented 4 years ago

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 commented 3 years ago

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 commented 3 years ago

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

moniquealtero commented 3 years ago

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 commented 3 years ago

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

moniquealtero commented 3 years ago

Any update?

edritech93 commented 3 years ago

issue when enable debug, if disable debug no have issue

brunofariasd commented 2 years ago

issue when enable debug, if disable debug no have issue

how to resolve this ?

dccabao commented 2 years ago

any update?

Mohamed-Raid commented 2 years ago

any updates ??

nicolaosm commented 2 years ago

Any updates please?

dccabao commented 2 years ago

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 commented 1 year ago

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 commented 1 year ago

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