web support with expo-sdk >= 48

[rchavik]

Is there a way to support expo-sdk >= 48 with a newer react-native-web that has dropped setNativeProps ?

[rchavik]

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>

[manuthecoder]

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 = {