Contents
React Native View Pager
This is an example of React Native View Pager with 3 Different Indicators. React Native View Pager allows the user to flip left and right through pages. In our ViewPager Example, we’ll implement a ViewPager that swipes through three different views with the indicator.
- PagerDotIndicator
- PagerTabIndicator
- PagerTitleIndicator
To Make a React Native App
Getting started with React Native will help you to know more about the way you can make a React Native project. We are going to use react-native init to make our React Native App. Assuming that you have node installed, you can use npm to install the react-native-cli
command line utility. Open the terminal and go to the workspace and run
npm install -g react-native-cli
Run the following commands to create a new React Native project
react-native init ProjectName
If you want to start a new project with a specific React Native version, you can use the --version argument:
react-native init ProjectName --version X.XX.X
react-native init ProjectName --version react-native@next
This will make a project structure with an index file named App.js in your project directory.
Installation of Dependency
To use PagerTabIndicator
, IndicatorViewPager
, PagerTitleIndicator
, PagerDotIndicator
you need to install @shankarmorwal/rn-viewpager
package. To install this
Open the terminal and jump into your project
cd Projectname
Run the following command
npm install @shankarmorwal/rn-viewpager --save
This command will copy all the dependencies into your node_module directory. –save is optional.
Code for React Native View Pager
Now Open App.js in any code editor and replace the code with the following code
App.js
// React Native View Pager with 3 Different Indicators
// https://aboutreact.com/react-native-view-pager/
// import React in our code
import React from 'react';
// import all the components we are going to use
import {
SafeAreaView,
StyleSheet,
View,
Text
} from 'react-native';
// import {
// PagerTabIndicator,
// IndicatorViewPager,
// PagerTitleIndicator,
// PagerDotIndicator,
// } from 'rn-viewpager';
import {
PagerTabIndicator,
IndicatorViewPager,
PagerTitleIndicator,
PagerDotIndicator,
} from '@shankarmorwal/rn-viewpager';
const App = () => {
return (
<SafeAreaView style={styles.container}>
<View style={styles.container}>
<IndicatorViewPager
style={styles.pagerStyle}
indicator={
<PagerDotIndicator pageCount={3} />
}>
<View style={styles.background1}>
<Text style={styles.textStyle}>One</Text>
</View>
<View style={styles.background2}>
<Text style={styles.textStyle}>Two</Text>
</View>
<View style={styles.background3}>
<Text style={styles.textStyle}>Three</Text>
</View>
</IndicatorViewPager>
<IndicatorViewPager
style={styles.pagerStyle}
indicator={
<PagerTitleIndicator
titles={['one', 'two', 'three']}
/>
}>
<View style={styles.background1}>
<Text style={styles.textStyle}>One</Text>
</View>
<View style={styles.background2}>
<Text style={styles.textStyle}>Two</Text>
</View>
<View style={styles.background3}>
<Text style={styles.textStyle}>Three</Text>
</View>
</IndicatorViewPager>
<IndicatorViewPager
style={styles.pagerStyle}
indicator={
<PagerTabIndicator
tabs={[
{
text: 'Home',
// iconSource:
// require('./resources/home.png'),
// selectedIconSource:
// require('./resources/home_selected.png'),
},
{
text: 'Message',
// iconSource:
// require('./resources/message.png'),
// selectedIconSource:
// require('./resources/message_selected.png'),
},
{
text: 'Profile',
// iconSource:
// require('./resources/profile.png'),
// selectedIconSource:
// require('./resources/profile_selected.png'),
},
]}
/>
}>
<View style={styles.background1}>
<Text style={styles.textStyle}>Home</Text>
</View>
<View style={styles.background2}>
<Text style={styles.textStyle}>Message</Text>
</View>
<View style={styles.background3}>
<Text style={styles.textStyle}>Profile</Text>
</View>
</IndicatorViewPager>
</View>
</SafeAreaView>
);
};
export default App;
const styles = StyleSheet.create({
container: {
flex: 1,
},
background1: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#C70039',
},
background2: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#FF5733',
},
background3: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#FFC300',
},
textStyle: {
color: 'white',
fontSize: 30,
},
pagerStyle: {
flex: 1,
paddingTop: 20,
backgroundColor: 'white',
},
});
To Run the React Native App
Open the terminal again and jump into your project using.
cd ProjectName
To run the project on an Android Virtual Device or on real debugging device
react-native run-android
or on the iOS Simulator by running (macOS only)
react-native run-ios
Output Screenshots
That was the React Native ViewPager. If you have any doubts or you want to share something about the topic you can comment below or contact us here. There will be more posts coming soon. Stay tuned!
Hope you liked it. 🙂
Hi,
How to change the DotIndicator color.
Hi Ravi,
To change the color of the DotIndicator you need to override the default prop using dotStyle and selectedDotStyle where you can change the background color of the dot indicator. Please change the PagerDotIndicator with the following lines and you will see the change.
In case of any issue please comment.
Thankyou so much for your help.
Any time brother. 🙂
Hi Snehal, Can you help me create the View pager with button and the button should be below to the dot-pager.
Actually, we are not clear with the query but still please find the attached file (please change the extension to js) or you can find it snack by clicking on the below link.
https://snack.expo.io/@aboutreact/view-pager-with-button-below-dot-pager
If this is not matching to your requirement then can you please explain it in detail so that we can help you.
Hello ~
Thank you for your tutorial , It’s very useful with me.
Could i make indicator in top of the view pager ?
Please try to customize the PagerDotIndicator. For the hint, you can follow this example https://aboutreact.com/example-to-align-a-view-at-the-bottom-of-screen-in-react-native/
You can use position: ‘absolute’, to make it at the top.
I will try to provide a solution for that as soon as possible.
I Have to make a home activity in which side navigation drawer and slider exist, for slider I have to make dynamic IndicatoViewPager with dynamic PagerDotIndicator,
could you please help.
Thanks..
Hi Brother, i’m getting this error:: Invariant Violation: requireNativeComponent: “RNCViewPager” was not found in the UIManager.
Can you please address this problem.Thanks
Can you please try installing
npm install @react-native-community/viewpager --save
Note: I haven’t tried it with Expo as I am heavily not interested in Expo, It worked for me in non-expo environment.
Actually the real owner of the library is not maintaining the Repo so everybody is forking the Repo and I can find any perfect one. You can try it once else I’ll try to search something else.