16

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 2

20

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
  • 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
  • 3
    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?
    – 0x24a537r9
    Commented Jan 21, 2017 at 8:54
  • 4
    This answer is out of date facebook.github.io/react-native/docs/layout-props#overflow
    – sdfsdf
    Commented Feb 14, 2019 at 21:28
  • Well, I tried and saw overflow works in react now.
    – nogabemist
    Commented Sep 7, 2021 at 13:05
6

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;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.