pinch-zoom-responder
Easily add pinch and zoom gestures to your React Native components.
Setup
npm install --save react-native-pinch-zoom-responder
Usage
{ superprops thisstate = width: 1 height: 1 thispinchZoomResponder = { console } { console } { if gestureState console var transform = this this } } { this } { thistransformView } /* React Native view transforms have the component center as their origin, so we need to wrap our transform with translations that compensate for this and place the origin at 0,0 */ { var translate = MatrixMath var copy = matrix MatrixMath MatrixMath MatrixMath MatrixMath return copy } { return <View ...thispinchZoomResponderhandlers onLayout= this> <Text ref= { thistransformView = ref }>Pinch me!</Text> </View> }
The gestureState object has the shape:
transform cx cy scaleX scaleY dx dy
transform
is a 4x4 matrix that can be used withreact-native/Libraries/Utilities/MatrixMath
to easily transform points and graphics.cx
is the pinch X centercy
is the pinch Y centerscaleX
is the pinch x scalescaleY
is the pinch y scaledx
is the current delta x of the center of the pinchdy
is the current delta y of the center of the pinch
Configuration
The responder can also receive a set of options as the second parameter.
var responders = {} {} {}var options = transformX: true transformY: trueresponders options
The options
object is optional and it's fields can include:
transformX
true | false. True by default. Enables transformation along the X axistransformY
true | false. True by default. Enables transformation along the Y axis.