This tutorial will discuss some of the most important examples how to create an image slider box using react native. If you have concerns about how to use the image slider box using react native then we will give some easy example with a solution. This example will give you an easy way how to execute image slider box using react native.. Pursue bellow step for image slider box example, using react native.
Let’s start following solution:
Step 1: Download Project using cmd command
The first step will be run the below command to create a project.
expo init ExampleApp
Step 2: Install and Setup
First, you need to install react-native-image-slider package from the below code.
npm install react-native-image-slider-box --save
Step 3: create App.jsIn the next step, You will open the App.js file to your file and copy the code.
import React from 'react';
import { StatusBar, StyleSheet, View } from 'react-native';
import { SliderBox } from 'react-native-image-slider-box';
const App = () => {
const [images, setImages] = React.useState([
"https://source.unsplash.com/1024x768/?nature",
"https://source.unsplash.com/1024x768/?water",
"https://source.unsplash.com/1024x768/?tree",
]);
return (
<View style={styles.container}>
<SliderBox
images={images}
sliderBoxHeight={400}
dotColor="#FFEE58"
inactiveDotColor="#90A4AE"
onCurrentImagePressed={index => console.warn(`image ${index} pressed`)}
paginationBoxVerticalPadding={20}
autoplay
circleLoop
/>
<StatusBar />
</View>
);
}
const styles = StyleSheet.create({
container: {
backgroundColor: 'white',
paddingTop: 10,
flex: 1,
},
});
export default App;
Now,Run Project
To run the project executes below code to your cmd.
expo start
You can scan the QR code in Expo Go Application on your mobile.
0 Comments