react-native-ui-kitten
react-native-ui-kitten copied to clipboard
akveo
TabView unresponsive after navigating away and back (web)
🐛 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
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)}
<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>
<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>
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)
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.
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.
I am also experiencing this same problem, have you found any fix to this ?
I have the same problem, have this been fixed or are there any alternative?
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 ?
Same issue, have to use another package or create my own tab view component for the web
