Tab not clickable in Android

[harshal311989]

Hello @andreialecu and team, I am using this plugin in my application and i have 4 tabs and inside one tab i am click on website url and navigation mobile default browser so once i am back again in app other tab not clickable refer my video

Issue happened only in Android

https://user-images.githubusercontent.com/75067288/158548692-ca2054e9-b1bc-4ef1-ab5d-ab3d4cc266de.mov

here is code

import {TabBarProps, Tabs, MaterialTabBar} from 'react-native-collapsible-tab-view';

`<Tabs.Container
    headerHeight={400}
    pagerProps={{
      keyboardShouldPersistTaps: 'always',
    }}
    renderHeader={renderHeader}
    renderTabBar={renderTabBar}>
    <Tabs.Tab name="Event" >
      <Event {...props} eventId={EventId} isMember={isMember} />
    </Tabs.Tab>

    <Tabs.Tab name="Attendees">
      <Attendees {...props} data={profile?.data} />
    </Tabs.Tab>

    <Tabs.Tab name="Media">
      <Media {...props} data={profile?.data} />
    </Tabs.Tab>

    <Tabs.Tab name="Details">
      <Details {...props} data={profile?.data} />
    </Tabs.Tab>
  </Tabs.Container>

`

const renderTabBar = (params: TabBarProps<TabName>) => {
     return (
     <MaterialTabBar
    {...params}
    scrollEnabled
    activeColor={theme.colors.black[900]}
    contentContainerStyle={styles.tabContainerStyle}
    getLabelText={(name: TabName) => name.toString()}
    inactiveColor={theme.colors.black[300]}
    indicatorStyle={styles.tabBarIndicator}
    labelStyle={styles.tabBarLabel}
    style={styles.tabBar}
    tabStyle={{width: Dimensions.get('window').width / 4}}
  />
);
};

`

[HenriqueFadoni]

I am having the same problem, @harshal311989 did you find any solutions for this?

[azwinlam]

Same issue and the scroll breaks as well.

#221

[harshal311989]

I am having the same problem, @harshal311989 did you find any solutions for this?

No @HenriqueFadoni still not found any solutions

[harshal311989]

Same issue and the scroll breaks as well.

#221

@azwinlam Any solution you found for Android ?

[azwinlam]

Unfortunately no.

On Thu, Mar 17, 2022, 13:11 harshal311989 @.***> wrote:

Same issue and the scroll breaks as well.

#221 https://github.com/PedroBern/react-native-collapsible-tab-view/issues/221

@azwinlam https://github.com/azwinlam Any solution you found for Android ?

— Reply to this email directly, view it on GitHub https://github.com/PedroBern/react-native-collapsible-tab-view/issues/245#issuecomment-1070332682, or unsubscribe https://github.com/notifications/unsubscribe-auth/AQWSPPSPJI7IQXVGOR6XZ7TVAK5GJANCNFSM5Q3D76IQ . You are receiving this because you were mentioned.Message ID: @.*** com>

[HenriqueFadoni]

It seems this bug is happening when we first scroll the view down, on my side at least, it works normally before the scrolling happens. Really weird, I tried using jumpToTab/setIndex on a onPressTab, but no luck so far. It's super strange, the animation still being triggered as well as the onPressTab event, however, the properties are not changing.

[HenriqueFadoni]

The only way to change tabs for now is to swipe right to left or vice versa. Maybe it's something related to this feature?

[behigh]

Same issue. On iOS all work.

[siddharth-kt]

Same issue on android

[HenriqueFadoni]

Could someone tag this as a bug ? And, not a questions?

[HenriqueFadoni]

Any feedback on this? @andreialecu @PedroBern

[Prince6141]

I am also facing issue this issue. any work around this ? Thanks!

[Alex1899]

facing same issue

[virajpsimformsolutions]

I am also facing issue this issue.

[sahil-republic]

Is there any resolution on it yet?

[AamirHafiez]

In my case, This issue happened only on Android when using ScrollView, but worked perfectly if using a FlatList. So for now I used a FlatList instead, like:-

<Tabs.FlatList
      data={['']}
      keyExtractor={item => item}
      renderItem={() => renderYourComponentThatIsInScrollView()}
/> 

[azwinlam]

Try the rc build and install react native page viewer. Followed by a complete rebuild of the app.

On Wed, Jun 22, 2022, 03:28 teospl @.***> wrote:

Hi, this is still a bug. on Android it's only to press a tab before scrolling, If I scroll a bit, I can't press any tab no more, I can only swipe.

— Reply to this email directly, view it on GitHub https://github.com/PedroBern/react-native-collapsible-tab-view/issues/245#issuecomment-1162234012, or unsubscribe https://github.com/notifications/unsubscribe-auth/AQWSPPUSYHCNFHF4B5YEMMTVQIJVPANCNFSM5Q3D76IQ . You are receiving this because you were mentioned.Message ID: @.*** com>

[leeleoo]

same promble

[sametcl2]

I used Tabs.FlatList instead of Tabs.ScrollView, this worked for now. This is a strange bug indeed.

[azwinlam]

Tried updating to the newest version below:

"react-native-collapsible-tab-view": "^6.1.4", "react-native-pager-view": "^6.2.0", "react-native-reanimated": "~2.9.1"

The tabs became unresponsive.

Reverted back to my old commit below and they were working again.

"react-native-collapsible-tab-view": "^5.0.0-rc.12", "react-native-pager-view": "5.4.24", "react-native-reanimated": "~2.9.1",

both versions, no change in the codebase. Perhaps the 6.1.4 required reanimated 3.1.0? Expo currently doesn't support that. I guess it's an EXPO limitation.

[leoacevedo]

I'd like to thank @AamirHafiez for their workaround, which works at least on ^4.4.0.

Also a big thank you to @PedroBern , @andreialecu and all the other maintainers and contributors for this really useful library!