# react-native-looped-carousel-improved > Simple and Powerful Carousel to React Native. Latest version **1.0.2** (published 2018-03-14) · MIT license · 0 weekly downloads ## Install ```sh npm install react-native-looped-carousel-improved pnpm add react-native-looped-carousel-improved yarn add react-native-looped-carousel-improved bun add react-native-looped-carousel-improved ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.2 | | Published | 2018-03-14 | | First published | 2017-08-30 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 2 | | Unpacked size | 21.3 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 9 | | Author | Felipe Sousa | | Maintainers | felipesousa | | Keywords | react, native, carousel | ## Links - npm: https://www.npmjs.com/package/react-native-looped-carousel-improved - Repository: https://github.com/felipesousa/react-native-looped-carousel-improved - Homepage: https://github.com/felipesousa/react-native-looped-carousel-improved#readme - Issues: https://github.com/felipesousa/react-native-looped-carousel-improved/issues - npm.io page: https://npm.io/package/react-native-looped-carousel-improved ## Dependencies (2) - [prop-types](https://npm.io/package/prop-types.md) ^15.5.10 - [lodash.isequal](https://npm.io/package/lodash.isequal.md) ^4.5.0 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 1.0.2 (latest) — 2018-03-14 - 1.0.1 — 2017-08-30 - 1.0.0 — 2017-08-30 ## README # react-native-looped-carousel-improved ### Simple and Powerful Carousel to React Native. [![NPM version](http://img.shields.io/npm/v/react-native-looped-carousel-improved.svg?style=flat)](https://www.npmjs.com/package/react-native-looped-carousel-improved) [![Dependency Status](https://david-dm.org/felipesousa/react-native-looped-carousel-improved.svg)](https://david-dm.org/felipesousa/react-native-looped-carousel-improved) [![devDependency Status](https://david-dm.org/felipesousa/react-native-looped-carousel-improved/dev-status.svg)](https://david-dm.org/felipesousa/react-native-looped-carousel-improved#info=devDependencies) Full-fledged "infinite" (or not) carousel for your [react-native](https://github.com/facebook/react-native/) project. Supports iOS and Android. Based on [React Native](https://github.com/facebook/react-native/) by Facebook and extends of [react-native-looped-carousel](https://github.com/phil-r/react-native-looped-carousel/) component. ## Demo ![](http://spronin.github.io/img/react.gif) ## Install ```sh npm install react-native-looped-carousel-improved --save ``` ## Documentation Props Name | propType | default value | description --- | --- | --- | --- autoplay | boolean | true | enables auto animations delay | number | 4000 | number in milliseconds between auto animations currentPage | number | 0 | allows you to set initial page pageStyle | style | null | style for pages contentContainerStyle | style | null | `contentContainerStyle` for the scrollView onAnimateNextPage | func | null | callback that is called with 0-based Id of the current page swipe | bool | true | motion control for Swipe isLooped | bool | true | loop the slide **Pagination** | --- | --- | --- pageInfo | boolean | false | shows `{currentPage} / {totalNumberOfPages}` pill at the bottom pageInfoBackgroundColor | string | 'rgba(0, 0, 0, 0.25)' | background color for pageInfo pageInfoBottomContainerStyle | style | null | style for the pageInfo container pageInfoTextStyle | style | null | style for text in pageInfo pageInfoTextSeparator | string | ' / ' | separator for `{currentPage}` and `{totalNumberOfPages}` **Bullets** | --- | --- | --- bullets | bool | false | wether to show "bullets" at the bottom of the carousel bulletStyle | style | null | style for each bullet bulletsContainerStyle | style | null | style for the bullets container chosenBulletStyle | stlye | null | style for the selected bullet **Arrows** | --- | --- | --- arrows | bool | false | wether to show navigation arrows for the carousel arrowsStyle | style | null | style for navigation arrows arrowsContainerStyle | style | null | style for the navigation arrows container leftArrowText | string / element | 'Left' | label / icon for left navigation arrow rightArrowText | string / element | 'Right' | label / icon for right navigation arrow rightArrowStyle | style | null | style for the right arrow leftArrowStyle | style | null | style for the left arrow ## Usage ```js import React, { Component } from 'react'; import { Text, View, Dimensions, } from 'react-native'; import Carousel from 'react-native-looped-carousel-improved'; const { width, height } = Dimensions.get('window'); export default class MyCarousel extends Component { constructor(props) { super(props); this.state = { size: { width, height }, }; } _onLayoutDidChange = (e) => { const layout = e.nativeEvent.layout; this.setState({ size: { width: layout.width, height: layout.height } }); } render() { return ( console.log(p)} > 1 2 3 ); } } ``` ## Contributing 1. Fork it! 2. Create your feature branch: `git checkout -b my-new-feature` 3. Commit your changes: `git commit -am 'Add some feature'` 4. Push to the branch: `git push origin my-new-feature` 5. Submit a pull request :D ## History This project is a just improvement to [this project](https://github.com/phil-r/react-native-looped-carousel). ## Credits All Credits to [@phil-r](https://github.com/phil-r/) to create [react-native-looped-carousel](https://github.com/phil-r/react-native-looped-carousel). ## License MIT @ Felipe Sousa --- _Source: https://npm.io/package/react-native-looped-carousel-improved · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._