Skip to content

ReanimatedSwipeable doesn't display right actions properly on window resize #3333

@blazejkustra

Description

@blazejkustra

Description

How it works now on web:

swipeable.mov

I believe the problem is that rightOffset isn't calculated properly, rightActions is usually a static component without layout changes and because of that this code runs once on the mount:

 () => (
        <Animated.View style={[styles.rightActions]}>
          {renderRightActions?.(
            showRightProgress,
            appliedTranslation,
            swipeableMethods
          )}
          <View
            onLayout={({ nativeEvent }) => {
              rightOffset.value = nativeEvent.layout.x;
            }}
          />
        </Animated.View>
      ),

This PR should potentially fix it:
#3332

Steps to reproduce

  1. Take GH's swipeable example
  2. Change the width of the window
  3. right actions are displayed very weird

Snack or a link to a repository

https://snack.expo.dev/@forlify/gh-swipeable-bug

Gesture Handler version

latest

React Native version

0.76.5

Platforms

Web

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions