RTL Support

[diaazzawi]

This is a very nice library but, unfortunately, it has a bug in right-to-left (RTL) devices. This is my scenario:

1. Device language is Arabic (RTL).
2. I have tow images side by side.
3. If I open the left image then close the ImageModal, the image animates to the right spot then adjusts itself to the correct position (left spot), which is funny. The opposite happens when opening and closing the right image. What I expect is closing the modal of any of the images should animate to the correct position.

I would really love to have a solution for this issue as soon as possible. Any quick workaround is also appreciated.

Thanks for this great library!

[dev-yakuza]

Hi @diaazzawi

Thanks for using this library.

Could you share the video about the bug? I can't imagine it 😭

Thanks

[diaazzawi]

Thank you so much @dev-yakuza for your prompt response. Here is what I'm experiencing when my simulator's language is Arabic or any other RTL-language:

Thanks

[dev-yakuza]

@diaazzawi

Thanks for sharing the video.
If you configure the other language(like English), is it working well? 🤔

[diaazzawi]

@dev-yakuza

Yes it works perfectly in other LTR-languages.

Just throwing an idea: It would be AWESOME if you add one more prop (say rtl as boolean) that I can pass to the component and based on its value you'll need to flip the x-coordinate of the last image position.

In the meanwhile, it will be great if you have any temporary workaround.

Thanks!

[dev-yakuza]

@diaazzawi

Thanks for your investigation and idea.
I will fix it when I have time!

[diaazzawi]

@dev-yakuza

Just found where you need to make the necessary changes: Assuming you add a new boolean prop (isRTL) to your component, the _setOrigin function (lines 69-91) in src\index.tsx file should change to:

  private _setOrigin = (): void => {
    if (this._root) {
      this._root.measureInWindow((x: number, y: number, width: number, height: number) => {
        const { isTranslucent, onOpen, isRTL } = this.props;
        let newY: number = y;
        if (typeof onOpen === 'function') {
          onOpen();
        }
        if (isTranslucent) {
          newY += StatusBar.currentHeight ? StatusBar.currentHeight : 0;
          StatusBar.setHidden(true);
        }
        let newX: number = x;
        if (isRTL) {
            newX = Dimensions.get('window').width - width - x;
        }
        this.setState({
          origin: {
            width,
            height,
            x: newX,
            y: newY,
          },
        });
      });
    }
  };

🎉 🎉 🎉 🥳 🥳 🥳 I tested the app with the above change in both LTR- and RTL-languages and it PERFECTLY works as expected 🥳 🥳 🥳 🎉 🎉 🎉

Please update your library with this change ASAP so I can get it in my project.

Thank you again for this AWESOME lib.

[dev-yakuza]

@diaazzawi

Thanks so much to implement it.
Could you make a PR? 🙏 If you make it, I will merge it and release it asap!

Thanks

[diaazzawi]

FYI, I just created the above PR.

[dev-yakuza]

@diaazzawi

Thanks for your contribution 🙇‍♂️
I just update the version of the npm package(v2.0.2)
And update the document.

[diaazzawi]

@dev-yakuza

Wonderful. Million thanks to you!