feat(react-native): add opt-in back handler API by heecheolman · Pull Request #310 · toss/granite

heecheolman · 2026-06-08T04:59:20Z

Add useBackHandler as a new subscription-based API for handling back actions before legacy useBackEvent handlers.

useBackHandler runs handlers from the latest registration first and only prevents default back navigation when a handler explicitly returns true. Returning false or undefined allows bubbling to continue and eventually falls back to legacy useBackEvent handlers or the router default back behavior.

The existing useBackEvent API remains non-breaking: variadic add/remove behavior is preserved, all registered handlers still run, and handler return values are ignored.

import { useEffect, useState } from 'react';
import { Button, View } from 'react-native';
import { useBackHandler } from '@granite-js/react-native';

export function OverlayExample() {
  const backHandler = useBackHandler();
  const [isOverlayOpen, setIsOverlayOpen] = useState(false);

  useEffect(() => {
    const subscription = backHandler.addEventListener((event) => {
      if (isOverlayOpen) {
        setIsOverlayOpen(false);

        // Prevent default back navigation.
        return true;
      }

      // Continue bubbling. Default back navigation is not blocked.
      return false;
    });

    return () => {
      subscription.remove();
    };
  }, [backHandler, isOverlayOpen]);

  return (
    <View>
      <Button title="Open Overlay" onPress={() => setIsOverlayOpen(true)} />
    </View>
  );
}

changeset-bot · 2026-06-08T04:59:24Z

🦋 Changeset detected

Latest commit: c6d53cc

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 28 packages

Name	Type
@granite-js/react-native	Patch
babel-preset-granite	Patch
create-granite-app	Patch
@granite-js/blur-view	Patch
@granite-js/brownfield-module	Patch
@granite-js/cli	Patch
@granite-js/cookies	Patch
@granite-js/screen	Patch
@granite-js/image	Patch
@granite-js/jest	Patch
@granite-js/lottie	Patch
@granite-js/mpack	Patch
@granite-js/native	Patch
@granite-js/naver-map	Patch
@granite-js/plugin-core	Patch
@granite-js/plugin-env	Patch
@granite-js/plugin-hermes	Patch
@granite-js/plugin-micro-frontend	Patch
@granite-js/plugin-router	Patch
@granite-js/plugin-rozenite	Patch
@granite-js/plugin-sentry	Patch
@granite-js/style-utils	Patch
@granite-js/utils	Patch
@granite-js/video	Patch
@granite-js/vitest	Patch
@granite-js/deployment-manager	Patch
@granite-js/forge-cli	Patch
@granite-js/pulumi-aws	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

vercel · 2026-06-08T04:59:27Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
granite-docs	Ready	Preview, Comment	Jun 8, 2026 6:28am

heecheolman · 2026-06-08T05:01:12Z

@@ -0,0 +1,8 @@
+import { vi } from 'vitest';
+
+export const GraniteBrownfieldModule = {


TODO: Brownfield test mock

heecheolman · 2026-06-08T05:07:23Z

+    expect(parent).toHaveBeenCalledWith({ source: 'backButton' });
+  });
+
+  it('allows default navigation when handlers return false or undefined', () => {


default is false or undfined

heecheolman · 2026-06-08T05:07:31Z

+    expect(parent).not.toHaveBeenCalled();
+  });
+
+  it('continues bubbling while handlers return false', () => {


bubbling test

gronxb · 2026-06-08T05:04:16Z

+  const [hasBackHandler, setHasBackHandler] = useState(false);
+
+  const syncBackEventState = useCallback(() => {
+    setHasBackEvent(handlersRef.size > 0);
+  }, [handlersRef]);


using useMemo ..?

If we change handlersRef.size > 0 to useMemo, hasBackEvent cannot be detected correctly because changes to ref.size do not trigger a render. We need to keep useCallback and explicitly update the state.

gronxb · 2026-06-08T05:05:20Z

+  resolve: {
+    alias: {
+      '@granite-js/brownfield-module': new URL('./test/brownfieldModuleMock.ts', import.meta.url).pathname,
+      'react-native': new URL('./test/reactNativeMock.ts', import.meta.url).pathname,
+    },
+  },


do not using resolve.

we are using @granite-js/vitest plugin

gronxb · 2026-06-08T05:06:28Z

+  const removeHandler = useCallback(
+    (...handlers: Array<BackHandlerCallback>) => {
+      for (const handler of handlers) {
+        handlersRef.delete(handler);
+        contextRemoveBackHandler(handler);
+      }
+    },
+    [contextRemoveBackHandler, handlersRef]
+  );
+
+  const addEventListener = useCallback(
+    (handler: BackHandlerCallback) => {
+      handlersRef.add(handler);
+      contextAddBackHandler(handler);
+
+      return {
+        remove: () => removeHandler(handler),
+      };
+    },
+    [contextAddBackHandler, handlersRef, removeHandler]
+  );


ref exclude effect deps

gronxb · 2026-06-08T05:07:58Z

  initialProps: InitialProps;
  initialScheme: string;
  setIosSwipeGestureEnabled?: ({ isEnabled }: { isEnabled: boolean }) => Promise<void> | void;
+  setiOSBackPressHandler?: ({ handler }: { handler: () => void }) => Promise<void> | void;


how about oniOSBackPressHandler ?

heecheolman added 3 commits June 8, 2026 13:46

useBackHandler

6129152

changeset

2ab8ad1

fix

a2ebe5f

heecheolman requested review from gronxb, intmain, jingjing2222, l2hyunwoo, leegeunhyeok and raon0211 as code owners June 8, 2026 04:59

github-actions Bot added the @granite-js/react-native label Jun 8, 2026

vercel Bot deployed to Preview June 8, 2026 04:59 View deployment

heecheolman commented Jun 8, 2026

View reviewed changes

fix: getSchemeUri

91070c9

vercel Bot deployed to Preview June 8, 2026 05:03 View deployment

fix

6157fdf

vercel Bot deployed to Preview June 8, 2026 05:05 View deployment

heecheolman commented Jun 8, 2026

View reviewed changes

gronxb requested changes Jun 8, 2026

View reviewed changes

heecheolman added 2 commits June 8, 2026 14:10

ref exclude effect deps

ed32afb

testcode

3f6ff64

github-actions Bot added the dependencies label Jun 8, 2026

vercel Bot deployed to Preview June 8, 2026 05:17 View deployment

backpress

c6d53cc

vercel Bot deployed to Preview June 8, 2026 06:28 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(react-native): add opt-in back handler API#310

feat(react-native): add opt-in back handler API#310
heecheolman wants to merge 8 commits into
mainfrom
back-press

heecheolman commented Jun 8, 2026

Uh oh!

changeset-bot Bot commented Jun 8, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Jun 8, 2026 •

edited

Loading

Uh oh!

heecheolman Jun 8, 2026

Uh oh!

heecheolman Jun 8, 2026

Uh oh!

heecheolman Jun 8, 2026

Uh oh!

gronxb Jun 8, 2026

Uh oh!

heecheolman Jun 8, 2026

Uh oh!

gronxb Jun 8, 2026

Uh oh!

gronxb Jun 8, 2026

Uh oh!

gronxb Jun 8, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		@@ -0,0 +1,8 @@
		import { vi } from 'vitest';

		export const GraniteBrownfieldModule = {

Conversation

heecheolman commented Jun 8, 2026

Uh oh!

changeset-bot Bot commented Jun 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

vercel Bot commented Jun 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

changeset-bot Bot commented Jun 8, 2026 •

edited

Loading

vercel Bot commented Jun 8, 2026 •

edited

Loading