This is not the first time I've upgraded any react-native projects.

I've done it a few times over the years and will be sharing out what I've learnt so far.

To give you some context regarding the topic, the very same project was upgraded to `0.59.10` since the creation with `react-native init`,
to comply with the Google Play store regulation for having 64 bit version of the app.

Everything works out fine with `0.59.10`, for the next couple of months.

Especially one that need to deal with linking of native libraries, most of the packages have no issue with the good old `react-native link` command.

With that said, I can focus on building features and be very productive with my hours spent working on projects (personal or client projects).

Which makes me fully occupied with work, and thus not having time for writing/bloging.

Now, let's get back to the topic.

 

#### 1. Before the upgrade

Before any major upgrade (i.e: `0.5x.x` to `0.60.0`), you need to know things are going to be broken, libraries will have issues,
deprecated API(s) will affects your app (rather than just deprecation warning), module dependencies and UI look or behaviour will have impacts.

There are a lot of stuffs that can possibly went wrong. So keep in mind that, upgrading is one part, regression test for your upgraded app is another part.

For any version upgrades you are going to perform, it is a good practice to have an overview of your `dependencies`, spot for native linked libraries and do a quick check on the potential issues after upgrade.

For non native linked library, there might be issue is there is a major changes in `react` version itself, but most of the time this will no less of a issue.


In my case, there are 116 packages(dev packages excluded) installed at the point during my upgrades, and 38 of them are natively linked.

So I am sure it's going to take time for the upgrade to complete. Plus after some searching the internet, I am very sure that the upgrade cannot be completed in
just few hours of time (in my case).

 

#### 2. Reasons for upgrade

So now you are aware that what a major upgrade will be like, and the time that it will take.

If there are no major blocker that are holding you back with the current version, I would suggest delaying the upgrade for a few reasons:

- Buffer time for libraries maintainers to support the latest feature/changes with `react-native`
- Don't fix what isn't broken (with trying to upgrade)

Do it when you are in better position (let say you are ahead with your timeline), or when you have absolute no better choice than to upgrade (i.e: to upgrade to 64 bit support.)

If you are in the midst of some feature, and that feature requires for a `react-native` version upgrade before continuing, I actually suggest going with alternatives if you can. Or do the upgrade separately, and do enough testing after the upgrade, otherwise you will find yourselves in a rabbit hole trying to fix some errors of another issue in order to make some other issues resolved. You don't want that.

For example, App Store stops accepting app with WebView since April. You need to use `react-native-webview` (from a specific version onwards), and have your `react-native` project to be at minimum xxx version.

You thought upgrading is the only option. Well if you are in good hand, for example your project is new and have less dependencies. Upgrading seems like a good choice if that is the case.

Otherwise you want just settled with the alternative, for example, removing the RCTWebView with a script that run on a `postinstall` or `after_install` Podfile, and you are good to god.

Chances are if you proceed with the upgrade, your `react-navigation` verison will not compatible with the new version, and you need to upgrade `react-navigation` as well. Say, from `v3` to `v4` with some changes in behaviour. (More on this later)

 

#### 3. Which version to upgrade to

If you are like me, who delaying the upgrade until you have no other choices. Chances are, you have a few major versions to choose from, since the release schedule of React Native now follows a monthly release train.
So the question for us is which version to use?

Well, if you have a major upgrade, normally I take the latest version within the major upgrade.
Depending on the major version of your choice, for my case from `0.59.10`, I can upgrade to `0.60.x`, `0.61.x` or `0.62.x`. (`0.63.x` release candidate are not into consideration)

To have an overview of the available version, use this command.

`npm show react-native versions`

My choice of upgrade is to get the latest stable version for this project. Cause if I don't do that, I will need to upgrade again sooner, and I am having huge backlogs in the pipeline after the upgrade. So I want to maximize the window before the next upgrade.

Bear in mind that the latest stable version might not always be the best choice to upgrade to. Sometimes you want to upgrade to a version lower that that.

Reason for that is the latest stable version might have breaking chances that no open source libraries has adapted yet.

How to know which to choose from?

