react-insta-stories icon indicating copy to clipboard operation
react-insta-stories copied to clipboard

Add RTL (Right-to-Left) support

Open randilt opened this issue 3 months ago • 0 comments

Description

Currently, react-insta-stories assumes a left-to-right (LTR) flow: the “next” tap is detected on the right side, progress bars fill left-to-right, and layout (e.g. "progress bar) is optimized for LTR. RTL languages (Arabic, Hebrew, etc.) require mirroring these interactions and UI components.


Proposed Behavior

  • On RTL mode, tapping on the left side should go to next story, tapping on the right should go to previous (mirrored).
  • Progress bars should animate in reverse direction (right → left).
  • Layout of header, profile image, “see more” button, and other UI should mirror horizontally.
  • A prop like dir="rtl" or rtl={true} can toggle RTL mode.
  • All style props (storyStyles, progressStyles, header, etc.) should respect RTL.
  • Keyboard navigation (if enabled) should also mirror arrow keys (← for next, → for previous) in RTL mode.

Motivation

Many apps target international audiences where RTL support is essential. Without this, using react-insta-stories in RTL UI breaks expected behavior and UX for RTL users.


Suggested Implementation Notes / Considerations

  • Use CSS direction: rtl or transform scaleX(-1) judiciously for mirroring but ensure internal gesture logic is aware of direction, not just visually inverted.
  • Expose a new prop (e.g. rtl) and default to LTR to maintain backward compatibility.
  • Component internal logic (tap zones, gesture detection) should branch based on rtl flag.
  • Test with combinations: RTL + custom styling + looping + keyboard navigation.
  • Update documentation and examples to showcase RTL usage.

randilt avatar Sep 26 '25 16:09 randilt