npm package: @millo-l/react-native-image-carousel
Description: RN Image Carousel using Native
Author: millo-L
Latest version: 1.0.5

# react-native-image-carousel

RN Image Carousel using Native

## Installation

```sh
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


```js
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](https://github.com/callstack/react-native-builder-bob)