add Pagination.Custom dot animation

[bdtren]

I'm adding Paging.Custom dot animation, it is for my personal project but I contribute here since I think it may helps someone.

By default, it will takes width, height, borderRadius and backgroundColor from dotStyle and activeDotStyle and create animation from them.
I also provide a function that user can use to add custom animated style:

customReanimatedStyle?: (
    progress: number,
    index: number,
    length: number,
  ) => DefaultStyle

Below is the example how we use it (The 2 last paging dots):

custom_paging_dot.mp4

Please take a look, thank you!

[changeset-bot]

⚠️ No Changeset found

Latest commit: 2916a26

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
react-native-reanimated-carousel	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 31, 2024 5:51am

[xogus7]

Hello, first of all, thanks to your code, I was able to customize the indicator animation.
But when I tried again today, I got this error during npm install.
I'm trying to fix this ploblem. Is there any expected solution to this?

Reanimated version

3.15.0

React Native version

0.75.1

Platforms

Android

npm error code 1
npm error git dep preparation failed
npm error command /opt/homebrew/Cellar/node@20/20.15.0/bin/node /opt/homebrew/Cellar/node@20/20.15.0/lib/node_modules/npm/bin/npm-cli.js install --force --cache=/Users/i/.npm --prefer-offline=false --prefer-online=false --offline=false --no-progress --no-save --no-audit --include=dev --include=peer --include=optional --no-package-lock-only --no-dry-run
npm error > [email protected] prepare
npm error > bob build
npm error
npm error ℹ Building target commonjs
npm error ℹ Cleaning up previous build at lib/commonjs
npm error ℹ Compiling 45 files in src with babel
npm error ✔ Wrote files to lib/commonjs
npm error ℹ Building target module
npm error ℹ Cleaning up previous build at lib/module
npm error ℹ Compiling 45 files in src with babel
npm error ✔ Wrote files to lib/module
npm error ℹ Building target typescript
npm error ℹ Cleaning up previous build at lib/typescript
npm error ℹ Generating type definitions with tsc
npm error src/components/Pagination/Custom/index.tsx:6:35 - error TS2307: Cannot find module 'react-native-reanimated/lib/typescript/hook/commonTypes' or its corresponding type declarations.
npm error
npm error 6 import type { DefaultStyle } from "react-native-reanimated/lib/typescript/hook/commonTypes";
npm error                                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
npm error
npm error src/components/Pagination/Custom/PaginationItem.tsx:14:35 - error TS2307: Cannot find module 'react-native-reanimated/lib/typescript/hook/commonTypes' or its corresponding type declarations.
npm error
npm error 14 import type { DefaultStyle } from "react-native-reanimated/lib/typescript/hook/commonTypes";
npm error                                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
npm error
npm error src/components/Pagination/Custom/PaginationItem.tsx:96:12 - error TS2322: Type 'AnimatableNumericValue | undefined' is not assignable to type 'number'.
npm error   Type 'undefined' is not assignable to type 'number'.
npm error
npm error 96           [activeBorderRadius, borderRadius, borderRadius],
npm error               ~~~~~~~~~~~~~~~~~~
npm error
npm error src/components/Pagination/Custom/PaginationItem.tsx:96:32 - error TS2322: Type 'AnimatableNumericValue | undefined' is not assignable to type 'number'.
npm error   Type 'undefined' is not assignable to type 'number'.
npm error
npm error 96           [activeBorderRadius, borderRadius, borderRadius],
npm error                                   ~~~~~~~~~~~~
npm error
npm error src/components/Pagination/Custom/PaginationItem.tsx:96:46 - error TS2322: Type 'AnimatableNumericValue | undefined' is not assignable to type 'number'.
npm error   Type 'undefined' is not assignable to type 'number'.
npm error
npm error 96           [activeBorderRadius, borderRadius, borderRadius],
npm error                                                 ~~~~~~~~~~~~
npm error
npm error src/components/Pagination/Custom/PaginationItem.tsx:102:14 - error TS2322: Type 'ColorValue' is not assignable to type 'string | number'.
npm error   Type 'OpaqueColorValue' is not assignable to type 'string | number'.
npm error
npm error 102             [activeBackgroundColor, backgroundColor, backgroundColor],
npm error                  ~~~~~~~~~~~~~~~~~~~~~
npm error
npm error src/components/Pagination/Custom/PaginationItem.tsx:102:37 - error TS2322: Type 'ColorValue' is not assignable to type 'string | number'.
npm error
npm error 102             [activeBackgroundColor, backgroundColor, backgroundColor],
npm error                                         ~~~~~~~~~~~~~~~
npm error
npm error src/components/Pagination/Custom/PaginationItem.tsx:102:54 - error TS2322: Type 'ColorValue' is not assignable to type 'string | number'.
npm error
npm error 102             [activeBackgroundColor, backgroundColor, backgroundColor],
npm error                                                          ~~~~~~~~~~~~~~~
npm error
npm error
npm error Found 8 errors in 2 files.
npm error
npm error Errors  Files
npm error      1  src/components/Pagination/Custom/index.tsx:6
npm error      7  src/components/Pagination/Custom/PaginationItem.tsx:14
npm error ✖ Failed to build definition files.
npm error npm warn using --force Recommended protections disabled.
npm error npm warn ERESOLVE overriding peer dependency
npm error npm warn ERESOLVE overriding peer dependency
npm error npm warn ERESOLVE overriding peer dependency
npm error npm warn ERESOLVE overriding peer dependency
npm error npm warn While resolving: @testing-library/[email protected]
npm error npm warn Found: @types/[email protected]
npm error npm warn node_modules/@types/react
npm error npm warn   dev @types/react@"^18.2.15" from the root project
npm error npm warn   1 more (@types/react-test-renderer)
npm error npm warn
npm error npm warn Could not resolve dependency:
npm error npm warn peerOptional @types/react@"^16.9.0 || ^17.0.0" from @testing-library/[email protected]
npm error npm warn node_modules/@testing-library/react-hooks
npm error npm warn   dev @testing-library/react-hooks@"^8.0.0" from the root project
npm error npm warn
npm error npm warn Conflicting peer dependency: @types/[email protected]
npm error npm warn node_modules/@types/react
npm error npm warn   peerOptional @types/react@"^16.9.0 || ^17.0.0" from @testing-library/[email protected]
npm error npm warn   node_modules/@testing-library/react-hooks
npm error npm warn     dev @testing-library/react-hooks@"^8.0.0" from the root project
npm error npm warn ERESOLVE overriding peer dependency
npm error npm warn While resolving: @testing-library/[email protected]
npm error npm warn Found: [email protected]
npm error npm warn node_modules/react
npm error npm warn   dev react@"18.2.0" from the root project
npm error npm warn   5 more (@testing-library/jest-native, react-native, ...)
npm error npm warn
npm error npm warn Could not resolve dependency:
npm error npm warn peer react@"^16.9.0 || ^17.0.0" from @testing-library/[email protected]
npm error npm warn node_modules/@testing-library/react-hooks
npm error npm warn   dev @testing-library/react-hooks@"^8.0.0" from the root project
npm error npm warn
npm error npm warn Conflicting peer dependency: [email protected]
npm error npm warn node_modules/react
npm error npm warn   peer react@"^16.9.0 || ^17.0.0" from @testing-library/[email protected]
npm error npm warn   node_modules/@testing-library/react-hooks
npm error npm warn     dev @testing-library/react-hooks@"^8.0.0" from the root project
npm error npm warn ERESOLVE overriding peer dependency
npm error npm warn While resolving: @testing-library/[email protected]
npm error npm warn Found: [email protected]
npm error npm warn node_modules/react-test-renderer
npm error npm warn   dev react-test-renderer@"^18.2.0" from the root project
npm error npm warn   2 more (@testing-library/jest-native, @testing-library/react-native)
npm error npm warn
npm error npm warn Could not resolve dependency:
npm error npm warn peerOptional react-test-renderer@"^16.9.0 || ^17.0.0" from @testing-library/[email protected]
npm error npm warn node_modules/@testing-library/react-hooks
npm error npm warn   dev @testing-library/react-hooks@"^8.0.0" from the root project
npm error npm warn
npm error npm warn Conflicting peer dependency: [email protected]
npm error npm warn node_modules/react-test-renderer
npm error npm warn   peerOptional react-test-renderer@"^16.9.0 || ^17.0.0" from @testing-library/[email protected]
npm error npm warn   node_modules/@testing-library/react-hooks
npm error npm warn     dev @testing-library/react-hooks@"^8.0.0" from the root project
npm error npm warn ERESOLVE overriding peer dependency
npm error npm warn While resolving: [email protected]
npm error npm warn Found: [email protected]
npm error npm warn node_modules/react
npm error npm warn   dev react@"18.2.0" from the root project
npm error npm warn   5 more (@testing-library/jest-native, react-native, ...)
npm error npm warn
npm error npm warn Could not resolve dependency:
npm error npm warn peer react@"^18.3.1" from [email protected]
npm error npm warn node_modules/react-test-renderer
npm error npm warn   dev react-test-renderer@"^18.2.0" from the root project
npm error npm warn   2 more (@testing-library/jest-native, @testing-library/react-native)
npm error npm warn
npm error npm warn Conflicting peer dependency: [email protected]
npm error npm warn node_modules/react
npm error npm warn   peer react@"^18.3.1" from [email protected]
npm error npm warn   node_modules/react-test-renderer
npm error npm warn     dev react-test-renderer@"^18.2.0" from the root project
npm error npm warn     2 more (@testing-library/jest-native, @testing-library/react-native)
npm error npm warn deprecated [email protected]: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm error npm warn deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-catch-binding instead.
npm error npm warn deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-numeric-separator instead.
npm error npm warn deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-nullish-coalescing-operator instead.
npm error npm warn deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-methods instead.
npm error npm warn deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.
npm error npm warn deprecated [email protected]: Rimraf versions prior to v4 are no longer supported
npm error npm warn deprecated [email protected]: Rimraf versions prior to v4 are no longer supported
npm error npm warn deprecated [email protected]: this library is no longer supported
npm error npm warn deprecated @humanwhocodes/[email protected]: Use @eslint/config-array instead
npm error npm warn deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-async-generator-functions instead.
npm error npm warn deprecated [email protected]: Rimraf versions prior to v4 are no longer supported
npm error npm warn deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead.
npm error npm warn deprecated @humanwhocodes/[email protected]: Use @eslint/object-schema instead
npm error npm warn deprecated [email protected]: Glob versions prior to v9 are no longer supported
npm error npm warn deprecated [email protected]: Glob versions prior to v9 are no longer supported
npm error npm warn deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-object-rest-spread instead.
npm error npm warn deprecated [email protected]: You or someone you depend on is using Q, the JavaScript Promise library that gave JavaScript developers strong feelings about promises. They can almost certainly migrate to the native JavaScript promise now. Thank you literally everyone for joining me in this bet against the odds. Be excellent to each other.
npm error npm warn deprecated
npm error npm warn deprecated (For a CapTP with native promises, see @endo/eventual-send and @endo/captp)
npm error npm warn deprecated [email protected]: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
npm error npm warn deprecated [email protected]: Package renamed to https://github.com/unjs/ofetch
npm error npm warn deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm error npm warn deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
npm error npm warn deprecated [email protected]: support for ECMAScript is superseded by `uglify-js` as of v3.13.0
npm error bob build
npm error
npm error build files for publishing
npm error
npm error Options:
npm error   --help     Show help                                                 [boolean]
npm error   --version  Show version number                                       [boolean]
npm error
npm error Error: Failed to build definition files.
npm error     at build (/Users/i/.npm/_cacache/tmp/git-cloneRyeB64HUIdyK/node_modules/react-native-builder-bob/lib/targets/typescript.js:112:11)
npm error     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
npm error     at async Object.handler (/Users/i/.npm/_cacache/tmp/git-cloneRyeB64HUIdyK/node_modules/react-native-builder-bob/lib/index.js:379:9)
npm error npm error code 1
npm error npm error path /Users/i/.npm/_cacache/tmp/git-cloneRyeB64HUIdyK
npm error npm error command failed
npm error npm error command sh -c bob build
npm error
npm error npm error A complete log of this run can be found in: /Users/i/.npm/_logs/2024-09-09T10_29_58_651Z-debug-0.log

npm error A complete log of this run can be found in: /Users/i/.npm/_logs/2024-09-09T10_29_42_554Z-debug-0.log

[bdtren]

Hi @xogus7 ,
Thank you for checking and confirming that my code is working.

Regarding your question, from what you shared, I see that you are using react [email protected] [email protected] and [email protected],... they are new and have many changes. So In my experience, we need to wait at least 6 months (or even 1 year) to use them, to giving time for packages that depend on them are updated and stable, in this case is react-native-reanimated.

From my side, I'm still using [email protected], react-native-reanimated-carousel from my fork, [email protected] and [email protected]. And it is working just fine.

I'm using my fork for my own project, it still also not reviewed by package owner, so for now, I cannot update or change anything to help you.

[xogus7]

@bdtren WOW Thank you for your quick comment, I think so, too. probably it a problem caused by a sudden dependency update. your comment helped me to catch the direction of solution. Thank you!