Lucide React Native Animated Icon

[RainPlays09]

How do I animated icons using react-native-reanimated createAnimatedComponent??

[AnisKehila]

You can animate Lucide icons in React Native by wrapping them with createAnimatedComponent from react-native-reanimated. Here's a simple example:

import React, { useEffect } from 'react';
import { View } from 'react-native';
import { Heart } from 'lucide-react-native';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withTiming,
  Easing,
  createAnimatedComponent,
} from 'react-native-reanimated';

const AnimatedHeart = createAnimatedComponent(Heart);

export default function AnimatedIcon() {
  const rotation = useSharedValue(0);

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ rotate: `${rotation.value}deg` }],
  }));

  useEffect(() => {
    rotation.value = withTiming(360, {
      duration: 1000,
      easing: Easing.inOut(Easing.ease),
    });
  }, []);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <AnimatedHeart size={48} color="red" style={animatedStyle} />
    </View>
  );
}