https://github.com/codingki/react-native-touchable-moti

React Native Touchable with Custom Animations
https://github.com/codingki/react-native-touchable-moti

expo moti react-native

Last synced: 3 days ago
JSON representation

React Native Touchable with Custom Animations

• Host: GitHub
• URL: https://github.com/codingki/react-native-touchable-moti
• Owner: codingki
• Created: 2021-02-09T06:24:01.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2021-02-16T01:38:06.000Z (over 3 years ago)
• Last Synced: 2024-05-01T17:51:43.171Z (7 months ago)
• Topics: expo, moti, react-native
• Language: TypeScript
• Homepage:
• Size: 1.39 MB
• Stars: 18
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React Native Animated Touchable Component

![Preview](preview.gif)

# Documentation

- [Example](#Example)

- [Installation](#Installation)

- [Web Support](#Web)

- [Props](#Props)

- [Usage](#Usage)

## Example

[Example](https://github.com/codingki/react-native-touchable-moti)

## Installation

This component uses [Moti](https://moti.vercel.app/), 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](https://docs.expo.io/versions/latest/sdk/reanimated/#experimental-support-for-v2) for installing `react-native-reanimated` v2.

You'll need at least [Expo SDK 40](https://docs.expo.io/workflow/upgrading-expo-sdk-walkthrough/).

#### If you aren't using Expo

Please follow Reanimated's [installation instructions](https://docs.swmansion.com/react-native-reanimated/docs/installation) for v2.

### 3. Install the package

    npm install react-native-touchable-moti

## Web

Follow this instruction [https://moti.fyi/web](https://moti.fyi/web)

## Props

| Props                                                          | Required | TochableScale Default Value | TouchableLift Default Value |

| -------------------------------------------------------------- | -------- | --------------------------- | --------------------------- |

| [PressableProps](https://reactnative.dev/docs/pressable#props) |          |                             |                             |

| value                                                          | no       | 1.1                         | -10                         |

## Usage

### Import

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

### TouchableScale

    

        Press me!

    

### TouchableLift

    

        Press me!

    

You can use it as a wrapper too, like this

    

        

    	    Press me!

        

    

Big thanks to [Fernando Rojo](https://twitter.com/fernandotherojo)

Try [Moti](https://moti.vercel.app/)

Reach me on twitter [@kikiding](https://twitter.com/kikiding)