Repository files navigation

⚠️ This package is still in early stage, it will have a heaps of API changes before it move to 1.0⚠️

React Native Composable Gesture Library

Assuming you are usingreact-native, because I don't know how it will workin other libraries...

• Install via npm

npm i -S react-native-gestures

Then write some js like the simple code samples as a React componentand render it in yourreact-native app.

importReact,{View,Text}from'react-native';import{drag,pinch,GestureView}from'react-native-gestures';exportdefaultReact.createClass({render(){onGestureError(err){console.error(err);},return(<View><GestureViewstyle={movable}gestures={[drag,pinch]}toStyle={(layout)=>{return{top:layout.y,left:layout.x,width:layout.width,height:layout.height,transform:[{rotate:`${layout.rotate}deg`}]}}}onError={console.error.bind(console)}><Text>HEHE</Text><Text>HEHE</Text></GestureView></View>);}});

As you can see, it's just a very simple React component you can use in this package, maybeit will have more components in the future, or not.

There are few properties it accpets:

• gestures - aArray ofgestures
• onError - aFunction will be called when anything bad happens
• style - astyle same as<View>'sstyle property
• toStyle - a mapping function that allow you to pick the changes you want to css style
• children - ... you know, just React children, nothing special

Example:

letstyle={position:'absolute',backgroundColor:'#F00'};<GestureViewstyle={style}onError={console.error.bind(console)}gestures={[...]}><Text>This is the children I say</Text></GestureView>

Every gesture in this module is just a simple combination of two things:

1. Atransducer calledcalculate(please suggest me a better name)

   This is the actual function that calculates the new positions of the viewwhen the move gesture event comes in.

2. Anumber calledGESTURE_NUMBER

   This define that the gesture will start calculate when the gesture numbermatches this number.

   You can set any number you want if your touch screen supports it :p

It's just a simple transducer takes one finger input with the move of thefinger and generates new layout of the component.

It's a pinch gesture, also a zoom gesture. It takes two fingers gestures andgenerates new layout of the component.

Using