react-native-animated-pressable

PressableAnimated

PressableAnimated is a React Native UI component that allows you to create pressable elements with an animation. The animation is fully customizable, offering flexibility in its usage.

Table of Contents

• Intro
• Motivation
• Installation
• Demo
• Usage
• API
• Example

Intro 🚀

PressableAnimated is not just another UI component; it's a delightful concoction of interactivity, design, and simplicity, crafted meticulously to enhance your React Native apps. It allows developers to harness the power of animations without wrestling with the complexities typically associated with implementing them.

Motivation 🎯

I created PressableAnimated to make animations more accessible to developers. It packages the vibrant world of animations into an easy-to-use component, offering developers a quick and straightforward way to animate pressable elements, all without compromising customization or control.

My hope is that PressableAnimated will help you not only to make your apps more engaging and delightful but also to spark your curiosity to explore and play with animations in your own creative ways. Happy coding!

Installation 💻

Installing PressableAnimated, is a breeze and can be done with either npm or yarn.

npm install react-native-animated-pressable

or

yarn add react-native-animated-pressable

Demo 🎥

Press animation is significantly smoother in reality compared to the gifs presented below.

Example 1

scaleValue={1.2}

Example 2

scaleValue={0.8}

Usage

First, import the PressableAnimated component in your project.

import { PressableAnimated } from "./src/components/PressableAnimated";

Then wrap the component you want to animate with the PressableAnimated component.

import { PressableAnimated } from "./src/components/PressableAnimated";
import { StyleSheet, Text, View } from "react-native";

export default function App() {
  return (
    <View style={styles.container}>
      <PressableAnimated
        bounce
        customStyles={styles.customStyles}
        scaleValue={1.2}
        onPress={() => {
          console.log("onPress");
        }}
        onPressIn={() => {
          console.log("onPressIn");
        }}
        onPressOut={() => {
          console.log("onPressOut");
        }}
      >
        <Text style={styles.text}>App</Text>
      </PressableAnimated>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  customStyles: {
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "#071D38",
    width: 200,
    height: 200,
    borderRadius: 20,
  },
  text: {
    color: "#fff",
    fontSize: 20,
  },
});

API

PressableAnimated accepts the following props:

Prop	Type	Default	Description
scaleValue	number	1.03	The value to which the component scales when pressed.
duration	number	500	The duration of the scale animation, in milliseconds.
isDisabled	boolean	false	If true, disables the pressable functionality.
isPressed	boolean	false	Manually controls the pressed state of the component.
customStyles	StyleProp<ViewStyle>	undefined	Styles the Animated View.
onPress	() => void	undefined	Callback function invoked when the press is released.
onPressIn	() => void	undefined	Callback function invoked when the press is initiated.
onPressOut	() => void	undefined	Callback function invoked when the press is released.
children	React.ReactNode	undefined	The components to be rendered inside the PressableAnimated component.