React Native Carousel Image Slider

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

Installation

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

OR

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

Basic Usage

• Class Component:

import React from "react";
import { View } from "react-native";
import { CarouselSlider } from "react-native-carousel-image-slider";

export class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      images: [],
    };
  }

  render() {
    return (
      <View style={{ width: "100%", flex: 1, padding: 24 }}>
        <CarouselSlider images={this.state.images} />
      </View>
    );
  }
}

• Function Component:

import React, { useState } from "react";
import { View } from "react-native";
import { CarouselSlider } from "react-native-carousel-image-slider";

export default function App() {
  const [images, setImages] = useState([]);

  return (
    <View style={{ width: "100%", flex: 1, padding: 24 }}>
      <CarouselSlider images={images} />
    </View>
  );
}

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

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