React Native Carousel with Shimmer & Reanimated 🎠

A custom, lightweight and smooth carousel component for React Native.
Includes built-in Reanimated transitions and Shimmer loading effect for image placeholders.

✨ Features

• ✅ Horizontal image carousel using FlatList
• 🌀 Smooth animations (scale + opacity) with react-native-reanimated
• ⚡ Shimmer loading effect while images are loading (custom implementation)
• 🎯 Fully customizable: height, border radius, autoplay interval, pagination
• 🔧 Written in TypeScript
• 📦 No extra UI libraries required

📦 Installation

1. Install the package and its peer dependencies

npm install rn-carousel-shimmer react-native-reanimated react-native-linear-gradient

or using yarn:

yarn add rn-carousel-shimmer react-native-reanimated react-native-linear-gradient

⚙️ Configuration (iOS & Android)

This package depends on two native libraries:
react-native-reanimated and
react-native-linear-gradient

Make sure you follow their official setup guides:

🧠 Babel Configuration for Reanimated

In your babel.config.js, add this line at the end of plugins:

plugins: ['react-native-reanimated/plugin']

🍏 iOS Setup

1. Go to the iOS folder and install pods:

cd ios && pod install

2. Ensure your Podfile sets the platform version to:

platform :ios, '12.0'

More details:
📄 https://github.com/react-native-linear-gradient/react-native-linear-gradient
📄 https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/

🤖 Android Setup

1. In your android/gradle.properties file, add:

JSI_DISABLE_ERROR_ON_PURE_JS_IMPLEMENTATION=true

2. Optionally, clean and rebuild your project.

More details:
📄 https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/

🚀 Usage

import React from 'react';
import { View } from 'react-native';
import { ImageCarousel } from 'rn-carousel-shimmer';

const data = [
  { id: '1', image: 'https://picsum.photos/800/400?1' },
  { id: '2', image: 'https://picsum.photos/800/400?2' },
  { id: '3', image: 'https://picsum.photos/800/400?3' }
];

const App = () => (
  <View style={{ flex: 1 }}>
    <ImageCarousel
      data={data}
      height={220}
      borderRadius={16}
      autoPlay
      autoPlayInterval={4000}
      showDots
    />
  </View>
);

export default App;

🧩 Props

| Prop | Type | Default | Description | |--------------------|-------------|---------|-------------| | data | Item[] | — | Array of { id: string, image: string, onPress?: () => void } | | height | number | 200 | Height of the carousel item | | borderRadius | number | 12 | Image border radius | | autoPlay | boolean | true | Enables auto sliding | | autoPlayInterval | number | 3000 | Interval between slides (ms) | | showDots | boolean | true | Whether to show pagination dots |

📚 Documentation

• 📘 react-native-reanimated
• 🎨 react-native-linear-gradient
• 📦 React Native FlatList

🤝 Contributing

Pull requests and stars are welcome 🙌
If you have suggestions or want new features, feel free to open an issue.

📄 License

MIT
Made with ❤️ by Faruk
GitHub Repo