Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
blazejkustra opened this issue Jan 13, 2025 · 0 comments · May be fixed by #3341
Open

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

blazejkustra opened this issue Jan 13, 2025 · 0 comments · May be fixed by #3341
Labels
Platform: Web Repro provided A reproduction with a snack or repo is provided

Comments

@blazejkustra
Copy link
Contributor

blazejkustra commented Jan 13, 2025

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

@github-actions github-actions bot added Repro provided A reproduction with a snack or repo is provided Platform: Web labels Jan 13, 2025
@latekvo latekvo linked a pull request Jan 16, 2025 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Platform: Web Repro provided A reproduction with a snack or repo is provided
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant