[Feature]: Support RTL Layout via inverted Prop in <Gallery />

[mr3od]

Summary

I’d like to propose adding support for RTL (right-to-left) layouts in the component by introducing an inverted prop. This would follow the familiar FlatList API and allow proper layout for languages such as Arabic.

I regularly use this package in apps the supports both LTR & RTL layouts, and the current gallery direction doesn't feel natural for those users especially in horizontal gallery.

Expected API

<Gallery inverted={true} ... />

• The inverted prop would follow the same behavior as in FlatList.
• When true, images render in reverse order, and all gesture directions adapt accordingly.

---

How could we implement it

Gallery.tsx

• Android verticla scalling is different because of known issue Android OS . invesionStyle is then applied to the root Animated.View

const invesionStyle: StyleProp<ViewStyle> = inverted
  ? vertical
    ? styles.verticallyInverted
    : styles.horizontallyInverted
  : null;

const styles = StyleSheet.create({
  verticallyInverted:
    Platform.OS === 'android'
      ? { transform: [{ scale: -1 }] }
      : { transform: [{ scaleY: -1 }] },
  horizontallyInverted: {
    transform: [{ scaleX: -1 }],
  },
});

---

GalleryGestureHandler.tsx

1. In onSwipe direction handling:

const delta = (() => {
  switch (direction) {
    case 'up':
      return vertical ? (!inverted ? 1 : -1) : 0;
    case 'down':
      return vertical ? (!inverted ? -1 : 1) : 0;
    case 'left':
      return !vertical ? (!inverted ? 1 : -1) : 0;
    case 'right':
      return !vertical ? (!inverted ? -1 : 1) : 0;
    default:
      return 0;
  }
})();

2. In pan gesture .onUpdate and .onEnd:

.onUpdate((e) => {
  const toX = offset.x.value + e.translationX * (inverted ? -1 : 1);
  const toY = offset.y.value + e.translationY * (inverted ? -1 : 1);
})

.onEnd((e) => {
  const configX = { velocity: e.velocityX * (inverted ? -1 : 1), clamp: [-bounds.x, bounds.x] };
  const configY = { velocity: e.velocityY * (inverted ? -1 : 1), clamp: [-bounds.y, bounds.y] };
})

3. In tap gesture .onEnd edge tap handling:

.onEnd((event) => {
  let toIndex = activeIndex.value;
  const canGoToItem = tapOnEdgeToItem && !vertical;
  if (event.x <= leftEdge && canGoToItem) {
    toIndex += inverted ? 1 : -1;
  }
  if (event.x >= rightEdge && canGoToItem) {
    toIndex += inverted ? -1 : 1;
  }
})

---

GalleryItem.tsx

//transitionStyle
const scale = vertical
  ? inverted
    ? Platform.OS === 'android'
      ? { scale: -1 }
      : { scaleY: -1 }
    : { scale: 1 }
  : { scaleX: inverted ? -1 : 1 };

return {
  transform: [translate, scale],
  opacity,
};

---

[Glazzes]

Excuse me for the late response, I'm unfamiliar with RTL concept, how does it work for you? Do you swipe on the opposite direction? Do you guys also swipe inverted if the gallery is vertical? If you could share a video of an app that already supports RTL while having Android "show touches" setting enabled that would be great.

[mr3od]

No worries at all.

Yes, in RTL layouts (like Arabic or Hebrew), users naturally expect horizontal swiping to be reversed:

• Swiping left should go to the previous image.
• Swiping right should go to the next image.
  This mirrors the way reading and navigation flow in RTL apps.

When the gallery is vertical, behavior is usually not inverted — users still expect to swipe up to go forward, and down to go back, even in RTL. So the inversion mainly applies to horizontal orientation but I listed it to follow Flatlist api.

This is a short demonstration of RTL swipping:

rtl-swipp-demo.mov

[github-actions]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[mcoeur]

I would love to see this feature implemented in the project ! 🙏
My use case is a bit different: I'm displaying manga pages, which are most of the time read from right to left (though some manga are left-to-right).
Don't hesitate to reach out if I can help with testing or implementation!

[Glazzes]

@mcoeur @Abdulrahman-YE I'm already working on the next release, so this will make it into that one

[Glazzes]

@Abdulrahman-YE @mcoeur I just finished this feature, new property is called rtl, you should be able to test it before release with the following command

# Newer versions of yarn
yarn add react-native-zoom-toolkit@https://github.com/Glazzes/react-native-zoom-toolkit#dev

# Older versions of yarn
yarn add "https://github.com/Glazzes/react-native-zoom-toolkit#dev"

In case you guys use npm you could check out this stackoverflow question