Open rchavik opened 1 year ago
This seems to work on web + ios:
diff --git a/src/components/SvgMask.tsx b/src/components/SvgMask.tsx
index db7481c..61f353d 100644
--- a/src/components/SvgMask.tsx
+++ b/src/components/SvgMask.tsx
@@ -5,11 +5,11 @@ import {
Easing,
LayoutChangeEvent,
Platform,
+ ScaledSize,
StyleProp,
+ TouchableWithoutFeedback,
View,
ViewStyle,
- TouchableWithoutFeedback,
- ScaledSize,
} from 'react-native'
import Svg, { PathProps } from 'react-native-svg'
import { IStep, ValueXY } from '../types'
@@ -37,10 +37,9 @@ interface State {
animation: Animated.Value
canvasSize: ValueXY
previousPath: string
+ d: string
}
-const IS_WEB = Platform.OS !== 'web'
-
export class SvgMask extends Component<Props, State> {
static defaultProps = {
easing: Easing.linear,
@@ -80,6 +79,7 @@ export class SvgMask extends Component<Props, State> {
opacity: new Animated.Value(0),
animation: new Animated.Value(0),
previousPath: this.firstPath,
+ d: this.firstPath,
}
this.listenerID = this.state.animation.addListener(this.animationListener)
@@ -125,13 +125,9 @@ export class SvgMask extends Component<Props, State> {
const d = this.getPath()
this.rafID = requestAnimationFrame(() => {
if (this.mask && this.mask.current) {
- if (IS_WEB) {
- // @ts-ignore
- this.mask.current.setNativeProps({ d })
- } else {
- // @ts-ignore
- this.mask.current._touchableNode.setAttribute('d', d)
- }
+ this.setState({
+ d,
+ })
}
})
}
@@ -205,7 +201,7 @@ export class SvgMask extends Component<Props, State> {
fill={this.props.backdropColor}
strokeWidth={0}
fillRule='evenodd'
- d={this.firstPath}
+ d={this.state.d}
opacity={this.state.opacity as any}
/>
</Svg>
Here's what I did if anyone here is looking for an updated solution!
patches\rn-tourguide+3.3.0.patch
diff --git a/node_modules/rn-tourguide/lib/components/SvgMask.js b/node_modules/rn-tourguide/lib/components/SvgMask.js
index ffb2cb7..39f14fe 100644
--- a/node_modules/rn-tourguide/lib/components/SvgMask.js
+++ b/node_modules/rn-tourguide/lib/components/SvgMask.js
@@ -1,9 +1,8 @@
import React, { Component } from 'react';
-import { Animated, Dimensions, Easing, Platform, View, TouchableWithoutFeedback, } from 'react-native';
+import { Animated, Dimensions, Easing, Platform, TouchableWithoutFeedback, View, } from 'react-native';
import Svg from 'react-native-svg';
import { svgMaskPathMorph } from '../utilities';
import { AnimatedSvgPath } from './AnimatedPath';
-const IS_WEB = Platform.OS !== 'web';
export class SvgMask extends Component {
constructor(props) {
super(props);
@@ -29,12 +28,7 @@ export class SvgMask extends Component {
const d = this.getPath();
this.rafID = requestAnimationFrame(() => {
if (this.mask && this.mask.current) {
- if (IS_WEB) {
- this.mask.current.setNativeProps({ d });
- }
- else {
- this.mask.current._touchableNode.setAttribute('d', d);
- }
+ this.setState({ d })
}
});
};
@@ -88,6 +82,7 @@ export class SvgMask extends Component {
opacity: new Animated.Value(0),
animation: new Animated.Value(0),
previousPath: this.firstPath,
+ d: this.firstPath,
};
this.listenerID = this.state.animation.addListener(this.animationListener);
}
@@ -113,7 +108,7 @@ export class SvgMask extends Component {
const Wrapper = dismissOnPress ? TouchableWithoutFeedback : View;
return (React.createElement(Wrapper, { style: this.props.style, onLayout: this.handleLayout, pointerEvents: 'none', onPress: dismissOnPress ? stop : undefined },
React.createElement(Svg, { pointerEvents: 'none', width: this.state.canvasSize.x, height: this.state.canvasSize.y },
- React.createElement(AnimatedSvgPath, { ref: this.mask, fill: this.props.backdropColor, strokeWidth: 0, fillRule: 'evenodd', d: this.firstPath, opacity: this.state.opacity }))));
+ React.createElement(AnimatedSvgPath, { ref: this.mask, fill: this.props.backdropColor, strokeWidth: 0, fillRule: 'evenodd', d: this.state.d, opacity: this.state.opacity }))));
}
}
SvgMask.defaultProps = {
Is there a way to support expo-sdk >= 48 with a newer react-native-web that has dropped
setNativeProps
?