Habit button animation

Description

Using React Native Gesture Handler for the long press interaction, Layout Animations for UI Animations and Moti for state driven animations. You can customise the size, longPressDuration, icon and color.

Installation

bunx @animatereactnative/cli@latest add habit-button-animation

npx @animatereactnative/cli@latest add habit-button-animation

yarn @animatereactnative/cli@latest add habit-button-animation

pnpm dlx @animatereactnative/cli@latest add habit-button-animation

Preview

Dependencies

PackageVersion
@expo/vector-icons^15.0.2
moti^0.29.0
react-native-gesture-handler~2.28.0
react-native-reanimated~4.1.0

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

bun add @expo/vector-icons@"^15.0.2" moti@"^0.29.0" react-native-gesture-handler@"~2.28.0" react-native-reanimated@"~4.1.0"

npm install @expo/vector-icons@"^15.0.2" moti@"^0.29.0" react-native-gesture-handler@"~2.28.0" react-native-reanimated@"~4.1.0"

yarn install @expo/vector-icons@"^15.0.2" moti@"^0.29.0" react-native-gesture-handler@"~2.28.0" react-native-reanimated@"~4.1.0"

pnpm install @expo/vector-icons@"^15.0.2" moti@"^0.29.0" react-native-gesture-handler@"~2.28.0" react-native-reanimated@"~4.1.0"

Source code