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?
Add a comment
|
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.
6 Comments
John L.
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?
Nader Dabit
@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.
0x24a537r9
Interestingly, 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?
sdfsdf
This answer is out of date facebook.github.io/react-native/docs/layout-props#overflow
nogabemist
Well, I tried and saw overflow works in react now.
|
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;
Comments
