magicismight / react-native-root-toast

react native toast like component, pure javascript solution
MIT License
2.08k stars 403 forks source link

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

Closed cornejobarraza closed 9 months ago

cornejobarraza commented 9 months ago

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch react-native-root-toast@3.4.1 for the project I'm working on.

Here is the diff that solved my problem, basically just added a check to avoid accessing this method on web:

diff --git a/node_modules/react-native-root-toast/lib/ToastContainer.js b/node_modules/react-native-root-toast/lib/ToastContainer.js
index 7cc32fa..e9ca241 100644
--- a/node_modules/react-native-root-toast/lib/ToastContainer.js
+++ b/node_modules/react-native-root-toast/lib/ToastContainer.js
@@ -10,7 +10,8 @@ import {
     Dimensions,
     TouchableWithoutFeedback,
     Easing,
-    Keyboard
+    Keyboard,
+    Platform
 } from 'react-native';
 import { ViewPropTypes, TextPropTypes } from 'deprecated-react-native-prop-types';
 const TOAST_MAX_WIDTH = 0.8;
@@ -148,6 +149,7 @@ class ToastContainer extends Component {
         this.keyboardListener?.remove();
     };

+    _platform = Platform.OS;
     _animating = false;
     _root = null;
     _hideTimeout = null;
@@ -172,9 +174,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,
@@ -198,9 +204,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.

cornejobarraza commented 9 months ago

Closing as stale