Fix `Swipeable` misalignment after resizing on web #3341

latekvo · 2025-01-16T13:38:35Z

Description

This PR allows Swipeable to be dynamically resized.

Fixes #3333

Test plan

open any swipeable example on web
resize window
see how the ReanimatedSwipeable still works, while the legacy Swipeable is misaligned

blazejkustra

Works well on web 👍

latekvo · 2025-01-16T15:25:01Z

~~This PR breaks the following repro:~~ Fixed.

Collapsed repro

import React from 'react';
import { View, Text } from 'react-native';
import Swipeable from 'react-native-gesture-handler/ReanimatedSwipeable';

export default function Example() {
  return (
    <Swipeable
      leftThreshold={50}
      rightThreshold={50}
      renderLeftActions={() => {
        return (
          <View style={{ height: 80, width: 80, backgroundColor: 'yellow' }}>
            <Text>Left</Text>
          </View>
        );
      }}
      renderRightActions={() => {
        return (
          <View style={{ height: 80, width: 80, backgroundColor: 'magenta' }}>
            <Text>Right</Text>
          </View>
        );
      }}>
      <View
        style={{
          height: 80,
          backgroundColor: 'blue',
        }}
      />
    </Swipeable>
  );
}

m-bert

Starting from this commit, you can no longer open swipeable.

Could you check that @blazejkustra?

Nagranie.z.ekranu.2025-01-20.o.11.46.50.mov

blazejkustra · 2025-01-20T11:08:24Z

I can confirm that it does not work now:

Screen.Recording.2025-01-20.at.12.07.43.mov

latekvo · 2025-01-20T14:15:13Z

~~Fixed the issues reported above in 14f14fa.~~

I take that back. 14f14fa initially seemed to fix both the left and right panels. After a complete rebuild, they started behaving incorrectly again.

…peable-logic

latekvo · 2025-01-22T11:37:27Z

All previous issues should now be fixed since d35e1b3.
Tested on the following repro:

Collapsed repro

make sure to copy `AppleStyleSwipeableRow.tsx` and `GmailStyleSwipeableRow.tsx` from `example/src/new_api/swipeable` to `example/src/empty` for this repro to work.

import React, { useRef } from 'react';
import { View, Text, StyleSheet, I18nManager } from 'react-native';
import Swipeable, {
  SwipeableMethods,
} from 'react-native-gesture-handler/ReanimatedSwipeable';
import Animated, {
  SharedValue,
  useAnimatedStyle,
} from 'react-native-reanimated';

import AppleStyleSwipeableRow from './AppleStyleSwipeableRow';
import GmailStyleSwipeableRow from './GmailStyleSwipeableRow';
import { Pressable, RectButton } from 'react-native-gesture-handler';

//  To toggle LTR/RTL change to `true`
I18nManager.allowRTL(false);

function LeftAction(prog: SharedValue<number>, drag: SharedValue<number>) {
  const styleAnimation = useAnimatedStyle(() => {
    console.log('[R] showLeftProgress:', prog.value);
    console.log('[R] appliedTranslation:', drag.value);

    return {
      transform: [{ translateX: drag.value - 50 }],
    };
  });

  return (
    <Animated.View style={styleAnimation}>
      <Text style={styles.leftAction}>Text</Text>
    </Animated.View>
  );
}

function RightAction(prog: SharedValue<number>, drag: SharedValue<number>) {
  const styleAnimation = useAnimatedStyle(() => {
    console.log('[R] showRightProgress:', prog.value);
    console.log('[R] appliedTranslation:', drag.value);

    return {
      transform: [{ translateX: drag.value + 50 }],
    };
  });

  return (
    <Animated.View style={styleAnimation}>
      <Text style={styles.rightAction}>Text</Text>
    </Animated.View>
  );
}

