react-native-easy-toast
react-native-easy-toast copied to clipboard
About Toast warning.
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.
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, 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?
I've created a PR to address the setState
issue: https://github.com/crazycodeboy/react-native-easy-toast/pull/66