# react-native-touchable-scale-reanimated-reanimated

> 🖐️ Touchable component that scale when a gesture is handled

Latest version **1.0.1** (published 2022-05-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-touchable-scale-reanimated-reanimated
pnpm add react-native-touchable-scale-reanimated-reanimated
yarn add react-native-touchable-scale-reanimated-reanimated
bun add react-native-touchable-scale-reanimated-reanimated
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2022-05-03 |
| First published | 2022-05-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 10.8 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 2 |
| Author | ialoig |
| Maintainers | ialoig |
| Keywords | react-native, reanimated2, touchable, gesture-handler |

## Links

- npm: https://www.npmjs.com/package/react-native-touchable-scale-reanimated-reanimated
- Repository: https://github.com/ialoig/react-native-touchable-scale-reanimated
- Homepage: https://github.com/ialoig/react-native-touchable-scale-reanimated#readme
- Issues: https://github.com/ialoig/react-native-touchable-scale-reanimated/issues
- npm.io page: https://npm.io/package/react-native-touchable-scale-reanimated-reanimated

## Dependencies (5)

- [react](https://npm.io/package/react.md) *
- [prop-types](https://npm.io/package/prop-types.md) ^15.8.1
- [react-native](https://npm.io/package/react-native.md) *
- [react-native-reanimated](https://npm.io/package/react-native-reanimated.md) ~2.2.0
- [react-native-gesture-handler](https://npm.io/package/react-native-gesture-handler.md) ~1.10.2

## Alternatives

- [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads
- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads

## Recent versions

- 1.0.1 (latest) — 2022-05-03
- 1.0.0 — 2022-05-03

## README

# Touchable Scale 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

<p align="center">
  <img src="./example/button-scale/src/assets/img/scale-button.gif" alt="TouchableScale">
</p>

<div align="center">
  <a href="#GettingStarted">Getting Started</a> &nbsp;|&nbsp;
  <a href="#Properties">Properties</a> &nbsp;|&nbsp;
  <a href="#Example">Example</a> &nbsp;
</div>

<h1 id="Getting-Started">🚀 Getting Started</h1>

## 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
```

<h1 id="Properties">📝 Properties</h1>

### 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|

<h1 id="Example">Example</h1>

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 (
    <TouchableScale 
      onPress={onPress} 
      style={[ button.button, button[type], button[size], border ? button.border : null ]]}>
      <Text style={[ text.button, text[type]]}>
        {title}
      </Text>
    </TouchableScale>
  )
}

export default Button
```

---
made with 💪 by ialoig

---
_Source: https://npm.io/package/react-native-touchable-scale-reanimated-reanimated · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._