fix: Remove BackHandler.removeEventListener method for RN 0.77+

RN PR: facebook/react-native#45892
facebook · Feb 19, 2025 · 6d8ba51 · 6d8ba51
1 parent 2637718
commit 6d8ba51
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 62 deletions.
diff --git a/docs/backhandler.md b/docs/backhandler.md
@@ -15,28 +15,34 @@ The event subscriptions are called in reverse order (i.e. the last registered su
 ## Pattern
 
 ```tsx
-BackHandler.addEventListener('hardwareBackPress', function () {
-  /**
-   * this.onMainScreen and this.goBack are just examples,
-   * you need to use your own implementation here.
-   *
-   * Typically you would use the navigator here to go to the last state.
-   */
-
-  if (!this.onMainScreen()) {
-    this.goBack();
+const subscription = BackHandler.addEventListener(
+  'hardwareBackPress',
+  function () {
     /**
-     * When true is returned the event will not be bubbled up
-     * & no other back action will execute
+     * this.onMainScreen and this.goBack are just examples,
+     * you need to use your own implementation here.
+     *
+     * Typically you would use the navigator here to go to the last state.
      */
-    return true;
-  }
-  /**
-   * Returning false will let the event to bubble up & let other event listeners
-   * or the system's default back action to be executed.
-   */
-  return false;
-});
+
+    if (!this.onMainScreen()) {
+      this.goBack();
+      /**
+       * When true is returned the event will not be bubbled up
+       * & no other back action will execute
+       */
+      return true;
+    }
+    /**
+     * Returning false will let the event to bubble up & let other event listeners
+     * or the system's default back action to be executed.
+     */
+    return false;
+  },
+);
+
+// Unsubscribe the listener on unmount
+subscription.remove();
 ```
 
 ## Example
@@ -126,14 +132,3 @@ static addEventListener(
 ```tsx
 static exitApp();
 ```
-
----
-
-### `removeEventListener()`
-
-```tsx
-static removeEventListener(
-  eventName: BackPressEventName,
-  handler: () => boolean | null | undefined,
-);
-```
diff --git a/website/versioned_docs/version-0.77/backhandler.md b/website/versioned_docs/version-0.77/backhandler.md
@@ -15,28 +15,34 @@ The event subscriptions are called in reverse order (i.e. the last registered su
 ## Pattern
 
 ```tsx
-BackHandler.addEventListener('hardwareBackPress', function () {
-  /**
-   * this.onMainScreen and this.goBack are just examples,
-   * you need to use your own implementation here.
-   *
-   * Typically you would use the navigator here to go to the last state.
-   */
-
-  if (!this.onMainScreen()) {
-    this.goBack();
+const subscription = BackHandler.addEventListener(
+  'hardwareBackPress',
+  function () {
     /**
-     * When true is returned the event will not be bubbled up
-     * & no other back action will execute
+     * this.onMainScreen and this.goBack are just examples,
+     * you need to use your own implementation here.
+     *
+     * Typically you would use the navigator here to go to the last state.
      */
-    return true;
-  }
-  /**
-   * Returning false will let the event to bubble up & let other event listeners
-   * or the system's default back action to be executed.
-   */
-  return false;
-});
+
+    if (!this.onMainScreen()) {
+      this.goBack();
+      /**
+       * When true is returned the event will not be bubbled up
+       * & no other back action will execute
+       */
+      return true;
+    }
+    /**
+     * Returning false will let the event to bubble up & let other event listeners
+     * or the system's default back action to be executed.
+     */
+    return false;
+  },
+);
+
+// Unsubscribe the listener on unmount
+subscription.remove();
 ```
 
 ## Example
@@ -126,14 +132,3 @@ static addEventListener(
 ```tsx
 static exitApp();
 ```
-
----
-
-### `removeEventListener()`
-
-```tsx
-static removeEventListener(
-  eventName: BackPressEventName,
-  handler: () => boolean | null | undefined,
-);
-```