export default function Example() {
  const swipeableRef = useRef<SwipeableMethods>(null);

  return (
    <View>
      <View style={styles.controlPanelWrapper}>
        <Text>Programatical controls</Text>
        <View style={styles.controlPanel}>
          <Pressable
            style={styles.control}
            onPress={() => {
              swipeableRef.current!.openLeft();
            }}>
            <Text>open left</Text>
          </Pressable>
          <Pressable
            style={styles.control}
            onPress={() => {
              swipeableRef.current!.close();
            }}>
            <Text>close</Text>
          </Pressable>
          <Pressable
            style={styles.control}
            onPress={() => {
              swipeableRef.current!.reset();
            }}>
            <Text>reset</Text>
          </Pressable>
          <Pressable
            style={styles.control}
            onPress={() => {
              swipeableRef.current!.openRight();
            }}>
            <Text>open right</Text>
          </Pressable>
        </View>
      </View>
      <Swipeable
        ref={swipeableRef}
        containerStyle={styles.swipeable}
        friction={2}
        leftThreshold={80}
        enableTrackpadTwoFingerGesture
        rightThreshold={40}
        renderLeftActions={LeftAction}
        renderRightActions={RightAction}>
        <Text>[Reanimated] Swipe me!</Text>
      </Swipeable>
      <Swipeable
        leftThreshold={50}
        rightThreshold={50}
        renderLeftActions={() => {
          return (
            <View style={{ height: 80, width: 80, backgroundColor: 'yellow' }}>
              <Text>Left</Text>
            </View>
          );
        }}
        renderRightActions={() => {
          return (
            <View style={{ height: 80, width: 80, backgroundColor: 'magenta' }}>
              <Text>Right</Text>
            </View>
          );
        }}>
        <View
          style={{
            height: 80,
            backgroundColor: 'blue',
          }}
        />
      </Swipeable>
      <AppleStyleSwipeableRow>
        <RectButton
          style={styles.rectButton}
          onPress={() => console.log('test-1')}>
          <Text style={styles.fromText}>Test</Text>
        </RectButton>
      </AppleStyleSwipeableRow>
      <GmailStyleSwipeableRow>
        <RectButton
          style={styles.rectButton}
          onPress={() => console.log('test-2')}>
          <Text style={styles.fromText}>Test </Text>
        </RectButton>
      </GmailStyleSwipeableRow>
    </View>
  );
}

