react-native-gesture-image-viewer 0.5.1 → 0.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gesture-image-viewer",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "🖼️ A highly customizable and easy-to-use React Native image viewer with gesture support and external controls",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -13,7 +13,6 @@
     "./package.json": "./package.json"
   },
   "files": [
-    "src",
     "lib",
     "android",
     "ios",

package/src/GestureImageViewer.tsx

@@ -1,165 +0,0 @@
-import { useCallback, useEffect, useMemo } from 'react';
-import { type FlatList, Platform, type ScrollViewProps, StyleSheet, useWindowDimensions, View } from 'react-native';
-import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler';
-import Animated from 'react-native-reanimated';
-import { registry } from './ImageViewerRegistry';
-import type { GestureImageViewerProps } from './types';
-import { useGestureImageViewer } from './useGestureImageViewer';
-import { isFlashListLike, isFlatListLike, isScrollViewLike } from './utils';
-
-const WebPagingFix = () => {
-  if (Platform.OS !== 'web') {
-    return null;
-  }
-
-  return <style>{`[data-paging-enabled-fix] > div > div > div {height: 100%;}`}</style>;
-};
-
-export function GestureImageViewer<T = any, LC = typeof FlatList>({
-  id = 'default',
-  data,
-  renderImage,
-  renderContainer,
-  ListComponent,
-  width: customWidth,
-  listProps,
-  backdropStyle: backdropStyleProps,
-  containerStyle,
-  initialIndex = 0,
-  itemSpacing = 0,
-  ...props
-}: GestureImageViewerProps<T, LC>) {
-  const Component = ListComponent as React.ComponentType<any>;
-
-  const { width: screenWidth } = useWindowDimensions();
-
-  const width = customWidth || screenWidth;
-
-  const { listRef, isZoomed, dismissGesture, zoomGesture, onMomentumScrollEnd, animatedStyle, backdropStyle } =
-    useGestureImageViewer({
-      id,
-      data,
-      width,
-      initialIndex,
-      itemSpacing,
-      ...props,
-    });
-
-  const renderItem = useCallback(
-    ({ item, index }: { item: T; index: number }) => {
-      return (
-        <View
-          key={typeof item === 'string' ? item : index}
-          style={[
-            {
-              width: width,
-              height: '100%',
-              justifyContent: 'center',
-              alignItems: 'center',
-              marginHorizontal: itemSpacing / 2,
-            },
-          ]}
-        >
-          {renderImage(item, index)}
-        </View>
-      );
-    },
-    [width, itemSpacing, renderImage],
-  );
-
-  const getItemLayout = useCallback(
-    (_: ArrayLike<T> | null | undefined, index: number) => ({
-      length: width + itemSpacing,
-      offset: (width + itemSpacing) * index,
-      index,
-    }),
-    [width, itemSpacing],
-  );
-
-  const keyExtractor = useCallback(
-    (item: T, index: number) => (typeof item === 'string' ? item : `image-${index}`),
-    [],
-  );
-
-  const gesture = useMemo(() => {
-    return Gesture.Race(dismissGesture, zoomGesture);
-  }, [zoomGesture, dismissGesture]);
-
-  useEffect(() => {
-    registry.createManager(id);
-
-    return () => registry.deleteManager(id);
-  }, [id]);
-
-  const commonProps: ScrollViewProps = useMemo(
-    () => ({
-      horizontal: true,
-      scrollEnabled: !isZoomed,
-      showsHorizontalScrollIndicator: false,
-      onMomentumScrollEnd: onMomentumScrollEnd,
-      snapToInterval: width + itemSpacing,
-      snapToAlignment: 'center',
-      decelerationRate: 'fast',
-      scrollEventThrottle: 16,
-      removeClippedSubviews: true,
-    }),
-    [width, itemSpacing, isZoomed, onMomentumScrollEnd],
-  );
-
-  const listComponent = (
-    <GestureHandlerRootView>
-      <GestureDetector gesture={gesture}>
-        <View style={[styles.container, containerStyle]}>
-          <Animated.View style={[styles.background, backdropStyleProps, backdropStyle]} />
-          <Animated.View style={[styles.content, animatedStyle]}>
-            {isScrollViewLike(Component) ? (
-              <Component ref={listRef} {...commonProps} {...listProps}>
-                {data.map((item, index) => renderItem({ item, index }))}
-              </Component>
-            ) : (
-              isFlatListLike(Component) && (
-                <Component
-                  ref={listRef}
-                  {...commonProps}
-                  data={data}
-                  renderItem={renderItem}
-                  initialScrollIndex={initialIndex}
-                  keyExtractor={keyExtractor}
-                  windowSize={3}
-                  maxToRenderPerBatch={3}
-                  getItemLayout={getItemLayout}
-                  {...(isFlashListLike(Component) && { estimatedItemSize: width + itemSpacing })}
-                  // NOTE - https://github.com/necolas/react-native-web/issues/1299
-                  {...(Platform.OS === 'web' && { dataSet: { 'paging-enabled-fix': true } })}
-                  {...listProps}
-                />
-              )
-            )}
-          </Animated.View>
-          <WebPagingFix />
-        </View>
-      </GestureDetector>
-    </GestureHandlerRootView>
-  );
-
-  return renderContainer ? renderContainer(listComponent) : listComponent;
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  content: {
-    flex: 1,
-    width: '100%',
-    height: '100%',
-  },
-  background: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    backgroundColor: 'black',
-  },
-});

