@one-am/react-native-simple-image-slider 0.15.0 → 0.16.0

package/src/BaseSimpleImageSlider.tsx

@@ -9,10 +9,17 @@ import React, {
 } from 'react';
 import { FlashList, type ListRenderItemInfo } from '@shopify/flash-list';
 import mergeRefs from 'merge-refs';
-import { Image, type ImageProps, type ImageStyle } from 'expo-image';
-import { Pressable, type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
+import { Image, type ImageStyle } from 'expo-image';
+import {
+    type LayoutChangeEvent,
+    Platform,
+    Pressable,
+    type StyleProp,
+    StyleSheet,
+    type TextStyle,
+    type ViewStyle,
+} from 'react-native';
 import type ViewToken from '@shopify/flash-list/src/viewability/ViewToken';
-import styled from 'styled-components/native';
 import PageCounter, { type PageCounterProps } from './PageCounter';
 import PinchToZoom, { type PinchToZoomProps } from './PinchToZoom';
 import { GestureHandlerRootView, ScrollView } from 'react-native-gesture-handler';
@@ -20,6 +27,7 @@ import renderProp, { type RenderProp } from './utils/renderProp';
 import type { SimpleImageSliderItem } from './@types/slider';
 import type { PinchToZoomStatus } from './@types/pinch-to-zoom';
 import Animated from 'react-native-reanimated';
+import { AbsoluteComponentContainer } from './AbsoluteComponentContainer';
 
 export type BaseSimpleImageSliderProps = {
     /**
@@ -127,63 +135,12 @@ export type BaseSimpleImageSliderProps = {
      */
     sharedTransitionTag?: string;
     /**
-     * @description Style that will be applied to ebvery image in the slider.
+     * @description Style that will be applied to every image in the slider.
      */
     imageStyle?: StyleProp<ImageStyle>;
 };
 
-const StyledAbsoluteComponentContainer = styled.View<{
-    position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-}>`
-    z-index: 1000;
-    position: absolute;
-    bottom: ${({ position }) =>
-        position === 'bottom-left' || position === 'bottom-right' ? `16px` : 'auto'};
-    top: ${({ position }) =>
-        position === 'top-left' || position === 'top-right' ? `16px` : 'auto'};
-    left: ${({ position }) =>
-        position === 'top-left' || position === 'bottom-left' ? `16px` : 'auto'};
-    right: ${({ position }) =>
-        position === 'top-right' || position === 'bottom-right' ? `16px` : 'auto'};
-`;
-
-const StyledPageCounter = styled(PageCounter)<{
-    position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-}>`
-    z-index: 1000;
-    position: absolute;
-    bottom: ${({ position }) =>
-        position === 'bottom-left' || position === 'bottom-right' ? `16px` : 'auto'};
-    top: ${({ position }) =>
-        position === 'top-left' || position === 'top-right' ? `16px` : 'auto'};
-    left: ${({ position }) =>
-        position === 'top-left' || position === 'bottom-left' ? `16px` : 'auto'};
-    right: ${({ position }) =>
-        position === 'top-right' || position === 'bottom-right' ? `16px` : 'auto'};
-`;
-
-const StyledContainer = styled(GestureHandlerRootView)<{ aspectRatio: number }>`
-    aspect-ratio: ${({ aspectRatio }) => aspectRatio ?? 4 / 3};
-    width: 100%;
-`;
-
-const StyledImage = styled(Image)<
-    ImageProps & {
-        imageWidth?: number;
-        imageHeight?: number;
-        imageAspectRatio: number;
-    }
->`
-    width: ${({ imageWidth }) => (imageWidth ? `${imageWidth}px` : '100%')};
-    height: ${({ imageHeight }) => (imageHeight ? `${imageHeight}px` : '100%')};
-    aspect-ratio: ${({ imageAspectRatio }) => imageAspectRatio};
-`;
-
-const AnimatedStyledImage = Animated.createAnimatedComponent(StyledImage);
-
-const StyledPinchToZoom = styled(PinchToZoom)`
-    z-index: 1000;
-`;
+const AnimatedImage = Animated.createAnimatedComponent(Image);
 
 /**
  * @description A simple image slider that displays a list of images. This is the component
@@ -206,7 +163,7 @@ const BaseSimpleImageSlider = forwardRef<
         pageCounterPosition = 'bottom-left',
         pageCounterStyle,
         pageCounterTextStyle,
-        PageCounterComponent,
+        PageCounterComponent = PageCounter,
         renderPageCounter,
         TopRightComponent,
         TopLeftComponent,
@@ -228,30 +185,55 @@ const BaseSimpleImageSlider = forwardRef<
         );
     }
 
-    const ActualPageCounterComponent = PageCounterComponent
-        ? makeStyledPageCounter(PageCounterComponent)
-        : StyledPageCounter;
-
     const listRef = useRef<FlashList<SimpleImageSliderItem>>(null);
-    const [currentItem, setCurrentItem] = useState(0);
 
+    const styles = useMemo(
+        () => makeStyles({ imageAspectRatio, imageWidth, imageHeight }),
+        [imageAspectRatio, imageHeight, imageWidth]
+    );
     const slicedData = useMemo(
         () => (maxItems !== undefined ? (data?.slice(0, maxItems) ?? []) : (data ?? [])),
         [data, maxItems]
     );
+    const estimatedItemSize = useMemo(() => {
+        return imageWidth ?? (imageHeight ? imageHeight * (imageAspectRatio ?? 4 / 3) : 350);
+    }, [imageAspectRatio, imageHeight, imageWidth]);
 
-    useEffect(() => {
-        setCurrentItem(indexOverride ?? 0);
+    const [currentItem, setCurrentItem] = useState(0);
+    const [scrollEnabled, setScrollEnabled] = useState(true);
+    const [snapToInterval, setSnapToInterval] = useState<number | undefined>(undefined);
 
-        listRef.current?.scrollToIndex({ index: indexOverride ?? 0, animated: false });
-    }, [indexOverride, slicedData]);
+    const handleScaleChange = useCallback(() => {
+        setScrollEnabled(false);
+    }, []);
 
-    const keyExtractor = useCallback((item: SimpleImageSliderItem) => item.key, []);
+    const handleScaleReset = useCallback(() => {
+        setScrollEnabled(true);
+    }, []);
+
+    const handleViewableItemsChanged = useCallback(
+        ({ viewableItems }: { viewableItems: ViewToken[]; changed: ViewToken[] }) => {
+            const newIndex = viewableItems[0]?.index;
+            if (newIndex !== undefined && newIndex !== null) {
+                setCurrentItem(newIndex);
+                onViewableItemChange?.(newIndex);
+            }
+        },
+        [onViewableItemChange]
+    );
+
+    const handlePinchToZoomStatusChange = useCallback(
+        (status: PinchToZoomStatus) => {
+            listRef.current?.recordInteraction();
+            onPinchToZoomStatusChange?.(status);
+        },
+        [onPinchToZoomStatusChange]
+    );
 
     const renderItem = useCallback(
         ({ item, index }: ListRenderItemInfo<SimpleImageSliderItem>) => {
             const ImageComponent =
-                sharedTransitionTag && index === currentItem ? AnimatedStyledImage : StyledImage;
+                sharedTransitionTag && index === currentItem ? AnimatedImage : Image;
 
             return (
                 <Pressable
@@ -263,78 +245,53 @@ const BaseSimpleImageSlider = forwardRef<
                     <ImageComponent
                         sharedTransitionTag={sharedTransitionTag}
                         transition={200}
+                        // https://github.com/expo/expo/issues/34810
+                        /* eslint-disable-next-line @typescript-eslint/no-unsafe-assignment */
                         placeholder={item.placeholder}
                         placeholderContentFit={'cover'}
-                        imageWidth={imageWidth}
-                        imageHeight={imageHeight}
-                        imageAspectRatio={imageAspectRatio}
                         recyclingKey={item.key}
+                        // https://github.com/expo/expo/issues/34810
+                        /* eslint-disable-next-line @typescript-eslint/no-unsafe-assignment */
                         source={item.source}
                         contentFit={'cover'}
                         contentPosition={'center'}
-                        style={imageStyle}
+                        style={[styles.image, imageStyle]}
                     />
                 </Pressable>
             );
         },
-        [
-            currentItem,
-            imageAspectRatio,
-            imageHeight,
-            imageStyle,
-            imageWidth,
-            onItemPress,
-            sharedTransitionTag,
-        ]
+        [currentItem, imageStyle, onItemPress, sharedTransitionTag, styles.image]
     );
 
-    const onViewableItemsChanged = useCallback(
-        ({ viewableItems }: { viewableItems: ViewToken[]; changed: ViewToken[] }) => {
-            const newIndex = viewableItems[0]?.index;
-            if (newIndex !== undefined && newIndex !== null) {
-                setCurrentItem(newIndex);
-                onViewableItemChange?.(newIndex);
-            }
-        },
-        [onViewableItemChange]
-    );
-
-    const [scrollEnabled, setScrollEnabled] = useState(true);
-
-    const onScaleChange = useCallback(() => {
-        setScrollEnabled(false);
-    }, []);
+    const keyExtractor = useCallback((item: SimpleImageSliderItem) => item.key, []);
 
-    const onScaleReset = useCallback(() => {
-        setScrollEnabled(true);
+    const handleListLayout = useCallback((event: LayoutChangeEvent) => {
+        if (Platform.OS === 'ios') {
+            // temporary workaround for iOS scrolling a bit more than expected
+            setSnapToInterval(event.nativeEvent.layout.width - 0.5);
+        }
     }, []);
 
-    const estimatedItemSize = useMemo(() => {
-        return imageWidth ?? (imageHeight ? imageHeight * (imageAspectRatio ?? 4 / 3) : 350);
-    }, [imageAspectRatio, imageHeight, imageWidth]);
+    useEffect(() => {
+        setCurrentItem(indexOverride ?? 0);
 
-    const internalOnPinchToZoomStatusChange = useCallback(
-        (status: PinchToZoomStatus) => {
-            listRef.current?.recordInteraction();
-            onPinchToZoomStatusChange?.(status);
-        },
-        [onPinchToZoomStatusChange]
-    );
+        listRef.current?.scrollToIndex({ index: indexOverride ?? 0, animated: false });
+    }, [indexOverride, slicedData]);
 
     const list = (
         <FlashList
-            // @ts-expect-error - there's just a small inconsistency with hitSlop typing
             renderScrollComponent={ScrollView}
             scrollEnabled={scrollEnabled}
             disableScrollViewPanResponder={enablePinchToZoom ? !scrollEnabled : false}
             ref={mergeRefs(ref, listRef)}
             initialScrollIndex={indexOverride ?? currentItem ?? 0}
-            onViewableItemsChanged={onViewableItemsChanged}
+            onViewableItemsChanged={handleViewableItemsChanged}
             viewabilityConfig={{
                 itemVisiblePercentThreshold: 55,
             }}
             decelerationRate={'fast'}
-            pagingEnabled={true}
+            pagingEnabled={snapToInterval === undefined}
+            snapToInterval={snapToInterval}
             showsHorizontalScrollIndicator={false}
             showsVerticalScrollIndicator={false}
             horizontal={true}
@@ -346,22 +303,24 @@ const BaseSimpleImageSlider = forwardRef<
                 width: estimatedItemSize,
                 height: imageHeight ?? estimatedItemSize / imageAspectRatio,
             }}
+            onLayout={handleListLayout}
         />
     );
 
     return (
-        <StyledContainer aspectRatio={imageAspectRatio} style={style}>
+        <GestureHandlerRootView style={[styles.container, style]}>
             {enablePinchToZoom ? (
-                <StyledPinchToZoom
+                <PinchToZoom
+                    style={styles.pinchToZoom}
                     onDismiss={onPinchToZoomRequestClose}
-                    onStatusChange={internalOnPinchToZoomStatusChange}
-                    onScaleChange={onScaleChange}
-                    onScaleReset={onScaleReset}
+                    onStatusChange={handlePinchToZoomStatusChange}
+                    onScaleChange={handleScaleChange}
+                    onScaleReset={handleScaleReset}
                     maximumZoomScale={5}
                     minimumZoomScale={1}
                 >
                     {list}
-                </StyledPinchToZoom>
+                </PinchToZoom>
             ) : (
                 list
             )}
@@ -369,54 +328,63 @@ const BaseSimpleImageSlider = forwardRef<
                 renderPageCounter ? (
                     renderPageCounter(currentItem + 1, slicedData.length)
                 ) : (
-                    <ActualPageCounterComponent
-                        position={pageCounterPosition}
-                        totalPages={slicedData.length}
-                        currentPage={currentItem + 1}
-                        style={pageCounterStyle}
-                        textStyle={pageCounterTextStyle}
-                    />
+                    <AbsoluteComponentContainer position={pageCounterPosition}>
+                        <PageCounterComponent
+                            totalPages={slicedData.length}
+                            currentPage={currentItem + 1}
+                            style={pageCounterStyle}
+                            textStyle={pageCounterTextStyle}
+                        />
+                    </AbsoluteComponentContainer>
                 )
             ) : null}
             {TopRightComponent ? (
-                <StyledAbsoluteComponentContainer position={'top-right'}>
+                <AbsoluteComponentContainer position={'top-right'}>
                     {renderProp(TopRightComponent)}
-                </StyledAbsoluteComponentContainer>
+                </AbsoluteComponentContainer>
             ) : null}
             {TopLeftComponent ? (
-                <StyledAbsoluteComponentContainer position={'top-left'}>
+                <AbsoluteComponentContainer position={'top-left'}>
                     {renderProp(TopLeftComponent)}
-                </StyledAbsoluteComponentContainer>
+                </AbsoluteComponentContainer>
             ) : null}
             {BottomRightComponent ? (
-                <StyledAbsoluteComponentContainer position={'bottom-right'}>
+                <AbsoluteComponentContainer position={'bottom-right'}>
                     {renderProp(BottomRightComponent)}
-                </StyledAbsoluteComponentContainer>
+                </AbsoluteComponentContainer>
             ) : null}
             {BottomLeftComponent ? (
-                <StyledAbsoluteComponentContainer position={'bottom-left'}>
+                <AbsoluteComponentContainer position={'bottom-left'}>
                     {renderProp(BottomLeftComponent)}
-                </StyledAbsoluteComponentContainer>
+                </AbsoluteComponentContainer>
             ) : null}
