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.
