Breaks in RTL

[2xSamurai]

First of all. Thank you for the nice viewer.

In RTL the image is cut off. And not showing completely. Is there any workaround or fix for this.

Thank you.

[dagan-arbox]

Any solution for RTL? not usable

[FadiAboMsalam]

same issue here any fix 🤔 ?

[a-khalid]

same issue 💔

[FadiAboMsalam]

@a-khalid @dagan-arbox @2xSamurai i needed this fix and couldn't wait more so I published it here npm i react-native-image-viewing-rtl

basically it is the same repo just install the package and import

import ImageView from "react-native-image-viewing-rtl"; instead of

import ImageView from "react-native-image-viewing"; nothing else is changed

[mronline]

@a-khalid @dagan-arbox @2xSamurai i needed this fix and couldn't wait more so I published it here npm i react-native-image-viewing-rtl

basically it is the same repo just install the package and import

import ImageView from "react-native-image-viewing-rtl"; instead of

import ImageView from "react-native-image-viewing"; nothing else is changed

Zoom (Pinch zoom, Double Tap) does not work correctly. :/

[mmsmadi]

Go to the library then go to dist>utils.js and do the following:

1- Add import for I18nManager. 2- Go to line 66 and replace with x: getTranslateForAxis("x") * (I18nManager.isRTL ? -1 : 1),

this will solve RTL problem but for some reason you must swipe to see images.

[Alyfaraj]

<View style={{direction: 'ltr'}}> <ImageView ... /> </View>

[MarouaniALA]

for any one blocked on this you can use npx patch-package

1. add this to package.json script "postinstall": "npx patch-package"
2. create "patches" directory on the root of your project, create a file named "react-native-image-viewing+0.2.2.patch" and put this code on it

