React Native에서 슬라이더 구현하기: react-native-reanimated-carousel 가이드

목차

1. 패키지 설치

2. 코드 예제

 

---

 

react-native-reanimated-carousel 이란?

• react-native-reanimated-carousel은 React Native에서 고성능 애니메이션 슬라이더를 구현할 수 있는 라이브러리입니다.
• React Native Reanimated의 강력한 애니메이션 기능을 활용해 부드럽고 자연스러운 전환을 제공합니다.
• 특히 프레임 드롭 없이 안정적인 슬라이더를 구현할 수 있어 사용자 경험을 크게 향상시킵니다.

 

---

1. 패키지 설치

1-1. 패키지 설치를 합니다.

npm install react-native-reanimated-carousel react-native-reanimated react-native-gesture-handler

 

1-2. babel.config.js 파일에 아래와 같이 플러그인을 추가 합니다.

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ['react-native-reanimated/plugin'], // 플러그인 추가
};

 

2. 코드 예제

2-1. 슬라이더에 사용할 샘 플 데이터 준비

const data = [
  { id: 1, color: '#FF5733' },
  { id: 2, color: '#33FF57' },
  { id: 3, color: '#3357FF' },
];

 

2-2. 슬라이더 컴포넌트 구현

import React from 'react';
import { View, StyleSheet } from 'react-native';
import Carousel from 'react-native-reanimated-carousel';

const data = [
  { id: 1, color: '#FF5733' },
  { id: 2, color: '#33FF57' },
  { id: 3, color: '#3357FF' },
];

const App = () => {
  return (
    <Carousel
      loop
      width={300}
      height={200}
      autoPlay
      data={data}
      scrollAnimationDuration={1000}
      renderItem={({ item }) => (
        <View style={[styles.slide, { backgroundColor: item.color }]} />
      )}
    />
  );
};

const styles = StyleSheet.create({
  slide: {
    flex: 1,
    borderRadius: 10,
  },
});

export default App;

 

 

 

 

2-3. 옵션

• react-native-reanimated-carousel은 다양한 옵션을 지원합니다.
• 아래는 주요 옵션과 사용 방법입니다.

loop	슬라이더를 반복 여부 설정
autoPlay	자동 재생 활성화
autoPlayInterval	자동 전환 간격 (밀리초 단위)
scrollAnimationDuration	슬라이더 전환 애니메이션 시간 설정
mode	전환 효과 (parallax, default 등)

 

- 옵션을 사용한 예제 입니다.

<Carousel
  data={data}
  width={350}
  height={200}
  loop={true}
  autoPlay={true}
  autoPlayInterval={2000} // 2초 간격으로 전환
  mode="parallax" // 파랄랙스 효과 추가
  scrollAnimationDuration={800}
/>

 

 

 

---

 

* 이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.