https://github.com/kartikeyvaish/react-native-like-button
Animated Like Button Component for React native apps
https://github.com/kartikeyvaish/react-native-like-button
like react-native
Last synced: 3 months ago
JSON representation
Animated Like Button Component for React native apps
- Host: GitHub
- URL: https://github.com/kartikeyvaish/react-native-like-button
- Owner: kartikeyvaish
- License: mit
- Created: 2021-11-24T12:21:43.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2021-11-24T12:31:58.000Z (almost 4 years ago)
- Last Synced: 2025-05-26T12:59:33.342Z (4 months ago)
- Topics: like, react-native
- Language: Java
- Homepage: https://github.com/kartikeyvaish/react-native-like-button
- Size: 361 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# 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](https://github.com/kartikeyvaish/expo-like-button) 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.
```javascript
import LikeButton from 'react-native-like-button';
...
// basic Usage
```
### Controlled Component
For controlled component, you can use it as shown.
```javascript
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
;
```
## 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 |