Auto scroll issue when snapToInterval/snapToOffsets is set on Vivo/Oppo Phones

[Ashwin-Mothilal]

All the scenarios applies to both snapToInterval/snapToOffsets

Description

I have created a ScrollView with snapToInterval set. When I try to scroll, it automatically scrolls to the end of the scroll view then to the start. This happens when snapToInterval is set and especially on Vivo/Oppo phones. This works perfectly on other OEM phones like Samsung, Pixel, Redmi etc.

⚠️ Note

I tested on Vivo v17 running Android 10 with security patch 2020-07-01. This was working fine on the April security patch of the phone.

React Native version:

System:

OS: macOS 10.15.6
CPU: (4) x64 Intel(R) Core(TM) i7-4578U CPU @ 3.00GHz
Memory: 107.91 MB / 16.00 GB
Shell: 5.7.1 - /bin/zsh

Binaries:

Node: 12.16.2 - ~/.nvm/versions/node/v12.16.2/bin/node
Yarn: 1.22.4 - /usr/local/bin/yarn
npm: 6.14.4 - ~/.nvm/versions/node/v12.16.2/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman

SDKs:

iOS SDK:
  Platforms: iOS 13.5, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2

IDEs:

Android Studio: 3.6 AI-192.7142.36.36.6308749
Xcode: 11.5/11E608c - /usr/bin/xcodebuild

npmPackages:

react: 16.13.1 => 16.13.1 
react-native: 0.63.2 => 0.63.2

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1. Need a Vivo/Oppo phone (I tested it on Vivo v17)
2. Just simply scroll

Software version - PD194F_EX_A_6.11.5
Android version - 10
Vivo ROM - Funtouch OS_10
Security Patch - 2020-07-01

Expected Results

When I scroll it needs to snap to the next interval.

Snack, code example, screenshot, or link to a repository:

GitHub Repo link
Snack link
Video link

Code:

import React from 'react';
import {
  ScrollView,
  View,
  Text,
  FlatList,
  useWindowDimensions,
} from 'react-native';

const height = 200;

const data = new Array(10).fill(0);

const App = () => {
  const {width} = useWindowDimensions();
  const renderItem = ({index}) => {
    return (
      <View
        style={{
          width,
          height,
          backgroundColor: 'white',
          alignItems: 'center',
          justifyContent: 'center',
          borderWidth: 1,
        }}
        key={index}>
        <Text>{`Count is ${index}`}</Text>
      </View>
    );
  };

  return (
    <View
      style={{
        width,
      }}>
      <Text
        style={{height: 50, textAlign: 'center', textAlignVertical: 'center'}}>
        This is a Horizontal ScrollView
      </Text>
      <ScrollView
        horizontal={true}
        pagingEnabled={false}
        snapToInterval={width}
        decelerationRate={'fast'}
        persistentScrollbar>
        {data.map((_, index) => renderItem({index}))}
      </ScrollView>
      <Text
        style={{height: 50, textAlign: 'center', textAlignVertical: 'center'}}>
        This is a Vertical FlatList
      </Text>
      <FlatList
        renderItem={renderItem}
        data={data}
        keyExtractor={(item, index) => index.toString()}
        style={{height}}
        snapToInterval={height}
        persistentScrollbar
        decelerationRate={'fast'}
      />
    </View>
  );
};

export default App;

[NikiLee2016]

Same issue.

[Ashwin-Mothilal]

@NikiLee2016 There is one way to resolve this issue but there is one catch

1. Upgrade to latest RN ^*
2. Added this property to ScrollView/FlatList disableintervalmomentum

This catch is The scroll view stops on the next index (in relation to scroll position at release). User cannot scroll more than a page at a time

^* disableintervalmomentum works only on horizontal views on older versions of RN. Latest version support both orientations.

[NikiLee2016]

@NikiLee2016 There is one way to resolve this issue but there is one catch

1. Upgrade to latest RN *
2. Added this property to ScrollView/FlatList disableintervalmomentum

This catch is The scroll view stops on the next index (in relation to scroll position at release). User cannot scroll more than a page at a time

• disableintervalmomentum works only on horizontal views on older versions of RN. Latest version support both orientations.

Thanks for your reply, but my ScrollView is vertical and My view is something like a picker, So it would be unacceptable if user cannot scroll more than a page at a time.
Anyway, thank you.

[NikiLee2016]

I solved this problem by scrolling to the position manually when the onMomentumScrollEnd callback triggered. The animation sucks but It works on Vivo devices.

[FawadMahmood]

I have tried that brother, but it’s very much laggy. I am also facing this issue, in fact it skip some items on fast scroll momentum.

[bhupali-sharechat]

Do we have a root cause identified for this?
Still facing this...

[matej-podzemny]

Any updates?

same issue on Samsung S21 5G

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity.