React Native Animated Touchable Component

Documentation

• Example
• Installation
• Web Support
• Props
• Usage

Example

Example

Installation

This component uses Moti, which uses Reanimated 2 so you need to install Moti and Reanimated 2.

1. Install Moti

npm install moti

2. Install Reanimated 2

Moti requires that you install react-native-reanimated. The minimum version of Reanimated it's been tested on is 2.0.0-rc.0.

If you're using Expo

Please follow the Expo instructions for installing react-native-reanimated v2.

You'll need at least Expo SDK 40.

If you aren't using Expo

Please follow Reanimated's installation instructions for v2.

3. Install the package

npm install react-native-touchable-moti

Web

Follow this instruction https://moti.fyi/web

Props

Usage

Import

import { TouchableScale, TouchableLift } from  'react-native-touchable-moti';

TouchableScale

<TouchableScale style={styles.button} onPress={}>
    <Text style={styles.text}>Press me!</Text>
</TouchableScale>

TouchableLift

<TouchableLift style={styles.button} onPress={}>
    <Text style={styles.text}>Press me!</Text>
</TouchableLift>

You can use it as a wrapper too, like this

<TouchableLift onPress={}>
    <View style={styles.button}>
	    <Text style={styles.text}>Press me!</Text>
    </View>
</TouchableLift>

Big thanks to Fernando Rojo

Try Moti

Reach me on twitter @kikiding