Theme picker micro-interaction
Tags
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
Dependencies
| Package | Version |
|---|---|
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"