react-native icon indicating copy to clipboard operation
react-native copied to clipboard

last item in Horizontal flatlist moves to the left in ANDROID when an item is removed

Open prithivilaksh opened this issue 2 years ago • 5 comments

Description

while looking at the end of horizontal flatlist, when an item is deleted then the last item in Horizontal flatlist moves to the left in ANDROID leaving an empty space but when we scroll a bit the last item comes to the end. but surprisingly this does not happen for vertical flatlist(default) and it happens only in android. its working fine in web

check the screenshots here : https://github.com/facebook/react-native/issues/36416#issuecomment-1462081750

React Native Version

0.71.3

Output of npx react-native info

System: OS: macOS 13.2.1 CPU: (10) arm64 Apple M1 Pro Memory: 168.89 MB / 16.00 GB Shell: 5.8.1 - /bin/zsh Binaries: Node: 16.17.0 - /usr/local/bin/node Yarn: 1.22.19 - ~/Desktop/project/todoApp/todoV1/todo/node_modules/.bin/yarn npm: 8.15.0 - /opt/homebrew/bin/npm Watchman: 2023.02.13.00 - /opt/homebrew/bin/watchman Managers: CocoaPods: 1.11.3 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1 Android SDK: Not Found IDEs: Android Studio: 2022.1 AI-221.6008.13.2211.9477386 Xcode: 14.2/14C18 - /usr/bin/xcodebuild Languages: Java: 11.0.18 - /usr/bin/javac npmPackages: @react-native-community/cli: ^10.2.0 => 10.2.0 react: 18.2.0 => 18.2.0 react-native: 0.71.3 => 0.71.3 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

Steps to reproduce

create a HORIZONTAL flatlist with items such that we can scroll over them. move to the end and delete any item using hooks the last item will be moved to its left

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

https://snack.expo.io/@saad-bashar/remove-item-flatlist

while searching for a solution found this code by Saad Khan. Try running this code in both web and android and delete an item at the last. You can notice the difference.

prithivilaksh avatar Mar 09 '23 10:03 prithivilaksh

:warning: Newer Version of React Native is Available!
:information_source: You are on a supported minor version, but it looks like there's a newer patch available. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

github-actions[bot] avatar Mar 09 '23 10:03 github-actions[bot]

it is working fine on both (Android and IOS)

priyaWedo avatar Mar 09 '23 13:03 priyaWedo

it is working fine on both (Android and IOS)

Really? did you try after moving to the end?

prithivilaksh avatar Mar 09 '23 13:03 prithivilaksh

yes, @prithivilaksh

priyaWedo avatar Mar 09 '23 13:03 priyaWedo

yes, @prithivilaksh

This is the case for me

before deleting

Screenshot 2023-03-09 at 7 01 40 PM

after deleting Screenshot 2023-03-09 at 7 01 54 PM

Expecting this Screenshot 2023-03-09 at 7 12 48 PM

prithivilaksh avatar Mar 09 '23 13:03 prithivilaksh

@prithivilaksh Try this https://github.com/facebook/react-native/issues/36845#issuecomment-1508369640

atulbrydotintuit avatar Apr 18 '23 10:04 atulbrydotintuit

@prithivilaksh Try this #36845 (comment)

thanks its working as expected

prithivilaksh avatar Apr 18 '23 11:04 prithivilaksh