const styles = StyleSheet.create({
  leftAction: { width: 50, height: 50, backgroundColor: 'crimson' },
  rightAction: { width: 50, height: 50, backgroundColor: 'purple' },
  rectButton: {
    height: 80,
    paddingVertical: 10,
    paddingHorizontal: 20,
    justifyContent: 'space-between',
    flexDirection: 'column',
    backgroundColor: 'white',
  },
  separator: {
    backgroundColor: 'rgb(200, 199, 204)',
    height: StyleSheet.hairlineWidth,
  },
  fromText: {
    fontWeight: 'bold',
    backgroundColor: 'transparent',
  },
  messageText: {
    color: '#999',
    backgroundColor: 'transparent',
  },
  dateText: {
    backgroundColor: 'transparent',
    position: 'absolute',
    right: 20,
    top: 10,
    color: '#999',
    fontWeight: 'bold',
  },
  swipeable: {
    height: 50,
    backgroundColor: 'papayawhip',
    alignItems: 'center',
  },
  controlPanelWrapper: {
    backgroundColor: 'papayawhip',
    alignItems: 'center',
  },
  controlPanel: {
    backgroundColor: 'papayawhip',
    alignItems: 'center',
    flexDirection: 'row',
  },
  control: {
    flex: 1,
    height: 40,
    borderWidth: StyleSheet.hairlineWidth,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Unfortunately I had to remove the removeClippedSubviews optimisation performed in #3340 as I couldn't find a way around the conflict between measure() function and transform: [translateX] style.
The pageX is the only useful output of the measure() function, as width cannot be relied upon, due to a possibility to make it always equal to rowWidth as a result of inclusion of flex: 1 inside renderRightActions element.

m-bert

Looks ok, please wait till @blazejkustra confirms 😅

…edge

latekvo · 2025-01-22T16:05:17Z

Swipeables that don't span 100% of the page width should be fixed since a6536cc.

Test code:

make sure to copy AppleStyleSwipeableRow.tsx and GmailStyleSwipeableRow.tsx from example/src/new_api/swipeable to example/src/empty for this repro to work.

import React, { useRef } from 'react';
import { View, Text, StyleSheet, I18nManager } from 'react-native';
import Swipeable, {
  SwipeableMethods,
} from 'react-native-gesture-handler/ReanimatedSwipeable';
import Animated, {
  SharedValue,
  useAnimatedStyle,
} from 'react-native-reanimated';

import AppleStyleSwipeableRow from './AppleStyleSwipeableRow';
import GmailStyleSwipeableRow from './GmailStyleSwipeableRow';
import { Pressable, RectButton } from 'react-native-gesture-handler';

//  To toggle LTR/RTL change to `true`
I18nManager.allowRTL(false);

function LeftAction(prog: SharedValue<number>, drag: SharedValue<number>) {
  const styleAnimation = useAnimatedStyle(() => {
    console.log('[R] showLeftProgress:', prog.value);
    console.log('[R] appliedTranslation:', drag.value);

    return {
      transform: [{ translateX: drag.value - 50 }],
    };
  });

  return (
    <Animated.View style={styleAnimation}>
      <Text style={styles.leftAction}>Text</Text>
    </Animated.View>
  );
}

function RightAction(prog: SharedValue<number>, drag: SharedValue<number>) {
  const styleAnimation = useAnimatedStyle(() => {
    console.log('[R] showRightProgress:', prog.value);
    console.log('[R] appliedTranslation:', drag.value);

    return {
      transform: [{ translateX: drag.value + 50 }],
    };
  });

  return (
    <Animated.View style={styleAnimation}>
      <Text style={styles.rightAction}>Text</Text>
    </Animated.View>
  );
}

export default function Example() {
  const swipeableRef = useRef<SwipeableMethods>(null);

  return (
    <View style={{ backgroundColor: 'pink' }}>
      <View style={styles.controlPanelWrapper}>
        <Text>Programatical controls</Text>
        <View style={styles.controlPanel}>
          <Pressable
            style={styles.control}
            onPress={() => {
              swipeableRef.current!.openLeft();
            }}>
            <Text>open left</Text>
          </Pressable>
          <Pressable
            style={styles.control}
            onPress={() => {
              swipeableRef.current!.close();
            }}>
            <Text>close</Text>
          </Pressable>
          <Pressable
            style={styles.control}
            onPress={() => {
              swipeableRef.current!.reset();
            }}>
            <Text>reset</Text>
          </Pressable>
          <Pressable
            style={styles.control}
            onPress={() => {
              swipeableRef.current!.openRight();
            }}>
            <Text>open right</Text>
          </Pressable>
        </View>
      </View>
      <Swipeable
        ref={swipeableRef}
        containerStyle={styles.swipeable}
        friction={2}
        leftThreshold={80}
        enableTrackpadTwoFingerGesture
        rightThreshold={40}
        renderLeftActions={LeftAction}
        renderRightActions={RightAction}>
        <Text>[Reanimated] Swipe me!</Text>
      </Swipeable>
      <Swipeable
        leftThreshold={50}
        rightThreshold={50}
        renderLeftActions={() => {
          return (
            <View style={{ height: 80, width: 80, backgroundColor: 'yellow' }}>
              <Text>Left</Text>
            </View>
          );
        }}
        renderRightActions={() => {
          return (
            <View style={{ height: 80, width: 80, backgroundColor: 'magenta' }}>
              <Text>Right</Text>
            </View>
          );
        }}>
        <View
          style={{
            height: 80,
            backgroundColor: 'blue',
          }}
        />
      </Swipeable>
      <View style={{ marginLeft: 60 }}>
        <AppleStyleSwipeableRow>
          <RectButton
            style={styles.rectButton}
            onPress={() => console.log('test-1-center')}>
            <Text style={styles.fromText}>Test Center 1</Text>
          </RectButton>
        </AppleStyleSwipeableRow>
        <GmailStyleSwipeableRow>
          <RectButton
            style={styles.rectButton}
            onPress={() => console.log('test-2-center')}>
            <Text style={styles.fromText}>Test Center 2</Text>
          </RectButton>
        </GmailStyleSwipeableRow>
      </View>
      <View style={{ marginRight: 60 }}>
        <AppleStyleSwipeableRow>
          <RectButton
            style={styles.rectButton}
            onPress={() => console.log('test-1-center')}>
            <Text style={styles.fromText}>Test Center 1</Text>
          </RectButton>
        </AppleStyleSwipeableRow>
        <GmailStyleSwipeableRow>
          <RectButton
            style={styles.rectButton}
            onPress={() => console.log('test-2-center')}>
            <Text style={styles.fromText}>Test Center 2</Text>
          </RectButton>
        </GmailStyleSwipeableRow>
      </View>
      <View style={{ marginLeft: 40, marginRight: 40 }}>
        <AppleStyleSwipeableRow>
          <RectButton
            style={styles.rectButton}
            onPress={() => console.log('test-1-center')}>
            <Text style={styles.fromText}>Test Center 1</Text>
          </RectButton>
        </AppleStyleSwipeableRow>
        <GmailStyleSwipeableRow>
          <RectButton
            style={styles.rectButton}
            onPress={() => console.log('test-2-center')}>
            <Text style={styles.fromText}>Test Center 2</Text>
          </RectButton>
        </GmailStyleSwipeableRow>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  leftAction: { width: 50, height: 50, backgroundColor: 'crimson' },
  rightAction: { width: 50, height: 50, backgroundColor: 'purple' },
  rectButton: {
    height: 80,
    paddingVertical: 10,
    paddingHorizontal: 20,
    justifyContent: 'space-between',
    flexDirection: 'column',
    backgroundColor: 'white',
  },
  separator: {
    backgroundColor: 'rgb(200, 199, 204)',
    height: StyleSheet.hairlineWidth,
  },
  fromText: {
    fontWeight: 'bold',
    backgroundColor: 'transparent',
  },
  messageText: {
    color: '#999',
    backgroundColor: 'transparent',
  },
  dateText: {
    backgroundColor: 'transparent',
    position: 'absolute',
    right: 20,
    top: 10,
    color: '#999',
    fontWeight: 'bold',
  },
  swipeable: {
    height: 50,
    backgroundColor: 'papayawhip',
    alignItems: 'center',
  },
  controlPanelWrapper: {
    backgroundColor: 'papayawhip',
    alignItems: 'center',
  },
  controlPanel: {
    backgroundColor: 'papayawhip',
    alignItems: 'center',
    flexDirection: 'row',
  },
  control: {
    flex: 1,
    height: 40,
    borderWidth: StyleSheet.hairlineWidth,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

blazejkustra · 2025-01-22T16:32:09Z

It's working fine now, thanks @latekvo!

## Description This PR allows Swipeable to be dynamically resized. Fixes #3333 ## Test plan - open any swipeable example on web - resize window - see how the `ReanimatedSwipeable` still works, while the legacy `Swipeable` is misaligned

latekvo added 2 commits January 16, 2025 14:13

remove rightOffset and updateRightElementWidth

f9ca03d

update left and right widths on layout change listener

c89c654

latekvo changed the title ~~Simplify Swipeable logic.~~ Fix Swipeable misalignment after resizing on web Jan 16, 2025

fix .value deps inclusion

746ac97

blazejkustra approved these changes Jan 16, 2025

View reviewed changes

latekvo marked this pull request as ready for review January 16, 2025 14:01

latekvo requested a review from m-bert January 16, 2025 14:03

latekvo marked this pull request as draft January 16, 2025 15:25

use pageX for dynamic resizing, set row width synchronyously

f9fbace

latekvo marked this pull request as ready for review January 17, 2025 13:52

latekvo added 3 commits January 17, 2025 14:55

remove redundant runOnUI instances

fb15a34

use synchronous measure to fix pre-render width bug on slow devices

f360ce8

add explicit workletization

22662bb

m-bert requested changes Jan 20, 2025

View reviewed changes

fix swipeable by setting exact width

14f14fa

latekvo added 6 commits January 20, 2025 15:40

move layout detection to gesture start

4d04bcb

add layout width getter to programatic controls

e44fc50

reduce magnitude of failure when layout fails to be read

5c2082e

ensure programatic controls execution on UI thread

2adc772

fix runOnUI issue

bd81fcb

Merge remote-tracking branch 'origin/main' into @latekvo/simplify-swi…

cd9a329

…peable-logic

latekvo requested review from m-bert and blazejkustra January 22, 2025 11:37

fix measurements being skewed by optimization of overlap bug

d35e1b3

m-bert approved these changes Jan 22, 2025

View reviewed changes

fix swipeable right element width when swipeable is offset from left …

ac8fd52

…edge

latekvo added 3 commits January 22, 2025 16:20

fix left offset swipeable left width bug

7bb7522

fix panels being invisible when programatically opened

e9904a7

match legacy config to the legacy swipeable

a6536cc

blazejkustra approved these changes Jan 22, 2025

View reviewed changes

latekvo merged commit 44f6315 into main Jan 22, 2025
1 check passed

latekvo deleted the @latekvo/simplify-swipeable-logic branch January 22, 2025 16:48

latekvo mentioned this pull request Jan 24, 2025

Fix swipeable on window resize #3332

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix `Swipeable` misalignment after resizing on web #3341

Fix `Swipeable` misalignment after resizing on web #3341

latekvo commented Jan 16, 2025 •

edited

Loading

blazejkustra left a comment

latekvo commented Jan 16, 2025 •

edited

Loading

m-bert left a comment

blazejkustra commented Jan 20, 2025

latekvo commented Jan 20, 2025 •

edited

Loading

latekvo commented Jan 22, 2025 •

edited

Loading

make sure to copy `AppleStyleSwipeableRow.tsx` and `GmailStyleSwipeableRow.tsx` from `example/src/new_api/swipeable` to `example/src/empty` for this repro to work.

m-bert left a comment

latekvo commented Jan 22, 2025

blazejkustra commented Jan 22, 2025

Fix Swipeable misalignment after resizing on web #3341

Fix Swipeable misalignment after resizing on web #3341

Conversation

latekvo commented Jan 16, 2025 • edited Loading

Description

Test plan

blazejkustra left a comment

Choose a reason for hiding this comment

latekvo commented Jan 16, 2025 • edited Loading

m-bert left a comment

Choose a reason for hiding this comment

blazejkustra commented Jan 20, 2025

latekvo commented Jan 20, 2025 • edited Loading

latekvo commented Jan 22, 2025 • edited Loading

make sure to copy AppleStyleSwipeableRow.tsx and GmailStyleSwipeableRow.tsx from example/src/new_api/swipeable to example/src/empty for this repro to work.

m-bert left a comment

Choose a reason for hiding this comment

latekvo commented Jan 22, 2025

blazejkustra commented Jan 22, 2025

Fix `Swipeable` misalignment after resizing on web #3341

Fix `Swipeable` misalignment after resizing on web #3341

latekvo commented Jan 16, 2025 •

edited

Loading

latekvo commented Jan 16, 2025 •

edited

Loading

latekvo commented Jan 20, 2025 •

edited

Loading

latekvo commented Jan 22, 2025 •

edited

Loading

make sure to copy `AppleStyleSwipeableRow.tsx` and `GmailStyleSwipeableRow.tsx` from `example/src/new_api/swipeable` to `example/src/empty` for this repro to work.