Looped carousel for React Native — StudySection Blog
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.
Demo
Installation:-
npm install react-native-looped-carousel --save
Usage:-
Place below code in your app.js file:-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'); //to get height and width of screen
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 } }); //set height and width in state
}
render() {
return (
<View style={{ flex: 1 }} onLayout={this._onLayoutDidChange}>
<Carousel
delay={2000}
style={this.state.size}
autoplay
pageInfo
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>
</Carousel>
</View>
);
}
}
For advance usage please refer to https://github.com/phil-r/react-native-looped-carousel.
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.
Originally published at https://studysection.com on December 3, 2021.
