Instagram Like button in React Native and Reanimated v2

one of the approaches to create associate degree app feel larger polished is by means that of introducing animations and transitions that lead to higher visual remarks while users area unit interacting along with your app.

For me for my half, it's been fun trying to find little things that i am able to do and will structure a superb addition ultimately.

permit's explore the thanks to bring a better relish whereas customers area unit toggling a "like" button by victimization reproducing (or seeking to) the Instagram model.

Why Reanimated?

React Native has its own animation genus Apis and that they work nice for heaps of cases. the problem is that for additional complicated situations it'll not support running those animations within the native thread, which may cause performance problems and quality since it then competes for resources with JavaScript.

React Native alive could be a library that permits developers to put in writing sleek animations on React Native by ensuring they're rendered within the native thread and not interference JavaScript from handling alternative stuff at a similar time.

They recently rewrote the whole library by re-thinking each the design and every one of the genus Apis they supply.

One of the goals being to create it easier for developers to use and perceive, therefore i have been mistreatment version two for a few time and that i suppose you ought to too!

import React from "react";

import Animated, {

  useSharedValue,

  withSpring,

  useAnimatedStyle,

  Extrapolate,

  interpolate,

} from "react-native-reanimated";

import { Pressable, View, Button, StyleSheet } from "react-native";

import { MaterialCommunityIcons } from "@expo/vector-icons";

const LikeButton = () => {

  const liked = useSharedValue(0);

  const outlineStyle = useAnimatedStyle(() => {

    return {

      transform: [

        {

          scale: interpolate(liked.value, [0, 1], [1, 0], Extrapolate.CLAMP),

        },

      ],

    };

  });

  const fillStyle = useAnimatedStyle(() => {

    return {

      transform: [

        {

          scale: liked.value,

        },

      ],

      opacity: liked.value,

    };

  });

  return (

    <Pressable onPress={() => (liked.value = withSpring(liked.value ? 0 : 1))}>

      <Animated.View style={[StyleSheet.absoluteFillObject, outlineStyle]}>

        <MaterialCommunityIcons

          name={"heart-outline"}

          size={32}

          color={"black"}

        />

      </Animated.View>

      <Animated.View style={fillStyle}>

        <MaterialCommunityIcons name={"heart"} size={32} color={"red"} />

      </Animated.View>

    </Pressable>

  );

};

export default function AnimatedStyleUpdateExample(props) {

  return (

    <View

      style={{

        flex: 1,

        alignItems: "center",

        justifyContent: "center",

        flexDirection: "column",

      }}

    >

      <LikeButton />

    </View>

  );

}