React-native: Android - Flatlist with inverted horizontal on scroll goes back to the start

[tamirrab]

• [V] Review the documentation: https://facebook.github.io/react-native
• [V] Search for existing issues: https://github.com/facebook/react-native/issues
• [V] Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

React Native Environment Info:
System:
OS: macOS 10.14.2
CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
Memory: 2.24 GB / 16.00 GB
Shell: 5.3 - /bin/zsh
Binaries:
Node: 8.11.4 - ~/.nvm/versions/node/v8.11.4/bin/node
Yarn: 1.10.1 - /usr/local/bin/yarn
npm: 6.4.1 - ~/.nvm/versions/node/v8.11.4/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, 26, 27, 28
Build Tools: 27.0.3, 28.0.2, 28.0.3
System Images: android-24 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom_64, android-28 | Google Play Intel x86 Atom
IDEs:
Android Studio: 3.2 AI-181.5540.7.32.5056338
Xcode: 10.1/10B61 - /usr/bin/xcodebuild
npmPackages:
react: ^16.6.3 => 16.6.3
react-native: 0.58.0-rc.1 => 0.58.0-rc.1
npmGlobalPackages:
react-native-git-upgrade: 0.2.7

Description

When using Flatlist on Android (I try on android pie 9) and add "inverted" and "horizontal" and scrolling fast to the right (from start to end) - the Flatlist scroll back to the other side (to the left)

Reproducible Demo

Let us know how to reproduce the issue. Include a code sample, share a project, or share an app that reproduces the issue using https://snack.expo.io/. Please follow the guidelines for providing a MCVE: https://stackoverflow.com/help/mcve

[sramezani]

+1
I have same problem with Android 9 ( inverted horizontal Flatlist )

react: 16.6.3
react-native: 0.57.8

[OmarBasem]

I am having the same problem, react native 0.57.8 , react 16.6.3

[zth]

Same problem here. I think this was fixed for vertical inverted scrolling, but the fix had references to Y values specifically, so I suspect it only fixed the vertical part?

[AZIMAT]

I am having the same problem, react native 0.57.8 , react 16.6.3

+1

[tamirrab]

Also on react-native 0.58.0

[AZIMAT]

Hey Guys This Is So Important Please Help

[kelset]

I'm pretty sure this is a duplicate of https://github.com/facebook/react-native/issues/23158

[tamirrab]

Not sure
There is a different because this issue is horizontal and the other issue is vertical

[AZIMAT]

I'm pretty sure this is a duplicate of #23158

Nope That was vertical
Its horizontal issue
i think vertical issue is solved

[kelset]

Does it still happen on 0.58.3?

[tamirrab]

Still not fixed on 0.58.3 :(

[AZIMAT]

Does it still happen on 0.58.3?

Yeap
:-1:

[kelset]

Ok then can any of you provide a minimal repro?

[tamirrab]

like this?

import React from "react";
import {View, FlatList, Text} from "react-native";

const setArray = () => {
    const arrayOfNumbers = [];

    for (let i = 0; i < 100; i++) {
        arrayOfNumbers.push("" + i);
    }

    return arrayOfNumbers;
};

const Demo = () => {
    return <FlatList
        inverted
        horizontal
        showsHorizontalScrollIndicator={false}
        data={setArray()}
        keyExtractor={item => item}
        renderItem={({item, index}) => {
            return <View style={{
                width: 40,
                height: 40,
                borderWidth: 1,
                justifyContent: 'center',
                alignItems: 'center',
                margin: 10
            }}>
                <Text>{item}</Text>
            </View>
        }}
    />
};

export {Demo}