package/src/ImageViewerManager.ts

@@ -1,103 +0,0 @@
-export type ImageViewerManagerState = {
-  currentIndex: number;
-  dataLength: number;
-};
-
-class ImageViewerManager {
-  private currentIndex = 0;
-  private dataLength = 0;
-  private width = 0;
-  private listRef: any | null = null;
-  private enableSwipeGesture = true;
-  private listeners = new Set<(state: ImageViewerManagerState) => void>();
-
-  // private updateState(newState: Partial<any>) {
-  //   Object.assign(this, newState);
-  //   this.notifyListeners();
-  // }
-
-  private notifyListeners() {
-    const state = this.getState();
-
-    this.listeners.forEach((listener) => listener(state));
-  }
-
-  subscribe(listener: (state: ImageViewerManagerState) => void) {
-    this.listeners.add(listener);
-
-    return () => {
-      this.listeners.delete(listener);
-    };
-  }
-
-  getState() {
-    return {
-      currentIndex: this.currentIndex,
-      dataLength: this.dataLength,
-    };
-  }
-
-  setWidth(width: number) {
-    this.width = width;
-  }
-
-  setListRef(ref: any) {
-    this.listRef = ref;
-  }
-
-  setDataLength(length: number) {
-    this.dataLength = length;
-  }
-
-  setEnableSwipeGesture(enabled: boolean) {
-    this.enableSwipeGesture = enabled;
-  }
-
-  setCurrentIndex(index: number) {
-    if (index !== this.currentIndex) {
-      this.currentIndex = index;
-    }
-  }
-
-  notifyStateChange() {
-    this.notifyListeners();
-  }
-
-  goToIndex = (index: number) => {
-    if (index < 0 || index >= this.dataLength || !this.enableSwipeGesture || !this.listRef) {
-      return;
-    }
-
-    this.currentIndex = index;
-
-    if (this.listRef.scrollToIndex) {
-      this.listRef.scrollToIndex({ index, animated: true });
-    } else if (this.listRef.scrollTo) {
-      this.listRef.scrollTo({ x: index * this.width, animated: true });
-    }
-
-    this.notifyListeners();
-  };
-
-  goToPrevious = () => {
-    if (this.currentIndex > 0) {
-      this.goToIndex(this.currentIndex - 1);
-    }
-  };
-
-  goToNext = () => {
-    if (this.currentIndex < this.dataLength - 1) {
-      this.goToIndex(this.currentIndex + 1);
-    }
-  };
-
-  cleanUp() {
-    this.listeners.clear();
-    this.listRef = null;
-    this.enableSwipeGesture = true;
-    this.currentIndex = 0;
-    this.dataLength = 0;
-  }
-}
-
-export default ImageViewerManager;

package/src/ImageViewerRegistry.ts

