Listview doesn't scroll when inside a scrollview

[agmcleod]

Noticed this after upgrading to 0.7.1 from 0.6.

Below is a simple example to reproduce. I noticed it when upgrading my app that has three separate list views inside a scrolling container. List views are set to show all rows, as they're not expected to be very long. But all three are large enough to go off page.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';

var React = require('react-native');
var {
  AppRegistry,
  Component,
  ListView,
  StyleSheet,
  Text,
  ScrollView,
  View,
} = React;

class TestScrollView extends Component {
  constructor(props) {
    super(props);
    let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows(["ALABAMA", "ALASKA", "AMERICAN SAMOA", "ARIZONA", "ARKANSAS", "CALIFORNIA", "COLORADO", "CONNECTICUT", "DELAWARE", "DISTRICT OF COLUMBIA", "FEDERATED STATES OF MICRONESIA", "FLORIDA", "GEORGIA", "GUAM GU", "HAWAII", "IDAHO", "ILLINOIS", "INDIANA", "IOWA", "KANSAS", "KENTUCKY", "LOUISIANA", "MAINE", "MARSHALL ISLANDS", "MARYLAND", "MASSACHUSETTS", "MICHIGAN", "MINNESOTA", "MISSISSIPPI", "MISSOURI", "MONTANA", "NEBRASKA", "NEVADA", "NEW HAMPSHIRE", "NEW JERSEY", "NEW MEXICO", "NEW YORK", "NORTH CAROLINA", "NORTH DAKOTA", "NORTHERN MARIANA ISLANDS", "OHIO", "OKLAHOMA", "OREGON", "PALAU", "PENNSYLVANIA", "PUERTO RICO", "RHODE ISLAND", "SOUTH CAROLINA", "SOUTH DAKOTA", "TENNESSEE", "TEXAS", "UTAH", "VERMONT", "VIRGIN ISLANDS", "VIRGINIA", "WASHINGTON", "WEST VIRGINIA", "WISCONSIN", "WYOMING"])
    };
  }
  render() {
    return (
      <View style={styles.container}>
        <ScrollView>
          <ListView
            dataSource={this.state.dataSource}
            renderRow={(rowData) => <Text>{rowData}</Text>}
          />
        </ScrollView>
      </View>
    );
  }
}

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  }
});

AppRegistry.registerComponent('TestScrollView', () => TestScrollView);

[osdio]

just see noder, I put five listView into a scrollView, it works well.

[agmcleod]

Are you running version 0.7? I see you have ^0.6.0 but if you haven't updated in a bit, it could be 0.6.x, which works fine.

[christopherdro]

Is it necessary to wrap your ListView with ScrollView?
Have you tried just using ListView?

[agmcleod]

I have three separate list views that show all the items, as i don't want them scrolling. So I wrap all three in a single scroll view. My above example is a simple & short one to show the issue.

[osdio]

I have update my project noder to 0.7.1, it works well,

[agmcleod]

@soliury i wonder if it's because your PageScrollView component is horizontal as opposed to vertical.

[agmcleod]

Doing some more experimentation with this. I seem to have scroll issues when it's a really long body of content. Do i need to manually set the height or add styling of some kind? I just have an app with a scroll view tag and 100+ components in it. I can't scroll down the page either.

[agmcleod]

Realized a change along the way must have broke how i was using the scrollview. Updating to 0.8.0-rc, using the Dimensions package has helped me fix this. I set the height of my top level view in index.ios.js to that of the screen:

class App extends Component {
  render() {
    return (
      <Navigator
        initialRoute={{
          component: ProjectList,
          navigationBar: <NavigationBar title="Projects" titleColor="#000000" style={appStyles.navigator} />,
          id: "project_list"
        }}
        renderScene={this.renderScene}
      />
    );
  }

  renderScene(route, navigator) {
    var Component = route.component;
    var navBar = route.navigationBar;

    if (navBar) {
      navBar = React.addons.cloneWithProps(navBar, {
        navigator: navigator,
        route: route
      });
    }
    var height = Dimensions.get("window").height;
    return (
      <View style={{height: height }}>
        {navBar}
        <Component {...route.props} navigator={navigator} route={route} />
      </View>
    );
  }
}

Then pass a flex 1 to the scrollview in my subcomponents. Though with this method, you'll need a scrollview in every component that requires scrolling.

[DurgaManickam]

how to make scrollable ListView inside Modal ???

Modal
//need scrollable listview
/Modal

[phoue]

@DurgaManickam I got the same issue, sloved by setting height of ListView.

[sibelius]

@phoue should I get the height from Dimensions, to make the modal get the whole screen?

[sadafk831]

I had the same issue as I had the following component structure.

<View>
<ScrollView>
  <View>
      <Text/>
      <ListView />
  </View>
  <View> 
      <Text/>
      <ListView />
  </View>
  <View>
      <Text/>
      <ListView />
  </View>
</ScrollView>
</View>

As wrapping the ListView inside the ScrollView the parent scroll action dominates the child scroll action which leads only ScrollView to scroll.
I resolved this issue by adding the following code as a prop to the parent View which wraps the ScrollView

onStartShouldSetResponderCapture={() => {
    this.setState({ enableScrollViewScroll: true });
}}

Add scrollEnabled={this.state.enableScrollViewScroll} prop to ScrollView

And Finally add following to the View which wraps the ListView( immediate parent )

onStartShouldSetResponderCapture={() => {
     this.setState({ enableScrollViewScroll: false });
     if (this.refs.myList.scrollProperties.offset === 0 && this.state.enableScrollViewScroll === false) {
       this.setState({ enableScrollViewScroll: true });
     }
 }}

this works very well on IOS and Android both, scrolls the ListView if the touch is on List and else it scrolls the ScrollView

[kaberibasu]

@sadafk831 awesome solution. Saved my time and effort at crucial time.

[JohnnyMa]

@sadafk831 thanks for your feedback. It helps.

[Thanmai-C]

@sadafk831 what is scrollProperties.offset? it throws me an undefined is not an object error.
Does FlatList have it?

[Angelk90]

@sadafk831 : Could you post a complete code example? I get lost somewhere.

[zhenghow93]

@Thanmai-C I am using FlatList, not sure if this is the right way but I wrote this.refs.myList._listRef._scrollMetrics.offset instead.

[ghost]

@sadafk831 what is "this.refs.myList"? I am new to react-native

[ruchi1906]

@sadafk831 I am using FlatList instead of listview. I am getting offset of undefined error message. Please give me someone solution