React Native Overflow And Scroll

Question

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?

Answer 1

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;

Answer 2

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.