Nested scrollview, parent has paging, child does not. Both scrollviews result in paging enabled

[agmcleod]

https://rnplay.org/apps/U-k6oA

Can see the example here. The parent scrollview has pagingEnabled={true}, the child has it explicitly set to false. However, the child one has the page-snap to it when you try to scroll. The rnplay example is using 0.11, but i have this in my own app in version 0.12 as well.

Sample code is here as well:

'use strict';

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

var SampleApp = React.createClass({
  render: function() {
    var screen = Dimensions.get("window");
    return (
      <View style={styles.container}>
        <ScrollView style={{width: screen.width, flex: 1}} horizontal={true} bounces={false} showsHorizontalScrollIndicator={false} pagingEnabled={true} contentInset={{top:-20}}>
            <ScrollView bounces={true} style={{width: screen.width}} pagingEnabled={false}>   
            <Text style={styles.welcome}>
              Welcome to the React Native Playground! This is the sample iOS app.
            </Text>
            <Text style={styles.instructions}>
              Just edit and save with Cmd+S. Changed will be reflected immediately in the simulator.
            </Text>

            <Text style={styles.instructions}>
              To try out Android, just flip the switch and edit index.android.js!
            </Text>
            <Text style={styles.welcome}>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </Text>
          </ScrollView>
          <ScrollView style={{width: screen.width}} pagingEnabled={false}>   
            <Text style={styles.welcome}>
              Welcome to the React Native Playground! This is the sample iOS app.
            </Text>
            <Text style={styles.instructions}>
              Just edit and save with Cmd+S. Changed will be reflected immediately in the simulator.
            </Text>

            <Text style={styles.instructions}>
              To try out Android, just flip the switch and edit index.android.js!
            </Text>
            <Text style={styles.welcome}>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </Text>
          </ScrollView>
            </ScrollView>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 28,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    fontSize: 19,
    marginBottom: 5,
  },
});

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

[astreet]

What platform is this?

[agmcleod]

@astreet ios. I haven't tested it on android, as i don't have that setup for this app.

[fselcukcan]

Additionally I have a similar case on iOS where pagingEnabled supported at. A horizontal ScrollView is parent of a few ListViews and pagingEnabled on the ScrollView.

This ScrollView does not let the child ListViews scroll continuously, that is without paging. It can be accepted that paging direction is deduced from the ScrollView direction, however better it is a explicit property. Currently ReactNative sets it for both directions.

It is certain that paging enabling should have explicit direction values like: pagingEnabled enum('horizontal', 'vertical', 'both')

[mkonicek]

Hi there! This issue is being closed because it has been inactive for a while.

But don't worry, it will live on with ProductPains! Check out its new home: https://productpains.com/post/react-native/nested-scrollview-parent-has-paging-child-does-not-both-scrollviews-result-in-paging-enabled

ProductPains helps the community prioritize the most important issues thanks to its voting feature. It is easy to use - just login with GitHub.

Also, if this issue is a bug, please consider sending a PR with a fix. We're a small team and rely on the community for bug fixes of issues that don't affect fb apps.