removeEventListener is Deprecated and i don't achieve to refacto it properly

Question

Linking.removeEventListener('url', onReceiveURL);

removeEventListener is deprecated.

This is what my IDE suggests :

EventEmitter.removeListener('url', ...): Method has been deprecated. Please instead use remove() on the subscription returned by EventEmitter.addListener.

  // Custom function to subscribe to incoming links
  subscribe(listener: (deeplink: string) => void) {
    // First, you may want to do the default deep link handling
    const onReceiveURL = ({url}: {url: string}) => listener(url);
    // Listen to incoming links from deep linking
    Linking.addEventListener('url', onReceiveURL);
    const handleDynamicLink = (
      dynamicLink: FirebaseDynamicLinksTypes.DynamicLink,
    ) => {
      listener(dynamicLink.url);
    };
    const unsubscribeToDynamicLinks = dynamicLinks().onLink(handleDynamicLink);
    return () => {
      unsubscribeToDynamicLinks();
      Linking.removeEventListener('url', onReceiveURL);
    };

I tried many things but nothing seems to work.

Didn't find any concrete information about it.

Any help to figure it out ?

EDIT -> I will investigate further but so far it's working :

 const unsubscribeToDynamicLinks : any = ...

then in return : 
return () => {
unsubscribeToDynamicLinks().remove('url', onReceiveURL);};

 

Circularize

I'm not sure about Linking in particular but the syntax is usually: const subscription = Linking.addEventListener('url', onReceiveURL); and then later subscription.remove() – Maxwellmaxy

Tried it almost everywhere as subscribe.remove() in the final return but the debbuger tells that subscribe doesn't exist... I just succeed doing that but i don't know if it's working const unsubscribeToDynamicLinks : any = dynamicLinks().onLink(handleDynamicLink); return () => { unsubscribeToDynamicLinks().remove('url', onReceiveURL); – Circularize

Sounds good so far thank you Abe =) – Circularize

Answer 1

For the new API, this is how it works:

useEffect (() => {
  const subscription = Linking.addEventListener('url', onReceiveURL);
  return () => subscription.remove();
}, [])

Appendicular

How to remove listener in class component? – Arber

Hi @Arber you can check out this question #38564580 – Appendicular

actually all those answers are outdated. removeListener is deprecated.. I declares variable subscribe in constructor and assign listener to it in DidMount() and use same var in willunmount() to invoke remove(). but is it really removing the listener or not do not know. btw thanks for reply. – Arber

componentDidMount() { Linking.addEventListener('url', this.handleUrl); } componentWillUnmount() { Linking.removeEventListener('url', this.handleUrl); } handleUrl = ({ url }) => { // do something with url }; What about this? – Appendicular

Emitter.removeEventListener is deprecated in newer versions. Linking.removeEventListene does not work. I tried. – Arber

Answer 2

For class components you can use something like below:

class MyClass extends Component {
  constructor(props){
    super(props)
    this.changeEventListener = null
  }
  componentDidMount(){
    // or you can use constructor for this
    this.changeEventListener = AppState.addEventListener('change', () => {
      // your listener function
    })
  }

  componentWillUnmount() {
    this.changeEventListener.remove()
  }
}

Secretin

Answer 3

Original Code

AppState.addEventListener('change', handleAppStateChange);

return () => {
  AppState.removeEventListener('change', handleAppStateChange);
};

Since removeEventListener is deprecated SO, I replaced above lines of code with:

const subscription = AppState.addEventListener(
  'change',
  handleAppStateChange
);
return () => {
  subscription.remove();
};

Bronwynbronx

Answer 4

AppState.removeEventListener('change', this._handleAppStateChange); is deprecated for newer ver of react native , instead use

componentDidMount() {
    // AppState.addEventListener('change', this._handleAppStateChange); remove this
    this.appStateSubscription = AppState.addEventListener('change', this._handleAppStateChange);  //add this
  } 

and

componentWillUnmount() {
    clearInterval(this.timer);
    // AppState.removeEventListener('change', this._handleAppStateChange); remove
    this.appStateSubscription.remove();  //add
  }

Dollydolman