expo-multi-touch

0.0.0 • Public • Published

expo-multi-touch

Module for getting events whenever a individual touch changes

NPM

To get started: yarn add expo-multi-touch in your Expo project and import it with import { MultiTouchView } from 'expo-multi-touch';.

Components

<MultiTouchView />

Wrap your components with this component and use it to get notified whenever a touch begins, moves, ends, or cancels.

Props

Property Type Default Description
onTouchBegan function function called when a single touch begins
onTouchMoved function function called when a single touch moves
onTouchEnded function function called when a single touch ends
onTouchCancelled function function called when a single touch cancels
onTouchesBegan function function called when a touch begins (onPanResponderGrant)
onTouchesMoved function function called when a touch moves (onPanResponderMove)
onTouchesEnded function function called when a touch ends (onPanResponderRelease)
onTouchesCancelled function function called when a touch cancels (onPanResponderTerminate)
onStartShouldSetPanResponder () => Boolean () => true Ask to be the responder
onStartShouldSetPanResponderCapture () => Boolean () => true Ask to be the responder
onMoveShouldSetPanResponder () => Boolean () => true Ask to be the responder
onMoveShouldSetPanResponderCapture () => Boolean () => true Ask to be the responder
onPanResponderTerminationRequest () => Boolean () => true Should the responder terminate the request
onShouldBlockNativeResponder () => Boolean () => true Android: Should the responder block native requests

Structure

A function is passed an event with the following structure:

event = ({
  ...event.nativeEvent,
  preventDefault: () => {},
  stopPropagation: () => {},
  gestureState
}) => {
 
}

instead of

event = (event, gestureState) => {}

Example

Snack

import React from 'react';
import { View } from 'react-native';
import { MultiTouchView } from 'expo-multi-touch';
 
class App extends React.Component {
  render() {
     const props = {
      onTouchBegan: ({ identifier }) => {
        console.log('onTouchBegan', identifier);
      },
      onTouchEnded: event => {
        const { identifier, deltaX, deltaY, isTap, isLongPress } = event;
        console.log('onTouchEnded', identifier, deltaX, deltaY, isTap, isLongPress);
      },
      onTouchesBegan: ({ gestureState }) => {
        console.log('onTouchesBegan', gestureState);
      },
      onTouchesMoved: () => {
      },
      onTouchesEnded: () => {
        console.log('onTouchesEnded');
      },
      onTouchesCancelled: () => {
        console.log('onTouchesCancelled');
      },
    };
 
    return (
      <MultiTouchView
        style={{ flex: 1 }}
        {...props}>
          <View />
      </MultiTouchView>
    )
  }
}

Package Sidebar

Install

npm i expo-multi-touch

Weekly Downloads

1

Version

0.0.0

License

MIT

Unpacked Size

27.8 kB

Total Files

9

Last publish

Collaborators

  • evanbacon