@@ -1,66 +0,0 @@
-import ImageViewerManager from './ImageViewerManager';
-
-class ImageViewerRegistry {
-  private managers = new Map<string, ImageViewerManager>();
-  private subscribers = new Map<string, Set<(manager: ImageViewerManager | null) => void>>();
-
-  subscribeToManager(id: string, callback: (manager: ImageViewerManager | null) => void) {
-    if (!this.subscribers.has(id)) {
-      this.subscribers.set(id, new Set());
-    }
-
-    this.subscribers.get(id)?.add(callback);
-
-    const manager = this.managers.get(id) || null;
-
-    callback(manager);
-
-    return () => {
-      const subscribers = this.subscribers.get(id);
-
-      subscribers?.delete(callback);
-
-      if (subscribers && subscribers.size === 0) {
-        this.subscribers.delete(id);
-      }
-    };
-  }
-
-  createManager(id: string): ImageViewerManager | null {
-    if (this.managers.has(id)) {
-      return this.managers.get(id) || null;
-    }
-
-    const manager = new ImageViewerManager();
-    this.managers.set(id, manager);
-
-    this.notifySubscribers(id, manager);
-
-    return manager;
-  }
-
-  getManager(id: string): ImageViewerManager | null {
-    return this.managers.get(id) || null;
-  }
-
-  deleteManager(id: string) {
-    const manager = this.managers.get(id);
-
-    if (manager) {
-      manager.cleanUp();
-      this.managers.delete(id);
-
-      this.notifySubscribers(id, null);
-    }
-  }
-
-  notifySubscribers(id: string, manager: ImageViewerManager | null) {
-    const listeners = this.subscribers.get(id);
-
-    if (listeners) {
-      [...listeners].forEach((callback) => callback(manager));
-    }
-  }
-}
-
-export const registry = new ImageViewerRegistry();

package/src/index.tsx

@@ -1,3 +0,0 @@
-export { GestureImageViewer } from './GestureImageViewer';
-export type { GestureImageViewerProps } from './types';
-export { useImageViewerController } from './useImageViewerController';

package/src/types.ts

@@ -1,41 +0,0 @@
-import type React from 'react';
-import type { FlatList as RNFlatList, ScrollView as RNScrollView, StyleProp, ViewStyle } from 'react-native';
-import type { FlatList as GHFlatList, ScrollView as GHScrollView } from 'react-native-gesture-handler';
-
-export type FlatListComponent = typeof RNFlatList | typeof GHFlatList;
-export type ScrollViewComponent = typeof RNScrollView | typeof GHScrollView;
-
-type GetComponentProps<T> = T extends React.ComponentType<infer P> ? P : never;
-
-type ConditionalListProps<LC> = LC extends FlatListComponent
-  ? React.ComponentProps<LC>
-  : LC extends ScrollViewComponent
-    ? React.ComponentProps<LC>
-    : GetComponentProps<LC>;
-
-export interface GestureImageViewerProps<T = any, LC = typeof RNFlatList> {
-  id?: string;
-  data: T[];
-  initialIndex?: number;
-  onIndexChange?: (index: number) => void;
-  onDismiss?: () => void;
-  renderImage: (item: T, index: number) => React.ReactElement;
-  renderContainer?: (children: React.ReactElement) => React.ReactElement;
-  ListComponent: LC;
-  width?: number;
-  dismissThreshold?: number;
-  // swipeThreshold?: number;
-  // velocityThreshold?: number;
-  enableDismissGesture?: boolean;
-  enableSwipeGesture?: boolean;
-  resistance?: number;
-  listProps?: Partial<ConditionalListProps<LC>>;
-  backdropStyle?: StyleProp<ViewStyle>;
-  containerStyle?: StyleProp<ViewStyle>;
-  animateBackdrop?: boolean;
-  enableZoomPanGesture?: boolean;
-  enableZoomGesture?: boolean;
-  enableDoubleTapGesture?: boolean;
-  maxZoomScale?: number;
-  itemSpacing?: number;
-}

package/src/useGestureImageViewer.ts

