📘 react-native-dynamic-banner-carousel

A cross-platform, highly customizable, auto-playing banner carousel component for React Native and React Web (React.js) using a single NPM package.

This library provides:

Smooth autoplay sliding Fully customizable dot indicators Shimmer loading placeholder (React Native) Gradient loader using react-native-linear-gradient Touch handling Works in React Native and React Web with zero changes

The package automatically loads:

index.native.js → for React Native index.js → for React Web (React.js, Vite, Next.js)

✨ Features ✔ Cross-Platform (React Native + Web)

One package, two platforms, automatically selected by the bundler.

✔ Shimmer Loader (React Native)

Smooth skeleton shimmer while images load.

✔ Smooth Autoplay

Automatically slides with customizable intervals.

✔ Custom Dot Indicators

Control size, color, spacing, and active styles.

✔ Touch Support (React Native)

Tap on banners to trigger callback actions.

✔ Responsive Layout

Web version auto-detects screen width. RN version uses the Dimensions API.

📦 Installation React Native Installation

Install the library and peer dependencies:

npm install react-native-dynamic-banner-carousel npm install pinar react-native-linear-gradient react-native-shimmer-placeholder

Run iOS pods (if needed) cd ios && pod install && cd ..

React Web Installation

Just install the package:

npm install react-native-dynamic-banner-carousel

⚠️ Tailwind CSS Setup (Web Only)

If you use this package inside a Tailwind Web project (Vite, React.js, Next.js), you MUST allow Tailwind to scan the package files.

Add this to tailwind.config.js:

module.exports = { content: [ "./index.html", "./src//*.{js,jsx,ts,tsx}", "./node_modules/react-native-dynamic-banner-carousel//*.{js,jsx}", ], theme: { extend: {}, }, plugins: [], };

🚀 Usage Basic Usage (Universal) This code snippet works seamlessly on both React Native and React Web.

import React from 'react'; import { View, Dimensions } from 'react-native'; import BannerComponent from 'react-native-dynamic-banner-carousel';

const App = () => { const banners = [ { id: 1, image: 'https://images.unsplash.com/photo-1555041469-a586c61ea9bc', name: 'Summer Sale', description: 'Up to 50% off on beachwear!' }, { id: 2, image: 'https://images.unsplash.com/photo-1506748686214-e9df14d4d9d0', name: 'New Arrivals', description: 'Check out the latest gadgets.' } ];

return ( <View style={{ flex: 1, paddingTop: 50 }}>

export default App;

⚙️ API Reference Props bannerData: Array — list of banner objects
autoplay: Boolean — enable/disable auto sliding
autoplayInterval: Number — interval in ms
showDots: Boolean — show/hide dot indicators
activeDotColor: String — color for active dot
dotColor: String — color for inactive dots
onBannerPress: Function — callback for banner click/tap
showContent: Boolean — enable content overlay text
styles: Object — override component styles

Data Structure Example [ { image: "https://example.com/img.jpg", name: "Banner Title", description: "Subtitle text", id: 1 } ]

🎨 Custom Styling Example

<BannerComponent bannerData={data} styles={{ wrapper: { marginBottom: 20 }, bannerContainer: { borderRadius: 20 }, dotsContainer: { bottom: 10 }, bannerTitle: { fontSize: 24, color: 'yellow' } }} />

Available Style Keys: wrapper, bannerContainer, imageContainer, contentOverlay, bannerTitle, bannerDescription, dotsContainer, dot

⚠️ Troubleshooting

1. Native module not found (React Native)

Run: cd ios && pod install

2. Images not showing on Web

Ensure parent container has height + valid image URLs.

3. Layout broken on Web

Update to v1.1.4+ (uses inline styles instead of relying on Tailwind).

📄 License MIT