Author - StudySection Post Views - 362 views

Looped carousel for React Native

Introduction to Looped Carousel:-

On mobile, carousels are one of the most common ways to view a collection of linked images. We’ll learn how to make a carousel in a React Native app in this post. We’ll utilize the react-native-looped-carousel package, which is quite user-friendly. This is a well-known React Native package that we may use to include a carousel in our React Native app. For the react-native project, a full-fledged “infinite” carousel has been created. It works with both iOS and Android devices. Based on Facebook’s react-native framework.

React Native


npm install react-native-looped-carousel --save

Place below code in your app.js file:-
import React, { Component } from 'react';
import {
} from 'react-native';
import Carousel from 'react-native-looped-carousel';
const { width, height } = Dimensions.get('window'); //to get height and width of screen
export default class CarouselExample extends Component {
constructor(props) {
this.state = {
size: { width, height },
_onLayoutDidChange = (e) => {
const layout = e.nativeEvent.layout;
this.setState({ size: { width: layout.width, height: layout.height } }); //set height and width in state
render() {
return (
<View style={{ flex: 1 }} onLayout={this._onLayoutDidChange}>
onAnimateNextPage={(p) => console.log(p)}>
<View style={[{ backgroundColor: '#BADA55' }, this.state.size]}><Text>1</Text></View>
<View style={[{ backgroundColor: 'red' }, this.state.size]}><Text>2</Text></View>
<View style={[{ backgroundColor: 'blue' }, this.state.size]}><Text>3</Text></View>

For advance usage please refer to

If you have skills in PHP programming and you want to enhance your career in this field, a PHP certification from StudySection can help you reach your desired goals. Both beginner level and expert level PHP Certification Exams are offered by StudySection along with other programming certification exams.

Leave a Reply

Your email address will not be published.