# Current behaviour
rendering TabView inside ScrollView, the scene height is higher than screen height, but the ScrollView could not scroll vertically
when the content of TabView is higher than screen height, ScrollView could scroll vertivally
import * as React from 'react';
import { View, StyleSheet, Dimensions } from 'react-native';
import { TabView, SceneMap } from 'react-native-tab-view';
const FirstRoute = () => (
<View style={[styles.scene, { backgroundColor: '#ff4081' }]} />
);
const SecondRoute = () => (
<View style={[styles.scene, { backgroundColor: '#673ab7' }]} />
);
const initialLayout = { width: Dimensions.get('window').width };
export default function TabViewExample() {
const [index, setIndex] = React.useState(0);
const [routes] = React.useState([
{ key: 'first', title: 'First' },
{ key: 'second', title: 'Second' },
]);
const renderScene = SceneMap({
first: FirstRoute,
second: SecondRoute,
});
return (
<TabView
navigationState={{ index, routes }}
renderScene={renderScene}
onIndexChange={setIndex}
initialLayout={initialLayout}
/>
);
}
const styles = StyleSheet.create({
scene: {
height: 1000
},
});
app.js
<ScrollView style={{flex: 1}} contentContainerStyle={{flex:1}}>
<TabViewExample />
</ScrollView>
OS: macOS 10.15.2
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Memory: 624.64 MB / 16.00 GB
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 13.3.0 - /usr/local/bin/node
Yarn: 1.19.1 - ~/.yarn/bin/yarn
npm: 6.7.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
Android SDK:
API Levels: 21, 23, 26, 27, 28
Build Tools: 23.0.1, 26.0.1, 28.0.3, 29.0.2
IDEs:
Android Studio: 3.5 AI-191.8026.42.35.6010548
Xcode: 11.3/11C29 - /usr/bin/xcodebuild
npmPackages:
react: 16.9.0 => 16.9.0
react-native: 0.61.5 => 0.61.5
oh, i finally find what is wrong. change ScrollView's props contentContainerStyle={{flex:1}}
to contentContainerStyle={{flexGrow:1}}.
see https://github.com/facebook/react-native/issues/4099
and solution https://github.com/facebook/react-native/issues/4099#issuecomment-307541206
Most helpful comment
oh, i finally find what is wrong. change
ScrollView's propscontentContainerStyle={{flex:1}}to
contentContainerStyle={{flexGrow:1}}.see https://github.com/facebook/react-native/issues/4099
and solution https://github.com/facebook/react-native/issues/4099#issuecomment-307541206