scrollTo does not work when scrollView height is less then scrollValue on iOS

Hi everyone,

I’m using react-native version 0.60.3. While developing an Application I noticed that when using scrollTo function for ScrollView or even scrollToOffset of FlatList and providing the value scrollY ( where scrollY is scrollTo({ y: scrollY}) ) which is more than the height of ScrollView then scroll view just scrolls to end on iOS. When I was using the same code on react-native version 0.59 this functionality used to work perfectly. I’m not sure whether this is the issue or update of react-native version 0.60.

React Native version:

System:
   OS: macOS High Sierra 10.13.6
   CPU: (4) x64 Intel(R) Core(TM) i5-5350U CPU @ 1.80GHz
   Memory: 96.45 MB / 8.00 GB
   Shell: 3.2.57 - /bin/bash
 Binaries:
   Node: 11.11.0 - /usr/local/bin/node
   npm: 6.7.0 - /usr/local/bin/npm
   Watchman: 4.9.0 - /usr/local/bin/watchman
 SDKs:
   iOS SDK:
     Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
   Android SDK:
     API Levels: 23, 24, 25, 26, 27, 28
     Build Tools: 23.0.1, 28.0.2, 28.0.3
     System Images: android-26 | Google APIs Intel x86 Atom
 IDEs:
   Android Studio: 3.4 AI-183.6156.11.34.5692245
   Xcode: 10.1/10B61 - /usr/bin/xcodebuild
 npmPackages:
   react: ^16.8.6 => 16.8.6 
   react-native: ^0.60.3 => 0.60.3

Anyone who wants to trace this issue can take below snippet

import React, {
 Component
} from 'react';
import {
 Text,
 View,
 FlatList,
 Dimensions,
 Button,
 StyleSheet,
 TextInput,
 ScrollView,
 Keyboard
} from 'react-native';

const {
 width
} = Dimensions.get('window');

const style = {
 justifyContent: 'center',
 alignItems: 'center',
 width: width,
 height: 50,
 flex: 1,
 borderWidth: 1,
};

const COLORS = ['deepskyblue', 'fuchsia', 'lightgreen'];

function getData(number) {
 let data = [];
 for (var i = 0; i < number; ++i) {
  data.push("" + i);
 }

 return data;
}

class ScrollToExample extends Component {

 constructor(props) {
  super(props);
  this.state = {}
  this.scrollValue = 0
 }

 getItemLayout = (data, index) => ({
  length: 50,
  offset: 50 * index,
  index
 })

 getColor(index) {
  const mod = index % 3;
  return COLORS[mod];
 }

 _onScroll = (e) => {
  this.scrollValue = e.nativeEvent.contentOffset.y
 }

 scrollTo = (scrollY) => {
  this.scrollView.scrollTo({
   y: this.scrollValue + scrollY
  })
 }

 render() {
  const data = this.props.data
  return ( <
   View style = {
    styles.container
   } >
   <
   ScrollView ref = {
    (ref) => {
     this.scrollView = ref;
    }
   }
   onScroll = {
    this._onScroll
   }
   scrollEventThrottle = {
    16
   }
   keyboardDismissMode = 'on-drag' >
   {
    data.map((element, index) => {
     return ( <
      View key = {
       index.toString()
      }
      style = {
       {
        ...style,
        backgroundColor: this.getColor(index)
       }
      } >
      <
      Text > {
       element
      } < /Text> <
      /View>
     )
    })
   } <
   TextInput style = {
    {
     width: '100%',
     height: 40,
     backgroundColor: 'white'
    }
   }
   placeholder = "Enter Text" / >
   <
   /ScrollView> <
   /View>
  );
 }
}

const styles = StyleSheet.create({
 container: {
  flex: 1
 }
});

export default class app extends Component {

 componentDidMount() {
  this.keyboardWillShowListener = Keyboard.addListener('keyboardWillShow', this._keyboardWillShow);
 }

 componentWillUnmount() {
  this.keyboardWillShowListener.remove();
 }

 _keyboardWillShow = (e) => {
  this.ScrollToExample.scrollTo(e.endCoordinates.screenY)
 }
 render() {
  return <ScrollToExample
  ref = {
   (ref) => {
    this.ScrollToExample = ref;
   }
  }
  data = {
   getData(20)
  }
  />
 }
}

Now, Run the app on IOS with react-native version 0.59 and Input will scroll along with keyboard, after this try to run on react-native version 0.60 Input will not scroll along with the keyboard. Here I cannot use KeyboardAvoidingView since in my application there are many Input box.

Below screenshot show’s what is the exact issue.

for react-native version 0.59 for react-native version 0.60

It would be very helpful if someone tells me how to avoid this.

Thanks!

[mysport12]

@PrithviPrithvi Set the prop scrollToOverflowEnabled={true} on the ScrollView to re-enable the old behavior.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.