https://github.com/ialoig/react-native-touchable-scale-reanimated
Touchable component that scale when a gesture is handled
https://github.com/ialoig/react-native-touchable-scale-reanimated
javascript react react-native reactjs reanimated2
Last synced: 3 months ago
JSON representation
Touchable component that scale when a gesture is handled
- Host: GitHub
- URL: https://github.com/ialoig/react-native-touchable-scale-reanimated
- Owner: ialoig
- License: mit
- Created: 2021-07-02T09:00:20.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2022-06-06T10:30:03.000Z (about 4 years ago)
- Last Synced: 2025-10-11T08:13:58.740Z (9 months ago)
- Topics: javascript, react, react-native, reactjs, reanimated2
- Language: JavaScript
- Homepage:
- Size: 461 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Touchable Scale Reanimated [](https://github.com/ialoig/react-native-touchable-scale-reanimated) [](https://www.npmjs.com/package/react-native-touchable-scale-reanimated-reanimated)
### Hi 👋
### `Touchable Scale Reanimated` is a simple React Native component animated with [`Reanimated 2`](https://www.reanimated2.com/) that scale when a gesture is handled
🚀 Getting Started
## Prerequisites
* [React Native](https://facebook.github.io/react-native/docs/getting-started.html)
* [Node v14.17.1](https://nodejs.org/en/)
* [Reanimated 2](https://docs.swmansion.com/react-native-reanimated/)
## Install
```shell
npm install react-native-touchable-scale-reanimated
```
📝 Properties
### Touchable Scale Reanimated
| Property | Type | Optional | Default | Description |
| :-----: | :---------------------------------------------------: | :-------:| :-----------------------------------------------: | :--------------------:|
| `style`| `array or object`|Yes| `-`| Style definition of the component we want to render|
| `children`| `array or object`|No|`-`| Component|
| `onPress`| `func`|Yes|`-`| Function to be called when onPress event is handled|
| `scaleValue`| `number`|Yes|`0.95`| Set how much you want to scale the component|
| `durationValue`|`number`|Yes| `150`| Set the scale duration|
Example
You can find an example under the folder `/example/button-scale/`.
Run installation from here
```shell
npm install react-native-touchable-scale-reanimated
```
Run app with the following command package version
```shell
npm start
```
Here you can find a defined component (ie. Button ), wrapped with the Touchable Scale component:
```jsx
import React from 'react'
import TouchableScale from "../TouchableScale"
function Button ({ title, type, size, border, onPress }) {
return (
{title}
)
}
export default Button
```
---
made with 💪 by ialoig