Pinch to pan-n-zoom react-native-svg components using a render prop.
npm install zoomable-svgAdvanced Example: InfiniDraw
Universal svg drawing with pan and zoom. Builds on Next.js and react-native-web for the web version, and react-native for native apps.
Uses react-native-svg on native, svgs for the web, and zoomable-svg in both.
``jsx harmony
import React, { Component } from 'react';
import { View, StyleSheet, Dimensions, Animated } from 'react-native';
import { Svg } from 'expo';
import ZoomableSvg from 'zoomable-svg';
const { G, Circle, Path, Rect } = Svg;
const { width, height } = Dimensions.get('window');
const AnimatedRect = Animated.createAnimatedComponent(Rect);
const colors = ['red', 'green', 'blue', 'yellow', 'brown'];
class SvgRoot extends Component {
state = {
color: 'red',
initAnim: new Animated.Value(0),
};
componentDidMount() {
Animated.timing(
// Animate over time
this.state.initAnim,
{
toValue: 1,
duration: 3000,
useNativeDriver: false,
},
).start();
}
onPress = () => {
this.setState(({ color }) => ({
color: colors[(colors.indexOf(color) + 1) % colors.length],
}));
const { onToggle } = this.props;
if (onToggle) {
onToggle();
}
};
render() {
const { initAnim, color } = this.state;
let translateRectY = initAnim.interpolate({
inputRange: [0, 1],
outputRange: ['0', '50'],
});
const { transform } = this.props;
return (
);
}
}
const constraintCombinations = [
'none',
'dynamic',
'static',
'union',
'intersect',
];
export default class App extends Component {
state = {
type: 1,
constrain: true,
constraints: {
combine: 'dynamic',
scaleExtent: [width / height, 5],
translateExtent: [[0, 0], [100, 100]],
},
};
onToggle = () =>
this.setState(({ type, constraints }) => {
const nextType = (type + 1) % constraintCombinations.length;
return {
type: nextType,
constrain: nextType !== 0,
constraints: {
...constraints,
combine: constraintCombinations[nextType],
},
};
});
childProps = { onToggle: this.onToggle };
render() {
const { constrain, constraints } = this.state;
return (
vbWidth={100}
vbHeight={100}
width={width}
height={height}
initialTop={-20}
initialLeft={-50}
initialZoom={1.2}
doubleTapThreshold={300}
meetOrSlice="meet"
svgRoot={SvgRoot}
childProps={this.childProps}
constrain={constrain ? constraints : null}
/>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: '#ecf0f1',
},
});
`
Drawing Example
`jsx harmony
import React, { Component } from 'react';
import {
View,
StyleSheet,
Dimensions,
PanResponder,
TouchableOpacity,
Text,
} from 'react-native';
import { Svg } from 'expo';
import ZoomableSvg from 'zoomable-svg';
const { G, Path, Rect } = Svg;
const { width, height } = Dimensions.get('window');
class SvgRoot extends Component {
state = {
paths: [],
currentPath: null,
};
processTouch = (sx, sy) => {
const { transform } = this.props;
const { currentPath } = this.state;
const { translateX, translateY, scaleX, scaleY } = transform;
const x = (sx - translateX) / scaleX;
const y = (sy - translateY) / scaleY;
if (!currentPath) {
this.setState({ currentPath: M${x},${y} });${currentPath}L${x},${y}
} else {
this.setState({ currentPath: });
}
};
componentWillMount() {
const noop = () => {};
const yes = () => true;
const shouldRespond = () => {
return this.props.drawing;
};
this._panResponder = PanResponder.create({
onPanResponderGrant: noop,
onPanResponderTerminate: noop,
onShouldBlockNativeResponder: yes,
onMoveShouldSetPanResponder: shouldRespond,
onStartShouldSetPanResponder: shouldRespond,
onPanResponderTerminationRequest: shouldRespond,
onMoveShouldSetPanResponderCapture: shouldRespond,
onStartShouldSetPanResponderCapture: shouldRespond,
onPanResponderMove: ({ nativeEvent: { touches } }) => {
const { length } = touches;
if (length === 1) {
const [{ pageX, pageY }] = touches;
this.processTouch(pageX, pageY);
}
},
onPanResponderRelease: () => {
this.setState(({ paths, currentPath }) => ({
paths: [...paths, currentPath],
currentPath: null,
}));
},
});
}
render() {
const { paths, currentPath } = this.state;
const { transform } = this.props;
return (
);
}
}
const constraints = {
combine: 'dynamic',
scaleExtent: [width / height, 5],
translateExtent: [[0, 0], [100, 100]],
};
export default class App extends Component {
state = {
drawing: false,
};
toggleDrawing = () => {
this.setState(({ drawing }) => ({
drawing: !drawing,
}));
};
render() {
const { drawing } = this.state;
return (
vbWidth={100}
vbHeight={100}
width={width}
height={height}
initialTop={0}
initialLeft={0}
initialZoom={1}
doubleTapThreshold={300}
meetOrSlice="meet"
svgRoot={SvgRoot}
lock={drawing}
childProps={this.state}
constrain={constraints}
/>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: '#ecf0f1',
},
absfill: {
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0,
},
button: {
position: 'absolute',
bottom: 10,
right: 10,
},
});
``