_this._root.setNativeProps is not a function on react-native-web

[cornejobarraza]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Some days ago I used patch-package to patch [email protected] for the project I'm working on.

Here is the diff that solved my problem, a simple check to prevent setting native props on the web:

index 6c77e3e..0c88bb0 100644
--- a/node_modules/react-native-root-toast/lib/ToastContainer.js
+++ b/node_modules/react-native-root-toast/lib/ToastContainer.js
@@ -12,7 +12,8 @@ import {
     Easing,
     Keyboard,
     SafeAreaView,
-    TouchableWithoutFeedback
+    TouchableWithoutFeedback,
+    Platform
 } from 'react-native';
 import { ViewPropTypes, TextPropTypes } from 'deprecated-react-native-prop-types';
 const TOAST_MAX_WIDTH = 0.8;
@@ -152,6 +153,7 @@ class ToastContainer extends Component {
         this.keyboardListener?.remove();
     };
 
+    _platform = Platform.OS;
     _animating = false;
     _root = null;
     _hideTimeout = null;
@@ -176,9 +178,13 @@ class ToastContainer extends Component {
         if (!this._animating) {
             clearTimeout(this._hideTimeout);
             this._animating = true;
-            this._root.setNativeProps({
-                pointerEvents: 'auto'
-            });
+            if (this._platform !== 'web') {
+                this._root.setNativeProps({
+                    pointerEvents: 'auto'
+                });
+            } else {
+                this._root.style.pointerEvents = 'auto';
+            }
             this.props.onShow && this.props.onShow(this.props.siblingManager);
             Animated.timing(this.state.opacity, {
                 toValue: this.props.opacity,
@@ -202,9 +208,13 @@ class ToastContainer extends Component {
         clearTimeout(this._hideTimeout);
         if (!this._animating) {
             if (this._root) {
-                this._root.setNativeProps({
-                    pointerEvents: 'none'
-                });
+                if (this._platform !== 'web') {
+                    this._root.setNativeProps({
+                        pointerEvents: 'none'
+                    });
+                } else {
+                    this._root.style.pointerEvents = 'none';
+                }
             }
 
             if (this.props.onHide) {

This issue body was partially generated by patch-package.

[darvinjsdprog]

Had the same issue and implemented the same solution and it works! The issue is only present on the web. @cornejobarraza Thanks!

[cornejobarraza]

Had the same issue and implemented the same solution and it works! The issue is only present on the web. @cornejobarraza Thanks!

@darvinjsdprog I'm glad this worked for you, thanks to your comment I found some issues with the diff. If you used the same one please check and correct it too 😃

[Bibker]

@cornejobarraza, That was so cool of you. Thank You man!

[game-geek]

Yeah, had the same issue too. 😬 Hope this fix gets merged in the main branch!

[Ulthran]

Is there any reason not to implement this? Would love to use this across web and mobile.

[cornejobarraza]

Is there any reason not to implement this? Would love to use this across web and mobile.

I think the project is no longer maintained as it used to :( multiple open issues

[sunnylqm]

would like to review and merge if someone can make a pr

[cornejobarraza]

would like to review and merge if someone can make a pr

Done, please check PR https://github.com/magicismight/react-native-root-toast/pull/178