react-native-image-carousel

RN Image Carousel using Native

Installation

yarn add @millo-l/react-native-image-carousel

cd ios && pod install --repo-update && cd ..

Props

| 이름 | 설명 | 타입 | 필수 | | ----------- | --------------------------------- | ----------------------------------------------------------------------------------------------------- | ---- | | data | 이미지 리스트 | T & { imgUrl: string } | O | | autoPlay | 콘텐츠 클릭 시 이동할 링크 정보 | boolean | X | | interval | 자동 스크롤 인터벌 (ms 단위) | string | X | | onPressImage | 콘텐츠의 상세 설명 | (item: T & { imgUrl: string }, index: number) => void | X | | onChangeIndex | 콘텐츠의 이미지 너비 (단위: 픽셀) | (index: number) => void | X |

Refs

| 이름 | 설명 | 타입 | | ----------- | --------------------------------- | ----------------------------------------------------------------------------------------------------- | | scrollToIndex | index로 애니메이션 이동 | ref.current?.scrollToIndex(index: number) |

Usage

import { useMemo, useRef, useState } from 'react';
import { StyleSheet, ScrollView, TouchableOpacity, Text } from 'react-native';
import RNImageCarousel, {
  type RNImageCarouselRef,
} from '@millo-l/react-native-image-carousel';

export default function App() {
  const ref = useRef<RNImageCarouselRef>(null);
  const [index, setIndex] = useState<number>(0);
  const data = useMemo(
    () =>
      [
        'https://picsum.photos/id/237/536/354',
        'https://picsum.photos/seed/picsum/536/354',
        'https://picsum.photos/id/1084/536/354?grayscale',
      ].map((url) => ({ imgUrl: url })),
    []
  );

  return (
    <ScrollView style={styles.container}>
      <RNImageCarousel
        ref={ref}
        data={data}
        style={styles.carousel}
        autoPlay
        interval={1500}
        onPressImage={console.log}
        onChangeIndex={setIndex}
      />
      <TouchableOpacity onPress={() => ref.current?.scrollToIndex(2)}>
        <Text>click: scrollToIndex(2)</Text>
      </TouchableOpacity>
      <Text>currentIndex: {index}</Text>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  carousel: {
    width: '100%',
    height: 300,
    backgroundColor: 'green',
    borderRadius: 20,
    overflow: 'hidden',
  },
});

TODO

• [ ] Fabric + Turbo Module 지원
• [ ] Detox e2e 테스트 지원

License

MIT

Made with create-react-native-library