# @newtonry/react-native-looped-carousel > Looped carousel for React Native Latest version **0.1.13** (published 2017-06-16) · MIT license · 0 weekly downloads ## Install ```sh npm install @newtonry/react-native-looped-carousel pnpm add @newtonry/react-native-looped-carousel yarn add @newtonry/react-native-looped-carousel bun add @newtonry/react-native-looped-carousel ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.1.13 | | Published | 2017-06-16 | | First published | 2017-06-12 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 2 | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 0 | | Author | Phil Rukin | | Maintainers | newtonry | | Keywords | react, native, carousel, looped | ## Links - npm: https://www.npmjs.com/package/@newtonry/react-native-looped-carousel - Repository: https://github.com/newtonry/react-native-looped-carousel - Homepage: https://github.com/newtonry/react-native-looped-carousel#readme - Issues: https://github.com/appintheair/react-native-looped-carousel/issues - npm.io page: https://npm.io/package/@newtonry/react-native-looped-carousel ## 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 - 0.1.13 (latest) — 2017-06-16 - 0.1.12 — 2017-06-16 - 0.1.11 — 2017-06-16 - 0.1.10 — 2017-06-16 - 0.1.9 — 2017-06-13 - 0.1.8 — 2017-06-12 ## README # Looped carousel for React Native [![NPM version](http://img.shields.io/npm/v/react-native-looped-carousel.svg?style=flat)](https://www.npmjs.com/package/react-native-looped-carousel) [![Build Status](https://travis-ci.org/appintheair/react-native-looped-carousel.svg)](https://travis-ci.org/appintheair/react-native-looped-carousel) [![Dependency Status](https://david-dm.org/appintheair/react-native-looped-carousel.svg)](https://david-dm.org/appintheair/react-native-looped-carousel) [![devDependency Status](https://david-dm.org/appintheair/react-native-looped-carousel/dev-status.svg)](https://david-dm.org/appintheair/react-native-looped-carousel#info=devDependencies) Full-fledged "infinite" carousel for your next [react-native](https://github.com/facebook/react-native/) project. Supports iOS and Android. Based on [react-native framework](https://github.com/facebook/react-native/) by Facebook. ## Demo ![](http://spronin.github.io/img/react.gif) ## Install ```sh npm install react-native-looped-carousel --save ``` ## 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 **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 ## Usage ```js import React, { Component } from 'react'; import { Text, View, Dimensions, } from 'react-native'; import Carousel from 'react-native-looped-carousel'; const { width, height } = Dimensions.get('window'); export default class CarouselExample 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 ); } } ``` [Full example code](Examples/Simple) ## Used in - [React Native Buyscreen](https://github.com/appintheair/react-native-buyscreen) ## See also - [React Native Grid Component](https://github.com/phil-r/react-native-grid-component) ---- More on react-native here: http://facebook.github.io/react-native/docs/getting-started.html#content --- _Source: https://npm.io/package/@newtonry/react-native-looped-carousel · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._