RN-iOS: ScrollView holds onto current offset on rotation

[kpink224]

ScrollView holds onto current offset on rotation causing the content to not scroll to end if needed.

Steps to Reproduce

• make a project with the code below
• scroll to the end in portrait
• Rotate the screen from portrait (It happens occasionally)

Result

The content in the scroll view doesn't format to the end of the scrollview

Expected Behavior

The content should be scrolled to the end of the scroll view.

Image

CODE

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  ScrollView,
  View
} from 'react-native';

export default class ScrollBug extends Component {
  render() {
    return (
      <View style={styles.container}>
        <ScrollView
        style={styles.scrollContainer}
        alwaysBounceHorizontal={false}
        showsHorizontalScrollIndicator={false}
        horizontal={true}
        decelerationRate={0}
        snapToAlignment="start">
          <View style={styles.item}/>
          <View style={styles.item}/>
          <View style={styles.item}/>
          <View style={styles.item}/>
          <View style={styles.item}/>
          <View style={styles.item}/>
          <View style={styles.item}/>
          <View style={styles.item}/>
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: 44,
    backgroundColor: '#ecf0f1',
  },
  scrollContainer: {
    flexDirection: 'row',
    flex: 1
  },

  item: {
    width: 200,
    height: 200,
    backgroundColor: '#00ee88',
    borderColor: '#990077',
    borderWidth: 10
  }
});

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

Additional Information

• React Native version: 0.43.3
• Platform: iOS only
• Development Operating System: MacOS

[TLenahan]

I have the same issue, but when the ScrollView is vertical scrolling

I have modified @kpink224's code to demonstrate the issue when vertical scrolling:

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  ScrollView,
  View,
} from 'react-native';

export default class ScrollBug extends Component {
  render() {
    return (
      <View style={styles.container}>
        <ScrollView >
          <View style={styles.item} />
          <View style={styles.item} />
          <View style={styles.item} />
          <View style={styles.item} />
          <View style={styles.item} />
          <View style={styles.item} />
          <View style={styles.item} />
          <View style={styles.item} />
          <View style={styles.item} />
          <View style={styles.item} />
          <View style={styles.item} />
          <View style={styles.item} />
          <View style={styles.item} />
          <View style={styles.item} />
          <View style={styles.item} />
          <View style={styles.item} />
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flexGrow: 1,
  },
  item: {
    height: 100,
    backgroundColor: 'red',
    borderColor: 'blue',
    borderWidth: 10,
  },
});

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

[kpink224]

@shergin fixed it!