Arc carousel - Reanimated

Description

A simple, reusable, Arc carousel component build with React Native Reanimated. This component implements the same `FlatList` API with some additional properties that you can pass. In case you want to customize it, please review the code from `index.tsx` and refactor to meet your needs. There is an additional `Pagination` component that I've added just this example but you can remove it if not needed. The angle of the items is calculated based on the item `index` and it's using `Math.atan2` to get the angle between the `middle` element on `y` axis and `left edge` of the screen for `x` axis. This assumes that the `middle` element is the active one. Additionally we could have used a real angle calculation by getting it from the actual `y` position of the element and the `middle` screen position as intersection.

Installation

bunx @animatereactnative/cli@latest add arc-carousel-reanimated

npx @animatereactnative/cli@latest add arc-carousel-reanimated

yarn @animatereactnative/cli@latest add arc-carousel-reanimated

pnpm dlx @animatereactnative/cli@latest add arc-carousel-reanimated

Preview

Source code