React Native Carousel Image Slider

A simple and fully customizable React Native Carousel Slider component, support to IOS and Android.

Installation

1$ npm i --save react-native-carousel-image-slider

OR

1$ yarn add react-native-carousel-image-slider

Basic Usage

• Class Component:

1import React from "react";
2import { View } from "react-native";
3import { CarouselSlider } from "react-native-carousel-image-slider";
4
5export class App extends React.Component {
6  constructor(props) {
7    super(props);
8    this.state = {
9      images: [],
10    };
11  }
12
13  render() {
14    return (
15      <View style={{ width: "100%", flex: 1, padding: 24 }}>
16        <CarouselSlider images={this.state.images} />
17      </View>
18    );
19  }
20}

• Function Component:

1import React, { useState } from "react";
2import { View } from "react-native";
3import { CarouselSlider } from "react-native-carousel-image-slider";
4
5export default function App() {
6  const [images, setImages] = useState([]);
7
8  return (
9    <View style={{ width: "100%", flex: 1, padding: 24 }}>
10      <CarouselSlider images={images} />
11    </View>
12  );
13}

Props

• images: string[];
• renderDots?: boolean;
• onImagePress?: ((event: GestureResponderEvent) => void) | undefined;
• activeDotColor?: string;
• inactiveDotColor?: string;
• dotStyle?: ViewStyle;
• resizeMethod?: "auto" | "resize" | "scale";
• resizeMode?: ImageResizeMode;
• imageStyle?: ImageStyle;
• disabledOnPress?: boolean;
• buttonActiveOpacity?: number;

Contributing

• Fork or clone this repository

1  $ git clone https://github.com/GusttavoCastilho/react-native-carousel-image-slider.git