@@ -1,346 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import {
-  InteractionManager,
-  type NativeScrollEvent,
-  type NativeSyntheticEvent,
-  useWindowDimensions,
-} from 'react-native';
-import { Gesture } from 'react-native-gesture-handler';
-import {
-  Easing,
-  interpolate,
-  runOnJS,
-  useAnimatedReaction,
-  useAnimatedStyle,
-  useSharedValue,
-  withSpring,
-  withTiming,
-} from 'react-native-reanimated';
-import type ImageViewerManager from './ImageViewerManager';
-import { registry } from './ImageViewerRegistry';
-import type { GestureImageViewerProps } from './types';
-
-type UseGestureImageViewerProps<T = any> = Omit<
-  GestureImageViewerProps<T>,
-  'renderImage' | 'renderContainer' | 'ListComponent' | 'listProps' | 'containerStyle' | 'backdropStyle'
->;
-
-export const useGestureImageViewer = <T = any>({
-  data,
-  initialIndex = 0,
-  onIndexChange,
-  onDismiss,
-  width: customWidth,
-  dismissThreshold = 80,
-  resistance = 2,
-  // swipeThreshold = 0.5,
-  // velocityThreshold = 200,
-  animateBackdrop = true,
-  enableDismissGesture = true,
-  enableSwipeGesture = true,
-  enableZoomGesture = true,
-  enableDoubleTapGesture = true,
-  enableZoomPanGesture = true,
-  maxZoomScale = 2,
-  itemSpacing = 0,
-  id = 'default',
-}: UseGestureImageViewerProps<T>) => {
-  const { width: screenWidth, height: screenHeight } = useWindowDimensions();
-  const width = customWidth || screenWidth;
-
-  const [isZoomed, setIsZoomed] = useState(false);
-
-  const [currentIndex, setCurrentIndex] = useState(initialIndex);
-  const [manager, setManager] = useState<ImageViewerManager | null>(null);
-
-  const unsubscribeRef = useRef<(() => void) | null>(null);
-
-  const initialTranslateY = useSharedValue(0);
-  const initialTranslateX = useSharedValue(0);
-  const startScale = useSharedValue(1);
-
-  const translateY = useSharedValue(0);
-  const translateX = useSharedValue(0);
-  const scale = useSharedValue(1);
-  const backdropOpacity = useSharedValue(1);
-
-  const listRef = useRef<any>(null);
-
-  const dataLength = data?.length || 0;
-
-  useAnimatedReaction(
-    () => scale.value,
-    (currentScale) => {
-      runOnJS(setIsZoomed)(currentScale > 1);
-    },
-  );
-
-  useEffect(() => {
-    const handleManagerChange = (manager: ImageViewerManager | null) => {
-      unsubscribeRef.current?.();
-      unsubscribeRef.current = null;
-
-      setManager(manager);
-
-      if (manager) {
-        setCurrentIndex(manager.getState().currentIndex);
-        unsubscribeRef.current = manager.subscribe((state) => {
-          setCurrentIndex(state.currentIndex);
-        });
-        return;
-      }
-
-      setCurrentIndex(0);
-    };
-
-    const unsubscribeFromRegistry = registry.subscribeToManager(id, handleManagerChange);
-
-    return () => {
-      unsubscribeFromRegistry();
-      unsubscribeRef.current?.();
-    };
-  }, [id]);
-
-  useEffect(() => {
-    if (!manager) {
-      return;
-    }
-
-    manager.setDataLength(dataLength);
-    manager.setEnableSwipeGesture(enableSwipeGesture);
-    manager.setCurrentIndex(initialIndex);
-    manager.setWidth(width + itemSpacing);
-    manager.notifyStateChange();
-  }, [dataLength, enableSwipeGesture, initialIndex, manager, width, itemSpacing]);
-
-  useEffect(() => {
-    if (!manager || !listRef.current) {
-      return;
-    }
-
-    manager.setListRef(listRef.current);
-  }, [manager]);
-
-  useEffect(() => {
-    onIndexChange?.(currentIndex);
-  }, [currentIndex, onIndexChange]);
-
-  useEffect(() => {
-    translateY.value = 0;
-    translateX.value = 0;
-    scale.value = 1;
-    backdropOpacity.value = 1;
-    startScale.value = 1;
-
-    if (initialIndex <= 0 || !listRef.current) {
-      return;
-    }
-
-    const runAfterInteractions = InteractionManager.runAfterInteractions(() => {
-      if (listRef.current.scrollToIndex) {
-        listRef.current.scrollToIndex({
-          index: initialIndex,
-          animated: false,
-        });
-      } else if (listRef.current.scrollTo) {
-        listRef.current.scrollTo({
-          x: initialIndex * (width + itemSpacing),
-          animated: false,
-        });
-      }
-    });
-
-    return () => {
-      runAfterInteractions?.cancel();
-    };
-  }, [initialIndex, translateY, backdropOpacity, translateX, scale, startScale, width, itemSpacing]);
-
-  const onMomentumScrollEnd = useCallback(
-    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
-      if (!enableSwipeGesture) {
-        return;
-      }
-
-      const contentOffset = event.nativeEvent.contentOffset;
-      const newIndex = Math.round(contentOffset.x / (width + itemSpacing));
-
-      if (newIndex !== currentIndex && newIndex >= 0 && newIndex < dataLength) {
-        if (manager) {
-          manager.setCurrentIndex(newIndex);
-          setCurrentIndex(newIndex);
-          manager.notifyStateChange();
-        }
-
-        translateX.value = withTiming(0);
-        translateY.value = withTiming(0);
-        initialTranslateX.value = withTiming(0);
-        initialTranslateY.value = withTiming(0);
-        startScale.value = withTiming(1);
-        scale.value = withTiming(1);
-      }
-    },
-    [
-      manager,
-      currentIndex,
-      dataLength,
-      width,
-      itemSpacing,
-      enableSwipeGesture,
-      translateX,
-      translateY,
-      scale,
-      initialTranslateX,
-      initialTranslateY,
-      startScale,
-    ],
-  );
-
-  const dismissGesture = useMemo(() => {
-    return Gesture.Pan()
-      .minDistance(10)
-      .averageTouches(true)
-      .activeOffsetY([-10, 10])
-      .failOffsetX([-10, 10])
-      .enabled(!isZoomed)
-      .onUpdate((event) => {
-        translateY.value = event.translationY / resistance;
-      })
-      .onEnd((event) => {
-        'worklet';
-
-        if (event.translationY > dismissThreshold && enableDismissGesture && onDismiss) {
-          runOnJS(onDismiss)();
-          return;
-        }
-
-        translateY.value = withSpring(0, {
-          damping: 15,
-          stiffness: 150,
-        });
-      });
-  }, [translateY, dismissThreshold, enableDismissGesture, onDismiss, resistance, isZoomed]);
-
-  const zoomPinchGesture = useMemo(() => {
-    return Gesture.Pinch()
-      .enabled(enableZoomGesture)
-      .onBegin(() => {
-        startScale.value = scale.value;
-      })
-      .onUpdate((event) => {
-        scale.value = startScale.value * event.scale;
-      })
-      .onEnd(() => {
-        if (scale.value > maxZoomScale) {
-          scale.value = withTiming(maxZoomScale, {
-            duration: 300,
-            easing: Easing.bezier(0.25, 0.1, 0.25, 1.0),
-          });
-          return;
-        }
-
-        if (scale.value < 1) {
-          scale.value = withTiming(1, {
-            duration: 300,
-            easing: Easing.bezier(0.25, 0.1, 0.25, 1.0),
-          });
-          translateX.value = withTiming(0);
-          translateY.value = withTiming(0);
-        }
-      });
-  }, [scale, enableZoomGesture, maxZoomScale, translateX, translateY, startScale]);
-
-  const zoomPanGesture = useMemo(() => {
-    return Gesture.Pan()
-      .enabled(enableZoomPanGesture && isZoomed)
-      .onBegin(() => {
-        initialTranslateX.value = translateX.value;
-        initialTranslateY.value = translateY.value;
-      })
-      .onUpdate((event) => {
-        'worklet';
-
-        if (scale.value > 1) {
-          const maxTranslateX = (width * scale.value - width) / 2;
-          const maxTranslateY = (screenHeight * scale.value - screenHeight) / 2;
-
-          translateX.value = Math.max(
-            -maxTranslateX,
-            Math.min(maxTranslateX, initialTranslateX.value + event.translationX),
-          );
-          translateY.value = Math.max(
-            -maxTranslateY,
-            Math.min(maxTranslateY, initialTranslateY.value + event.translationY),
-          );
-        }
-      });
-  }, [
-    translateX,
-    translateY,
-    enableZoomPanGesture,
-    isZoomed,
-    scale,
-    initialTranslateX,
-    initialTranslateY,
-    width,
-    screenHeight,
-  ]);
-
-  const doubleTapGesture = useMemo(() => {
-    return Gesture.Tap()
-      .enabled(enableDoubleTapGesture)
-      .numberOfTaps(2)
-      .onEnd(() => {
-        const nextScale = scale.value > 1 ? 1 : maxZoomScale;
-
-        translateX.value = withTiming(0, {
-          duration: 300,
-          easing: Easing.bezier(0.25, 0.1, 0.25, 1.0),
-        });
-        translateY.value = withTiming(0, {
-          duration: 300,
-          easing: Easing.bezier(0.25, 0.1, 0.25, 1.0),
-        });
-
-        scale.value = withTiming(nextScale, {
-          duration: 300,
-          easing: Easing.bezier(0.25, 0.1, 0.25, 1.0),
-        });
-      });
-  }, [scale, enableDoubleTapGesture, maxZoomScale, translateX, translateY]);
-
-  const zoomGesture = useMemo(() => {
-    return Gesture.Simultaneous(zoomPinchGesture, zoomPanGesture, doubleTapGesture);
-  }, [zoomPinchGesture, zoomPanGesture, doubleTapGesture]);
-
-  const animatedStyle = useAnimatedStyle(() => {
-    return {
-      transform: [{ translateY: translateY.value }, { translateX: translateX.value }, { scale: scale.value }],
-    };
-  });
-
-  const backdropStyle = useAnimatedStyle(() => {
-    if (!animateBackdrop || scale.value > 1) {
-      return { opacity: 1 };
-    }
-
-    const opacity = interpolate(translateY.value, [0, 200], [1, 0], 'clamp');
-
-    return { opacity };
-  }, [animateBackdrop]);
-
-  return {
-    currentIndex,
-    dataLength,
-    translateY,
-    listRef,
-    isZoomed,
-
-    dismissGesture,
-    zoomGesture,
-
-    onMomentumScrollEnd,
-
-    animatedStyle,
-    backdropStyle,
-  };
-};

