Performance Enhancement: Migrate to Modern React Native Architecture 🚀

[sanjaiyan-dev]

Hi,

This PR introduces changes to modernize the React Native architecture, yielding significant improvements in native performance and enabling bridgeless mode compatibility (see https://reactnative.dev/architecture/landing-page#fast-javascriptnative-interfacing for more information). Migrating to these updated packages ensures long-term support, alignment with modern React Native standards, and enhanced performance for future project development.

Package Updates:

• react-native-fs -> @dr.pogodin/react-native-fs: This migration replaces the original package with a version that supports the new React Native architecture and is actively maintained. Refer to the project history and roadmap here: https://github.com/birdofpreyru/react-native-fs?tab=readme-ov-file#project-history--roadmap. An additional benefit is improved tree shaking capabilities.

• @react-native-async-storage/async-storage -> react-native-mmkv: This change leverages the new React Native architecture through Turbo Modules, resulting in substantial performance gains. react-native-mmkv is approximately 25x faster than @react-native-async-storage/async-storage. Benchmark details can be found here: https://github.com/mrousavy/react-native-mmkv?tab=readme-ov-file#benchmark.

• Expo Packages: All Expo-related packages have been updated to their latest versions. Importantly, expo-camera has been migrated from the legacy (deprecated) version to the new version (expo-camera-next). This new version uses an improved camera API under the hood. See more details here: https://expo.dev/blog/expo-camera-next#our-goals-for-expo-cameranext.

Release Strategy Suggestion:
As for the release, I suggest we can either release this update with a @beta tag to allow users to test the changes before the final release or we can update all relevant documentation and introduce this as a breaking change for the next major version. This will give us the flexibility to properly communicate the changes and ensure a smooth upgrade path for the users.

Please review these changes and let me know if you identify any issues or potential areas for improvement. Your feedback is greatly appreciated.

[sanjaiyan-dev]

Issue -: #8292

[kirkryan]

Amazing thanks!

[sergiou87]

Exactly what I was looking for, thank you 🙏

I hope this gets merged soon!! Great work ❤️

[sanjaiyan-dev]

Exactly what I was looking for, thank you 🙏

I hope this gets merged soon!! Great work ❤️

Thanks so much for the kind words! I'm hopeful for a merge soon too 💫

[sergiou87]

@mattsoulanille @Linchenn sorry to bother you, but I saw you reviewed previous changes of the RN support (#7451): any chance you can take a look at this one? 🙏

Thanks in advance! 💖

[GiselaMD]

Hey guys! this is amazing!! I'm having this issue for a while, any update on this?

[sanjaiyan-dev]

Hello,

I received an update yesterday regarding the PR:

Reference: https://discuss.ai.google.dev/t/proposed-rewrite-of-react-native-integration-for-tensorflow-js/63295/5?u=sanjaiyan_parthipan

[sanjaiyan-dev]

Hi, do you have any updates on this PR ?

[serpa1]

@mattsoulanille @Linchenn could you take a look at this PR please? 🙏

[QasimJaffry]

Any update on this?

[sergiou87]

@mattsoulanille @Linchenn please please please, take a look at this PR 🥹

[sanjaiyan-dev]

@mattsoulanille @Linchenn please please please, take a look at this PR 🥹

Is this project still being maintained, or is it considered stale?

[sergiou87]

@sanjaiyan-dev I don't think it's stale since I see @mattsoulanille merging and submitting PRs. I also see @pyu10055 approving a recent one.

I understand reviewing PRs from external contributors is hard, but it'd be nice to get a bit of feedback. I wonder if splitting this PR in smaller ones would help to digest them and get them merged…

[sanjaiyan-dev]

@sanjaiyan-dev I don't think it's stale since I see @mattsoulanille merging and submitting PRs. I also see @pyu10055 approving a recent one.

I understand reviewing PRs from external contributors is hard, but it'd be nice to get a bit of feedback. I wonder if splitting this PR in smaller ones would help to digest them and get them merged…

Thank you so much for the helpful feedback and the great suggestion!
I'm happy to split this into smaller PRs. Since I'm new to this process, could you offer any guidance on what the most logical chunks would be?

[sergiou87]

Sorry @sanjaiyan-dev I would need some time to examine the changes very thoroughly first. I'm not even sure if it's possible (I was hoping you could tell me 😅).

IMHO the smaller the PR the better, even if that means having many PRs.

[sanjaiyan-dev]

Sorry @sanjaiyan-dev I would need some time to examine the changes very thoroughly first. I'm not even sure if it's possible (I was hoping you could tell me 😅).

IMHO the smaller the PR the better, even if that means having many PRs.

Hi @sergiou87, sorry for the late reply (had exams!). I agree with the 'smaller is better' approach. However, I'm struggling to decouple some of these changes as they are quite interconnected.

Do you have any advice on how to best split these up without causing issues? I'm happy to follow your lead on the best way to structure the PRs.

#8633

[sanjaiyan-dev]

I’ve outlined a modular plan to upgrade the project and adopt the React Native New Architecture. I would appreciate your feedback on this approach:

1. Storage Migration: Replace @react-native-async-storage/async-storage with react-native-mmkv (v4), which provides native support for the Old Architecture.
2. Dependency Alignment: Update Expo and third-party packages to support React 18 and React Native >= 0.77 to ensure compatibility with the latest architecture standards.
3. File System: Switch from react-native-fs to @dr.pogodin/react-native-fs. This step will follow the React Native version bump to ensure New Architecture compatibility.
4. Modernization & Optimization: Refactor remaining components to functional components to leverage the React Compiler. This will reduce the need for manual memoization (useMemo/useCallback) and improve performance.

As I am still refining my expertise in this area, please let me know if you see any potential issues or have suggestions for improvement.