Mobile: Fixes #14835: Upgrade react-native-popup-menu to remove deprecated SafeAreaView warning by Amirtha-yazhini · Pull Request #14865 · laurent22/joplin

Amirtha-yazhini · 2026-03-22T12:23:57Z

Problem

Several warnings similar to the following were logged during CI test runs in packages/app-mobile:
SafeAreaView has been deprecated and will be removed in a future release.
Please use 'react-native-safe-area-context' instead.

This warning originated from react-native-popup-menu@0.17.0, which internally used the deprecated <SafeAreaView> component from React Native core.

Fixes #14835

Solution

Upgraded react-native-popup-menu from 0.17.0 to 0.19.0, which removes the deprecated <SafeAreaView> usage.

The existing Yarn patch (which adds closeButtonLabel and accessibilityRole to the backdrop dismiss button for accessibility) was migrated to the new version. The patch changes are functionally identical — only the line offsets changed due to the version difference.

The old 0.17.0 patch file has been removed and replaced with a new 0.19.0 patch file.

Test Plan

Added components/testing/MenuProvider.test.tsx which verifies:

MenuProvider renders without triggering any SafeAreaView has been deprecated console warnings
MenuProvider correctly accepts the closeButtonLabel prop without TypeScript errors

Manual verification:

Run yarn workspace @joplin/app-mobile jest --forceExit
Confirm no SafeAreaView has been deprecated warnings appear in output
All 23 tests pass

AI Assistance Disclosure

I used Claude (Anthropic) to help understand the Yarn patch migration workflow and to assist with writing the test file. All code was reviewed, understood, and manually verified by me

…arning

…rning

coderabbitai · 2026-03-22T12:24:25Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 9d8140f6-c2f2-4c9a-a8c8-9bdb82c20875

📥 Commits

Reviewing files that changed from the base of the PR and between eb6f917 and 339cdba.

⛔ Files ignored due to path filters (1)

.yarn/patches/react-native-popup-menu-npm-0.19.0-c75418add4.patch is excluded by !**/.yarn/**

📒 Files selected for processing (6)

packages/app-mobile/components/testing/MenuProvider.test.tsx
packages/app-mobile/components/testing/TestProviderStack.tsx
packages/app-mobile/pluginAssets/abc/abc_render.js.base64.js
packages/app-mobile/pluginAssets/index.js
packages/app-mobile/pluginAssets/index.web.js
packages/app-mobile/root.tsx

✅ Files skipped from review due to trivial changes (2)

packages/app-mobile/pluginAssets/index.js
packages/app-mobile/pluginAssets/index.web.js

🚧 Files skipped from review as they are similar to previous changes (1)

packages/app-mobile/components/testing/MenuProvider.test.tsx

📝 Walkthrough

Walkthrough

Upgraded react-native-popup-menu to a patched 0.19.0, set MenuProvider to use View as SafeAreaComponent, added a MenuProvider test asserting no SafeAreaView deprecation warnings, updated lint/git ignores for the test, and updated pluginAssets (hash and an embedded base64 render change).

Changes

Cohort / File(s)	Summary
Configuration exclusions `/.eslintignore`, `/.gitignore`	Added entries to ignore the new MenuProvider test file (`packages/app-mobile/components/testing/MenuProvider.test.tsx`) from ESLint and git.
Dependency update `packages/app-mobile/package.json`	Changed `react-native-popup-menu` reference from v0.17.0 to a Yarn patch targeting v0.19.0 (patched package source). Review patch migration and accessibility adjustments.
MenuProvider usage & tests `packages/app-mobile/root.tsx`, `packages/app-mobile/components/testing/TestProviderStack.tsx`, `packages/app-mobile/components/testing/MenuProvider.test.tsx`	MenuProvider now receives `SafeAreaComponent={View}`; added a Jest test that renders MenuProvider and asserts no SafeAreaView deprecation warnings.
Plugin assets `packages/app-mobile/pluginAssets/abc/abc_render.js.base64.js`, `packages/app-mobile/pluginAssets/index.js`, `packages/app-mobile/pluginAssets/index.web.js`	Updated embedded render logic to parse numeric SVG width/height and conditionally set viewBox; updated top-level asset manifest `hash` in both index files.

🚥 Pre-merge checks | ✅ 6

✅ Passed checks (6 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically summarises the main change: upgrading react-native-popup-menu to fix the deprecated SafeAreaView warning issue `#14835`.
Description check	✅ Passed	The description comprehensively explains the problem, solution, test plan, and includes an AI assistance disclosure, all directly related to the changeset.
Linked Issues check	✅ Passed	The PR fully addresses `#14835` objectives: upgrades react-native-popup-menu to remove deprecated SafeAreaView usage, migrates the accessibility patch, adds comprehensive tests, and provides manual verification steps.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to fixing the SafeAreaView deprecation issue: package upgrade, patch migration, configuration updates, test file addition, and asset hash updates from patched files.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Pr Description Must Follow Guidelines	✅ Passed	The pull request description includes all three required sections: a clear problem statement, a high-level solution, and a comprehensive test plan.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Amirtha-yazhini · 2026-03-22T13:07:26Z

I have read the CLA Document and I hereby sign the CLA

personalizedrefrigerator

Thank you for working on this! I've left a few comments.

personalizedrefrigerator · 2026-03-23T14:38:00Z

.yarn/patches/react-native-popup-menu-npm-0.17.0-8b745d88dd.patch

-# This patch improves the note actions menu (the kebab menu)'s accessibility
-# by labelling its dismiss button.


Please keep a comment at the top of this file. The comment in this file helps us determine why the patch is necessary.

personalizedrefrigerator · 2026-03-23T14:52:12Z

.yarn/patches/react-native-popup-menu-npm-0.19.0-c75418add4.patch

     backHandler?: boolean | Function;
     skipInstanceCheck?: boolean;
-     children: React.ReactNode;
+     SafeAreaComponent?: React.ComponentType<any>;


At least for me (testing on web), the menu is now slightly offset:

Based on this upstream comment, it may be necessary to provide the SafeAreaComponent={} prop to the <MenuProvider when rendering.

personalizedrefrigerator · 2026-03-23T14:53:41Z

packages/app-mobile/components/testing/MenuProvider.test.tsx

+	it('should accept closeButtonLabel prop without TypeScript errors', () => {
+		const { getByText } = render(
+			<MenuProvider closeButtonLabel='Close menu'>
+				<Text>Content</Text>
+			</MenuProvider>,
+		);
+
+		expect(getByText('Content')).toBeTruthy();
+	});


I don't think this test is necessary: TypeScript issues with the closeButtonLabel prop should be caught during the build step (since closeButtonLabel is used elsewhere).

Amirtha-yazhini · 2026-03-26T01:13:08Z

Thank you for the review! I've addressed all three points:

Added the descriptive comment back to the top of the new patch file
Added SafeAreaComponent={View} to MenuProvider in both root.tsx and TestProviderStack.tsx to fix the menu offset issue
Removed the redundant closeButtonLabel TypeScript test as it's already caught at build time

Please let me know if anything else needs to be changed!

…h SafeAreaComponent, remove redundant test

Amirtha-yazhini added 2 commits March 21, 2026 16:32

Fix: upgrade react-native-popup-menu to fix deprecated SafeAreaView w…

36ad82c

…arning

Tests: add MenuProvider test to verify no SafeAreaView deprecation wa…

eb6f917

…rning

coderabbitai bot added bug It's a bug mobile All mobile platforms accessibility Related to accessibility labels Mar 22, 2026

Amirtha-yazhini mentioned this pull request Mar 22, 2026

CI: Warning related to use of deprecated <SafeAreaView> React Native component #14835

Open

laurent22 requested a review from personalizedrefrigerator March 23, 2026 12:42

personalizedrefrigerator requested changes Mar 23, 2026

View reviewed changes

Fix: address review feedback - add patch comment, fix menu offset wit…

339cdba

…h SafeAreaComponent, remove redundant test

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Mobile: Fixes #14835: Upgrade react-native-popup-menu to remove deprecated SafeAreaView warning#14865

Mobile: Fixes #14835: Upgrade react-native-popup-menu to remove deprecated SafeAreaView warning#14865
Amirtha-yazhini wants to merge 3 commits intolaurent22:devfrom
Amirtha-yazhini:fix/upgrade-react-native-popup-menu

Amirtha-yazhini commented Mar 22, 2026

Uh oh!

coderabbitai bot commented Mar 22, 2026 •

edited

Loading

Walkthrough

Changes

Uh oh!

Amirtha-yazhini commented Mar 22, 2026

Uh oh!

personalizedrefrigerator left a comment

Uh oh!

personalizedrefrigerator Mar 23, 2026

Uh oh!

personalizedrefrigerator Mar 23, 2026

Uh oh!

personalizedrefrigerator Mar 23, 2026

Uh oh!

Amirtha-yazhini commented Mar 26, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		# This patch improves the note actions menu (the kebab menu)'s accessibility
		# by labelling its dismiss button.

Uh oh!

Conversation

Amirtha-yazhini commented Mar 22, 2026

Problem

Solution

Test Plan

AI Assistance Disclosure

Uh oh!

coderabbitai bot commented Mar 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Uh oh!

Amirtha-yazhini commented Mar 22, 2026

Uh oh!

personalizedrefrigerator left a comment

Choose a reason for hiding this comment

Uh oh!

personalizedrefrigerator Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

personalizedrefrigerator Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

personalizedrefrigerator Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

Amirtha-yazhini commented Mar 26, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

coderabbitai bot commented Mar 22, 2026 •

edited

Loading