TabView unresponsive after navigating away and back (web)

[thespacemanatee]

🐛 Bug Report

On react native web, the TabView tab bars and nested Tab tabs become unresponsive to swipes and clicks after navigating away (via StackNavigator or BottomNavigationTab - the ones I've tested with). It works fine on Android and iOS.

To Reproduce

Steps to reproduce the behavior:

<TabView
  selectedIndex={selectedIndex}
  onSelect={(index) => setSelectedIndex(index)}
>
  <Tab title="Available">
    <Layout style={{ height: "100%" }}>
      <View style={styles.titleContainer}>
        <CustomText style={styles.title}>
          Choose a Tenant to Audit
        </CustomText>
      </View>
      <FlatList
        data={tenants}
        keyExtractor={(item, index) => String(index)}
        renderItem={renderTenants}
      />
    </Layout>
  </Tab>
  <Tab title="Saved">
    <Layout style={{ height: "100%" }}>
      <View style={styles.titleContainer}>
        <CustomText style={styles.title}>Saved Checklists</CustomText>
      </View>
      <FlatList
        data={saved}
        keyExtractor={(item, index) => String(index)}
        renderItem={renderSaved}
      />
    </Layout>
  </Tab>
</TabView>

Expected behavior

Tabs should still be swipeable/clickable after navigation.goBack() from the subsequent screen, or navigating between BottomNavigationTabs.

Link to runnable example or repository (highly encouraged)

https://snack.expo.io/@thespacemanatee/calm-candies

UI Kitten and Eva version

Package	Version
@eva-design/eva	^2.0.0
@ui-kitten/components	^5.0.0

Environment information

System:
    OS: macOS 11.2.3
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 15.7.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.5.4 - /usr/local/bin/npm
  SDKs:
    iOS SDK:
      Platforms: iOS 14.4, DriverKit 20.2, macOS 11.1, tvOS 14.3, watchOS 7.2
  IDEs:
    Android Studio: 4.1 AI-201.8743.12.41.7199119
    Xcode: 12.4/12D4e - /usr/bin/xcodebuild
  npmPackages:
    react: 16.13.1 => 16.13.1 
    react-native: https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz => 0.63.2 

[north8side]

I also have files that are behind pictures that someone was using to hide in my files I finally caught it and they would be in the same place around me with 500 feet or more.

Powered by Cricket Wireless Get Outlook for Androidhttps://aka.ms/AAb9ysg

---

From: Chee Kit @.> Sent: Tuesday, April 6, 2021 1:22:28 AM To: akveo/react-native-ui-kitten @.> Cc: Subscribed @.***> Subject: [akveo/react-native-ui-kitten] TabView unresponsive after navigating away and back (web) (#1397)

🐛 Bug Report

On react native web, the TabView tab bars and nested Tab tabs become unresponsive to swipes and clicks after navigating away (via StackNavigator or BottomNavigationTab - the ones I've tested with). It works fine on Android and iOS.

To Reproduce

Steps to reproduce the behavior:

<TabView

selectedIndex={selectedIndex}

onSelect={(index) => setSelectedIndex(index)}

Choose a Tenant to Audit String(index)} renderItem={renderTenants} /> Saved Checklists String(index)} renderItem={renderSaved} />

Expected behavior

Tabs should still be swipeable/clickable after navigation.goBack() from the subsequent screen, or navigating between BottomNavigationTabs.

Link to runnable example or repository (highly encouraged)

@.***/calm-candieshttps://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fsnack.expo.io%2F%40thespacemanatee%2Fcalm-candies&data=04%7C01%7C%7Cfc1e6cfef0d44657791f08d8f8c45a5d%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637532869492119035%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=VjtrvACsShqJ6rVknsGTfyb%2BdpR8SgYDvLBSdVQ2gvI%3D&reserved=0

UI Kitten and Eva version Package Version @eva-design/eva ^2.0.0 @ui-kitten/components ^5.0.0 Environment information

System:

OS: macOS 11.2.3

CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz

Binaries:

Node: 15.7.0 - /usr/local/bin/node

Yarn: 1.22.10 - /usr/local/bin/yarn

npm: 7.5.4 - /usr/local/bin/npm

SDKs:

iOS SDK:

  Platforms: iOS 14.4, DriverKit 20.2, macOS 11.1, tvOS 14.3, watchOS 7.2

IDEs:

Android Studio: 4.1 AI-201.8743.12.41.7199119

Xcode: 12.4/12D4e - /usr/bin/xcodebuild

npmPackages:

react: 16.13.1 => 16.13.1

react-native: https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz => 0.63.2

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHubhttps://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fakveo%2Freact-native-ui-kitten%2Fissues%2F1397&data=04%7C01%7C%7Cfc1e6cfef0d44657791f08d8f8c45a5d%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637532869492128993%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=mccY9TzfI2xAOPu3FBMR4wCjaa%2FMnkkHtEDN14glLW4%3D&reserved=0, or unsubscribehttps://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FASXJQ5QHUHAE3LKUUTFORBLTHKSCJANCNFSM42OCHNXA&data=04%7C01%7C%7Cfc1e6cfef0d44657791f08d8f8c45a5d%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637532869492128993%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=4rWbKpKIluc1DmHPmETRZ%2FClFajCVIWGDOqipGLmJLk%3D&reserved=0.

[BestLeader]

I am experiencing the same problem. It appears that on react-native-web, the TabView onSelect calls setState repetitively as soon as one navigates away from the view containing the TabView.

[corliansa]

I am also experiencing this same problem, have you found any fix to this ?

[Davete0302]

I have the same problem, have this been fixed or are there any alternative?

[Davete0302]

I am experiencing the same problem. It appears that on react-native-web, the TabView onSelect calls setState repetitively as soon as one navigates away from the view containing the TabView.

have you found any fix to this ?

[ruida-shen]

Same issue, have to use another package or create my own tab view component for the web