I started learning React Native. As far as I see, there is both an "overflow:scroll" style property and a ScrollView. Does using "overflow:scroll" in a View make it a ScrollView in React Native?
2 Answers
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.
-
Right, I guess I confused it with CSS, thanks. Do you know of a resource that lists all the differences between CSS and React Native?– John L.Commented Sep 27, 2016 at 15:28
-
@JohnL. The only place that I know of would be here but it only shows the style properties in RN, and there is no comparison vs CSS that I know of. Commented Sep 27, 2016 at 15:32
-
3Interestingly, the docs now have
scroll
as a supported value: facebook.github.io/react-native/docs/layout-props.html#overflow. I don't really get what "overflow: scroll
causes views to be measured independently of their parents main axis" means, though. Any idea? Commented Jan 21, 2017 at 8:54 -
4This answer is out of date facebook.github.io/react-native/docs/layout-props#overflow– sdfsdfCommented Feb 14, 2019 at 21:28
-
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;