{"id":7,"date":"2025-07-29T10:11:35","date_gmt":"2025-07-29T10:11:35","guid":{"rendered":"https:\/\/mithril.com.au\/wordpress\/?p=7"},"modified":"2025-07-29T10:11:35","modified_gmt":"2025-07-29T10:11:35","slug":"updating-react-native-my-journey","status":"publish","type":"post","link":"https:\/\/mithril.com.au\/wordpress\/index.php\/2025\/07\/29\/updating-react-native-my-journey\/","title":{"rendered":"Updating React Native (my journey)"},"content":{"rendered":"\n

Upgrading a React Native Project to a newer version<\/h2>\n\n\n\n

My Journey, in the hopes it will be useful to others. <\/h4>\n\n\n\n

So, it turns out that upgrading a react native project is a major task, not the least of which is there the error reporting is literally all over the place.<\/p>\n\n\n\n

I have a project currently running in 0.73 and I need to upgrade it to keep Google Playstore happy.<\/p>\n\n\n\n

(Min SDK needs to be 35 now).<\/p>\n\n\n\n

(Android, Windows environment)<\/p>\n\n\n\n

First off all, the upgrade tools have never worked for me. , not even when moving from one version of RN to the next one up.<\/p>\n\n\n\n

Also, I did  not write the original version of the project, and I’m not convinced the original author actually understood RN very well.<\/p>\n\n\n\n

Patching the project in place never seems to work, so my approach for upgrades is:<\/p>\n\n\n\n

Start a new project with the latest RN version:<\/p>\n\n\n\n

https:\/\/reactnative.dev\/docs\/getting-started-without-a-framework<\/code><\/a><\/p>\n\n\n\n

(Note: Not using expo, it does not appear suitable for my requirements)<\/p>\n\n\n\n

Copy source code from existing project, including assets, but leave android folder alone for the time being.<\/p>\n\n\n\n

npx react-native run-android<\/code><\/p>\n\n\n\n

I took the opportunity to get all dependant packages to the latest version, by just iterating installing each package as it detected it was missing. Sometime iterating is as simple as hitting reload, sometimes you have to “run-android” again. (And sometimes you need to clear all the caches and restart).<\/p>\n\n\n\n

Here are some of the packages that needed special handling:<\/p>\n\n\n\n

@nozbe\/watermelondb<\/h3>\n\n\n\n

This is an asynchronous wrapper around a native database, typically sqlite. It seems to work tolerably well once you take the time to properly .read the documentation. You do need to install a particular version of babel as watermelondb make extensive use of decorations.<\/p>\n\n\n\n

Getting this to run took a while, and the error in question was an unhelpful “n is not a function” message.<\/p>\n\n\n\n

After some trial and error, I found that the  @action<\/strong>  decoration was failing during the babel rendering phase. This is because it appears to be obsolete, and by replacing with @reader <\/strong>or @writer <\/strong> decorations it will now initialise properly. Remember to update your imports.<\/p>\n\n\n\n

@nozbe\/withobservables<\/h3>\n\n\n\n

This has moved. Do not install as a separate package as it is now included in\u00a0@nozbe\/watermelondb<\/strong>. Change your imports to:<\/p>\n\n\n\n

import { withObservables} from'@nozbe\/watermelondb\/react';<\/code><\/p>\n\n\n\n

recompose<\/h3>\n\n\n\n

The project made considerable use of\u00a0recompose<\/strong>\u00a0which is no longer supported, and will crash on startup. The best fix is to not use it at all, but a quick workaround to stop it falling over is:to patch\u00a0node_modules\/recompose\/dist\/Recompose.cjs.js\u00a0<\/strong>and replace all references to\u00a0React.createFactory<\/strong>\u00a0with a call to:<\/p>\n\n\n\n

export function createFactory(type) {\n\n\u00a0 return React.createElement.bind(null, type);\n}\n<\/code><\/pre>\n\n\n\n
Clearly it is better to rewrite your code to not use recompose, but that is not always straightforward. (I eventually managed to remove all references to recompose.<\/p>\n\n\n\n
react-native-ui-lib<\/strong><\/h3>\n\n\n\n
Does not work with version 0.79, and throws an error like: <\/p>\n\n\n\n
\n
Attempt to invoke virtual method ‘void com.facebook.react.uimanager.UlManagerModule.onBatchComplete()’ on a null object reference<\/p>\n<\/blockquote>\n\n\n\n
after the keyboard appears in a text input.<\/p>\n\n\n\n
Theoretically it can be patched but I just uninstalled the module and removed all references.<\/p>\n\n\n\n
debugging<\/h3>\n\n\n\n
0.79 has changed the debugger and the console output. Hitting “j” in the metro screen should open it, and as a debugger it seems much better at source code handling than prior versions. However, if your project is crashing the debugger can decide it doesn’t want to connect.<\/p>\n\n\n\n
The trick I found was to close the app on the device, restart, hit reload, and then hit the reconnect button in the debugger window before it has finished loading. That is usually sufficient to get the source maps loaded and to allow you to start putting in breakpoints<\/p>\n\n\n\n
missing imports<\/h3>\n\n\n\n
RN is aggravatingly poor at letting you know that an import has failed to work. For instance:<\/p>\n\n\n\n
\n
import {jwt_decode} from 'jwt-decode';<\/code><\/p>\n<\/blockquote>\n\n\n\n
It turns out in the latest version of jwt-decode, the developer changed the import from jwt_decode <\/strong>to jwtDecode<\/strong>. There were no error messages, I just traced it to the point where I was attempting to call jwt_decode(token) and realised it wasn’t proceeding past there. So, double check imports, because RN is not very reliable. Sometimes it will tell you there is an issue, sometimes not.<\/p>\n\n\n\n
The many ways of restarting <\/h3>\n\n\n\n
<\/h3>\n\n\n\n
RN is, lets face it, a Frankenstienian monstrosity. It has a lot of moving parts and many different places you need to look to work out what is going wrong. During development, you need to frequently rebuild.<\/p>\n\n\n\n
Here are some of approaches, from simplest to most thorough:<\/p>\n\n\n\n
    \n
  1. Change your code and save changes<\/strong>: If your project is basically running, RN will pick up any changes and reapply.\u00a0<\/li>\n\n\n\n
  2. Hit Reload:\u00a0<\/strong>Hitting “r” on the metro server screen, or the reload button on the error screen on the device should reload any changes.<\/li>\n\n\n\n
  3. npx react-native\u00a0run-android:<\/strong>\u00a0should rebuild everything, including the underlying android SDK java components. Generally a good idea if you install or uninstall modules, but you can get away with just a reload IF the module is pure javascript\/typescript. It’s not always easy to tell.<\/li>\n\n\n\n
  4. npx react-native start –reset-cache:\u00a0<\/strong>Do this after the run-android step if something is not working when you think it should be.\u00a0<\/li>\n\n\n\n
  5. clear caches and reinstall modules:\u00a0<\/strong>See\u00a0cleanall.bat<\/strong>\u00a0below.<\/li>\n<\/ol>\n\n\n\n
    @echo off\necho Deleting metro cache\nrd %localappdata%\\Temp\\metro-cache \/s \/q \ndel %localappdata%\\Temp\\haste-map*\necho Cleaning build\ncd android\ncall gradlew clean \ncd .. \necho Deleting node_modules\nrd node_modules \/q \/s \necho Cleaning npm cache\ncall npm cache clean --force \necho Installing modules\ncall npm install --legacy-peer-deps\necho Done<\/code><\/pre>\n\n\n\n
    <\/p>\n\n\n\n
    This will clear all the caches and reinstall the modules. This will sometimes sort out strange behaviours.<\/p>\n\n\n\n
    Reconnecting<\/h3>\n\n\n\n
    Sometimes the device loses track of where the metro server is, and vice-versa.<\/p>\n\n\n\n
    \n
    adb reverse tcp:8081 tcp:8081<\/code><\/p>\n<\/blockquote>\n\n\n\n
    should map the ports appropriately. Look up adb parameters to manage more than one device.<\/p>\n\n\n\n
    Once this is done, close and restart the app on the device for a clean reconnect.<\/p>\n\n\n\n
    Patching<\/h3>\n\n\n\n
    npm modules get out of date with the current version of RN and need to be tweaked or modified to get your project to run.<\/p>\n\n\n\n
    Fortunately, there is a way of tweaking a module in your own project without having to go for a full scale fork in git.<\/p>\n\n\n\n
    patch-package<\/a> https:\/\/www.npmjs.com\/package\/patch-package creates a patch file from your changes and reapplies the change when you do a fresh install.<\/p>\n\n\n\n
    Note: It  does require git<\/strong> to be available from the command line to run properly<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
    Upgrading a React Native Project to a newer version My Journey, in the hopes it will be useful to others.  So, it turns out that upgrading a react native project is a major task, not the least of which is there the error reporting is literally all over the place. I have a project currently […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-7","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/mithril.com.au\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mithril.com.au\/wordpress\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mithril.com.au\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mithril.com.au\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mithril.com.au\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":1,"href":"https:\/\/mithril.com.au\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/7\/revisions"}],"predecessor-version":[{"id":8,"href":"https:\/\/mithril.com.au\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/7\/revisions\/8"}],"wp:attachment":[{"href":"https:\/\/mithril.com.au\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=7"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mithril.com.au\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=7"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mithril.com.au\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}