Updating Example App to use React Native 0.81.1

[whiteHatCip]

Description

Updating Example App to use React Native 0.81.0

Because of the high amount of files changed, I advise you to review this PR using Google Chrome, as it seems that from Safari the Github UI hangs when entering the Files Changed tab

Checklist

• I've read CONTRIBUTING.md
• I updated the doc/other generated code with running yarn generate in the root folder
• I have tested the new feature on /example app.
  • In V11 mode/ios
  • In New Architecture mode/ios
  • In V11 mode/android
  • In New Architecture mode/android
• I updated the example app (but no new feature has been implemented)

Changes

• Updating the example app to make use of the dependencies' latest versions, including react-native 0.81.0.
• Importing SafeAreaView from react-native-safe-area-context to get rid of deprecation warnings for importing it from react-native
• The example app now will show all the pages properly: some of them were showing two screen headers at the same time, and fixing an app crash when tapping clusters in the Earthquakes example screen on iOS.
• The example app will show modals using react-navigation modals and of react-native Modals, for more comprehensive presentation of react-native alternatives and better UX.

[whiteHatCip]

@mfazekas

FYI in this PR I had to put the changes from PR #3937, because otherwise the example app for iOS wouldn't build. It would make sense to merge PR #3937 before this one and #3941.

In addition, I also had to update debounce dependency to version 2.2.0 in the root package.json because otherwise debounce wouldn't work in the example app's MapView component

[whiteHatCip]

@mfazekas When you have some time, will you please take a look into why the CI is still failing the pod installation step despite I updated the macOS image version to 15 and also specified explicitly the Xcode version to use? I can't really tell what's wrong: if it's in changes or if it's about something else. Thank you

[mfazekas]

@whiteHatCip are you sure macOS image was updated?

[whiteHatCip]

@whiteHatCip are you sure macOS image was updated?

@mfazekas No I am not sure of this. Actually I was sure that the image was not updated. But I don't understand: I changed the yml file in the PR have. Why doesn't it work?

[mfazekas]

@whiteHatCip are you sure macOS image was updated?

@mfazekas No I am not sure of this. Actually I was sure that the image was not updated. But I don't understand: I changed the yml file in the PR have. Why doesn't it work?

@whiteHatCip I have no idea. Yes it should have updated the image. Maybe it's something about .github/workflows/ci-for-forked-repos.yml but ???

On main I've updated the image, which now causes builds to fail - detox issue. I'm working on that.

[whiteHatCip]

@whiteHatCip are you sure macOS image was updated?

@mfazekas No I am not sure of this. Actually I was sure that the image was not updated. But I don't understand: I changed the yml file in the PR have. Why doesn't it work?

@whiteHatCip I have no idea. Yes it should have updated the image. Maybe it's something about .github/workflows/ci-for-forked-repos.yml but ???

On main I've updated the image, which now causes builds to fail - detox issue. I'm working on that.

Thank you! Today I cannot work on this. Will need to get back at it later tonight or tomorrow. Hopefully tonight I will find your solution ready 😃

[whiteHatCip]

@whiteHatCip I have no idea. Yes it should have updated the image. Maybe it's something about .github/workflows/ci-for-forked-repos.yml but ???

On main I've updated the image, which now causes builds to fail - detox issue. I'm working on that.

I'm wondering if the issue could be that the macOS image version should be specified in the .github/workflows/ci-for-forked-repos.yml file, rather than in the ultimate workflow file that gets called in the chain. Do you think it could be worth a try?

[mfazekas]

So I've upgraded macOS image on main, but now I'm getting build failure with xcodebuild with module map not found

See #3958

I've also invited you to the repo, so you can push your branch to repo, without me having to approve the CI. Please do not merge anything to the main, unless instructed so, for now.

[mfazekas]

@whiteHatCip I think the issue is that GitHub actions for forks are not using the workflow files from the fork but from the repo. This is likely a security concern.

[whiteHatCip]

So I've upgraded macOS image on main, but now I'm getting build failure with xcodebuild with module map not found

See #3958

I've also invited you to the repo, so you can push your branch to repo, without me having to approve the CI. Please do not merge anything to the main, unless instructed so, for now.

Thank you for trusting me with this invitation. Won't merge anything on main, of course 😊

[whiteHatCip]