package/src/useImageViewerController.ts

@@ -1,48 +0,0 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
-import type ImageViewerManager from './ImageViewerManager';
-import type { ImageViewerManagerState } from './ImageViewerManager';
-import { registry } from './ImageViewerRegistry';
-
-export const useImageViewerController = (id = 'default') => {
-  const [state, setState] = useState<ImageViewerManagerState>({
-    currentIndex: 0,
-    dataLength: 0,
-  });
-
-  const [manager, setManager] = useState<ImageViewerManager | null>(null);
-  const unsubscribeRef = useRef<(() => void) | null>(null);
-
-  useEffect(() => {
-    const handleManagerChange = (newManager: ImageViewerManager | null) => {
-      unsubscribeRef.current?.();
-      unsubscribeRef.current = null;
-
-      setManager(newManager);
-
-      if (newManager) {
-        setState(newManager.getState());
-        unsubscribeRef.current = newManager.subscribe(setState);
-        return;
-      }
-
-      setState({ currentIndex: 0, dataLength: 0 });
-    };
-
-    const unsubscribeFromRegistry = registry.subscribeToManager(id, handleManagerChange);
-
-    return () => {
-      unsubscribeFromRegistry();
-      unsubscribeRef.current?.();
-    };
-  }, [id]);
-
-  const noopFunction = useMemo(() => () => {}, []);
-
-  return {
-    goToIndex: manager?.goToIndex || noopFunction,
-    goToPrevious: manager?.goToPrevious || noopFunction,
-    goToNext: manager?.goToNext || noopFunction,
-    currentIndex: state.currentIndex,
-    totalCount: state.dataLength,
-  };
-};

package/src/utils.ts

@@ -1,29 +0,0 @@
-import { FlatList as RNFlatList, ScrollView as RNScrollView } from 'react-native';
-import { FlatList as GestureFlatList, ScrollView as GestureScrollView } from 'react-native-gesture-handler';
-import type { FlatListComponent, ScrollViewComponent } from './types';
-
-export const isScrollViewLike = (component: any): component is ScrollViewComponent => {
-  return component === RNScrollView || component === GestureScrollView;
-};
-
-export const isFlatListLike = (component: any): component is FlatListComponent => {
-  if (component === RNFlatList || component === GestureFlatList || isFlashListLike(component)) {
-    return true;
-  }
-
-  return false;
-};
-
-export const isFlashListLike = (component: any): component is any => {
-  try {
-    const FlashList = require('@shopify/flash-list')?.FlashList;
-
-    if (FlashList && component === FlashList) {
-      return true;
-    }
-  } catch {
-    // do nothing
-  }
-
-  return component?.name === 'FlashList';
-};