`diff --git a/node_modules/react-native-image-viewing/dist/ImageViewing.js b/node_modules/react-native-image-viewing/dist/ImageViewing.js
index 3d7641a..4234ad2 100644
--- a/node_modules/react-native-image-viewing/dist/ImageViewing.js
+++ b/node_modules/react-native-image-viewing/dist/ImageViewing.js
@@ -6,7 +6,7 @@
  *
  */
 import React, { useCallback, useRef, useEffect } from "react";
-import { Animated, Dimensions, StyleSheet, View, VirtualizedList, Modal, } from "react-native";
+import {Animated, Dimensions, StyleSheet, View, VirtualizedList, Modal, I18nManager, Platform,} from "react-native";
 import ImageItem from "./components/ImageItem/ImageItem";
 import ImageDefaultHeader from "./components/ImageDefaultHeader";
 import StatusBarManager from "./components/StatusBarManager";
@@ -18,6 +18,8 @@ const DEFAULT_BG_COLOR = "#000";
 const DEFAULT_DELAY_LONG_PRESS = 800;
 const SCREEN = Dimensions.get("screen");
 const SCREEN_WIDTH = SCREEN.width;
+const isAndroid = Platform.OS === 'android';
+
 function ImageViewing({ images, keyExtractor, imageIndex, visible, onRequestClose, onLongPress = () => { }, onImageIndexChange, animationType = DEFAULT_ANIMATION_TYPE, backgroundColor = DEFAULT_BG_COLOR, presentationStyle, swipeToCloseEnabled, doubleTapToZoomEnabled, delayLongPress = DEFAULT_DELAY_LONG_PRESS, HeaderComponent, FooterComponent, }) {
     const imageList = useRef(null);
     const [opacity, onRequestCloseEnhanced] = useRequestClose(onRequestClose);
@@ -45,7 +47,7 @@ function ImageViewing({ images, keyExtractor, imageIndex, visible, onRequestClos
         imageIndex: currentImageIndex,
     })) : (<ImageDefaultHeader onRequestClose={onRequestCloseEnhanced}/>)}
         </Animated.View>
-        <VirtualizedList ref={imageList} data={images} horizontal pagingEnabled windowSize={2} initialNumToRender={1} maxToRenderPerBatch={1} showsHorizontalScrollIndicator={false} showsVerticalScrollIndicator={false} initialScrollIndex={imageIndex} getItem={(_, index) => images[index]} getItemCount={() => images.length} getItemLayout={(_, index) => ({
+        <VirtualizedList contentContainerStyle={[isAndroid && I18nManager.isRTL && styles.rtl]} ref={imageList} data={images} horizontal pagingEnabled windowSize={2} initialNumToRender={1} maxToRenderPerBatch={1} showsHorizontalScrollIndicator={false} showsVerticalScrollIndicator={false} initialScrollIndex={imageIndex} getItem={(_, index) => images[index]} getItemCount={() => images.length} getItemLayout={(_, index) => ({
         length: SCREEN_WIDTH,
         offset: SCREEN_WIDTH * index,
         index,
@@ -81,6 +83,10 @@ const styles = StyleSheet.create({
         zIndex: 1,
         bottom: 0,
     },
+    rtl: {
+        flexDirection: 'row-reverse',
+        direction: 'ltr'
+    }
 });
 const EnhancedImageViewing = (props) => (<ImageViewing key={props.imageIndex} {...props}/>);
 export default EnhancedImageViewing;
diff --git a/node_modules/react-native-image-viewing/dist/components/ImageItem/ImageItem.android.js b/node_modules/react-native-image-viewing/dist/components/ImageItem/ImageItem.android.js
index 5fcaa9f..c756466 100644
--- a/node_modules/react-native-image-viewing/dist/components/ImageItem/ImageItem.android.js
+++ b/node_modules/react-native-image-viewing/dist/components/ImageItem/ImageItem.android.js
@@ -6,7 +6,7 @@
  *
  */
 import React, { useCallback, useRef, useState } from "react";
-import { Animated, ScrollView, Dimensions, StyleSheet, } from "react-native";
+import {Animated, ScrollView, Dimensions, StyleSheet, I18nManager,} from "react-native";
 import useImageDimensions from "../../hooks/useImageDimensions";
 import usePanResponder from "../../hooks/usePanResponder";
 import { getImageStyles, getImageTransform } from "../../utils";
@@ -64,7 +64,7 @@ const ImageItem = ({ imageSrc, onZoom, onRequestClose, onLongPress, delayLongPre
         const offsetY = (_c = (_b = (_a = nativeEvent) === null || _a === void 0 ? void 0 : _a.contentOffset) === null || _b === void 0 ? void 0 : _b.y, (_c !== null && _c !== void 0 ? _c : 0));
         scrollValueY.setValue(offsetY);
     };
-    return (<ScrollView ref={imageContainer} style={styles.listItem} pagingEnabled nestedScrollEnabled showsHorizontalScrollIndicator={false} showsVerticalScrollIndicator={false} contentContainerStyle={styles.imageScrollContainer} scrollEnabled={swipeToCloseEnabled} {...(swipeToCloseEnabled && {
+    return (<ScrollView ref={imageContainer} style={[styles.listItem, I18nManager.isRTL && styles.rtl]} pagingEnabled nestedScrollEnabled showsHorizontalScrollIndicator={false} showsVerticalScrollIndicator={false} contentContainerStyle={[styles.imageScrollContainer, I18nManager.isRTL && styles.rtl]} scrollEnabled={swipeToCloseEnabled} {...(swipeToCloseEnabled && {
         onScroll,
         onScrollEndDrag,
     })}>
@@ -79,6 +79,11 @@ const styles = StyleSheet.create({
     },
     imageScrollContainer: {
         height: SCREEN_HEIGHT * 2,
+        width: '100%'
     },
+    rtl: {
+        flexDirection: 'row-reverse',
+        direction: 'ltr'
+    }
 });
 export default React.memo(ImageItem);
diff --git a/node_modules/react-native-image-viewing/dist/components/ImageItem/ImageItem.ios.js b/node_modules/react-native-image-viewing/dist/components/ImageItem/ImageItem.ios.js
index 0708505..ece6052 100644
--- a/node_modules/react-native-image-viewing/dist/components/ImageItem/ImageItem.ios.js
+++ b/node_modules/react-native-image-viewing/dist/components/ImageItem/ImageItem.ios.js
@@ -6,7 +6,7 @@
  *
  */
 import React, { useCallback, useRef, useState } from "react";
-import { Animated, Dimensions, ScrollView, StyleSheet, View, TouchableWithoutFeedback, } from "react-native";
+import {Animated, Dimensions, ScrollView, StyleSheet, View, TouchableWithoutFeedback, I18nManager,} from "react-native";
 import useDoubleTapToZoom from "../../hooks/useDoubleTapToZoom";
 import useImageDimensions from "../../hooks/useImageDimensions";
 import { getImageStyles, getImageTransform } from "../../utils";
@@ -57,11 +57,11 @@ const ImageItem = ({ imageSrc, onZoom, onRequestClose, onLongPress, delayLongPre
         onLongPress(imageSrc);
     }, [imageSrc, onLongPress]);
     return (<View>
-      <ScrollView ref={scrollViewRef} style={styles.listItem} pinchGestureEnabled showsHorizontalScrollIndicator={false} showsVerticalScrollIndicator={false} maximumZoomScale={maxScale} contentContainerStyle={styles.imageScrollContainer} scrollEnabled={swipeToCloseEnabled} onScrollEndDrag={onScrollEndDrag} scrollEventThrottle={1} {...(swipeToCloseEnabled && {
+      <ScrollView ref={scrollViewRef} style={[styles.listItem, I18nManager.isRTL && styles.rtl]} pinchGestureEnabled showsHorizontalScrollIndicator={false} showsVerticalScrollIndicator={false} maximumZoomScale={maxScale} contentContainerStyle={[styles.imageScrollContainer, I18nManager.isRTL && styles.rtl]} scrollEnabled={swipeToCloseEnabled} onScrollEndDrag={onScrollEndDrag} scrollEventThrottle={1} {...(swipeToCloseEnabled && {
         onScroll,
     })}>
         {(!loaded || !imageDimensions) && <ImageLoading />}
-        <TouchableWithoutFeedback onPress={doubleTapToZoomEnabled ? handleDoubleTap : undefined} onLongPress={onLongPressHandler} delayLongPress={delayLongPress}>
+        <TouchableWithoutFeedback style={[I18nManager.isRTL && styles.rtl]} onPress={doubleTapToZoomEnabled ? handleDoubleTap : undefined} onLongPress={onLongPressHandler} delayLongPress={delayLongPress}>
           <Animated.Image source={imageSrc} style={imageStylesWithOpacity} onLoad={() => setLoaded(true)}/>
         </TouchableWithoutFeedback>
       </ScrollView>
@@ -74,6 +74,11 @@ const styles = StyleSheet.create({
     },
     imageScrollContainer: {
         height: SCREEN_HEIGHT,
+        width: '100%'
     },
+    rtl: {
+        flexDirection: 'row-reverse',
+        direction: 'rtl'
+    }
 });
 export default React.memo(ImageItem);
`

finaly run npx patch-package