https://github.com/omeratt/react-native-reanimated-pagination
React Native Reanimated Pagination
https://github.com/omeratt/react-native-reanimated-pagination
reactnative reanimated3 typescript
Last synced: 6 months ago
JSON representation
React Native Reanimated Pagination
- Host: GitHub
- URL: https://github.com/omeratt/react-native-reanimated-pagination
- Owner: omeratt
- License: mit
- Created: 2024-10-24T11:53:26.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2024-10-24T16:34:47.000Z (12 months ago)
- Last Synced: 2024-10-25T06:37:38.959Z (12 months ago)
- Topics: reactnative, reanimated3, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-native-reanimated-pagination
- Size: 30.1 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# React Native Reanimated Pagination
## Overview
### Welcome to **React Native Reanimated Pagination** - a versatile and customizable pagination solution
designed for seamless navigation through carousels or multi-page content.
Whether you're working on a small-scale project or a complex application,
this component brings flexibility, simplicity, and style to your pagination needs.
| FadeIn Mode | Slide Mode | Liquid Mode |
| ------------------------------------------ | ---------------------------------------- | ------------------------------------------ |
|  |  |  |
## Features
- **Multiple Animation Modes**: Choose between `fadeIn`, `slide`, or `liquid` animation for smooth transitions between active and inactive dots.
- **Fully Customizable Dots**: Modify the size, colors, and spacing of pagination dots to match your design system.
- **RTL Support**: Built-in support for right-to-left (RTL) layouts, ensuring accessibility for global audiences.
- **Responsive and Performant**: Optimized for mobile devices, ensuring smooth performance even with larger datasets.
- **Lightweight**: Small footprint and minimal external dependencies, focused on simplicity and speed.
## Installation
You can easily add the component to your project using either `npm` or `yarn`:
```bash
npm install react-native-reanimated-pagination
```
or
```bash
yarn add react-native-reanimated-pagination
```
## Usage
Here's the main example of how to integrate the `ReanimatedPagination` component into your app using `react-native-reanimated`:
### Main Example
```tsx
import { Dimensions, View, FlatList } from 'react-native';
import Animated, {
useAnimatedScrollHandler,
useSharedValue,
} from 'react-native-reanimated';
import ImagesBackground from './ImagesBackground';
import RenderItem from './RenderItem';
import ReanimatedPagination from 'react-native-reanimated-pagination';
const width = Dimensions.get('window').width;
const ITEM_WIDTH = width;
const ImageCarousel = (props) => {
const sharedIndex = useSharedValue(0);
const onScroll = useAnimatedScrollHandler({
onScroll: (event) => {
// Calculate index based on x offset
sharedIndex.value = event.contentOffset.x / ITEM_WIDTH;
},
});
return (
(
//@ts-ignore
)}
pagingEnabled
showsHorizontalScrollIndicator={false}
/>
);
};
```
## Props
The `ReanimatedPagination` component accepts the following props:
| Prop | Type | Default | Description |
| ------------------- | -------------------------------------------- | -------- | ------------------------------------------------------------------------ |
| `activeIndex` | SharedValue (required) | - | The index of the currently active dot. |
| `dotsNumber` | number (required) | 7 | Total number of dots to display. |
| `mode` | `'fadeIn'`, `'slide'`, `'liquid'` (optional) | 'fadeIn' | Animation mode for the dots. Options: `'fadeIn'`, `'slide'`, `'liquid'`. |
| `activeDotColor` | string (optional) | '#000' | Color of the active dot. |
| `inactiveDotColor` | string (optional) | '#FFF' | Color of the inactive dots. |
| `overrideDotsStyle` | object (optional) | {} | Custom styles for the dots (e.g., size, shape). |
| `spaces` | number (optional) | 8 | Space between the dots. |
| `isRtl` | boolean (optional) | false | Set `true` to enable right-to-left (RTL) layout. |
## RTL Support – A Special Feature for Israeli Developers 🇮🇱
For all my Israeli friends and developers working with RTL layouts, I’ve included **native RTL support** in the pagination component. Whether you're building apps in Hebrew, Arabic, or any other RTL language, the pagination component will automatically adjust to display in the correct order with the `isRtl` prop.
```tsx
import React from 'react';
import { Pagination } from 'react-native-reanimated-pagination';
const App = () => {
return (
);
};
export default App;
```
> **Why RTL?**
> In many apps targeting Israeli or Arabic-speaking audiences, RTL (Right-to-Left) layouts are essential. This feature ensures that the pagination aligns perfectly with the flow of RTL text and navigation, giving your users a native and seamless experience.
## Animation Modes
The component supports three types of animations for transitioning between dots:
1. **`fadeIn`**: The active dot fades in and out without any movement.
2. **`slide`**: The active dot smoothly slides to the next position.
3. **`liquid`**: The active dot not only slides but also expands and contracts, giving it a liquid-like feel.
### Mode Example
```tsx
```
## Customization
You can fully customize the appearance of the dots by passing the `overrideDotsStyle` prop. Change their size, shape, or even add a border to make them fit your design system.
```tsx
```
### Spacing Between Dots
Adjust the spacing between the dots with the `spaces` prop:
```tsx
```
## Contributing
If you want to contribute to this library, feel free to submit a pull request or open an issue for any suggestions. Here's how you can get involved:
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
1. Fork the repository.
2. Create a new branch (`git checkout -b feature/your-feature`).
3. Commit your changes (`git commit -m 'Add a feature'`).
4. Push the branch (`git push origin feature/your-feature`).
5. Open a pull request.
All contributions are welcome!
## License
This project is licensed under the MIT License © 2024 omeratt.
---