-        </StyledContainer>
+        </GestureHandlerRootView>
     );
 });
 
-const makeStyledPageCounter = (
-    PageCounterComponent: React.FunctionComponent<PageCounterProps>
-) => styled(PageCounterComponent)<{
-    position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-}>`
-    z-index: 1000;
-    position: absolute;
-    bottom: ${({ position }) =>
-        position === 'bottom-left' || position === 'bottom-right' ? `16px` : 'auto'};
-    top: ${({ position }) =>
-        position === 'top-left' || position === 'top-right' ? `16px` : 'auto'};
-    left: ${({ position }) =>
-        position === 'top-left' || position === 'bottom-left' ? `16px` : 'auto'};
-    right: ${({ position }) =>
-        position === 'top-right' || position === 'bottom-right' ? `16px` : 'auto'};
-`;
+const makeStyles = ({
+    imageAspectRatio,
+    imageWidth,
+    imageHeight,
+}: {
+    imageAspectRatio?: number;
+    imageWidth?: number;
+    imageHeight?: number;
+}) => {
+    return StyleSheet.create({
+        container: {
+            width: '100%',
+            aspectRatio: imageAspectRatio ?? 4 / 3,
+        },
+        pinchToZoom: {
+            zIndex: 1000,
+        },
+        image: {
+            width: imageWidth ?? '100%',
+            height: imageHeight ?? '100%',
+            aspectRatio: imageAspectRatio ?? 4 / 3,
+        },
+    });
+};
 
 export default BaseSimpleImageSlider;

