Use contentOffset to set the starting scroll offset in ReactHorizontalScrollView

[xqwzts]

Implements contentOffset for horizontal scrollviews in Android [already implemented for ios]. This will allow specifying the position the ScrollView should start at.

A common use case is having a horizontal ListView with pagingEnabled, and having it open to a specified page, without having to wait for it to load and then call scrollTo.

Also see #6849

Usage:

Add contentOffset={{ x: someInitialXValue, y: someInitialYValue }} to your ScrollView props.

Example:

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ListView,
  Dimensions,
} from 'react-native';


export default class offsettest extends Component {
  constructor() {
    super();
    const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
    const { width } = Dimensions.get('window');
    this.state = {
      dataSource: ds.cloneWithRows(['row 1', 'row 2', 'row 3', 'row 4', 'row 5']),
      initialPage: width * 3,
    };
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Android Horizontal ListView ContentOffset Example
        </Text>
        <ListView
          dataSource={this.state.dataSource}
          renderRow={(rowData) => (
            <View style={{flex: 1, backgroundColor: 'red', width: Dimensions.get('window').width, justifyContent: 'center', alignItems: 'center'}}>
              <Text style={{color: 'white'}}>{rowData}</Text>
            </View>
          )}
          contentOffset={{ x: this.state.initialPage, y: 0 }}
          horizontal={true}
          pageSize={1}
          pagingEnabled={true}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 16,
    textAlign: 'center',
    margin: 10,
  },
});

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

[xqwzts]

Tests seem to be up and running again, I've rebased to see if they'll pass this time.

[BinLi-DEV]

To make it work on Android, do you mean I should use this method using ListView instead of ScrollView ? And is this also working for iOS ?

[xqwzts]

contentOffset should already be working on iOS, this PR brings it to Android too, for both ScrollView and ListView. [And maybe the new FlatList/VirtualizedList if they use the ReactHorizontalScrollView native component]

[kkjamie]

What about ReactScrollView as well as the horizontal one ?

[xqwzts]

Shouldn't take much to reproduce the same code there, my initial use case didn't include vertical so I didn't want to make a PR I wouldn't be testing, might do it over the weekend.

[BinLi-DEV]

I see the commit is submitted at Feb 27, 2017, is it available on any release version now?

[xqwzts]

@BinLi-OW : This PR hasn't been merged in, so no, it isn't in any of the releases. You could apply the changes locally to have access to it and help test [if you do, please let me know of any bugs that pop up].

[kkjamie]

I have tested this a bit, and it appears to work. I have merged it into our product, it will be tested more throughout the week by myself and our QA team.

[xqwzts]

@kkjamie : That's awesome, please let me know if you spot any issues!

[BinLi-DEV]

@xqwzts , @kkjamie , would you please give tips how could I rebuild the react-native-XXX.jar in local storage?
As I thought, I make changes to the java files under node_modules, but it seems I should build out the jar first.

[kkjamie]

I actually just copied the file from this repo into my repo and renamed it, exposed it by a new Package. I don't want to be forking react-native and worrying about rebuilding, I know somebody at our company has done this. Checkout https://facebook.github.io/react-native/releases/next/docs/android-building-from-source.html

[chrisbianca]

I've just given this a try as I encountered the same problem, and can confirm that the change works as expected.

[xqwzts]

@BinLi-OW I did it by forking, applying the changes of this commit, then building from source following the link @kkjamie posted above.
@chrisbianca : Thanks for the feedback.

[hramos]

This PR doesn't have a test plan, can you fix that?

[xqwzts]

@hramos : I'll rebase it on master in the next few days and take a look at handling vertical ScrollViews as well. Any specific test suggestions? Would committing examples be enough?

[jonaslu]

Hi!

I've tried getting the vertical scroll to behave the same with great success!

I did exactly the same as this patch does but in ReactHorizontalScrollView.java and ReactScrollView.java, dunno if you want to include it in your patch (would make more sense from a commit-perspective I guess) or if I should do this in a separate commit?

Also, a word of warning - we had an included react-native component (seems to be react-native-scrollable-tab-view) that submits a contentOffset with only an x parameter. I think it's this line: https://github.com/skv-headless/react-native-scrollable-tab-view/blob/master/index.js#L155)

This seems to be an illegal state if I understand the data-type PointPropType correctly, but I'm thinking it's a good thing to actually check that both properties are defined before trying to access them (our app crashed before I added validation that both properties are present).

[facebook-github-bot]

@xqwzts I tried to find reviewers for this pull request and wanted to ping them to take another look. However, based on the blame information for the files in this pull request I couldn't find any reviewers. This sometimes happens when the files in the pull request are new or don't exist on master anymore. Is this pull request still relevant? If yes could you please rebase? In case you know who has context on this code feel free to mention them in a comment (one person is fine). Thanks for reading and hope you will continue contributing to the project.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

[ssssssssssss]

@shergin Any chance to get this merged? Thanks.

[todorone]

@hramos @shergin It's very annoying not having contentOffset on Android. Is there any chance this PR could be reviewed? Thanks.

[hramos]

@todorone it's been closed for over a year. It'd have a better chance if someone opened a new PR and applied the feedback from this thread.