React Native component designed to display the current page of a swiper, slideshow, carousel, and more. You can choose from three pre-defined design variants and further customize the look and feel according to your specific requirements. All design variants support both horizontal and vertical orientations. This package has no dependencies and utilizes React Native's Animated
API with the native driver to achieve seamless and fluid animations.
Horizontal | Vertical |
---|---|
![]() |
![]() |
Morse | Beads | Train |
---|---|---|
yarn add react-native-page-indicator
npm install react-native-page-indicator
Pass the total number of pages as the count
prop and the current page index as the current
prop.
import React from 'react';
import { View, StyleSheet } from 'react-native';
import { PageIndicator } from 'react-native-page-indicator';
const MyComponent = ({ pages, current }) => (
<View style={styles.wrapper}>
<PageIndicator count={pages} current={current} />
</View>
);
const styles = StyleSheet.create({
wrapper: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});
export default MyComponent;
To create a more engaging experience where the indicator dynamically responds to the scroll position, you can pass the current page index as an Animated.Value
rather than a regular number. The easiest approach to obtain the animated value is by dividing the corresponding scroll position by the page width (for horizontal scrolling) or page height (for vertical scrolling).
import React, { useRef } from 'react';
import { Animated, StyleSheet, Text, View, useWindowDimensions } from 'react-native';
import { PageIndicator } from 'react-native-page-indicator';
const pages = ['Page 1', 'Page 2', 'Page 3'];
const App = () => {
const { width, height } = useWindowDimensions();
const scrollX = useRef(new Animated.Value(0)).current;
const animatedCurrent = useRef(Animated.divide(scrollX, width)).current;
return (
<View style={styles.root}>
<Animated.ScrollView
horizontal={true}
pagingEnabled={true}
showsHorizontalScrollIndicator={false}
onScroll={Animated.event([{ nativeEvent: { contentOffset: { x: scrollX } } }], {
useNativeDriver: true,
})}
>
{pages.map((page, index) => (
<View key={index} style={[styles.page, { width, height }]}>
<Text>{page}</Text>
</View>
))}
</Animated.ScrollView>
<View style={styles.pageIndicator}>
<PageIndicator count={pages.length} current={animatedCurrent} />
</View>
</View>
);
};
const styles = StyleSheet.create({
root: {
flex: 1,
},
page: {
alignItems: 'center',
justifyContent: 'center',
},
pageIndicator: {
left: 20,
right: 20,
bottom: 50,
position: 'absolute',
alignItems: 'center',
justifyContent: 'center',
},
});
export default App;
Prop | Type | Default | Description |
---|---|---|---|
count |
number | The total number of pages (required) | |
current |
number | Animated.Value | 0 |
The current page index can be either a number or an animated value obtained from the scroll position |
variant |
'morse' | 'beads' | 'train' | morse |
Pre-defined design variant |
vertical |
boolean | false |
When true the indicators will be stacked vertically |
color |
string | black |
Color of the indicators |
activeColor |
string | Optional color of the active indicator | |
gap |
number | 6 |
Distance between the indicators |
opacity |
number | 0.5 |
Opacity of the inactive indicators |
borderRadius |
number | size / 2 |
Border radius of the indicators |
duration |
number | 500 |
Animation duration (has no effect when Animated.Value is provided for the current prop) |
easing |
EasingFunction | Easing.out() |
Animation easing function (has no effect when Animated.Value is provided for the current prop) |
style |
ViewStyle | Style object applied to the wrapping view |
Prop | Type | Default | Description |
---|---|---|---|
size |
number | 6 |
Size of the inactive indicators and the thickness of the active indicator |
dashSize |
number | size * 4 |
Length of the active indicator, cannot be smaller than size * 2 |
Prop | Type | Default | Description |
---|---|---|---|
size |
number | 6 |
Thickness of the indicators |
dashSize |
number | size * 4 |
Length of the indicators, setting it to 0 will stretch the indicators to the available width |
Prop | Type | Default | Description |
---|---|---|---|
size |
number | 6 |
Size of the indicators |
scale |
number | 1.5 |
Scaling factor of the active indicator |
I appreciate your feedback, so please star the repository if you like it. This is the best motivation for me to maintain the package and add new features. If you have any feature requests, found a bug, or have ideas for improvement, feel free to open an issue.
Also, please check out my other React Native components that might be a good fit for your project:
- React Native Avatar - Display user avatars like a pro.
- React Native Rating - An interactive rating component.
- React Native Parallax Swiper - Build a horizontal scroll swiper with a parallax effect.
- React Native Crossfade Image - Update image source with crossfade transition effect.
Licensed under the MIT license.