React Native Like Button

Provides an animated like/unlike button for reusability.

Features

• Animated Like Button
• Fully customizable

✨ Preview

Installation

Just run the below command in your project folder

Note:- This runs only in React Native CLI project. For Expo projects, use this package.

To install,

npm install --save react-native-like-button

Usage

UnControlled Component

Below shown is the usage of the component as an uncontrolled component.

import LikeButton from 'react-native-like-button';

...

// basic Usage
<LikeButton />

Controlled Component

For controlled component, you can use it as shown.

import LikeButton from "react-native-like-button";

const [Liked, SetLiked] = useState(true);

const onLikePress = async () => {
  // Do something for Like operation
  SetLiked(true);
};

const onUnLikePress = async () => {
  // Do something for Like operation
  SetLiked(true);
};

// basic Usage
<LikeButton liked={Liked} onPress={Liked ? onUnLikePress : onLikePress} />;

Parameters

Basic Parameters

| Parameter | Default | Description | | --------- | ----------- | --------------------------------------------------------------------------------------------------- | | liked | undefined | Color of the timestamp which shows total time that has been elapsed since the video started playing | | onPress | undefined | Color of the timestamp which shows total duration of the clip | | iconSize | undefined | Color of the timestamp which shows total duration of the clip |

Liked Icon Component Props

| Parameter | Default | Description | | -------------------- | ----------------- | ---------------------------------------------------------------------------------- | | likedColor | red | Color of the liked icon | | likedIconName | "heart-outline" | name of the icon when liked is true (Derived from MaterialCommunityIcons family) | | customLikedComponent | null | custom component to show in place of liked icon |

UnLiked Icon Component Props

| Parameter | Default | Description | | ---------------------- | --------- | ----------------------------------------------------------------------------------- | | unlikedColor | black | Color of the unliked icon | | unlikedIconName | "heart" | name of the icon when liked is false (Derived from MaterialCommunityIcons family) | | customUnlikedComponent | null | custom component to show in place of unliked icon |