React-native: Image width shrinking when applying PanResponder to swipe in and out of the screen

[sbkl]

Environment

Environment:
OS: macOS High Sierra 10.13.4
Node: 7.10.0
Yarn: 1.3.2
npm: 5.5.1
Watchman: 4.7.0
Xcode: Xcode 9.3 Build version 9E145
Android Studio: Not Found

Packages: (wanted => installed)
react: ^16.3.1 => 16.3.1
react-native: ^0.55.3 => 0.55.3

Steps to Reproduce

• Create a flat list
• Apply PanResponder on each list item with an image enabling to swipe the list item in and out of the screen.
• When the list item is swipe back to its initial position and the image is visible again, the image width is smaller.
• Issue on current library: react-native-swipeout. #264 illustrating the bug with screenshot,
• I created my own PanResponder to see if it was linked to the library but I got the exact same issue,
• Just downgraded to react-native 0.54.4 and it works properly.

Expected Behavior

• Image should keep the same width.

Actual Behaviour

• Image width is shrinking.

[react-native-bot]

Can you provide a Snack or a minimal code sample that demonstrates the issue?

[sbkl]

Here you go. Snack link: demo image width shrinking with PanResponder and Animated

1- Swipe the list item on the left of the screen until the picture is not visible.
2- Click on the list item to send it to its initial position
3- Repeat 1 and 2 couple of times and you will see the image width shrinking.

Issue happens with iOS only. Everything is fine on Android.

Also, the issue is not linked to ListItem or FlatList or anything like that. In the example I have made, it is a simple Animated.View. No iteration.

[pinguinjkeke]

react-native 0.55.4 has same issue.

[EyalSi]

Is there a label for "This is a basic behavior with very ugly consequences - we must fix it ASAP as it makes react native looks like an amateur env" that we can label this bug?😊

[jakallergis]

I have the same problem! This is related to #20215 as well and is really frustrating. the translateY/X workaround is working but it doesn't change drag the parent layout with it so its not for every scenario. This doesn't fix it.

For me it happend after I upgraded to 0.55.0

[wesleyr6]

That solution worked well for me https://github.com/facebook/react-native/issues/20215

[jakallergis]

I can confirm that this is fixed now.
My project deps:
react: 16.5.0
react-native: 0.57.1

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.