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

[personalizedrefrigerator]

Current behavior

Currently, several warnings similar to the following are logged while running tests in packages/app-mobile:

    console.warn                                                                                                                              
      SafeAreaView has been deprecated and will be removed in a future release. Please use 'react-native-safe-area-context' instead. See https
://github.com/th3rdwave/react-native-safe-area-context                                                                                        
                                                                                                                                              
      176 |     it('should show the currently selected note', async () => {                                                                   
      177 |             await openNewNote({ title: 'Test note (title)', body: '# Testing...' });                                              
    > 178 |             const { unmount } = render(<WrappedNoteScreen />);                                                                    
          |                                       ^                                                                                           
      179 |                                                                                                                                   
      180 |             const titleInput = await screen.findByDisplayValue('Test note (title)');                                              
      181 |             expect(titleInput).toBeVisible();                                                                                     
                                                                                                                                              
      at warn (node_modules/react-native/Libraries/Utilities/warnOnce.js:27:11)                                                               
      at Object.warnOnce [as SafeAreaView] (node_modules/react-native/index.js:92:5)                                                          
      at MenuProvider.SafeAreaView [as render] (node_modules/react-native-popup-menu/src/MenuProvider.js:228:13)                              
      at Object.render [as react_stack_bottom_frame] (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13989:29)       
      at callRenderInDEV (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6554:25)                                    
      at updateClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7488:13)                               
      at callback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1574:13)                                           
      at runWithFiberInDEV (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10980:22)                                 
      at performUnitOfWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10816:41)                                 
      at workLoopSync (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10797:11)                                      
      at renderRootSync (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10349:13)                                    
      at performWorkOnRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2094:7)
      at callback (node_modules/react/cjs/react.development.js:566:34)
      at flushActQueue (node_modules/react/cjs/react.development.js:860:10)
      at actImplementation (node_modules/@testing-library/react-native/src/act.ts:31:25)
      at renderWithAct (node_modules/@testing-library/react-native/src/render-act.ts:13:11)
      at renderInternal (node_modules/@testing-library/react-native/src/render.tsx:69:33)
      at renderInternal (node_modules/@testing-library/react-native/src/render.tsx:44:10)
      at Object.<anonymous> (components/screens/Note/Note.test.tsx:178:29)

Expected behavior

<SafeAreaView>-related warnings should not be logged while running tests.

It should be possible to fix this by upgrading react-native-popup-menu (see instea/react-native-popup-menu@2ec80a8).

• Note: Joplin currently patches react-native-popup-menu to improve its accessibility. The patch will need to be migrated and the migration will need to be tested with a screen reader.

[laurent22]

Or maybe we can silence these warnings? Not a fan of "this is deprecated" warnings as I don't remember this being useful ever. We upgrade packages when we need to and there's no need reminding us thousands of times, each time we use the package

[Sebika-K]

Hi! I’d like to work on this issue.
Based on the discussion, I’ll explore suppressing the SafeAreaView deprecation warnings in tests to reduce CI noise.

[Sebika-K]

Hi! I looked into this a bit. I first tried suppressing the warning in Jest, but it seems to be coming from react-native-popup-menu, so that approach felt a bit messy.
I also saw there’s an upstream fix where they remove SafeAreaView. I’m thinking of applying that change to Joplin’s existing patch while keeping the accessibility changes.

[kavyakapoor420]

Or maybe we can silence these warnings? Not a fan of "this is deprecated" warnings as I don't remember this being useful ever. We upgrade packages when we need to and there's no need reminding us thousands of times, each time we use the package

if we have to silence the warning , we just have todo this change in jest.setup.js file ?
somewhere around after line no :142 .
const originalWarn = console.warn; console.warn = (...args) => { if (args[0] && typeof args[0] === 'string' && args[0].includes('SafeAreaView has been deprecated')) { return; } originalWarn(...args); };

but for long-term Solution i feel like ,
considering upgrading react-native-popup-menu to a version that uses react-native-safe-area-context instead of the deprecated SafeAreaView.
This would require:

1)Updating the package version in package.json.
2)Migrating the accessibility patch to the new version.
3) Testing the updated patch with screen readers.

[Amirtha-yazhini]

Hi, I'd like to work on this as part of my GSoC 2026 application. I plan to upgrade react-native-popup-menu, migrate the existing accessibility patch to the new version, and verify with the mobile test suite. Let me know if there's any specific guidance on the patch migration approach

[Amirtha-yazhini]

I've submitted a PR to fix this: #14864

[Amirtha-yazhini]

I've submitted a PR to fix this: #14865