@whiteHatCip I think the issue is that GitHub actions for forks are not using the workflow files from the fork but from the repo. This is likely a security concern.

It would make sense, if this is the issue. Can we confirm that somehow?

[mfazekas]

@whiteHatCip I think the issue is that GitHub actions for forks are not using the workflow files from the fork but from the repo. This is likely a security concern.

It would make sense, if this is the issue. Can we confirm that somehow?

See https://github.blog/news-insights/product-news/github-actions-improvements-for-fork-and-pull-request-workflows/

In order to solve this, we’ve added a new pull_request_target event, which behaves in an almost identical way to the pull_request event with the same set of filters and payload. However, instead of running against the workflow and code from the merge commit, the event runs against the workflow and code from the base of the pull request. This means the workflow is running from a trusted source and is given access to a read/write token as well as secrets enabling the maintainer to safely comment on or label a pull request. This event can be used in combination with the private repository settings as well.

.github/workflows/ci-for-forked-repos.yml

does starts with:

on:
  pull_request_target:
    branches: [ main ]

I see. Since I am now part of the maintainers team, I don't know how to behave. I see you have a branch where you're working on this issue. should I branch out from that branch of yours, or can I push to that branch right away, if I have a potential fix ready to be tested? what's the process?

[mfazekas]

Thanks much for working on it. Looks good to me 👍 apart from those minor concerns.

[Copilot]

Pull Request Overview

This PR updates the example app to use React Native 0.81.1 and makes several quality improvements. It includes upgrading dependencies, improving error handling, replacing deprecated imports, and enhancing the navigation structure for better user experience.

• Updates React Native from 0.80.2 to 0.81.1 and upgrades related dependencies
• Refactors debounce library usage and improves TypeScript configuration
• Enhances modal presentation with React Navigation modals and native modals

Reviewed Changes

Copilot reviewed 43 out of 46 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
src/components/MapView.tsx	Updates debounce library usage for API compatibility
package.json	Upgrades debounce to v2.2.0 and adds eslint-plugin-prettier
ios/RNMBX/ShapeAnimators/	Renames method from create to generate for consistency
example/ files	Updates SafeAreaView imports to use react-native-safe-area-context
example/src/examples/CacheManagement/	Converts from class to functional component and reorganizes structure
example/src/examples/SymbolCircleLayer/Earthquakes.tsx	Refactors modal presentation and improves component organization
example/src/examples/Map/MapAndRNNavigation.js	Enhances modal presentation with multiple navigation options
Various example files	Removes deprecated Page wrapper usage throughout examples

Comments suppressed due to low confidence (1)

example/src/examples/SymbolCircleLayer/ShapeSourceIcon.js:1

• Text components cannot have border radius, shadow properties, or backgroundColor applied directly. These styling properties should be applied to a wrapping View component instead.

import React from 'react';

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[Copilot]

The title was corrected from "Animaated point" to "Animated point" - this fixes the spelling error.

[mfazekas]

@whiteHatCip I'm concerned about this PR getting bigger and bigger. Also I'm not 100% sure about converting examples to typescript. Those are code examples serving as documentation/demonstrating the use of rnmapbox and typescript generally means a bit more noise.

[whiteHatCip]

@whiteHatCip I'm concerned about this PR getting bigger and bigger. Also I'm not 100% sure about converting examples to typescript. Those are code examples serving as documentation/demonstrating the use of rnmapbox and typescript generally means a bit more noise.

@mfazekas I see your point. The thing is that saw the notification from the Copilot review: Corrected one suggestion for a useless wrapper, and noticed a couple more things, like an error that would have caused a crash related to the ShapeSource example.
If I may say my humble opinion, typescript allows less confusion on the kind of data that is being manipulated, rather than noise, but maybe this is a bias of mine, coming from the fact that I prefer it. Considering that react-native now defaults new project to be based on Typescript, moving towards it seems a reasonable decision. But I don't want to push any decision. I thought I was doing good. And also, there were already examples that were using Typescript, therefore I didn't think that converting a couple of the would have been a problem. I thought that the JS examples were simply legacy examples that were part of the library since a long time. That's it

Anyway, I won't add any more changes to the changes from this PR. You approved it, early this morning, Shall we merge it as is, or should I revert that last file I turned from JS to TS for this PR to be merged? What is exactly that you are concerned about? Is it just about that single js-to-tsx file?