react-native-animatable-pressable

React Native Animatable Pressable

Frustrated about the lack of animating Pressable just like TouchableOpacity in React Native? This module aims to fix that.

Installation

Since this library relies on react-native-reanimated, first, ensure you have it installed in your project as it's a peer dependency of this library.

npm install react-native-reanimated

Then, install react-native-animatable-pressable:

npm install react-native-animatable-pressable

If it fails, run it with legacy peer deps like so:

npm install react-native-animatable-pressable --legacy-peer-deps

For iOS users, navigate to the ios directory and update your pods:

cd ios
pod update

Simple Usage

import AnimatedPressable from 'react-native-animatable-pressable';

<AnimatedPressable onPress={() => console.log('Pressed!')}>
  <Text>Press Me</Text>
</AnimatedPressable>

Full Example

import AnimatedPressable from 'react-native-animatable-pressable';

const App = () => {
 return(
  <AnimatedPressable
   onPress={() => console.log('Pressed!')}
   style={{ backgroundColor: 'blue', padding: 10 }}
   disableOpacity={true}
   zoomLevel={1.1}
   disabled={false}
   disableZoom={false}
   onLongPress{() => console.log('Pressed too long!')}
  >
   <Text style={{ color: 'tomato' }}>My animated Pressable button</Text>
 </AnimatedPressable>
)
}
export default App;

Props

onPress: Function to execute on press.

onLongPress: Function to execute on long press.

style: Style object to apply to the pressable component.

disableOpacity: Boolean to disable opacity animation. Defaults to false.

disableZoom: Boolean to disable zoom (scale) animation. Defaults to false.

zoomLevel: Number specifying the scale factor for the zoom animation. Defaults to 1.02.

disabled: Boolean to disable triggering functions. Defaults to false.

License

You can do whatever you want with this library. Commercial or non-commercial use.

MIT