React Native: Flash Message memory leak error

Question

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,

Does this library even have cleanup method? I don't think so. Cleanup is usually required for listeners and async operations, and I don't seem to find this method anywhere near to that. Could you share more insight on what you're trying to achieve actually? — Vinay Sharma, Jan 18 '21 at 07:30
@VinaySharma No this library doesn't have cleanup method. If I don't wait flash message disappear and I go to another page, I get this error. — Uzaq Sahillərdə, Jan 18 '21 at 07:42

score 2 · Answer 1 · answered Jan 18 '21 at 14:40

2

Solution with the useEffect()

import { hideMessage } from "react-native-flash-message";


  useEffect(() => {
    return () => {
      hideMessage()
    }
  }, [])

answered Jan 18 '21 at 14:40

Uzaq Sahillərdə

123
6

score 1 · Accepted Answer · answered Jan 18 '21 at 10:08

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');
}

React Native: Flash Message memory leak error

Code

Error

2 Answers2

Code