react-native-image-carousel

RN Image Carousel using Native

Installation

1yarn add @millo-l/react-native-image-carousel
2
3cd 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

1import { useMemo, useRef, useState } from 'react';
2import { StyleSheet, ScrollView, TouchableOpacity, Text } from 'react-native';
3import RNImageCarousel, {
4  type RNImageCarouselRef,
5} from '@millo-l/react-native-image-carousel';
6
7export default function App() {
8  const ref = useRef<RNImageCarouselRef>(null);
9  const [index, setIndex] = useState<number>(0);
10  const data = useMemo(
11    () =>
12      [
13        'https://picsum.photos/id/237/536/354',
14        'https://picsum.photos/seed/picsum/536/354',
15        'https://picsum.photos/id/1084/536/354?grayscale',
16      ].map((url) => ({ imgUrl: url })),
17    []
18  );
19
20  return (
21    <ScrollView style={styles.container}>
22      <RNImageCarousel
23        ref={ref}
24        data={data}
25        style={styles.carousel}
26        autoPlay
27        interval={1500}
28        onPressImage={console.log}
29        onChangeIndex={setIndex}
30      />
31      <TouchableOpacity onPress={() => ref.current?.scrollToIndex(2)}>
32        <Text>click: scrollToIndex(2)</Text>
33      </TouchableOpacity>
34      <Text>currentIndex: {index}</Text>
35    </ScrollView>
36  );
37}
38
39const styles = StyleSheet.create({
40  container: {
41    flex: 1,
42  },
43  carousel: {
44    width: '100%',
45    height: 300,
46    backgroundColor: 'green',
47    borderRadius: 20,
48    overflow: 'hidden',
49  },
50});

TODO

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

License

MIT

---

Made with create-react-native-library