[fix] Linking listener.remove() API

Linking.removeEventListener() was deprecated in [email protected]

Fix #2507

Author: necolas

packages/react-native-web-examples/next.config.js

@@ -7,7 +7,6 @@ const pages = fs
   .map((dirent) => dirent.name);
 
 module.exports = {
-  outDir: 'dist',
   env: { pages },
   webpack: (config, options) => {
     config.resolve.alias['react-native'] = 'react-native-web';

packages/react-native-web-examples/pages/checkbox/index.js

@@ -25,7 +25,7 @@ export default function CheckboxPage() {
         <Divider />
         <CheckBox disabled style={styles.item} value={true} />
         <Divider />
-        <CheckBox accessibilityReadOnly style={styles.item} value={true} />
+        <CheckBox aria-readonly style={styles.item} value={true} />
       </View>
       <View style={styles.row}>
         <CheckBox value={false} />

packages/react-native-web-examples/pages/index.js

@@ -73,11 +73,11 @@ const styles = StyleSheet.create({
     color: '#1977f2'
   },
   listitem: {
-    marginVertical: '0.5rem',
-    textAlign: 'center'
+    marginVertical: '0.5rem'
   },
   pageLink: {
     fontSize: '1.25rem',
-    fontWeight: 'bold'
+    fontWeight: 'bold',
+    textAlign: 'center'
   }
 });

packages/react-native-web-examples/pages/linking/index.js

@@ -1,35 +1,48 @@
 import { Linking, StyleSheet, Text } from 'react-native';
-import React, { PureComponent } from 'react';
+import React from 'react';
 import Example from '../../shared/example';
 
 const url = 'https://mathiasbynens.github.io/rel-noopener/malicious.html';
 
-export default class LinkingPage extends PureComponent {
-  handlePress() {
+export default function LinkingPage(props) {
+  const [, setCount] = React.useState(0);
+
+  React.useEffect(() => {
+    console.log('adding listener');
+    const listener = Linking.addEventListener('onOpen', () => {
+      console.log('onOpen event');
+    });
+    return () => {
+      console.log('removing listener');
+      listener.remove();
+    };
+  });
+
+  function handlePress() {
     Linking.canOpenURL(url).then((supported) => {
-      return Linking.openURL(url);
+      setCount((x) => x + 1);
+      const v = Linking.openURL(url);
+      return v;
     });
   }
 
-  render() {
-    return (
-      <Example title="Linking">
-        <Text onPress={this.handlePress} style={styles.text}>
-          Linking.openURL
-        </Text>
-        <Text
-          href="https://mathiasbynens.github.io/rel-noopener/malicious.html"
-          hrefAttrs={{
-            target: '_blank'
-          }}
-          role="link"
-          style={styles.text}
-        >
-          target="_blank"
-        </Text>
-      </Example>
-    );
-  }
+  return (
+    <Example title="Linking">
+      <Text onPress={handlePress} style={styles.text}>
+        Linking.openURL
+      </Text>
+      <Text
+        href="https://mathiasbynens.github.io/rel-noopener/malicious.html"
+        hrefAttrs={{
+          target: '_blank'
+        }}
+        role="link"
+        style={styles.text}
+      >
+        target="_blank"
+      </Text>
+    </Example>
+  );
 }
 
 const styles = StyleSheet.create({

packages/react-native-web/src/exports/Linking/index.js

@@ -15,12 +15,6 @@ const initialURL = canUseDOM ? window.location.href : '';
 
 type Callback = (...args: any) => void;
 
-type OnOpenCallback = (
-  event: 'onOpen',
-  callback: (url: string) => void
-) => void;
-type GenericCallback = (event: string, callback: Callback) => void;
-
 class Linking {
   /**
    * An object mapping of event name
@@ -41,31 +35,44 @@ class Linking {
    * Adds a event listener for the specified event. The callback will be called when the
    * said event is dispatched.
    */
-  addEventListener: OnOpenCallback | GenericCallback = (
-    event: string,
+  addEventListener(
+    eventType: string,
     callback: Callback
-  ) => {
-    if (!this._eventCallbacks[event]) {
-      this._eventCallbacks[event] = [callback];
-      return;
+  ): {| remove(): void |} {
+    const _this = this;
+
+    if (!_this._eventCallbacks[eventType]) {
+      _this._eventCallbacks[eventType] = [callback];
     }
-    this._eventCallbacks[event].push(callback);
-  };
+    _this._eventCallbacks[eventType].push(callback);
+
+    return {
+      remove() {
+        const callbacks = _this._eventCallbacks[eventType];
+        const filteredCallbacks = callbacks.filter(
+          (c) => c.toString() !== callback.toString()
+        );
+        _this._eventCallbacks[eventType] = filteredCallbacks;
+      }
+    };
+  }
 
   /**
    * Removes a previously added event listener for the specified event. The callback must
    * be the same object as the one passed to `addEventListener`.
    */
-  removeEventListener: OnOpenCallback | GenericCallback = (
-    event: string,
-    callback: Callback
-  ) => {
-    const callbacks = this._eventCallbacks[event];
+  removeEventListener(eventType: string, callback: Callback): void {
+    console.error(
+      `Linking.removeEventListener('${eventType}', ...): Method has been ` +
+        'deprecated. Please instead use `remove()` on the subscription ' +
+        'returned by `Linking.addEventListener`.'
+    );
+    const callbacks = this._eventCallbacks[eventType];
     const filteredCallbacks = callbacks.filter(
       (c) => c.toString() !== callback.toString()
     );
-    this._eventCallbacks[event] = filteredCallbacks;
-  };
+    this._eventCallbacks[eventType] = filteredCallbacks;
+  }
 
   canOpenURL(): Promise<boolean> {
     return Promise.resolve(true);