Animated tabs - Reanimated, Moti, Lucide Icons

Description

Animated tabs using React Native Reanimated layout animations, `entering` & `exiting` animations, Moti to animate the Lucide Icons and `LayoutAnimationConfig` to skip the entering animation. We use `motifySvg` to be able to animate the svg icon colors, as well as `entering` and `exiting` from React Native Reanimated to control the animation for the tab labels. As a small UI/UX touch, we'll be using `LayoutAnimationConfig` from React Native Reanimated to `skipEntering` the tab label, in this way, on initial render, the label will not be animated.

Installation

bunx @animatereactnative/cli@latest add animated-tabs-reanimated-moti-lucide-icons

npx @animatereactnative/cli@latest add animated-tabs-reanimated-moti-lucide-icons

yarn @animatereactnative/cli@latest add animated-tabs-reanimated-moti-lucide-icons

pnpm dlx @animatereactnative/cli@latest add animated-tabs-reanimated-moti-lucide-icons

Preview

Dependencies

PackageVersion
lucide-react-native^0.456.0
moti^0.29.0
react-native-reanimated~4.1.0
react-native-svg15.12.1

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

bun add lucide-react-native@"^0.456.0" moti@"^0.29.0" react-native-reanimated@"~4.1.0" react-native-svg@"15.12.1"

npm install lucide-react-native@"^0.456.0" moti@"^0.29.0" react-native-reanimated@"~4.1.0" react-native-svg@"15.12.1"

yarn install lucide-react-native@"^0.456.0" moti@"^0.29.0" react-native-reanimated@"~4.1.0" react-native-svg@"15.12.1"

pnpm install lucide-react-native@"^0.456.0" moti@"^0.29.0" react-native-reanimated@"~4.1.0" react-native-svg@"15.12.1"

Source code