Deprecated AppState.removeEventListener on react v0.70

[binotby]

[ullmanj]

In the meantime, a fix to this is editing the index.js file as follows:

`state = { until: Math.max(this.props.until, 0), lastUntil: null, wentBackgroundAt: null, eventListener: null, // NEW LINE }; // ... componentDidMount() { this.state.eventListener = AppState.addEventListener('change', this._handleAppStateChange); // MODIFIED }

componentWillUnmount() { clearInterval(this.timer); this.state.eventListener.remove(); // MODIFIED }`

[Swarnim01]

@ullmanj , i don't have this content in index.ts file (Using typescript). I can only see the interfaces mentioned in index.ts file under react-native-countdown-component inside node_modules. Can you help?

[ullmanj]

Hi! Yes — I found the code above in the index file under react-native-countdown-component inside node_modules. I see that binotby linked a fix above. Maybe you could try that if the code isn't showing up for you in the index file?

[jonra1993]

Thanks @ullmanj that worked as expected

Here you can find the patch-package react-native-countdown-component+2.7.1.patch

diff --git a/node_modules/react-native-countdown-component/index.js b/node_modules/react-native-countdown-component/index.js
index b546b82..29971f8 100644
--- a/node_modules/react-native-countdown-component/index.js
+++ b/node_modules/react-native-countdown-component/index.js
@@ -43,6 +43,7 @@ class CountDown extends React.Component {
     until: Math.max(this.props.until, 0),
     lastUntil: null,
     wentBackgroundAt: null,
+    eventListener: null, // NEW LINE
   };

   constructor(props) {
@@ -51,12 +52,13 @@ class CountDown extends React.Component {
   }

   componentDidMount() {
-    AppState.addEventListener('change', this._handleAppStateChange);
+    this.state.eventListener = AppState.addEventListener('change', this._handleAppStateChange); // MODIFIED
+
   }

   componentWillUnmount() {
     clearInterval(this.timer);
-    AppState.removeEventListener('change', this._handleAppStateChange);
+    this.state.eventListener.remove(); // MODIFIED
   }

   componentDidUpdate(prevProps, prevState) {

[zahoormohammed]

In the meantime, a fix to this is editing the index.js file as follows:

`state = { until: Math.max(this.props.until, 0), lastUntil: null, wentBackgroundAt: null, eventListener: null, // NEW LINE }; // ... componentDidMount() { this.state.eventListener = AppState.addEventListener('change', this._handleAppStateChange); // MODIFIED }

componentWillUnmount() { clearInterval(this.timer); this.state.eventListener.remove(); // MODIFIED }`

This is working thanks..........................................................................................

[Andres6936]

     until: Math.max(this.props.until, 0),
     lastUntil: null,
     wentBackgroundAt: null,
+    eventListener: null, // NEW LINE
   };

   componentDidMount() {
-    AppState.addEventListener('change', this._handleAppStateChange);
+    this.state.eventListener = AppState.addEventListener('change', this._handleAppStateChange); // MODIFIED
+
   }

   componentWillUnmount() {
     clearInterval(this.timer);
-    AppState.removeEventListener('change', this._handleAppStateChange);
+    this.state.eventListener.remove(); // MODIFIED
   }

   componentDidUpdate(prevProps, prevState) {

[rohit-k-singh]

getting this error while using the above code undefined is not an object (evaluating 'this.state.eventListner.remove' ) Please help "react-native-countdown-component": "^2.7.1",

[ullmanj]

@Rksingh620 It seems that there is a typo: you wrote "eventListner" when it should be "eventListener" based on the code above. I hope that helps!

[ksowah]

To fix this error, open node modules and find the react-native-countdown-component folder, open the folder and open the index.js file.

find the componentDidMount() function and replace it with this code

componentDidMount() {
   this.subscription = AppState.addEventListener('change', this._handleAppStateChange);
  }

then find the componentWillUnmount() function and replace it with

componentWillUnmount() {
    clearInterval(this.timer);
    this.subscription.remove();
  }