<TabView> with <Tab> not scrollable on Web using Expo.
Bug Report
I cannot scroll the content of the TabView Tabs on web using Expo. It works fine on iOS devices.
To Reproduce
Create a Screen like that in a bare Expo project and start expo start --web
It does not scroll the views. Running it on mobile / simulator (iOS), it works.
import { Layout, List, StyleService, Tab, TabView, Text } from '@ui-kitten/components';
import React from 'react';
import { ScrollView } from 'react-native';
export const TabViewScreen = ({
navigation,
}: {
navigation: any;
}): React.ReactElement => {
const [selectedIndex, setSelectedIndex] = React.useState(0);
const renderItem = (item: any) => {
return (
<Layout
style={{
height: 200,
backgroundColor: [
'aqua',
'blue',
'fuchsia',
'gray',
'green',
'lime',
'maroon',
'navy',
'olive',
'orange',
'purple',
'red',
'silver',
'teal',
'white',
'yellow',
][Math.floor(Math.random() * 15)],
}}
>
<Text>{Math.random().toString()}</Text>
</Layout>
);
};
return (
<Layout style={styles.container}>
<TabView
selectedIndex={selectedIndex}
onSelect={(index) => setSelectedIndex(index)}
tabBarStyle={{ height: 50 }}
style={{ flexGrow: 1 }}
// shouldLoadComponent={shouldLoadComponent}
>
<Tab title="Test">
<List
scrollEnabled={true}
scrollToOverflowEnabled={true}
data={Array.from({ length: 7 })}
renderItem={renderItem}
></List>
</Tab>
<Tab title="Other" style={{ flexGrow: 1 }}>
<ScrollView
contentContainerStyle={{ flexGrow: 1, paddingBottom: 200 }}
style={{ flexGrow: 1 }}
>
<Layout style={{ height: 200, backgroundColor: 'gray' }}></Layout>
<Layout style={{ height: 200, backgroundColor: 'purple' }}></Layout>
<Layout style={{ height: 200, backgroundColor: 'black' }}></Layout>
<Layout style={{ height: 200, backgroundColor: 'blue' }}></Layout>
<Layout style={{ height: 200, backgroundColor: 'lightblue' }}></Layout>
<Layout style={{ height: 200, backgroundColor: 'lightgreen' }}></Layout>
<Layout style={{ height: 200, backgroundColor: 'green' }}></Layout>
<Layout style={{ height: 200, backgroundColor: 'pink' }}></Layout>
<Layout style={{ height: 200, backgroundColor: 'orange' }}></Layout>
<Layout style={{ height: 200, backgroundColor: 'gray' }}></Layout>
<Layout style={{ height: 200, backgroundColor: 'purple' }}></Layout>
<Layout style={{ height: 200, backgroundColor: 'black' }}></Layout>
<Layout style={{ height: 200, backgroundColor: 'blue' }}></Layout>
<Layout style={{ height: 200, backgroundColor: 'lightblue' }}></Layout>
<Layout style={{ height: 200, backgroundColor: 'lightgreen' }}></Layout>
<Layout style={{ height: 200, backgroundColor: 'green' }}></Layout>
<Layout style={{ height: 200, backgroundColor: 'pink' }}></Layout>
<Layout style={{ height: 200, backgroundColor: 'orange' }}></Layout>
</ScrollView>
</Tab>
</TabView>
</Layout>
);
};
const styles = StyleService.create({
container: {
flex: 1,
flexGrow: 1,
},
});
Expected behavior
It should behave like on mobile.
Link to runnable example or repository (highly encouraged)
UI Kitten and Eva version
| Package | Version |
|---|---|
| @eva-design/eva | 2.1.1 |
| @ui-kitten/components | 5.1.1 |
Environment information
System: OS: macOS 11.5.1 CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz Binaries: Node: 14.15.5 - /usr/local/bin/node Yarn: 1.22.10 - ~/.npm-global/bin/yarn npm: 6.14.11 - /usr/local/bin/npm SDKs: iOS SDK: Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4 IDEs: Android Studio: 4.2 AI-202.7660.26.42.7351085 Xcode: 12.5.1/12E507 - /usr/bin/xcodebuild npmPackages: react: 16.13.1 => 16.13.1 react-native: https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz => 0.63.2
"@ui-kitten/components": "^5.1.1",
"@ui-kitten/eva-icons": "^5.1.1",Source: akveo/react-native-ui-kitten