RN-Animated-Pressable

RN-Animated-Pressable is a lightweight, drop-in replacement for the deprecated TouchableOpacity component in React Native. It uses the Pressable component with added opacity animation to provide a smooth user experience.

Features

• Lightweight and easy to integrate.
• Smooth opacity animation on press.
• Fully customizable with additional props.

Installation

You can install the package using npm or yarn:

npm install rn-animated-pressable

or

yarn add rn-animated-pressable

Usage

Import the component in your React Native file:

import RNAnimatedPressable from "rn-animated-pressable";

Use it in your component:

<RNAnimatedPressable onPress={() => console.log("Pressed!")}>
  <Text>Press me!</Text>
</RNAnimatedPressable>

Props

RNAnimatedPressable accepts all the props that a regular Pressable component does, plus the following additional props:

• activeOpacity (number, default: 0.2): The opacity of the component when pressed.
• disabled (boolean, default: false): If true, disables all interactions for this component.

Example

Here's a basic example of how to use RNAnimatedPressable:

import React from "react";
import { Text, View } from "react-native";
import RNAnimatedPressable from "rn-animated-pressable";

const MyComponent = () => {
  return (
    <View>
      <RNAnimatedPressable
        onPress={() => console.log("Button pressed!")}
        activeOpacity={0.5}
        style={{ padding: 10, backgroundColor: "blue" }}
      >
        <Text style={{ color: "white" }}>Press me!</Text>
      </RNAnimatedPressable>
    </View>
  );
};

export default MyComponent;

Performance

RN-Animated-Pressable is designed to be lightweight and efficient. It uses the native driver for animations, ensuring smooth performance even on low-end devices.

License

This project is licensed under the MIT License.

Authors

• @sndeshmukh00