amdigbari / react-native-zoomable-box

ZoomableBox

ZoomableBox is a react Component that makes it's children zoomable

IMPORTANT!

Before anything make sure you have react-native-gesture-handler on your project.

You can add it by following these instructions here

Installation

yarn add react-native-zoomable-box

or

npm install --save react-native-zoomable-box

Usage

<ZoomableBox style={{ flex: 1 }}>
  <View style={{ backgroundColor: "red", flex: 1, alignItems: "center", justifyContent: "center" }}>
    <Text style={{ color: "white", fontSize: 20 }}>Zoomable Box</Text>
  </View>
</ZoomableBox>

Props

Non of props are required.

Parameter	Type	Default
style	object	___
backToDefault	boolean	true
swipeCompleteDirection	string	'y'
swipeThreshold	number	100
doubleTapScale	number	4
maxScale	number	4
doubleTap	boolean	false
animationTiming	number	250
maxDoubleTapDist	number	25

Events

Parameter	params
backHandler	({ translateX, translateY, scale }) => ...
onSwipeComplete	({ translateX, translateY, scale, translationX, translationY, velocityY, velocityX, swipeDirection }) => ...

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.