React Native Overflow And Scroll
View does not have an overflow: scroll
property, the docs only show:
overflow ReactPropTypes.oneOf(['visible', 'hidden'])
The only ways to make a scrollable View are to either use ScrollView or ListView.
if you want overflow: scroll in react native then you have to use these two props
- scrollEnabled
- onContentSizeChange
like this
import React, { Component } from "react";
import { ScrollView, View } from "react-native";
const { height } = Dimensions.get("window");
export class index extends Component {
state = {
screenHeight: 0,
};
onContentSizeChange = (contentWidth, contentHeight) => {
this.setState({ screenHeight: contentHeight });
};
render() {
const scrollEnabled = this.state.screenHeight > height;
return (
<ScrollView
style={{ flex: 1 }}
contentContainerStyle={styles.scrollview}
scrollEnabled={scrollEnabled}
onContentSizeChange={this.onContentSizeChange}
>
<View style={styles.content}></View>
</ScrollView>
);
}
}
export default index;