1. Inspect your `package.json` file and have a look at the `dependencies` to get an idea. You are the developer of your project and should know more about which libraries will more likely to break after the upgrade.
2. Have a look at [release changelogs](https://github.com/facebook/react-native/releases)

 

#### 4. How to upgrade

 

##### 4.1 Clone the project folder

I used to do it in a separate branch, but for this particular upgrade, I am doing it in a cloned folder.

Note: Not cloning from remote and reinstalling everything, I copy/pasted the entire folder to a different directory and start working on the upgrade.

Reason?

1. I don't want to re-installing the `node_modules` and `Pods` when I already have it.
2. The cloned project will build and run without issue.
3. I don't want to switch branch and then my existing branch is messed up with my upgraded libraries (`node_modules` and so on).
Upgrade is going on, same goes for bug fixing and feature development. I am still actively developing on the non-upgraded branch.
4. If the upgrade gone haywire, I can discard the changes in clones folder and not affecting my development flow. And start over again from the cloned folder.

You want your app to still working if you decided to abort the upgrade half way, or start over again. (Yeah, sometimes, you just have to start over again.)

While juggling betweeen bug fixing, new features development, some optimizations, maintaining the code and version upgrade, I want to avoid the upgrade to potentially stop me from my regular work flow.
If the upgrade went wrong, I can still fix bug and ship new features of my app to App/Play stores on the main project.

##### 4.2 Use React Native upgrade helper

[React Native upgrade helper](https://react-native-community.github.io/upgrade-helper/)

Check for code changes before applying it in the project.

Optionally, you can upgrade with `npx react-native upgrade`.

However, from the memory of the time I last used it, I don't have a good experience using that.
I have to resolved conflicts and the worst part was changes on iOS `project.pbxproj` files which is a pain.

Ever since then I use upgrade helper and hand-picked the code and manually apply it to my existing project.
I am happy with that and is aware and consious of what I've changes, so I know where to look for if anything went wrong.

If my case, upgrading to `0.62.2` only need to change 15 files, which is faster to do hand-picked. (Imagine the time spent on fixing conflicts could be more than that)

Plus, I can exclude the implementation of `flipper` which is a debugging tool included in future versions of `react-native`.

Hand picking the lines makes me aware of the additional stuffs that are added (in this case, `flipper`), and I am not including it this time.

Reason for doing so is to not have some extra dependencies or code to fix.

I just want to focus on the upgrade and I can live without the debug tool for now.

Since coming from `0.59.10`, I am using my other debugging tool, might as well not introduce uncertainties that will break the product.

I will give `flipper` a try afterwards, but for now, the upgrade is in highest priority.

After applying the code changes (or if your are using the upgrade command). Run `yarn install` (or `npm install` depending on your setup.)

##### 4.3 Get your project up and running

After installing the versions, if there are no errors. You are good to go to start build and run the project.

Assuming the new packages have no issues, you need to fix the build issues with you app and get it up and running like before.

The following are the issues that I've encountered and the solution to it.
I always start debugging with iOS build with xcode. (Just a preference)

1. Run `pod install` and bump into `- ERROR | attributes: Missing required attribute `homepage`.`

Since `0.60.0`, native libraries are now auto linked. That means you don't have to specify the pod in your `Podfile` anymore and React Native will pick that up. (some changes to `Podfile` requires)
And for this reason, native libraries are required to have a `.podspec` file for that to work.
If the `homepage` are set to empty string `s.homepage = ''` you will get this issue.

I am getting this issue for this package `https://github.com/Aminoid/react-native-activity-recognition`

The fix: Fork the repository and add a homepage to it. (There are another issue with this library's podspec, so forking the library is a better choice, more about this later)

2. `CocoaPods could not find compatible versions for pod "React/Core":`

This is a issue with `react-native-image-crop-picker` library. Upgrading the library will fix it.
Since the dependency is now `React-Core`.

3. `YOUR_PROJECT_PATH/node_modules/react-native/React/Modules/RCTEventEmitter.h:8:9: 'React/RCTBridge.h' file not found`

Got this issue for `react-native-audio-recorder-player`. As you can tell, upgrading the library will fix it.

4. `'React/RCTDefines.h' file not found`

This one has to do with `AppCenter` packages.

And the fix for this is well documented [here](https://docs.microsoft.com/en-us/appcenter/sdk/troubleshooting/react-native).

5. `<React/RCTBridgeModule.h> file not found`

Now this is the real tricky part.

At this point, the header file is missing, and we are not sure, whether it is an error that only happens to this library only or all other libraries.
For this, there is a way to inspect the issue.

This is very well written in this Github comment, so I am not going to elaborate futher.

https://github.com/facebook/react-native/issues/26665#issuecomment-571082076

In short, I have to remove the `target.remove_from_project` from `Podfile` `post_install`

then

```
pod deintegrate
pod cache clean
pod install
```

(not enough with just removing the `Pods` directory)

and add the missing react back to scheme > build (for all the targets!)

6. Remove from `Libraries` folder in xcode, all the `.xcodeproj` and all the `xxx.a` from `Build Phases > Link Binary with Libraries` from native libraries if you haven't.

Or use `react-native unlink` (but again, I do it manually from xcode, because I don't want to unlink for android yet, as it turns out, android works without unlinking, but is is now redundant.)

Otherwise app will have duplicated headers from Pods and the Libraries projects.

7. `MKTouchableManager.m:11:9: error: 'UIView+React.h' file not found with <angled> include; use "quotes" instead`

Then I am having this issue with `react-native-material-kit`. I use this for ranged slider with two thumbs. Looking for alternatives, but I am fixing this one first.

Turns out upgrading the project to the latest version fixed the issue.

8. `No known class method for selector 'configure'`

Then this issue, from firebase, basically I need to use firebase v6 instead of v5. Well, another breaking changes.
Since local push notification are no longer usable in v6. I need to find solution for that. So in this case, upgrade to v6,
and comment out implementation for local push notification and come back to this later.
(Remember, we want to build and run the app and not spending too much time replacing the implementation and then we don't know why it is not working. Do one thing at a time. Complete the upgrade first.)

Upgrading to v6 has no much issues, also because the only thing that was in used with firebase is the local push notification. (but there are plans to use the Crashlytics, part of the reason why the upgrade is done)
And of course, the documentation on the website is great. I am using `react-native-firebase`. (Sometimes the documentation update is so frequent that old documentation is not there anymore, so just keep up to date with the latest version as best as you can.)

---

At this point, the app can be built and run on simulator already.

---

9. `Invariant Violation: Native module cannot be null.` and `'React/RCTEventEmitter.h' file not found`

This is from the `react-native-activity-recognition` library I am using. Second issue from the same library.
And it has to do with a incorrect path in `podspec` being used. Before this I fixed it with importing the project to library and manually link the library code.
But now I need to use Podfile and this has to be fixed with updating the `podspec` of the library.

Solution: Fork the repository, update the `podspec` and install it in your app.

10. `null is not an object (evaluating '_ReanimatedModule.default.createNode')`

This has to do with `react-native-tab-view`. Upgrade the `react-native-tab-view` and `react-native-reanimated` to the latest version.
Run `pod install` for `react-native-reanimated` to be updated.

11. `Undefined is not an object (evaluating 'navigator.geolocation.getCurrentPosition')`

`navigator` is no longer available from the global object.
Install and use the it from `https://github.com/react-native-community/react-native-geolocation` instead.

12. Also deprecated APIs are: `ViewPager` and `ListView`

If you are using libraries that depends on these APIs, you will need to upgrade the library as well. Or replace/remove the APIs in your app.

13. `Cannot read property measureInWindow of undefined`

Issue with `react-navigation` v3. You will need to use v4 or v5.

From v3 to v4 has some minor changes. From v3 or v4 to v5 will have API changes. So upgrade with care.

For me, I opt to upgrade to v4 and still have some unexpected changes in behaviour. And need to fix it.

As you know, the local push notification is now broken, so I want to just stay with v4 to have less code that broken.

And when the app are back up to where, then I will consider upgrading to v5.

14. `TypeError: Cannot call a class a function`

This is a changes in the code that I wrote, it is now illegal to do that, I haven't investigated further whether the changes is from `react-navigation` or `react` library.
But I managed to figured out the issue.

Code with issue: (works with `0.59.10`)

```
headerLeft: NavHeader.Back,
```

Code changes after the upgrade:

```
headerLeft: props => <NavHeader.Back {...props} />
```

You should be able to tell what's wrong from the error description. (`NavHeader` is a class component)

15. Issue with PagerPan from `react-native-tab-view`

Code with issue:

```
import { TabView, SceneMap, PagerPan } from 'react-native-tab-view';
```

Code changes:

```
import { TabView, SceneMap, ScrollPager as PagerPan } from 'react-native-tab-view';
```

However, even after the fix, the behaviour is not the same, therefore more work has to be done to disable animation and swipe on the tab.


16. `AirGoogleMaps` dir must be added to your xCode project to support GoogleMaps on iOS.

Upgrade the library and make sure to run `pod install`

##### End

Hopefully my writing can help you with the upgrade. Happy coding.

I will be writing up with the upgraded project next.

Upgrading a 16 months old react-native project

One of the many things that bother me after my React Native app went public is the app size.

Big app size is not a show stopper to continue adding new features to my app, nor it causes anything bad.

So, it has always been the least priority to work on that.

Some say it costs a bit of performance, if the app size is too big.

However, it isn't really critical for any newly launched app for a premature optimization, on the app size.

I've always wanted to fix it (when I have the time), and I think now is the best time, because I can do it for

multiple projects that I am juggling, with the same optimization trick.

And, it's really simple.

NOTE: This is an Android only optimization.

###### Before

![before](before.png)

 

###### After

![after](after.png)

 

You can do it with any *ONE* of two ways below:

#### 1. Android app bundle

Simply change your build process from

`./gradlew assembleRelease`

to

`./gradlew bundleRelease`

The output will be `.aab` file instead of `.apk` file.

Note that the `.aab` file will not have any significant file size changes compared to the `.apk` file.

The reduction in size will only be visible after uploaded the `.aab` file to Play Store.

 

#### 2. Separate Build by CPU Architecture

In your project's `android/app/build.gradle` file.

Update the following setting.

`def enableSeparateBuildPerCPUArchitecture = true`

```
splits {
 abi {
 ...
 enable enableSeparateBuildPerCPUArchitecture // be sure to enable here as well
 ...
 }
}
```

Continue to build the apk as usual.

The output will be multiple `.apk` files (usually 4).

Each of the `.apk` file will have significant reduction in app size.

Upload all of them to the Play Store for submission.

Worth to note that, the universal '.apk' file will not be built.

(The one that support all architecture, thus the heavy size.)

If you want it to be in the output apk, along with the others, change the following setting.

```
splits {
 abi {
 ...
 enable enableSeparateBuildPerCPUArchitecture
 universalApk true // If true, also generate a universal APK
 ...
 }
}
```

Then you will have 5 `.apk` files in the output folder.

Read about why enabling the `universalApk` below.

 

---

 

#### Which one to use

For most of us, switching to use Android App Bundle (aab) is painless.

Thus, recommended to use it.

However, here's are some of the things to consider.

 

##### 1. Firebase App Distribution does not support (.aab) at the moment.

If you use Firebase for internal distribution, you might want to use `Separate Build by CPU Architecture` approach, together with `universalApk` enabled.

What you can do is, use universal apk file for distribution, and the separated `.apk` files for Play Store submission.

So, what about if you are using `.aab` file? How can you distribute the app for internal testing?

Well, if there are no existing tools that are already integrated into the app, and need to cater for it,
then you might want to consider using Play Store's distribution track.

You can setup automated process to upload the `.aab` file after building it to the Play Store track.

This require owner access though.

 

##### 2. The reduction in size for both approaches are almost identical.

From what I can tell, after experimenting with both approaches, and using both ways for different apps, in production.

The size reduction benefit is almost identical. In both cases, I got more than 50% in size reduction.

So the size reduction is not much of a deciding factor. Which makes us move to the next point.

 

##### 3. Concern on Android App Bundle's capabilities.

For most of the app out there, App Bundle offer hassle-free switch.

While some of the use cases, it might be more complicated to maintain.

If you are not sure, refer to official documentation of Android development.

If you are not convinced, your app doesn't have defined scope and complexity, or your app might
grow to eventually having very complicated/advanced use cases, you can stick to separated '.apk' approach.

Otherwise, using `.aab` is recommended.

Well this post is not going to elaborate the differences of '.apk' and '.aab', but it is worth doing your research about the topic.

 

---

 

#### Conclusion

With that said, you will have your Android app with very much reduced size by now!

For my apps, over 50% in reduction.

Cheers!

and

Happy coding!

Reduce your react-native android app size


You take a picture from your app, and get back an uri in return.

Then you proceed to upload the photo to server. End of story.

As a developer, you know that's not always the case, sometimes it's a bit more complicated, you take a snapshot from within the app,
and realized that it returns black image.

So you want to debug, and without uploading to server, you can't access to the file,
to take a look at the state of the image, whether your code changes has fixed the issue or not.

Or you want to manipulate the image before uploading.

For whatever reason, you want to access to the file in cache.

After few failed attempts to get it via tools like `Android File Transfer` and others
that can access to the Android file system.

I found the solution with `adb` cli, and here is how to do it, from your Android device.


```
adb shell "run-as com.yourapp.bundle cat '/data/user/0/com.yourapp.bundle/cache/ReactNative-image1215816883788.jpg' > '/sdcard/DCIM/ReactNative-image1215816883788.jpg'"

adb pull "/sdcard/DCIM/ReactNative-image1215816883788.jpg"

```

That's it!

Now, check your current directory for the file `ReactNative-image1215816883788.jpg`


Access to android files in cache directory

Using `Animated` to animate components in `react-native` has been the my go to way of doing things for the past few years.

Until recently when I discovered that `LayoutAnimation` can achieve similar result in animating component without the hassle of managing the states of the animation.

In this case, I am trying to animate the `TextInput` of a chat screen, to expand and collapse accordingly when the input starts receiving text, or when it's been cleared.





All I did was adding this magical line before setting the `props/state` that responsible for expanding or collapsing the view.

```
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
```

This also works great with views with accordions and toggles.

It is possible to get it work with `Animated` but now that this is way much simpler, I think its worth sharing.

For more of the detail of using it, check out the official documentation for `LayoutAnimation`.

LayoutAnimation in a nutshell

After trying out different solutions attempted to listen to different port other than 8081 for react-native metro bundler.
Finally I have managed to achieve this **WITHOUT** the hassle of editing files such as:

```
RCTBridgeDelegate.h
RTCDefines.h
RCTInspectorDevServerHelper.m
RCTDevMenu.m
```

While this approach works, the issue with it is the changes get reset after running `pod install`.

So after reading alot materials, with some improvisation, I came up with the solution using `Podfile`.

 

#### Podfile

```
post_install do |installer|
 react_native_post_install(installer)
 __apply_Xcode_12_5_M1_post_install_workaround(installer)

 installer.pods_project.targets.each do |target|
 if target.name == 'React-Core'
 target.build_configurations.each do |config|
 if config.name == 'Debug'
 config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= ['$(inherited)']
 config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] = config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] + ['RCT_METRO_PORT=8089']
 end
 end
 end
 end
end
```

 

#### Metro server

`npx react-native start --port=8089`

 

That's it! Now, run `pod install` and run the app and it will be listening to port `8089`.

For Android, change the dev server setting from your device and it is reload the app. This part will not be covered in this article because there are alot of online resources that works perfectly.

Hope it helps.

Cheers.

React Native Listen to Port Other Than 8081

In this blog post, I will share the code for a simple RCTBridgeModule that can write/read key-value from React Native.

The use case for this is to access the data in iOS Share Extension using value set from React Native.

So that the Share Extension can perform API call with sufficient data that was set in React Native, and thus giving user a much better experience similar to other natively built apps. This is a much more complicated implementation and there are much simpler ways to get it done without writing too many native code and that will be for another blog post.

Let's get back and focus on this topic, get and set value in `UserDefaults` that are accesible in Share Extension.
In order to achieve that, we need to use `UserDefaults` with `suiteName` that starts with `group.`.

Before you proceed, please make sure that you have already created Share Extension and updated `App Groups` in the `Signing & Capabilities`.
This is not covered in this post and there are alot of online resources for this topic.

<hr />

 

##### 1. First, create a header file in xcode.

I'll name it `SharedUserDefaults.h`

```
#ifndef SharedUserDefaults_h
#define SharedUserDefaults_h
#endif

#import <Foundation/Foundation.h>

#if __has_include(<React/RCTAssert.h>)
#import <React/RCTBridgeModule.h>
#else
#import "RCTBridgeModule.h"
#endif

@interface SharedUserDefaults : NSObject <RCTBridgeModule>
@end
```

 

##### 2. Then, create the implementation file.

`SharedUserDefaults.m`

```
#import <Foundation/Foundation.h>
#import "SharedUserDefaults.h"

@implementation SharedUserDefaults

RCT_EXPORT_MODULE()

+ (BOOL)requiresMainQueueSetup
{
 return YES;
}

RCT_EXPORT_METHOD(set:(NSString *)suiteName
 key:(NSString *)keyName
 value:(NSString *)value)
{
 NSUserDefaults *shareExtensionDefaults = [[NSUserDefaults alloc] initWithSuiteName: suiteName];
 [shareExtensionDefaults setObject:value forKey:keyName];
 NSLog(@"val written %@", value);
}

RCT_EXPORT_METHOD(get:(NSString *)suiteName
 key:(NSString *)keyName
 resolver: (RCTPromiseResolveBlock)resolve
 rejecter:(RCTPromiseRejectBlock)reject)
{
 NSUserDefaults *shareExtensionDefaults = [[NSUserDefaults alloc] initWithSuiteName: suiteName];
 NSString *val = [shareExtensionDefaults stringForKey:keyName];
 if (val == nil) {
 NSError *error = [NSError errorWithDomain:@"org.reactjs.native.example.Bill" code:0 userInfo:@{ @"message": @"Empty" }];
 reject(@"error", @"error description", error);
 } else {
 resolve(val);
 }
}

@end
```

 

##### 3. Next, build and run your app.

And you can use the methods from the native module you've just written.

In your React Native project, you can now get and set key-value pair to UserDefaults via the native module.

```
import { NativeModules } from 'react-native';

const SharedUserDefaults = NativeModules.SharedUserDefaults;

// Usage

// Set
SharedUserDefaults.set("group.org.reactjs.native.example.YourProject", "yourKey", "some string to be stored");

// Get
let val = await SharedUserDefaults.get("group.org.reactjs.native.example.YourProject", "yourKey");
```

In iOS, the value can be retrieved in `ShareViewController.swift` or `AppDelegate.m`.

`Swift`

```
var userDefaults = UserDefaults(suiteName: "group.org.reactjs.native.example.YourProject")

// Get value stored earlier
let storedValue = userDefaults?.object(forKey: "yourKey") as? String

 // Set new value
userDefaults?.set("some string to be stored", forKey: "yourKey")
```

`Obj-C`

```
 NSUserDefaults *userDefaults = [[NSUserDefaults alloc] initWithSuiteName: @"group.org.reactjs.native.example.YourProject"];

 // Get value stored earlier
 NSString *val = [userDefaults stringForKey:@"yourKey"];

 // Set new value
 [userDefaults setObject:@"some string to be stored" forKey:@"yourKey"];
```

 

#### End

You are now all set!

Now you can set value from React Native and retrieve it in your `ShareViewController.swift`.

That's it! Hope it helps.

Cheers.

iOS Shared UserDefaults for App Extensions With RCTBridgeModule


Today, I revisited the react-native project that was developed and published by me earlier and the first thing I did was to run tests because I intended to add more Typescript support to the project, wanted to know the current state of test suites of the project.

It wasn't the best FIRST task as a start, but in my opinion, adding more Typescript will be benefiting over the long run.

I've identified removing unused imports to be the low hanging fruit to fix the `tsc` errors.

I started with [https://www.npmjs.com/package/eslint-plugin-unused-imports](https://www.npmjs.com/package/eslint-plugin-unused-imports) but turned out it also removes custom Types import that was used in my files.

Then I found out that VS Code can achieve that with organize import feature.

```
"editor.formatOnSave": true,
"[typescript]": {
    "editor.codeActionsOnSave": {
        "source.organizeImports": true
    }
}
```

That works also with `Shift` + `Option` + `o` shortcut. However, that will also reorder the imports alphabetically.
It seems like there is no way to only remove unused imports without reorder them with `organizeImports`, that being one issue.
The second issue is that I need to also press the shortcut keys for every files. Which is very repetitive work, because there are 1105 files in my `/src` directory.

```
$ find src -type f | wc -l
  1105
```

The second issue was resolved with a VS Code extension to run `organizeImports` in a folder.

[https://marketplace.visualstudio.com/items?itemName=bierner.folder-source-actions](https://marketplace.visualstudio.com/items?itemName=bierner.folder-source-actions)

Then to reorder the imports to my desired orders, I found this great article [https://dev.to/otamnitram/sorting-your-imports-correctly-in-react-213m](https://dev.to/otamnitram/sorting-your-imports-correctly-in-react-213m) that does that.

This is my config

```
"import/order": [
  "error",
  {
    "groups": [ "builtin", "external", "internal", ["parent", "sibling"] ],
    "pathGroups": [
      {
        "pattern": "react+(|-*)",
        "group": "external",
        "position": "before"
      },
      {
        "pattern": "@**+(/**)",
        "group": "internal",
        "position": "before"
      }
    ],
    "pathGroupsExcludedImportTypes": ["react"],
    "newlines-between": "always",
    "alphabetize": {
      "order": "asc",
      "caseInsensitive": true
    }
  }
],
```

Just a TIL from me. That's it! Hope it helps.

Cheers.


Remove unused and reorder imports

While the latest released version for `react-native` is `0.67.2`, I upgraded the project that I am working on to `0.66.4` instead.

This is mainly due to some issues that I ran into that I decided not to spend too much time fixing it since `0.66.4` is sufficient for my use case.

In this blog, I will be sharing some of the issues that I ran into and the solutions for them. Hopefully someone might find it useful, and I can also refer to this blog in the near future if I need to upgrade other projects.

 

#### The issues

1. folly

```

duplicate symbol 'folly::detail::str_to_bool(folly::Range<char const*>*)' in:
...
...
```

In my case, I need to do

```
pod update
pod install
```

Normally you need to run `pod update` after update `react-native` version

or in some cases

```
rm -rf Podfile.lock Pods/
pod install
```

if you thing you have messed up the `Pods` after upgrading to different `react-native` versions back and forth.

2. `#<WeakSet> could not be cloned`

Then you might get this issue for any library.

```
error node_modules/react-native-vector-icons/lib/create-icon-set.js: #<WeakSet> could not be cloned.

error: node_modules/react-native-branch/src/branchUniversalObject.js: function (path) {
 return fn.call(state, path, state);
 } could not be cloned.
 BUNDLE ./index.js
 ```

This has to do with `babel`, so you need to upgrade them as well.

```
yarn upgrade --dev @babel/core
yarn upgrade --dev @babel/runtime
```

3. Android project could not resolve dependencies

Error:

```

FAILURE: Build failed with an exception.

* What went wrong:
Could not determine the dependencies of task ':app:lintVitalBetaRelease'.
> Could not resolve all artifacts for configuration ':app:betaDebugRuntimeClasspath'.
 > Could not resolve me.relex:photodraweeview:1.1.3.
 Required by:
 project :app > project :react-native-photo-view-ex
 > Skipped due to earlier error
 > Could not resolve org.webrtc:google-webrtc:1.0.+.
 Required by:
 project :app > project :react-native-twilio-video-webrtc
 > Skipped due to earlier error
 > Could not resolve com.yqritc:android-scalablevideoview:1.0.4.
 Required by:
 project :app > project :react-native-video
 > Skipped due to earlier error
 > Could not resolve com.getkeepsafe.relinker:relinker:1.3.1.
 Required by:
 project :app > project :react-native-twilio-video-webrtc > com.twilio:video-android:5.10.0
 > Skipped due to earlier error
```

Another error:
```
Could not determine the dependencies of task ':app:lintVitalRelease'.
> Could not resolve all artifacts for configuration ':app:debugRuntimeClasspath'.
 > Could not find com.yqritc:android-scalablevideoview:1.0.4.
 Searched in the following locations:
 - https://repo.maven.apache.org/maven2/com/yqritc/android-scalablevideoview/1.0.4/android-scalablevideoview-1.0.4.pom

```

This is due to removal of the line `jcenter()` in `android/build.gradle`. Moving forward, JCenter will not be maintained.

So it is recommended to remove the depencencies to the repository.

[Read more about the announcement here.](https://reactnative.dev/blog/2021/08/17/version-065#notable-dependency-version-updates-and-gotchas)

At the meantime, we have libraries that depends on JCenter and it's going to take time for maintainers to update the libraries.

So we can do this for now for the dependencies we need.

```
 jcenter() {
 content {
 includeModule("me.relex", "photodraweeview") // Could not resolve me.relex:photodraweeview:1.1.3.
 includeModule("org.webrtc", "google-webrtc") // Could not resolve org.webrtc:google-webrtc:1.0.+.
 includeModule("com.yqritc", "android-scalablevideoview") // Could not resolve com.yqritc:android-scalablevideoview:1.0.4.
 includeModule("com.getkeepsafe.relinker", "relinker") // Could not resolve com.getkeepsafe.relinker:relinker:1.3.1.
 }
 }
```

So now you get the idea of using `includeModule`.

That's all for the issues.

Hope that saves your precious time!

Cheers.

Another react-native project upgrade

I upgraded react-native for an app I'm working on to `0.70.6`.

New architecture was being introduced however I am turning that off for now until I figured out the benefits of it.

With that said, it is still exciting to build mobile apps with React Native, and even so with the new architecture.

Most of the issues that I am facing when upgrading the app were able to be fixed with just simply upgrading the corresponding packages/dependencies to the latest version.

While some other have alternatives like using temporary packages to fix the error. For example, using `deprecated-react-native-prop-types` to replace legacy code `ViewPropTypes` and `Text.PropTypes` in the project.

 

For android, a lot of issues thrown out when building the app (as usual), but are able to be solved after spending some time. For example, in the following error, use `allowInsecureProtocol = true` for one of the repository (though it will be better to inspect the usage of this package in the near future, and revisit this workaround).

```
* What went wrong:
Could not determine the dependencies of task ':app:lintVitalReportBetaRelease'.
> Could not resolve all dependencies for configuration ':app:betaReleaseRuntimeClasspath'.
 > Using insecure protocols with repositories, without explicit opt-in, is unsupported. Switch Maven repository 'maven6(http://dl.bintray.com/lukaville/maven)' to redirect to a secure protocol (like HTTPS) or allow insecure protocols. See https://docs.gradle.org/7.5.1/dsl/org.gradle.api.artifacts.repositories.UrlArtifactRepository.html#org.gradle.api.artifacts.repositories.UrlArtifactRepository:allowInsecureProtocol for more details.

```

 

Solutions for other issues are not available, therefore I change the code in the packages and use `patch-package` for that. Not that I am satisfied with it, but it is the way to go for now.

That's all. Cheers.

Upgrading a 16 months old react-native project

April 27, 2020

Reduce your react-native android app size

July 19, 2020

Access to android files in cache directory

July 26, 2020

LayoutAnimation in a nutshell

January 14, 2021

React Native Listen to Port Other Than 8081

January 17, 2022

iOS Shared UserDefaults for App Extensions With RCTBridgeModule

January 20, 2022

Remove unused and reorder imports

January 21, 2022

Another react-native project upgrade

February 08, 2022

react-native project upgrade

March 24, 2023