React-native: scrollTo does not work when scrollView height is less then scrollValue on iOS

[PrithviPrithvi]

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 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!

[react-native-bot]

Can you run react-native info and edit your issue to include these results under the React Native version: section?

If you believe this information is irrelevant to the reported issue, you may write [skip envinfo] alongside an explanation in your Environment: section.

[mysport12]

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

[PrithviPrithvi]

Thank you, @mysport12. scrollToOverflowEnabled worked for me.

[ragamufin]

Thanks @mysport12 This fixed the issue I had with the refreshControl not showing up when setting refreshing to true and the refresh control not showing except for the first time

[vendelocky]

Hi, I faced exact same problem with this (in a different context). The solution provided by @mysport12 is working perfectly, but scrollToOverflowEnabled seems to work only for iOS, how to handle this issue on Android? I tried overScrollMode={'always'} but it is not working.

[abdulrahman18]

@vendelocky are you fixed in Android? How? Can you please update here

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[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.