📸 پیش نمایش تصویر خیره کننده در React Native – کشویی و چرخش! 🚀

import {
  FlatList,
  Image,
  Modal,
  StyleSheet,
  TouchableOpacity,
  useWindowDimensions,
  View,
} from 'react-native';
import React, {useCallback, useState, useRef} from 'react';
import {CloseIcon, RotateIcon} from '../../assets';

const ImagePreview = ({flatListRef, data, selectedIndex, closePreview}) => {
  const {width, height} = useWindowDimensions();
  const listRef = useRef(null);
  const [currentIndex, setCurrentIndex] = useState(selectedIndex || 0);
  const [rotationMap, setRotationMap] = useState({});

  const rotateImage = () => {
    setRotationMap(prev => ({
      ...prev,
      [currentIndex]: prev[currentIndex] === 90 ? 0 : 90,
    }));
  };

  const renderItem = useCallback(
    ({item, index}) => {
      const rotation = rotationMap[index] || 0;
      return (
        
          
        
      );
    },
    [rotationMap],
  );

  const onMomentumScrollEnd = useCallback(
    event => {
      const newIndex = Math.round(event.nativeEvent.contentOffset.x / width);
      setCurrentIndex(newIndex);
    },
    [width],
  );

  const getItemLayout = useCallback(
    (_, index) => ({
      length: width,
      offset: width * index,
      index,
    }),
    [width],
  );

  return (
    
      
        
          
        
        
          
        

         0}
          keyExtractor={(_, index) => index.toString()}
          initialScrollIndex={selectedIndex}
          getItemLayout={getItemLayout}
          onMomentumScrollEnd={onMomentumScrollEnd}
          showsHorizontalScrollIndicator={false}
          renderItem={renderItem}
        />
      
    
  );
};

export default ImagePreview;

const styles = StyleSheet.create({
  imageContainer: (width, height) => ({
    width: width - 40,
    height,
    justifyContent: 'center',
    alignItems: 'center',
    marginHorizontal: 20,
  }),
  image: (width, height, rotation) => ({
    width: rotation % 180 === 0 ? width - 40 : height - 340,
    height: rotation % 180 === 0 ? height - 340 : width - 40,
    resizeMode: rotation % 180 === 0 ? 'cover' : 'contain',
    transform: [{rotate: `${rotation}deg`}],
    borderRadius: 14,
  }),
  closeButton: {
    position: 'absolute',
    top: 70,
    right: 20,
    zIndex: 10,
  },
  rotateButton: {
    position: 'absolute',
    top: 70,
    left: 20,
    zIndex: 10,
  },
  modalContainer: {
    flex: 1,
    backgroundColor: '#000000D0',
    justifyContent: 'center',
    alignItems: 'center',
  },
});

import {
  FlatList,
  Image,
  StyleSheet,
  TouchableOpacity,
  View,
} from 'react-native';
import React, { useCallback, useState, useRef, useMemo } from 'react';
import { metaData } from '../../screens/CarouselBackgroundAnimation/data';
import ImagePreview from './ImagePreview';

const ImageView = () => {
  const [selectedIndex, setSelectedIndex] = useState(null);
  const flatListRef = useRef(null);

  const handlePreview = (index = null) => setSelectedIndex(index);

  const renderItem = useCallback(
    ({ item, index }) => (
       handlePreview(index)}
        activeOpacity={0.8}
      >
        
      
    ),
    []
  );

  const keyExtractor = useCallback((_, index) => index.toString(), []);

  const memoizedFlatList = useMemo(
    () => (
      
    ),
    [renderItem]
  );

  return (
    
      {memoizedFlatList}
      {selectedIndex !== null && (
         handlePreview(null)}
        />
      )}
    
  );
};

export default ImageView;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  imageContainer: {
    alignSelf: 'center',
    borderRadius: 14,
    overflow: 'hidden',
  },
  imageStyle: {
    width: 250,
    height: 400,
    borderRadius: 14,
  },
  contentContainerStyle: {
    gap: 24,
    paddingHorizontal: 24,
  },
});