Touchable Scale Reanimated

Hi 👋

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

Getting Started  |  Properties  |  Example  

🚀 Getting Started

Prerequisites

• React Native
• Node v14.17.1
• Reanimated 2

Install

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

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