react-native-animated-dots
v0.0.4TypeScript
FlatList animated pagination dots with colour
0/weekUpdated 3 years agoMITUnpacked: 24.9 KB
Published by Harin Wu
npm install react-native-animated-dotsCredit
Forked off of the great work done @ https://github.com/weahforsage/react-native-animated-pagination-dots. Added colour options for personal use.
Animated Dots
FlatList animated pagination dots. Some (maybe all)
ideas and credits goes to
Catalin Miron 👏.
This package does not use any dependencies but Animated API.
Few days ago I made a reddit post,
and people requested to open source it.
For more Copy & Paste stuff, go check example folder
Installation
``sh`
npm install react-native-animated-dots
yarn add react-native-animated-dots
Usage
`js
import {ExpandingDot} from "react-native-animated-dots";
const SLIDER_DATA = [
{
key: '1',
title: 'App showcase ✨',
description:
'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
},
{
key: '2',
title: 'Introduction screen 🎉',
description:
"Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. ",
},
];
const scrollX = React.useRef(new Animated.Value(0)).current;
keyExtractor={keyExtractor}
showsHorizontalScrollIndicator={false}
onScroll={Animated.event(
[{ nativeEvent: { contentOffset: { x: scrollX } } }],
{
useNativeDriver: false,
}
)}
pagingEnabled
horizontal
decelerationRate={'normal'}
scrollEventThrottle={16}
renderItem={renderItem}
/>
expandingDotWidth={30}
scrollX={scrollX}
inActiveDotOpacity={0.6}
dotStyle={{
width: 10,
height: 10,
backgroundColor: '#347af0',
borderRadius: 5,
marginHorizontal: 5
}}
containerStyle={{
top: 30,
}}
/>
``
Props
$3
| Name | Type | Default | Description |
| inActiveDotOpacity | number | 0.5 | In active dot opacity |
| inActiveDotColor | string | backgroundColor: '#347af0' | In active dot color |
| expandingDotWidth | number | 20 | Active dot width |
| data | Array<Object> | required | Array which is used for flatlist iteration |
| scrollX | Animated.Value | required | Gestures, like panning or scrolling, and other events can map directly to animated values using Animated.event(). For example, when working with horizontal scrolling gestures, you would do the following in order to map event.nativeEvent.contentOffset.x to scrollX (an Animated.Value) |
| dotStyle | ViewStyle | width: 10, | Basic styling for each dot. |
| containerStyle | ViewStyle | position: "absolute", | Basic styling for dots container. |
$3
| Name | Type | Default | Description |
| activeDotScale | number | 1.4 | Active dot scale number |
| inActiveDotOpacity | number | 0.5 | In active dot opacity |
| inActiveDotColor | string | backgroundColor: '#347af0' | In active dot color |
| data | Array<Object> | required | Array which is used for flatlist iteration |
| scrollX | Animated.Value | required | Gestures, like panning or scrolling, and other events can map directly to animated values using Animated.event(). For example, when working with horizontal scrolling gestures, you would do the following in order to map event.nativeEvent.contentOffset.x to scrollX (an Animated.Value) |
| dotStyle | ViewStyle | width: 10, | Basic styling for each dot. |
| containerStyle | ViewStyle | position: "absolute", | Basic styling for dots container. |
$3
| Name | Type | Default | Description |
| dotSize | number | 12 | Each dot size !IMPORTANT Do not adjust dot size through dotStyle, otherwise it'll misbehave |
| marginHorizontal | number | 3 | Margin between dots !IMPORTANT Do not adjust dot margin through dotStyle, otherwise it'll misbehave |
| data | Array<Object> | required | Array which is used for flatlist iteration |
| scrollX | Animated.Value | required | Gestures, like panning or scrolling, and other events can map directly to animated values using Animated.event(). For example, when working with horizontal scrolling gestures, you would do the following in order to map event.nativeEvent.contentOffset.x to scrollX (an Animated.Value) |
| dotStyle | ViewStyle | backgroundColor: '#347af0', | Basic styling for each dot. |
| containerStyle | ViewStyle | position: "absolute", | Basic styling for dots container. |
| slidingIndicatorStyle | ViewStyle | backgroundColor: '#347af0', | Basic styling for Sliding indicator dot. |
$3
| Name | Type | Default | Description |
| dotSize | number | 24 | Each dot size !IMPORTANT Do not adjust dot size through dotStyle, otherwise it'll misbehave |
| borderPadding | number | -5 | Padding between dot and border. Should be good between -5 and 3, test it out. |
| data | Array<Object> | required | Array which is used for flatlist iteration |
| scrollX | Animated.Value | required | Gestures, like panning or scrolling, and other events can map directly to animated values using Animated.event(). For example, when working with horizontal scrolling gestures, you would do the following in order to map event.nativeEvent.contentOffset.x to scrollX (an Animated.Value) |
| dotStyle | ViewStyle | backgroundColor: '#347af0' | Basic styling for each dot. |
| containerStyle | ViewStyle | position: "absolute", | Basic styling for dots container. |
| slidingIndicatorStyle | ViewStyle | borderWidth: 1, | Basic styling for sliding bordered dot style. |
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT