Listview doesn't scroll when inside a scrollview

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);

[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

[Angelk90]

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