https://github.com/kartikeyvaish/expo-like-button
Animated Like Button Component for React native apps made using expo.
https://github.com/kartikeyvaish/expo-like-button
expo like react-native
Last synced: 7 months ago
JSON representation
Animated Like Button Component for React native apps made using expo.
- Host: GitHub
- URL: https://github.com/kartikeyvaish/expo-like-button
- Owner: kartikeyvaish
- License: mit
- Created: 2021-11-24T07:42:34.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2021-11-24T08:34:27.000Z (almost 4 years ago)
- Last Synced: 2025-02-06T08:46:52.527Z (8 months ago)
- Topics: expo, like, react-native
- Language: TypeScript
- Homepage: https://github.com/kartikeyvaish/expo-like-button
- Size: 550 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Expo 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 an Expo Managed and Bare(expo) project and not in React Native CLI project.
To install,
npm install --save expo-like-button
## Usage
### UnControlled Component
Below shown is the usage of the component as an uncontrolled component.
```javascript
import LikeButton from 'expo-like-button';
...
// basic Usage
```
### Controlled Component
For controlled component, you can use it as shown.
```javascript
import LikeButton from "expo-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 |