react-native-easy-toast icon indicating copy to clipboard operation
react-native-easy-toast copied to clipboard

About Toast warning.

Open xclidongbo opened this issue 7 years ago • 3 comments

Warning: Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component. This is a no-op.

Please check the code for the Toast component.

xclidongbo avatar Oct 26 '17 01:10 xclidongbo

Use only one Toast component in your App.js, and the other component use DeviceEventEmitter.emit('Toast', message) to toast a message, just like below:

export default class App extends Component<{}> {
  constructor(props) {
    super(props);
    this._handleToast = this._handleToast.bind(this);
  }

  // Handle Toast Event
  _handleToast(message, long?: false) {
    this.toast.show(
      message,
      long ? DURATION.LENGTH_LONG : DURATION.LENGTH_SHORT
    );
  }

  componentWillMount() {
    DeviceEventEmitter.addListener("Toast", this._handleToast);
  }

  componentDidUpdate() {
     if (this.drawer) {
        this.navigation = this.drawer._navigation; // get drawer navigation, and can use navigate() to navigate any routeName in App.js
    }
  }

  render() {
    return (
      <View style={styles.container}>
        {/* your content, for example <MyDrawerNav ref={drawer => (this.drawer = drawer)} /> */}

        {/* Toast */}
        <Toast ref={toast => (this.toast = toast)} />
      </View>
    );
  }
}

Now, you can emit toast event anywhere, unless your app die.

scue avatar Nov 07 '17 02:11 scue

@scue, I am getting the same warning and my usage is:

class ComponentA extends Component {
  componentDidMount() {
    if (this.state.isToastVisible) {
        this.toast.show(this.props.t('Toast!'), 2000);
    }
  }

  render() {
    return (
            <ComponentB>
                ......
                <Toast
                    ref={(toast) => {
                        this.toast = toast;
                    }}
                    position="center"
                    style={styles.toast}
                    fadeInDuration={1000}
                    fadeOutDuration={1000}
                    opacity={0.7}
                />
            </ComponentB>
        );
    }
}

@xclidongbo - did you manage to find a solution for this issue?

b-asaf avatar Feb 08 '18 12:02 b-asaf

I've created a PR to address the setState issue: https://github.com/crazycodeboy/react-native-easy-toast/pull/66

cdunkel avatar Feb 19 '19 16:02 cdunkel