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

Animating "top" property of absolute element triggers change in height

Open thisisgit opened this issue 2 years ago • 3 comments

Description

Hi I found this issue while trying to implement drag and drop on items with dynamic height.

I used following approach:

  1. Items positioned absolute
  2. Items are moved and positioned by setting top property
  3. Dynamic height of each item should be known using onLayout to position items in the right y position

Then I found out that height of the dragged item changes in very small amount (around < 0.01) when animating top property. So I tried giving fixed height to all items but still seeing the same problem.

https://user-images.githubusercontent.com/13231564/155871984-a447086a-edcb-4ec4-90e1-e5f5e3a05414.mp4

Expected behavior

Since it's given fixed height, I don't expect height of the item to change but it changes.

Actual behavior & steps to reproduce

Try snack below:

Snack or minimal code example

https://snack.expo.dev/eZAYHjn__D

Package versions

Happens on both expo & bare RN

name version
react-native 0.66.4
react-native-reanimated ~2.3.1
expo ~44.0.0

Affected platforms

  • [ ] Android (not tested)
  • [x] iOS
  • [ ] Web (not tested)

thisisgit avatar Feb 27 '22 06:02 thisisgit