react-native-image-carrousel

Un componente de carrusel de imágenes con perspectiva 3D de alto rendimiento para React Native, desarrollado con Reanimated 4. Optimizado para transiciones fluidas y control total mediante una API imperativa.

Características

• Efecto 3D Real: Rotación y escalado dinámico basados en la posición del scroll.
• API Imperativa: Controla el carrusel (siguiente, anterior, ir a índice) mediante useRef.
• Sincronización de Estado: Notifica cambios de índice al hilo de JavaScript de forma eficiente.

Soporte de Plataformas

| Plataforma | Estado | | :---------- | :----------------------- | | Android | ✅ Soportado | | iOS | ✅ Soportado | | Web | ⚠️ Experimental |

Instalación

El carrousel depende de Reanimated 4 por favor sigan la guía de instalación oficial.

Ejemplo de uso

import React, { useState, useRef } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { Carrousel, CarrouselMethods } from 'react-native-image-carrousel';

const images = [
  { key: '1', src: '[https://picsum.photos/id/1/400/300](https://picsum.photos/id/1/400/300)' },
  { key: '2', src: '[https://picsum.photos/id/2/400/300](https://picsum.photos/id/2/400/300)' },
];

export default function App() {
  const [index, setIndex] = useState(0);
  const carrouselRef = useRef<CarrouselMethods>(null);

  return (
    <View style={{ flex: 1 }}>
      <Carrousel
        ref={carrouselRef}
        data={images}
        onIndexChange={setIndex}
      />
      
      <View style={{ flexDirection: 'row', justifyContent: 'space-around', marginTop: 20 }}>
        <TouchableOpacity onPress={() => carrouselRef.current?.slidePrev()}>
          <Text>Anterior</Text>
        </TouchableOpacity>

        <Text>Imagen: {index + 1}</Text>

        <TouchableOpacity onPress={() => carrouselRef.current?.slideNext()}>
          <Text>Siguiente</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}