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.