RTL Support about react-native-image-modal HOT 10 CLOSED

@dev-yakuza

Wonderful. Million thanks to you!

from react-native-image-modal.

Hi @diaazzawi

Thanks for using this library.

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

Thanks

from react-native-image-modal.

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

from react-native-image-modal.

@diaazzawi

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

from react-native-image-modal.

@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!

from react-native-image-modal.

@diaazzawi

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

from react-native-image-modal.

@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.

from react-native-image-modal.

@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

from react-native-image-modal.

FYI, I just created the above PR.

from react-native-image-modal.

@diaazzawi

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

from react-native-image-modal.