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