Touchable Scale Reanimated

Hi 👋

Touchable Scale Reanimated is a simple React Native component animated with Reanimated 2 that scale when a gesture is handled

Prerequisites

• React Native
• Node v14.17.1
• Reanimated 2

Install

npm install react-native-touchable-scale-reanimated

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|

You can find an example under the folder /example/button-scale/.

Run installation from here

npm install react-native-touchable-scale-reanimated

Run app with the following command package version

npm start

Here you can find a defined component (ie. Button ), wrapped with the Touchable Scale component:

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