Theme picker micro-interaction

Description

Leveraging the power of Math.cos and Math.sin functions alongside the advanced capabilities of Reanimated 3, this react native animation showcases a mesmerizing display of floral elegance. Each leaf of the animated flower gracefully spirals in a dynamically calculated motion, orchestrated by precise mathematical algorithms. Written in TypeScript and designed as a reusable and highly customizable react native animated component, you can seamlessly integrate the Flower Animation/Theme Picker micro-interaction animation into your projects, leveraging specific parameters such as: - `leafs` to define the number of leaves - `size` to set the dimensions - `duration` to control animation speed - `initialActiveIndex` to highlight a default leaf, - `gradients` to apply custom color gradients - `onPress` for touch interactivity , triggering a callback with the index of the selected leaf.

Installation

bunx @animatereactnative/cli@latest add theme-picker-micro-interaction

npx @animatereactnative/cli@latest add theme-picker-micro-interaction

yarn @animatereactnative/cli@latest add theme-picker-micro-interaction

pnpm dlx @animatereactnative/cli@latest add theme-picker-micro-interaction

Preview

Dependencies

PackageVersion
expo-linear-gradient~15.0.7

To install these dependencies, you can use the following command:

bun add expo-linear-gradient@"~15.0.7"

npm install expo-linear-gradient@"~15.0.7"

yarn install expo-linear-gradient@"~15.0.7"

pnpm install expo-linear-gradient@"~15.0.7"

Source code