javascriptreact-nativeexpoflash-message

React Native: Flash Message memory leak error


I am using Flash Message in React Native. A memory leak error is thrown when I navigate to another screen without waiting for the message to disappear.

Code

showMessage({
  message: "Hello World",
  duration: 2000,
  description: "This is our second message",
  type: "success",
});

Error

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in %s.%s, the componentWillUnmount method,

Solution

  • You don't need to wait for flash message to disappear. You can hide the message programmatically before navigating to a new screen.

    Code

    
    // import hideMessage method from the library
    import { hideMessage } from "react-native-flash-message";
    
    // a function which navigates to another screen
    foo = () => {
      // assuming you are using react navigation
      // in a class based component
      const { navigation } = this.props;
    
      // call hideMessage before you navigate
      hideMessage();
      navigation.navigate('ScreenName');
    }