@one-am/react-native-simple-image-slider 0.2.2

package/src/PageCounter.tsx

@@ -0,0 +1,39 @@
+import React, { useMemo } from 'react';
+import { type StyleProp, StyleSheet, Text, View, type ViewStyle } from 'react-native';
+import { type DefaultTheme, useTheme } from 'styled-components/native';
+
+type PageCounterProps = {
+    currentPage: number;
+    totalPages: number;
+    style?: StyleProp<ViewStyle>;
+};
+
+export default function PageCounter({ currentPage, totalPages, style }: PageCounterProps) {
+    const theme = useTheme();
+    const styles = useMemo(() => makeStyles(theme), [theme]);
+
+    return (
+        <View style={[styles.container, style]}>
+            <Text>
+                {currentPage} / {totalPages}
+            </Text>
+        </View>
+    );
+}
+
+const makeStyles = (theme: DefaultTheme) => {
+    return StyleSheet.create({
+        container: {
+            backgroundColor: theme.colors.pageCounterBackground,
+            borderWidth: 1,
+            borderColor: theme.colors.pageCounterBorder,
+            borderRadius: 8,
+            paddingHorizontal: 5,
+            paddingVertical: 6,
+            width: 75,
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+    });
+};

package/src/PinchToZoom.tsx

@@ -0,0 +1,323 @@
+import React, { type PropsWithChildren, useCallback, useMemo } from 'react';
+import {
+    type LayoutChangeEvent,
+    type StyleProp,
+    useWindowDimensions,
+    type ViewStyle,
+} from 'react-native';
+import Animated, {
+    cancelAnimation,
+    runOnJS,
+    type SharedValue,
+    useAnimatedReaction,
+    useAnimatedStyle,
+    useSharedValue,
+    withTiming,
+} from 'react-native-reanimated';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import { clamp } from './utils/clamp';
+import * as Haptics from 'expo-haptics';
+
+export type PinchToZoomProps = PropsWithChildren<{
+    minimumZoomScale?: number;
+    maximumZoomScale?: number;
+    style?: StyleProp<ViewStyle>;
+    onPinchStart?: () => void;
+    onPinchEnd?: () => void;
+    disabled?: boolean;
+    onLayout?: (e: LayoutChangeEvent) => void;
+    onScaleChange?: () => void;
+    onScaleReset?: () => void;
+    onTranslationChange?: (
+        x: SharedValue<number>,
+        y: SharedValue<number>,
+        scale: SharedValue<number>
+    ) => void;
+    onRequestClose?: () => void;
+}>;
+
+export default function PinchToZoom({
+    minimumZoomScale = 1,
+    maximumZoomScale = 8,
+    style: propStyle,
+    onPinchStart,
+    onPinchEnd,
+    disabled,
+    onLayout,
+    onTranslationChange,
+    onScaleChange,
+    onScaleReset,
+    children,
+    onRequestClose,
+}: PinchToZoomProps) {
+    const { height: windowHeight } = useWindowDimensions();
+
+    const translationX = useSharedValue(0);
+    const translationY = useSharedValue(0);
+    const originX = useSharedValue(0);
+    const originY = useSharedValue(0);
+    const scale = useSharedValue(1);
+    const isPinching = useSharedValue(false);
+    const viewHeight = useSharedValue(0);
+    const viewWidth = useSharedValue(0);
+
+    const prevScale = useSharedValue(0);
+    const offsetScale = useSharedValue(0);
+    const prevTranslationX = useSharedValue(0);
+    const prevTranslationY = useSharedValue(0);
+
+    const pinchGesture = useMemo(
+        () =>
+            Gesture.Pinch()
+                .enabled(!disabled)
+                .onStart(() => {
+                    cancelAnimation(translationX);
+                    cancelAnimation(translationY);
+                    cancelAnimation(scale);
+                    prevScale.value = scale.value;
+                    offsetScale.value = scale.value;
+                    if (onPinchStart) runOnJS(onPinchStart)();
+                    if (onScaleChange) runOnJS(onScaleChange)();
+                })
+                .onUpdate((e) => {
+                    if (e.numberOfPointers === 2) {
+                        scale.value = Math.min(prevScale.value * e.scale, maximumZoomScale);
+
+                        // reset the origin
+                        if (!isPinching.value) {
+                            isPinching.value = true;
+                            originX.value = e.focalX;
+                            originY.value = e.focalY;
+                            prevTranslationX.value = translationX.value;
+                            prevTranslationY.value = translationY.value;
+                            offsetScale.value = scale.value;
+                        }
+
+                        if (isPinching.value) {
+                            // translate the image to the focal point as we're zooming
+                            translationX.value = clamp(
+                                prevTranslationX.value +
+                                    -1 *
+                                        ((scale.value - offsetScale.value) *
+                                            (originX.value - viewWidth.value / 2)),
+                                (-viewWidth.value * (scale.value - minimumZoomScale)) / 2,
+                                (viewWidth.value * (scale.value - minimumZoomScale)) / 2
+                            );
+                            translationY.value = clamp(
+                                prevTranslationY.value +
+                                    -1 *
+                                        ((scale.value - offsetScale.value) *
+                                            (originY.value - viewHeight.value / 2)),
+                                (-viewHeight.value * (scale.value - minimumZoomScale)) / 2,
+                                (viewHeight.value * (scale.value - minimumZoomScale)) / 2
+                            );
+                        }
+                    }
+                })
+                .onEnd(() => {
+                    isPinching.value = false;
+
+                    if (scale.value < minimumZoomScale / 2 && prevScale.value <= minimumZoomScale) {
+                        if (onRequestClose) {
+                            runOnJS(onRequestClose)();
+                        }
+                    } else if (scale.value < minimumZoomScale) {
+                        runOnJS(Haptics.impactAsync)(Haptics.ImpactFeedbackStyle.Light);
+                        translationX.value = withTiming(0);
+                        translationY.value = withTiming(0);
+                        scale.value = withTiming(minimumZoomScale);
+                        if (onScaleReset) {
+                            runOnJS(onScaleReset)();
+                        }
+                    }
+
+                    prevScale.value = 0;
+                    prevTranslationX.value = translationX.value;
+                    prevTranslationY.value = translationY.value;
+
+                    if (onPinchEnd) runOnJS(onPinchEnd)();
+                }),
+
+        [
+            disabled,
+            translationX,
+            translationY,
+            scale,
+            prevScale,
+            offsetScale,
+            onPinchStart,
+            onScaleChange,
+            maximumZoomScale,
+            isPinching,
+            originX,
+            originY,
+            prevTranslationX,
+            prevTranslationY,
+            viewWidth.value,
+            viewHeight.value,
+            minimumZoomScale,
+            onPinchEnd,
+            onRequestClose,
+            onScaleReset,
+        ]
+    );
+
+    const panGesture = useMemo(
+        () =>
+            Gesture.Pan()
+                .enabled(!disabled)
+                .onStart(() => {
+                    cancelAnimation(translationX);
+                    cancelAnimation(translationY);
+
+                    prevTranslationX.value = translationX.value;
+                    prevTranslationY.value = translationY.value;
+                })
+                .onUpdate((e) => {
+                    if (prevScale.value <= minimumZoomScale) {
+                        translationX.value = prevTranslationX.value + e.translationX;
+                        translationY.value = prevTranslationY.value + e.translationY;
+                    } else {
+                        translationX.value = clamp(
+                            prevTranslationX.value + e.translationX,
+                            (-viewWidth.value * (scale.value - minimumZoomScale)) / 2,
+                            (viewWidth.value * (scale.value - minimumZoomScale)) / 2
+                        );
+                        translationY.value = clamp(
+                            prevTranslationY.value + e.translationY,
+                            (-viewHeight.value * (scale.value - minimumZoomScale)) / 2,
+                            (viewHeight.value * (scale.value - minimumZoomScale)) / 2
+                        );
+                    }
+                })
+                .onEnd(() => {
+                    if (scale.value <= minimumZoomScale && prevScale.value <= minimumZoomScale) {
+                        if (
+                            Math.abs(translationX.value) > viewWidth.value / 2 ||
+                            Math.abs(translationY.value) > viewHeight.value / 2
+                        ) {
+                            if (onRequestClose) {
+                                runOnJS(onRequestClose)();
+                            }
+                        } else {
+                            runOnJS(Haptics.impactAsync)(Haptics.ImpactFeedbackStyle.Light);
+                            translationX.value = withTiming(0);
+                            translationY.value = withTiming(0);
+                        }
+                    } else if (
+                        viewHeight.value * (scale.value - minimumZoomScale) <=
+                        windowHeight
+                    ) {
+                        translationX.value = withTiming(
+                            clamp(
+                                translationX.value,
+                                (-viewWidth.value * (scale.value - minimumZoomScale)) / 2,
+                                (viewWidth.value * (scale.value - minimumZoomScale)) / 2
+                            )
+                        );
+                        translationY.value = withTiming(
+                            clamp(
+                                translationY.value,
+                                (-viewHeight.value * (scale.value - minimumZoomScale)) / 2,
+                                (viewHeight.value * (scale.value - minimumZoomScale)) / 2
+                            )
+                        );
+                    }
+                }),
+        [
+            disabled,
+            minimumZoomScale,
+            onRequestClose,
+            prevScale.value,
+            prevTranslationX,
+            prevTranslationY,
+            scale.value,
+            windowHeight,
+            translationX,
+            translationY,
+            viewHeight.value,
+            viewWidth.value,
+        ]
+    );
+
+    const tapGesture = useMemo(
+        () =>
+            Gesture.Tap()
+                .enabled(!disabled)
+                .numberOfTaps(2)
+                .onStart(() => {
+                    if (scale.value > minimumZoomScale) {
+                        translationX.value = withTiming(0);
+                        translationY.value = withTiming(0);
+                        scale.value = withTiming(minimumZoomScale);
+                        if (onScaleReset) {
+                            runOnJS(onScaleReset)();
+                        }
+                    } else {
+                        scale.value = withTiming(maximumZoomScale / 2);
+                        if (onScaleChange) {
+                            runOnJS(onScaleChange)();
+                        }
+                    }
+                }),
+        [
+            disabled,
+            maximumZoomScale,
+            minimumZoomScale,
+            onScaleChange,
+            onScaleReset,
+            scale,
+            translationX,
+            translationY,
+        ]
+    );
+
+    const compositeGesture = useMemo(() => {
+        return Gesture.Exclusive(Gesture.Simultaneous(pinchGesture, panGesture), tapGesture);
+    }, [panGesture, pinchGesture, tapGesture]);
+
+    useAnimatedReaction(
+        () => {
+            return {
+                scale: scale.value,
+                translationX: translationX.value,
+                translationY: translationY.value,
+            };
+        },
+        () => {
+            if (onTranslationChange) {
+                runOnJS(onTranslationChange)(translationX, translationY, scale);
+            }
+        },
+        [onTranslationChange]
+    );
+
+    const style = useAnimatedStyle(() => {
+        return {
+            transform: [
+                { translateX: translationX.value },
+                { translateY: translationY.value },
+                { scale: scale.value },
+            ],
+        };
+    }, []);
+
+    const internalOnLayout = useCallback(
+        (e: LayoutChangeEvent) => {
+            viewHeight.value = e.nativeEvent.layout.height;
+            viewWidth.value = e.nativeEvent.layout.width;
+            onLayout?.(e);
+        },
+        [viewHeight, viewWidth, onLayout]
+    );
+
+    const finalStyle = useMemo(() => [style, propStyle], [style, propStyle]);
+
+    return (
+        <GestureDetector gesture={compositeGesture}>
+            <Animated.View onLayout={internalOnLayout} style={finalStyle}>
+                {children}
+            </Animated.View>
+        </GestureDetector>
+    );
+}

package/src/SimpleImageSlider.tsx

@@ -0,0 +1,72 @@
+import React, { forwardRef, useCallback, useRef, useState } from 'react';
+import { FlashList } from '@shopify/flash-list';
+import mergeRefs from 'merge-refs';
+import FullScreenImageSlider from './FullScreenImageSlider';
+import BaseListImageSlider, {
+    type BaseSimpleImageSliderProps,
+    type SimpleImageSliderItem,
+} from './BaseSimpleImageSlider';
+
+export type SimpleImageSliderProps = BaseSimpleImageSliderProps & {
+    fullScreenEnabled?: boolean;
+};
+
+const SimpleImageSlider = forwardRef<FlashList<SimpleImageSliderItem>, SimpleImageSliderProps>(
+    function ListImageSlider(
+        { data, fullScreenEnabled = false, onItemPress, onViewableItemChange, ...props },
+        ref
+    ) {
+        const listRef = useRef<FlashList<SimpleImageSliderItem>>(null);
+        const fullScreenListRef = useRef<FlashList<SimpleImageSliderItem>>(null);
+
+        const [fullScreen, setFullScreen] = useState(false);
+        const [currentIndex, setCurrentIndex] = useState(0);
+
+        const internalOnViewableItemChange = useCallback(
+            (index: number) => {
+                setCurrentIndex(index);
+                onViewableItemChange?.(index);
+            },
+            [onViewableItemChange]
+        );
+
+        const onFullScreenViewableItemChange = useCallback((index: number) => {
+            setCurrentIndex(index);
+        }, []);
+
+        const openFullScreen = useCallback(() => {
+            setFullScreen(true);
+        }, []);
+
+        const onRequestClose = useCallback(() => {
+            listRef.current?.scrollToIndex({ index: currentIndex });
+            setFullScreen(false);
+        }, [currentIndex]);
+
+        return (
+            <>
+                <BaseListImageSlider
+                    {...props}
+                    data={data}
+                    ref={mergeRefs(ref, listRef)}
+                    onItemPress={onItemPress ?? openFullScreen}
+                    onViewableItemChange={internalOnViewableItemChange}
+                />
+                {fullScreenEnabled ? (
+                    <FullScreenImageSlider
+                        {...props}
+                        ref={fullScreenListRef}
+                        open={fullScreen}
+                        onRequestClose={onRequestClose}
+                        data={data}
+                        showPageCounter={false}
+                        indexOverride={currentIndex}
+                        onViewableItemChange={onFullScreenViewableItemChange}
+                    />
+                ) : null}
+            </>
+        );
+    }
+);
+
+export default SimpleImageSlider;

package/src/StyledComponentsThemeProvider.tsx

@@ -0,0 +1,48 @@
+import React, { type PropsWithChildren, useMemo } from 'react';
+import { type DefaultTheme, ThemeProvider } from 'styled-components/native';
+
+export default function StyledComponentsThemeProvider({ children }: PropsWithChildren) {
+    const styles = useMemo(
+        () => ({
+            spacing: {
+                xxs: 2,
+                xs: 4,
+                s: 8,
+                m: 16,
+                l: 20,
+                xl: 40,
+            },
+            borderRadius: {
+                xs: 2,
+                s: 4,
+                m: 8,
+                l: 16,
+                xl: 24,
+            },
+            borderWidth: {
+                xs: 1,
+                s: 2,
+                m: 4,
+                l: 8,
+                xl: 16,
+            },
+        }),
+
+        []
+    );
+
+    const theme: DefaultTheme = useMemo(
+        () => ({
+            colors: {
+                pageCounterBackground: '#D3D3D3',
+                pageCounterBorder: '#000000',
+                fullScreenCloseButton: '#FFFFFF',
+                descriptionContainerBorder: '#FFFFFF',
+            },
+            styles,
+        }),
+        [styles]
+    );
+
+    return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+}

package/src/index.tsx

@@ -0,0 +1,14 @@
+import StyledComponentsThemeProvider from './StyledComponentsThemeProvider';
+import BaseListImageSlider, { type BaseSimpleImageSliderProps } from './BaseSimpleImageSlider';
+import SimpleImageSlider, { type SimpleImageSliderProps } from './SimpleImageSlider';
+import FullScreenImageSlider, { type FullScreenImageSliderProps } from './FullScreenImageSlider';
+
+export {
+    StyledComponentsThemeProvider as SimpleImageSliderThemeProvider,
+    BaseListImageSlider,
+    type BaseSimpleImageSliderProps,
+    SimpleImageSlider,
+    type SimpleImageSliderProps,
+    FullScreenImageSlider,
+    type FullScreenImageSliderProps,
+};

package/src/utils/clamp.ts

@@ -0,0 +1,4 @@
+export const clamp = (value: number, min: number, max: number) => {
+    'worklet';
+    return Math.min(Math.max(value, min), max);
+};

package/src/utils/renderProp.tsx

@@ -0,0 +1,22 @@
+import React, { isValidElement } from 'react';
+
+export type RenderProp =
+    | React.ComponentType<unknown>
+    | React.ReactElement
+    | string
+    | undefined
+    | null;
+
+export default function renderProp(Component: RenderProp) {
+    return Component ? (
+        typeof Component === 'string' ? (
+            Component
+        ) : isValidElement(Component) ? (
+            Component
+        ) : (
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            <Component />
+        )
+    ) : null;
+}