package/src/FullScreenImageSlider.tsx

@@ -6,7 +6,14 @@ import React, {
     useMemo,
     useState,
 } from 'react';
-import { Modal, type ScaledSize, StyleSheet, useWindowDimensions } from 'react-native';
+import {
+    Modal,
+    type ScaledSize,
+    StyleSheet,
+    TouchableOpacity,
+    useWindowDimensions,
+    View,
+} from 'react-native';
 import IconX from './icons/IconX';
 import Animated, {
     runOnJS,
@@ -15,13 +22,16 @@ import Animated, {
     withTiming,
 } from 'react-native-reanimated';
 import { setStatusBarStyle } from 'expo-status-bar';
-import styled, { useTheme } from 'styled-components/native';
 import { FlashList } from '@shopify/flash-list';
 import BaseListImageSlider, { type BaseSimpleImageSliderProps } from './BaseSimpleImageSlider';
 import { type EdgeInsets, useSafeAreaInsets } from 'react-native-safe-area-context';
 import type { PinchToZoomStatus } from './@types/pinch-to-zoom';
 import type { SimpleImageSliderItem } from './@types/slider';
 import renderProp, { type RenderProp } from './utils/renderProp';
+import {
+    type SimpleImageSliderTheme,
+    useSimpleImageSliderTheme,
+} from './SimpleImageSliderThemeProvider';
 
 export type FullScreenImageSliderProps = Omit<BaseSimpleImageSliderProps, 'imageWidth'> & {
     /**
@@ -48,25 +58,6 @@ export type FullScreenImageSliderProps = Omit<BaseSimpleImageSliderProps, 'image
     onFadeOut?: () => void;
 };
 
-const StyledDescriptionContainer = styled.View`
-    position: absolute;
-    border-top-width: 1px;
-    border-top-color: ${({ theme }) => theme.colors.simpleImageSlider.descriptionContainerBorder};
-    width: 100%;
-    padding-top: 20px;
-`;
-
-const StyledModalCloseButton = styled.TouchableOpacity`
-    position: absolute;
-    z-index: 1000;
-`;
-
-const StyledModalContentContainer = styled(Animated.View)`
-    align-items: center;
-    justify-content: center;
-    gap: 16px;
-`;
-
 /**
  * @description A full screen image slider that displays images in a modal.
  */
@@ -87,11 +78,11 @@ const FullScreenImageSlider = forwardRef<
     ref
 ) {
     const windowDimensions = useWindowDimensions();
-    const theme = useTheme();
+    const theme = useSimpleImageSliderTheme();
     const safeAreaInsets = useSafeAreaInsets();
     const styles = useMemo(
-        () => makeStyles(safeAreaInsets, windowDimensions),
-        [safeAreaInsets, windowDimensions]
+        () => makeStyles(safeAreaInsets, windowDimensions, theme),
+        [safeAreaInsets, windowDimensions, theme]
     );
 
     const [internalIndex, setInternalIndex] = useState<number>(0);
@@ -122,8 +113,8 @@ const FullScreenImageSlider = forwardRef<
 
     const onPinchToZoomStatusChange = useCallback(
         ({ translation, scale }: PinchToZoomStatus) => {
-            if (scale.value <= 1) {
-                if (translation.x.value === 0 && translation.y.value === 0) {
+            if (scale <= 1) {
+                if (translation.x === 0 && translation.y === 0) {
                     runOnJS(setStatusBarStyle)('light');
                     backgroundOpacity.value = withTiming(1);
                 } else {
@@ -147,14 +138,14 @@ const FullScreenImageSlider = forwardRef<
             transparent={true}
             visible={open}
         >
-            <StyledModalContentContainer style={[styles.modalContent, modalContentStyle]}>
-                <StyledModalCloseButton style={styles.closeButton} onPress={onRequestClose}>
+            <Animated.View style={[styles.modalContent, modalContentStyle]}>
+                <TouchableOpacity style={styles.closeButton} onPress={onRequestClose}>
                     {CloseButtonIcon ? (
                         renderProp(CloseButtonIcon)
                     ) : (
-                        <IconX color={theme.colors.simpleImageSlider.fullScreenCloseButton} />
+                        <IconX color={theme.colors.fullScreenCloseButton} />
                     )}
-                </StyledModalCloseButton>
+                </TouchableOpacity>
                 <BaseListImageSlider
                     data={data}
                     enablePinchToZoom={true}
@@ -168,28 +159,42 @@ const FullScreenImageSlider = forwardRef<
                 />
 
                 {renderDescription && data[internalIndex] ? (
-                    <StyledDescriptionContainer style={styles.descriptionContainer}>
+                    <View style={styles.descriptionContainer}>
                         {renderDescription(data[internalIndex], internalIndex)}
-                    </StyledDescriptionContainer>
+                    </View>
                 ) : null}
-            </StyledModalContentContainer>
+            </Animated.View>
         </Modal>
     );
 });
 
 export default FullScreenImageSlider;
 
-const makeStyles = (safeAreaInsets: EdgeInsets, windowDimensions: ScaledSize) => {
+const makeStyles = (
+    safeAreaInsets: EdgeInsets,
+    windowDimensions: ScaledSize,
+    theme: SimpleImageSliderTheme
+) => {
     return StyleSheet.create({
         closeButton: {
+            position: 'absolute',
+            zIndex: 1000,
             top: safeAreaInsets.top,
             right: safeAreaInsets.right + 20,
         },
         modalContent: {
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 16,
             height: windowDimensions.height,
             width: windowDimensions.width,
         },
         descriptionContainer: {
+            position: 'absolute',
+            borderTopWidth: 1,
+            borderTopColor: theme.colors.descriptionContainerBorder,
+            width: '100%',
+            paddingTop: 20,
             bottom: safeAreaInsets.bottom + 100,
             paddingLeft: safeAreaInsets.left + 20,
             paddingRight: safeAreaInsets.right + 20,

package/src/PageCounter.tsx

@@ -1,6 +1,16 @@
-import React from 'react';
-import { type StyleProp, Text, type TextStyle, type ViewStyle } from 'react-native';
-import styled from 'styled-components/native';
+import React, { useMemo } from 'react';
+import {
+    type StyleProp,
+    StyleSheet,
+    Text,
+    type TextStyle,
+    View,
+    type ViewStyle,
+} from 'react-native';
+import {
+    type SimpleImageSliderTheme,
+    useSimpleImageSliderTheme,
+} from './SimpleImageSliderThemeProvider';
 
 export type PageCounterProps = {
     /**
@@ -21,29 +31,37 @@ export type PageCounterProps = {
     textStyle?: StyleProp<TextStyle>;
 };
 
-const StyledContainer = styled.View`
-    background-color: ${({ theme }) => theme.colors.simpleImageSlider.pageCounterBackground};
-    border-width: 1px;
-    border-color: ${({ theme }) => theme.colors.simpleImageSlider.pageCounterBorder};
-    border-radius: 8px;
-    padding: 6px 5px;
-    width: 75px;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-`;
-
 export default function PageCounter({
     currentPage,
     totalPages,
     style,
     textStyle,
 }: PageCounterProps) {
+    const theme = useSimpleImageSliderTheme();
+    const styles = useMemo(() => makeStyles(theme), [theme]);
+
     return (
-        <StyledContainer style={style}>
+        <View style={[styles.container, style]}>
             <Text style={textStyle}>
                 {currentPage} / {totalPages}
             </Text>
-        </StyledContainer>
+        </View>
     );
 }
+
+const makeStyles = (theme: SimpleImageSliderTheme) => {
+    return StyleSheet.create({
+        container: {
+            backgroundColor: theme.colors.pageCounterBackground,
+            borderWidth: 1,
+            borderColor: theme.colors.pageCounterBorder,
+            borderRadius: 8,
+            paddingVertical: 6,
+            paddingHorizontal: 5,
+            width: 75,
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+    });
+};

package/src/PinchToZoom.tsx

@@ -126,6 +126,7 @@ export default function PinchToZoom({
                                 (-viewWidth.value * (scale.value - minimumZoomScale)) / 2,
                                 (viewWidth.value * (scale.value - minimumZoomScale)) / 2
                             );
+
                             translationY.value = clamp(
                                 prevTranslationY.value +
                                     -1 *
@@ -173,8 +174,8 @@ export default function PinchToZoom({
             originY,
             prevTranslationX,
             prevTranslationY,
-            viewWidth.value,
-            viewHeight.value,
+            viewWidth,
+            viewHeight,
             minimumZoomScale,
             onDismiss,
             onScaleReset,
@@ -247,15 +248,15 @@ export default function PinchToZoom({
             disabled,
             minimumZoomScale,
             onDismiss,
-            prevScale.value,
+            prevScale,
             prevTranslationX,
             prevTranslationY,
-            scale.value,
+            scale,
             windowHeight,
             translationX,
             translationY,
-            viewHeight.value,
-            viewWidth.value,
+            viewHeight,
+            viewWidth,
         ]
     );
 
@@ -298,10 +299,10 @@ export default function PinchToZoom({
     useAnimatedReaction(
         () => {
             return {
-                scale: scale,
+                scale: scale.value,
                 translation: {
-                    x: translationX,
-                    y: translationY,
+                    x: translationX.value,
+                    y: translationY.value,
                 },
             };
         },