diff --git a/example/App.tsx b/example/App.tsx index 7fdc584..6ff311b 100644 --- a/example/App.tsx +++ b/example/App.tsx @@ -5,6 +5,7 @@ import { BasicGalleryPreview } from "./src/components/BasicGalleryPreview"; import { GalleryPreviewWithCustomHeader } from "./src/components/GalleryPreviewWIthCustomHeader"; import { OpenOnSpecificImageExample } from "./src/components/OpenOnSpecificImageExample"; import { OverlayComponentExample } from "./src/components/OverlayComponentExample"; +import { RTLGalleryPreview } from "./src/components/RTLGalleryPreview"; export default function App() { return ( @@ -13,6 +14,7 @@ export default function App() { + ); } diff --git a/example/app.json b/example/app.json index 7f73db9..7c41df1 100644 --- a/example/app.json +++ b/example/app.json @@ -1,5 +1,9 @@ { "expo": { + "extra": { + "supportsRTL": true, + "forcesRTL": true + }, "name": "example", "slug": "example", "version": "1.0.0", diff --git a/example/package.json b/example/package.json index 8ad570e..a32c2ba 100644 --- a/example/package.json +++ b/example/package.json @@ -13,7 +13,7 @@ "expo-status-bar": "^1.12.1", "react": "^18.3.1", "react-native": "^0.74.3", - "react-native-gallery-preview": "^1.1.2", + "react-native-gallery-preview": "^1.2.1", "react-native-gesture-handler": "~2.16.1", "react-native-reanimated": "~3.10.1" }, diff --git a/example/src/components/BasicGalleryPreview.tsx b/example/src/components/BasicGalleryPreview.tsx index 557df83..4d611f4 100644 --- a/example/src/components/BasicGalleryPreview.tsx +++ b/example/src/components/BasicGalleryPreview.tsx @@ -1,7 +1,7 @@ import React from "react"; import { images } from "../images"; import { ExampleWrapper } from "./ExampleWrapper"; -import GalleryPreview from "react-native-gallery-preview"; +import { GalleryPreview } from "../../../src/GalleryPreview"; export const BasicGalleryPreview = () => { const [isVisible, setIsVisible] = React.useState(false); diff --git a/example/src/components/RTLGalleryPreview.tsx b/example/src/components/RTLGalleryPreview.tsx new file mode 100644 index 0000000..ff600c2 --- /dev/null +++ b/example/src/components/RTLGalleryPreview.tsx @@ -0,0 +1,30 @@ +import React from "react"; +import { images } from "../images"; +import { ExampleWrapper } from "./ExampleWrapper"; +import GalleryPreview from "react-native-gallery-preview"; + +export const RTLGalleryPreview = () => { + const [isVisible, setIsVisible] = React.useState(false); + + const handleOpenImageViewer = React.useCallback(() => { + setIsVisible(true); + }, []); + + const handleCloseImageViewer = React.useCallback(() => { + setIsVisible(false); + }, []); + + return ( + + + + ); +}; diff --git a/example/yarn.lock b/example/yarn.lock index f226a95..3502aac 100644 --- a/example/yarn.lock +++ b/example/yarn.lock @@ -5220,10 +5220,10 @@ react-is@^17.0.1: resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0" integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w== -react-native-gallery-preview@^1.1.2: - version "1.1.2" - resolved "https://registry.yarnpkg.com/react-native-gallery-preview/-/react-native-gallery-preview-1.1.2.tgz#71bb632da27d41df39154b23fc8d8e1c1837e882" - integrity sha512-JLQLKAhM8S6mOrtRjGh55obp/sgmLeyB/JnF7fNJhgMxoV4muh21YAOJDpQBDXLsEjWWM43Dn4FiQaAm0pziaw== +react-native-gallery-preview@^1.2.1: + version "1.2.1" + resolved "https://registry.yarnpkg.com/react-native-gallery-preview/-/react-native-gallery-preview-1.2.1.tgz#674511e211a5da05381a321d1243bd6779d4fc8e" + integrity sha512-8Y08hA4gi9nLi5PB4VgdMuF/2QIDkRkHRiRt4+8Bd+o80j12i6ZD3gfPZstSVQZIHvLBVkoGHsIm4qRhiQY1Bw== react-native-gesture-handler@~2.16.1: version "2.16.2" diff --git a/src/GalleryPreview.tsx b/src/GalleryPreview.tsx index 3e40113..186643a 100644 --- a/src/GalleryPreview.tsx +++ b/src/GalleryPreview.tsx @@ -68,7 +68,7 @@ export const GalleryPreview = ({ ); const containerAnimatedStyle = useAnimatedStyle(() => ({ - transform: [{ translateX: translateX.value }], + transform: [{ translateX: rtl ? -translateX.value : translateX.value }], })); const isImageVisible = useCallback( @@ -167,7 +167,6 @@ export const GalleryPreview = ({ swipeToCloseEnabled={swipeToCloseEnabled} pinchEnabled={pinchEnabled} doubleTabEnabled={doubleTabEnabled} - rtl={rtl} /> )} diff --git a/src/components/GalleryItem.tsx b/src/components/GalleryItem.tsx index 8d27e60..75fed2f 100644 --- a/src/components/GalleryItem.tsx +++ b/src/components/GalleryItem.tsx @@ -13,7 +13,7 @@ import { Gesture, GestureDetector } from "react-native-gesture-handler"; import { useVector } from "../utils/useVector"; import { clamp, withRubberClamp } from "../utils/clamp"; import { DURATION, MIN_SCALE } from "../constants"; -// import { DebugView } from "./DebugView/DebugView"; +// import { DebugView } from './DebugView.tsx/DebugView'; export const GalleryItem = memo( ({ @@ -37,7 +37,6 @@ export const GalleryItem = memo( doubleTabEnabled, swipeToCloseEnabled, pinchEnabled, - rtl, }: GalleryItemProps) => { const [imageDimensions, setImageDimensions] = useState<{ width: number; @@ -104,13 +103,9 @@ export const GalleryItem = memo( (i: number): readonly [number, number] => { "worklet"; - if (rtl) { - return [(width + gap) * i, width * (i + 1)]; - } - return [-(width + gap) * i, -width * (i + 1)]; }, - [gap, width, rtl], + [gap, width], ); const getScaledEdgesX = ( @@ -276,23 +271,13 @@ export const GalleryItem = memo( : isPanningOut.value; if (scale.value === 1 && !isPanningOut.value) { - if (rtl) { - rootTranslateX.value = withRubberClamp( - initRootTranslateX.value + translationX, - { dir0: isLast ? 0.55 : 1.15, dir1: isFirst ? 0.55 : 1.15 }, - width, - 0, - getImagePositionX(dataLength - 1)[0], - ); - } else { - rootTranslateX.value = withRubberClamp( - initRootTranslateX.value + translationX, - { dir0: isFirst ? 0.55 : 1.15, dir1: isLast ? 0.55 : 1.15 }, - width, - getImagePositionX(dataLength - 1)[0], - 0, - ); - } + rootTranslateX.value = withRubberClamp( + initRootTranslateX.value + translationX, + { dir0: isFirst ? 0.55 : 1.15, dir1: isLast ? 0.55 : 1.15 }, + width, + getImagePositionX(dataLength - 1)[0], + 0, + ); return; } else { translation.x.value = withRubberClamp( @@ -363,13 +348,7 @@ export const GalleryItem = memo( if (scale.value === 1) { const needToTransX = Math.abs(getImagePositionX(1)[0] / 2); - if ( - (rtl && - ((isFirst && translationX < 0) || - (isLast && translationX> 0))) || - (!rtl && - ((isFirst && translationX> 0) || (isLast && translationX < 0))) - ) { + if ((isFirst && translationX> 0) || (isLast && translationX < 0)) { rootTranslateX.value = withSpring( currentImagePositionX[0], springConfig, @@ -378,13 +357,8 @@ export const GalleryItem = memo( Math.abs(velocityX)>= needToTransX || Math.abs(translationX)>= needToTransX ) { - const newIndex = rtl - ? !isFirst && velocityX <= 0 && translationX < 0 - ? index - 1 - : !isLast && velocityX>= 0 && translationX> 0 - ? index + 1 - : index - : !isFirst && velocityX>= 0 && translationX> 0 + const newIndex = + !isFirst && velocityX>= 0 && translationX> 0 ? index - 1 : !isLast && velocityX <= 0 && translationX < 0 ? index + 1 @@ -517,12 +491,11 @@ export const GalleryItem = memo( {/*

AltStyle によって変換されたページ (->オリジナル) /