Update _scrollAnimatedValue offset of ScrollViews.

[miyabi]

Motivation

_scrollAnimatedValue offset of ScrollView is set once in UNSAFE_componentWillMount but it is never updated.
It causes unexpected render result.

So I suggest to update _scrollAnimatedValue offset when ScrollView contentInset is updated.

Test Plan

Here is a demo and an example code:

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

export default class RNScrollExample extends Component {
  state = { navigationBarHeight: 88 };
  onChangeDimensions = this.onChangeDimensions.bind(this);

  componentDidMount() {
    Dimensions.addEventListener('change', this.onChangeDimensions);
  }

  componentWillUnmount() {
    Dimensions.removeEventListener('change', this.onChangeDimensions);
  }

  onChangeDimensions({ window, screen }) {
    if (window.width > window.height) {
      this.setState({ navigationBarHeight: 44 });
    } else {
      this.setState({ navigationBarHeight: 88 });
    }
  }

  renderSectionHeader(title) {
    return (
      <View style={styles.sectionHeader}>
        <Text>{title}</Text>
      </View>
    );
  }

  renderItem(content) {
    return (
      <View style={styles.cell}>
        <Text>{`Item ${content}`}</Text>
      </View>
    );
  }

  renderSeparator() {
    return <View style={styles.separator} />;
  }

  renderSectionList() {
    const sections = Array.from(Array(10), (e, i) => ({ title: `Section ${i+1}`, data: Array.from(Array(10)).map((e, i) => i+1) }));
    const { navigationBarHeight } = this.state;
    return (
      <SectionList
        automaticallyAdjustContentInsets={false}
        contentInset={{ top: navigationBarHeight }}
        contentOffset={{ y: -navigationBarHeight }}
        sections={sections}
        keyExtractor={(item, index) => index}
        renderSectionHeader={({ section }) => this.renderSectionHeader(section.title)}
        renderItem={({ item }) => this.renderItem(item)}
        ItemSeparatorComponent={this.renderSeparator}
      />
    );
  }

  renderHeader() {
    return (
      <View style={[styles.header, { height: this.state.navigationBarHeight }]}>
        <Text style={styles.headerText}>Contents</Text>
      </View>
    );
  }

  render() {
    return (
      <View>
        {this.renderSectionList()}
        {this.renderHeader()}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  header: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    justifyContent: 'flex-end',
    alignItems: 'center',
    backgroundColor: '#ffffffcc',
  },
  headerText: {
    fontSize: 16,
    lineHeight: 44,
    fontWeight: 'bold',
  },
  sectionHeader: {
    paddingHorizontal: 8,
    paddingVertical: 4,
    backgroundColor: '#05bbd3',
  },
  cell: {
    paddingHorizontal: 8,
    paddingVertical: 16,
    backgroundColor: '#82dde9',
  },
  separator: {
    height: 1,
    backgroundColor: '#7d888d',
  },
});

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

Release Notes

[IOS][BUGFIX][ScrollView] Fix that _scrollAnimatedValue offset is not updated even contentInset is updated.

[miyabi]

I added Release Notes.

[facebook-github-bot]

@miyabi 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.

[facebook-github-bot]

@miyabi 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.

[miyabi]

@shergin Could you review this PR?

[cpojer]

Thanks for this PR! Sorry that it took so long to get back to you.

In order to merge it, please fix the flow error. Also, can you make it so the method is only invoked if the inset changed between props? Thank you!

[analysis-bot]

Code analysis results:

• eslint found some issues. Run yarn lint --fix to automatically fix problems.

[analysis-bot]

prettier/prettier: Replace ⏎········nextContentInset.top·||·0,⏎······ with nextContentInset.top·||·0

[miyabi]

@cpojer Thank you for reviewing. I fixed error and updated my code.

[cpojer]

Thank you! I don't think it's a good idea to create up to two empty objects every time the props change. Could you change your code to be a bit more verbose but doesn't create empty objects?

[miyabi]

@cpojer I improved my code. Thanks!

[cpojer]

Thank you!

[facebook-github-bot]

@cpojer is landing this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

[react-native-bot]

This pull request was successfully merged by @miyabi in 58c9567.

^{When will my fix make it into a release? | Upcoming Releases}