2

Consider this simple ScrollView.

  • On iOS, clicking on the text will but the text to the top because scrollTo({ y: 250 }) scrolls even if end of scrollView is reached.

  • On Android, the text doesn't move.

How to get on Android the same behavior we have on iOS?

ebaynaud
  • 682
  • 6
  • 15

1 Answers1

3

You can work around this by adding padding to the contentContainerStyle of the ScrollView. A good starting point would be to add padding equal to the height of the device's screen.

import { Dimensions } from 'react-native';
const ANDROID_SCREEN_HEIGHT_PADDING = Dimensions.get('window').height;

then, when rendering:

<ScrollView
    contentContainerStyle={{paddingBottom: ANDROID_SCREEN_HEIGHT_PADDING}}>
...
</ScrollView>

You could use this for necessary extra Android padding in every direction. If you are using horizontal={true}, for example, you could add padding equal to the width of the screen and add it to the paddingLeft style property to get the intended scrolling behavior on Android.

This behavior is due to the underlying implementation of ScrollView on Android in React-Native. See also: React native Android ScrollView scrollTo not working

Chris Knepper
  • 146
  • 1
  • 3