
Today I learned how to resolve dependency version with `yarn`.

Imagine you have `react-native-permissions` in your `package.json`.

At the same time, you also have let's say `react-native-qrcode-scanner` with dependencies on `react-native-permissions`.

Now, an issue arose when both the `react-native-permissions` require different versions, with one of them introduces breaking changes.


This is the kind of scenario where we can use [selective dependency resolutions](https://classic.yarnpkg.com/lang/en/docs/selective-version-resolutions/).

Usage example, in `package.json`:

```
  "resolutions": {
    "react-native-permissions": "^3.8.4"
  }
```

This will then override the version of `react-native-permissions` in `react-native-qrcode-scanner` therefore resolve the issue.


Thanks for reading. Always keep learning!


Override version for package dependency


Today I learned (the hard way), that calling `DeviceEventEmitter.removeAllListeners()` will remove `BackHandler`'s `hardwareBackPress` event as well.

The recommended way of removing listeners are removing the specific event listener only.

For example:

```
  React.useEffect(() => {
    const subscription = DeviceEventEmitter.addListener(eventName, handler);

    return () => subscription.remove();
  }, []);
```

Thanks for reading. Happy coding!


About DeviceEventEmitter.removeAllListeners()


CSS has always been a skill that I am possessing a partial understanding, yet not fully proficient.

With some spare time, I shift my focus on building mobile app with React Native to polishing up my skills in web front end development.

While it's easy to get a web app up and running with `NextJS` and style it with `TailwindCSS`, I find myself focusing more on the development velocity and features more than the aesthetic aspect of it. That is okay for most of the time but it feels more satifying to be able to publish web app that is useful and at the same time good looking.

Therefore I took the 100 Days CSS Challenge to satify my craving for building beautiful UI.

Having focused on building mobile app with react-native makes me comfortable to be able to deliver good looking UI with a subset of CSS knowledge. Now, I wish to expand that boundary and mastering CSS skills.

At day 47, here are lessons I learned along the way:

#### 1. Animation and transition

Coming from react-native world, I did animation differently with `Animated`  api. In CSS, `animation` and `transition` are used heavily for visually engaging UI. At first, the usage of these two are often hard to distinguish.

Luckily it doesn't take long to differentiate the purpose and usage of the two.  `animation` offers fine grained control during the course of the effects while `transition` gives a simpler way to achieve changes in CSS properties. Both have their place and is it's easy to confuse when to use which.

#### 2. SVG, polygon, polyline and more

Animating shapes could be tricky sometimes. For example when adding a rounded border cap to a half circle is harder than I initially anticipated. SVG comes in handy when it offers a way to do it. The only tradeoff is dealing with coordinate system in drawing can be overwhelming.

#### 3. SCSS / SASS

Vanilla CSS is great, it is better with SCSS. A lot of classes can be styled dynamically with loops and mixins, therefore easier to develop and maintain.

#### 4. It takes creativity to solve UI challenges

Most of the time, when you are presented with an UI, it is easier to solve it with complicated approach. It takes practices to break down the problems and implement simpler solution.

#### 5. Others

Other related front end stuffs lke understanding what is PostCSS, Autoprefixer, bundling process, developer debug tool, 12 principles of animation and default behaviour of `TailwindCSS` also worth mentioning. Although I got sidetracked with finding out how stuffs works, but it feels great to finally knowing these tools that I am using frequently.

That's all for my lessons learned.

Thanks for reading. Happy coding!


Lessons learned from 100 Days CSS Challenge


Adding `redux-toolkit` to my code has reduced the amount of code that needs to be handwritten in my apps.

Not too long ago, I am building a web app for a mobile-first application that I am working on. I realized that I needed a more efficient way to manage my redux code.
Initially it started with `react-native-web` and it worked out okay that I could port my `react-native` code to my web app, written using `Next.js` and `react.js`.
Writing a web app with `react-native` components API was certainly not the end goal of the web app, but just a transition to get the momentum going.
Transitioning to using standard web HTML and React components requires some effort, but it turns out to be more productive in building web app, even more when I used `tailwindcss` to style the components.

Now, when it comes to the state management with redux, I have found a better way to structure the directories (compared to existing ones in my project), using `redux-toolkit`, and `"Redux ducks" pattern`.
Previously, what needs to be done in 3 files for an action and side effects (1 file for action types, another for reducers, and another for redux-saga side effects) can now be done in 1 file. That significantly reduced the amount of boilerplate code, and fewer mistakes when
writing those files.

Just be aware of the potential downside of using the ducks pattern, which is potential circular dependencies in the code, which may lead to undefined imports.
The solution highlighted in [this blog post](https://medium.com/visual-development/how-to-fix-nasty-circular-dependency-issues-once-and-for-all-in-javascript-typescript-a04c987cf0de) is elegant and makes sense.

In the future, I hope there is enough time to put the web and mobile apps codebase under a monorepo.

That's all. Cheers.


"Redux Ducks" pattern, redux-toolkit, redux-saga and circular dependencies

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.

react-native project upgrade

A couple of years after my first serverless hands-on with Firebase Cloud Functions, I've revisited it I am amazed by the fact that Express app will work out of the box in Cloud Functions.

This will be the perfect for my use case to serve API endpoints from existing project written in Express app.

I can now seamlesssly make transition to cloud functions, and that is exactly what I am looking for!

It's simple to get the existing Express app up and running with minimal changes of code, not to mention that it's also easy to get started and deploy with Cloud Functions.

<hr />
 

Only a few things to take note:

1. Development without hot reload.

 As I am developing with the firebase emulators, I noticed that file changes saved are not reflected without restarting the emulators. There might be an option in the CLI that can be enabled that I didn't know of.


2. Managing environment variables for staging and production are not what I am used to

 For sensitive information, I used `Google Secret Manager` to store the key-value pair secret. It is more secure than storing in `.env` in Cloud Functions, however I can't use the same environment variable name for different environment. For example, I now need to have `MY_SECRET` and `MY_SECRET_STAGING` for different environment. I am looking for other ways to do it in the future but I am now settled with it.

 It is suggested that I should create another cloud functions project to serve staging environment, but in my use case, I use another Express app instead, and it works well for my scenario.


 

I didn't spent a lot of time this time exploring how things should be done in Firebase Cloud Functions. However, I am happy that I don't have to spend more time to get my existing project up and running again.

Firebase Cloud Functions saved me from having to rewrite the app, and I am happy about it. Do check that out for your next projects.

Cheers.

Running Express app in Firebase Cloud Functions

I am looking for alternative solution after Heroku free dynos are no longer available.
Basically what I am trying to achieve is to host my API services and I stumbled upon serverless solution.
It is a very small application with only 3 endpoints to serve, and I am thinking to give serverless a try.

There are two options that are viable for me.

1. Cloudflare workers
2. Firebase functions (will write about this in future blog)

After experiment with Cloudflare workers. Here are my thoughts about it.

<hr />
 

#### Cloudflare workers

1. Very easy to get started

 With the `wrangler` tool and good documentations. I managed to get a worker up and running and publish it in no time.


2. Development experience is good

 Changes in files are reflected immediately without having to restart dev server.


3. Deployment is simple

 Hassle free and quick. Make changes and deploy and the endpoints are live.


4. APIs are fast

 Not to mention the API response are pretty fast, that's a bonus.


5. Managing environment variables for staging and production are easy

 Even come with encrypted options for sensitive data and can be configured from dashboard or CLI.


*However*

6. It is JS runtime, not node environment.

 For my case, it's not working for some of the existing API, due to dependency on external node package, `stripe`.
 However I managed to get it to work with `node_compat = true`, but other packages doesn't work well, like `firebase-admin`.
 I can get around that with Restful API provided by Firebase and Google, but I need to rewrite existing code that is working already from using SDK to using Restful APIs.


 

Despite I didn't go with Cloudflare workers, given that it's not the right tool in my use case, cause I need to run the existing project without rewriting it, but it is very promising product and I would definitely revisit it for my future projects.

That's it!

Cheers.

Cloudflare workers first impression

My blog were initially created with `Gastsby` and it has been easy to maintain and writing new blog posts from time to time.
Until recently where I am no longer able to publish new blog post unless I upgrade my project due to dependencies issues.
My choice was to migrate to `Next.js` because of my experience with other projects that I had set up, all using `Next.js`.
Below are some of the issues I faced and I decided to make a checklist out for it.

<hr />
 

#### Migration Checklist

1. Add `react`, `react-dom` and `next` packages

2. Add dev dependencies `autoprefixer` and `postcss`

3. Update scripts


```
 "dev": "next dev -p 8000",
 "build": "next build",
 "start": "next start",
```

4. Add `next.config.js` and `postcss.config.js`

5. Rename directory `/static` to `/public`

6. Move `/templates/*` to respective routes. Adapt to dynamic routes.

7. Remove `graphql` query in template files

8. Use `getStaticProps` to provide props previously provided by graphql.

9. Use `getStaticPaths` to generate predefined blog post routes.

10. Use `next/head` to replace `react-helmet` for header metadata.

11. Add `react-markdown`, `gray-matter` and `highlight.js` for markdown content.

12. For deployment, changes needed in `next.config.js`.

```
module.exports = {
 webpack: (config, { isServer }) => {
 config.module.rules.push(
 {
 test: /\.md$/,
 use: 'raw-loader'
 }
 )

 return config
 },
 typescript: {
 ignoreBuildErrors: true,
 },
 images: {
 unoptimized: true,
 },
 trailingSlash: true,
}
```

`trailingSlash` is important for `Next.js` to redirect path without ending `/`. Otherwise, the page will be redirected to `/404`

`unoptimized` is set to `true` because the blog will be exported, and exported build will not enjoy the benefit of optimized image out of the box.


13. For deployment to Github pages, add `.nojekyll` to the `/out` directory after build. So that Github pages will recognize `_next` directory and the content inside.

```
 "deploy": "next build && next export && touch out/.nojekyll && gh-pages -t -d out"
```

The `-t` flag is important to push the changes on `.nojekyll`.

 

That's it!

Cheers.

Migrated my blog from Gatsby to Next.js

Having toying around with RASA bot for a couple of days, I adopted the open source conversational AI framework into a workflow of one of my project.
The project requires a chatbot with interactive menu in the UI to get the automation done, and RASA bot is the perfect candidate for that.

 

#### Setup

The setting up of RASA project requires `python` envinronment and tooling.

This is what works for me.

```
 python3.8 -m pip install virtualenv
 mkdir rasa-bot
 cd rasa-bot
 python3.8 -m virtualenv venv
 source venv/bin/activate
 python3.8 -m pip install rasa
 rasa --version
 rasa init
```

 

#### Additional frequently used commands

1. I added `--enable-api` because my application mainly communicate via APIs.

```
 rasa run --enable-api
```

2. After making changes to the nlu.yml

`rasa train`

 

#### Chat in action

My application can start replying to conversations by sending the message to my RASA bot server.

`POST http://0.0.0.0:5005/webhooks/rest/webhook`

```
{
 "sender": "test_user",
 "message": "Hi"
}
```

---

Sample response

```
[
 {
 "recipient_id": "test_user",
 "text": "Hey! How are you?"
 }
]
```

That's a good start, since I can now reply to a conversation from the response from RASA bot.

We want now move on to train the bot for more specific use case by determining the intent of the message.

And we can do this by editing the file in `data/nlu.yml`.

For example, add

`- salam sejahtera`

to

`- intent: greet`

and run `rasa train` to update the model.


We can also define form depending on the business logic to handle more specific use case. Restaurant reservation/ordering for example.

 

That's all for today!

Cheers.

First try with RASA chatbot

Today I learned that I can send email with Zoho mail SMTP in my node.js application. Previously I am using SendGrid and decided to browse for alternative, and figured that Zoho mail SMTP is as simple as sending email with SendGrid.

 

#### Let's send that email!

1. Add `nodemailer` to your node application

```
yarn add nodemailer
```

2. Import and start sending email

```
const nodemailer = require('nodemailer');

const transporter = nodemailer.createTransport({
 host: "smtp.zoho.com",
 secure: true,
 port: 465,
 auth: {
 user: "your@zoho.mail",
 pass: process.env.ZOHO_APP_PASSWORD,
 },
});
```

```
const msg = {
 to: email,
 from: 'sender@email.address', // Change to your verified sender
 subject: 'Your receipt',
 text: 'Thank you for purchasing with us.',
 html: emailTemplate, // html string or ejs template
}

transporter.sendMail(msg, function(error, info) {
 // handler
});
```

For the password, it is recommended to use Zoho app password. It works with two-factor authentication enabled for your Zoho account, and is easier to manage in case it is compromised.

That's it!

Hope that helps.

Cheers.

Send email with nodemailer and Zoho mail SMTP

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


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

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

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

PM2 is a very handy tool to keep your node.js application online. Here's a list of commands that are essential for deployment.

#### Commands

1. `pm2 start --name=web yarn --start` or `pm2 start --name=web --interpreter=bash yarn -- start`

Start your application using `yarn start` with `pm2` and assign a name `web` to the application.
`--name` is useful for multiple applications in the same server. For example, backend server and web applications.

`--interpreter=bash` if your terminal should run with bash.

 

2. `pm2 delete web` or `pm2 delete all`

Remove the process that is running the `web` application, if you assign a name previously. Or otherwise, delete with process id is possible as well.

 

3. `pm2 list` or `pm2 status`

Show list of running processes managed by `pm2`.

 


4. `pm2 logs` or `pm2 logs web`

Retrieve logs of running processes.

 

5. `pm2 flush`

Remove currently logged output in log files.

 



#### Config file

If you have multiple applications to manage, it is recommended to use pm2 config file to manage the config of each application.

In parent directory:

Run `pm2 ecosystem`

to create a config file, Ecosystem File.

A `ecosystem.config.js` file will be generated.

Here's a sample config file I used for my side project.

```
module.exports = {
 apps: [
 {
 name: 'web',
 script: 'yarn',
 args: 'start',
 cwd: './myproject-web',
 interpreter: 'bash',
 instances: 1,
 env_production: {
 NODE_ENV: 'production',
 PORT: 3000,
 },
 },
 {
 name: 'api',
 script: 'yarn',
 args: 'start',
 cwd: './myproject-backend',
 interpreter: 'bash',
 instances: 1,
 env_production: {
 NODE_ENV: 'production',
 PORT: 5000,
 },
 }
 ],
};
```

That's all! Hope it helps.

Cheers.

PM2 commands for your node.js backend

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


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

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

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

Sometimes, your app needs more than just accessing the current location.

For example, you want to watch the location over time, whether to show it on the map or other features than make use of the location.

We can provide a current location for the simulator, however, we can't provide a lists of locations that showing the movement of the app over time with the default simulator settings.

Luckily for us, as developer, we are able to mock the locations of the app using `.gpx` file.

 

##### How it works

 

`.gpx` is a format to save GPS data. Basically it contains latitude, longitude and the timestamps at which the points are at.

A simple `.gpx` file looks like this.

```
<?xml version="1.0"?>
<gpx version="1.1" creator="gpxgenerator.com">
<wpt lat="3.109193" lon="101.461774">
 <ele>7.00</ele>
 <time>2018-01-04T08:08:05Z</time>
</wpt>
<wpt lat="3.109562" lon="101.461968">
 <ele>7.00</ele>
 <time>2018-01-04T08:08:20Z</time>
</wpt>
<wpt lat="3.109193" lon="101.461774">
 <ele>6.96</ele>
 <time>2018-01-04T08:08:35Z</time>
</wpt>
</gpx>
```

When you have that file, add it to your xcode, and you will be able to use the coordinates in your simulator with a toggle.

![demo](gpx-xcode.png)

So for my case, I am having 3 different paths I created for development and testing purpose. Each of them in its own `.gpx` file.

Select any one, and the simulator will pick up the location and changes over time.

 

##### End

Now you have different coordinates as time passes returned from the simulator to test.

GPS testing with .gpx file

Accessing user current location in the app is a common practice nowadays. Depending on the usage of the location data, a common use case is to present the data in a sorted by distance filter.

Say, a restaurant app, where you want to see the nearest restaurant first.

I have been fortunate to work on a complicated geolocation aware app, where I need to track the changes of the GPS location over time.

Think of it like a fitness app, or a more popular example will be the pokemon app.

 

#### The existing solution

While most app would be enough with a listener watching for the GPS location update, the one I am working on needs more.

Basically, it is a fitness app to track jogging pattern. It needs to work when the app is in background, and offline (for some of the time).

The current available location listener `watchPosition` seems to be great for the work, until it is not.

 

#### The problem

The app needs to work together with a geo-fencing ability to detect if a user is within an action zone, where it will trigger a log, and the network request (if network connection is good).

So the main challenge is to get it to work when the app is in background, and I want to be able to detect the event as soon as the user enters the zone.

 

#### Background geolocation to the rescue

In order to be able to achieve that, this package ([https://github.com/mauron85/react-native-background-geolocation](https://github.com/mauron85/react-native-background-geolocation)) has done incredible work the background location.

However it is not a silver bullet for all the problems out there, the app I wanted to build are meant for fitness and jogging, so there are a different configuration needed to be able to adapt to my use case.

 
<hr />
 


#### Key takeaway

Couple the package with other features, such as drawing the jogging path on a map, show the geo-fencing zone on the map is more reliable and complete thanks to a more frequent location updates, event in the background.

It is advisable to create a couple of `.gpx` files to mock the location, otherwise the development with geolocation would be miserably slower.

More about this part in the future. Now that you know how to get location updates even app is in the background, you will be able to build a better app!

Background geolocation

E-commerce is eating the retail world, and mobile app is playing an important role.

If you own an e-commerce website, you should consider having an app for your business,

because people tend to use mobile apps more ofthen than mobile web browser,

and if you are running your e-commerce site with Wordpress WooCommerce, there is a good news for you.

 

#### Backend ready with WooCommerce API

With WooCommerce API, you are good to go with the existing backend for your new mobile app.

I am not going into detail how to enable REST API for your WooCommerce site.

Let's just dive into developing the mobile app with it.

Here are the [API docs](http://woocommerce.github.io/woocommerce-rest-api-docs/) to start with.

 

##### Authentication

WooCommerce API provides `/customers` and `/token` endpoints for sign up and login purpose.

However, do take note that the base url is different for `/token` in this case.

To generate a token and hence login a user, you need to use `/wp-json/jwt-auth/v1/token`.

Whereas for the rest of the API, use `/wp-json/wc/v2/` as base url instead.

However, there are a pitfall in the authentication/customers module, which is reset a user password.

To reset a password, WooCommerce did not provide an endpoint for that,

but considering the amount of time saved for the rest of the available APIs, this is some what tolerable.

Not to mention there are ways around it.

 

##### Products

This endpoint is pretty much perfect for showing list of products for viewing, with pagination options and lots of other metadata like available stocks, prices etc.

You can also build product reviews screens with the `Product reviews` module. Pretty neat.

 

##### Shopping cart & Checking out

Perhaps the most important feature of all e-commerce apps.

WooCommerce doesn't provide cart module. This is left for developer to implement own cart and checkout system.

However, it is not hard to build one. I will cover this part in future blog topic.

 

##### Orders

Customers place orders and with this module, you are good to go to show the purchase history, order status and etc.

You can also view purchased item and their respective prices with a bit of twist.

 

##### Payment

Well this could be a bit tricky because in order to have good user experience, it is advisable to go with native implementation of payment gateway(because you are just one step away from making a sale!).

So you want to be extra careful here. Luckily for most payment gateway provider(that I've used so far), mobile support is available and somewhat considered good for certain provider.

 
<hr />
 


#### Key takeaway

Overall it is time saving to use WooCommerce API considering that most APIs are ready to be consumed for mobile app. Products, reviews, customers and orders modules are well taken care of.

Developer just need to integrate with payment gateway and implement a shopping cart & check-out module for a complete e-commerce app.

So with the time saved, it means more time for better UI/UX, or simply reduction in development cost.

WooCommerce powered mobile app

I published an app.

As a first version, it allows users(mostly me) to check for train schedule in the app.

It looks like this, as of current writing of this blog.

![app_screenshot](blog_screenshot.jpeg)

 

#### API - The initial approach

Well, it is a straight forward app, get the following from user selection:
- origin station
- destination station

Then compute the upcoming train and display the time.

Withtout much thought, I created a few APIs, plugged it to the app and start displaying data.

Everything was fine.

Until when I am setting up for production environment, I realized I couldn't utilize the free tier of Amazon Web Services anymore(expired soon).

I made a quick look up on AWS cost calculator, and roughly have idea what it means for setting up the production server(financially).

For an app I always wanted to build, for me and my friends' own convenience(I used to always missed the last train), it is going to be ongoing cost as long as it runs.

Since the app is not going to make enough revenue to cover it's own cost of running, I needed an alternative.

 
<hr />
 

#### Enter offline app

I paused the development and thought about the alternatives for a bit.

It became obvious to me that the app just need access to the database of timetables, routes, and stations in order to work.

And if I can have all those data in the device, I don't need API for that.

So the idea is to use a database in the app, serve the data from it, and let it work offline.

And this approach does provide a few benefits.

- Zero cost for maintaining server
- No backend work required (API, database, devops)
- I can use the app offline

 
<hr />
 

#### Realm database in action

Why realm db?

Well it's mainly because of the support for react-native app out of the box.

It is well documented, offline-first(as promoted), full-fledged mobile database and is performant, have open source version, and the list goes on.

Why not redux-persist?

We are talking about 3000+ objects to be stored and accessed, and I think it is not a good idea to use redux-persist in this case (after browsing through their Github issues and quick research for the suitable tools).

Turns out to be a good choice for the work.

With a major roadblock before publishing the app, but is solved.

 

##### Database initializing time

So it took about 24 seconds to initialize a realm db to load all the schema and their respective seed data I needed for the app.

I have a splash screen shown while initializing it, but it's just too long to wait.


So in a hurry to publish the app as soon as possible (as I did it during a weekend, and weekday will be busy for other works), this is something that will potentially stop the desire to publish the app before the weekday comes.

It is as if there is only me is having the issue and after revising the documentation over and over again, there is an alternative.

What we can do in this case is, we can let Realm to read from existing database and use it.

Perfect!

So I have a copy of the initialized database(basically a `.realm` file), direct it to Realm when opening database and that's it!

We don't have to seed the data everytime the app launches! The data is ready to be used.

 

Now the app started working offline, and it is just the beginning of offline-first app journey.

Going offline with Realm database

So you need a payment gateway for your react-native app, and for any reason, your only best choice is [iPay88](https://www.ipay88.com/).

 

#### The good news

You don't have to write your own sdk wrapper library.

There is already an open source library for you.

If you are looking to integrate iPay88 into your react-native app, take a look at [this library](https://github.com/myussufz/react-native-ipay88-sdk).

I must say it is an awesome work from the developer.

 
<hr />
 

#### The bad news

You got to be extremely **patience**.

Chances are, you are going to spent a lot of time to get your issue (not your ticket) resolved.

So be earlier in your integration, do it as soon as possible!

 
<hr />
 

#### The undocumented part

To provide a bit of context to my experience, here is what I am trying to do:

- integrate iPay88 and enable Alipay

If you are trying to enable credit card or online banking, you might have better experience integrating it.

 

##### PaymentId

So in order to enable selected/subscribed payment method, we need to provide `paymentId` for respective payment method, and in my case, for Alipay.

Alipay is supported by the platform(that's why it is chosen), but there is no documentation on the `paymentId` that need to be used, and you get `Invalid parameters(Payment Not Allow)` error.

A ticket was submitted, and got a response the next working day with a link in it to integrate by using "standard integration API doc".

Then you get the same documentation and it don't have the `paymentId` for Alipay.

The cycle repeats.

Another ticket was submitted, with greater precision on the issue(to avoid getting another reply with a link).

This time is different, I was asked to provide the merchant code, and redirect to contact with account manager.

After few more rounds, finally you got what you want. The `paymentId` for Alipay payment method.

However, it still didn't work.

What now?

`Invalid parameters(Payment Not Allow)`

 

##### Currency

So the above cycle, repeats again.

It was due to unsupported currency that caused it, but you only can know after a lot of emails, and many days later.

So be sure to ask about the supported currency if you are integrating Alipay with iPay88.

 
<hr />
 

#### Key takeaway

1. When in doubt, or facing issue, **directly contact account manager**.
2. Integrating iPay88 in react-native app **takes relatively longer time** than other payment gateways, like Stripe or Braintree.
There is no sandbox account or test account and mostly require time checking with account manager and communicating to and fro.
3. Use the right **merchant code**, ask your account manager for confirmation. Generally, it is different from the web one.
4. Make sure to handle the **BackendPostURL** in your backend.

 

If you are curious on the solutions, here you go.

You need to pass in `paymentId: 118` and `currency: 'CNY'` if you are using Alipay.

iPay88 is great to be used for web integration. However, when it comes to mobile, there needs to be improvements.

iPay88 integration with react native


There are time when you have multiple AWS access keys and secrets.

Each key are able to access the AWS resources/services, depending on the given permissions.

Ideally those keys only have access to the resources that are needed, nothing more.

However, it might still happen that you are accessing the same services, but for different accounts.

Let say pushing files to S3 bucket, but instead of pushing to your work/company AWS account, you want to push it to your personal one.

So you want to make sure you are passing in the right configurations for the command.

#### AWS Profile

What you are looking for is AWS *profile* management. (I made that up, but you get the idea.)

You can have a quick look at your current profiles using this command.

```
$ cat ~/.aws/config
```

Well, to save you some typings, here's mine.

```
[default]
region = ap-southeast-1
output = text

[profile docker-repository]
region = us-west-2

[profile eb-cli]
aws_access_key_id =
aws_secret_access_key =


[profile chinloong]
aws_access_key_id =
aws_secret_access_key =
region = ap-southeast-1
```

You guessed it right. **default** configurations will be used if no profile is spcified explicitly.

New profile can be created by following the pattern you can derived from the file.

`[profile staging]`


and passed it as an argument in the command as

`--profile staging`

For example:

I am trying to deploy files to S3 bucket to use it in static web hosting.

```
s3-deploy './public/**' --cwd './public/' --profile chinloong --bucket your-bucket-name --deleteRemoved --gzip
```

Bad news is, it won't work.

You will probably get:

```
(node:82129) UnhandledPromiseRejectionWarning: Upload error: CredentialsError: Missing credentials in config (CredentialsError: Missing credentials in config
```

#### The missing part

```
$ cat ~/.aws/credentials
```

Make sure these two configs are there.

```
aws_access_key_id =
aws_secret_access_key =
```

Did I mentioned about the profile name?

Before I forgot, you can specify the profile name those configs are for.
But watchout for the missing **profile** word.


The full block looks like this. (Instead of `[profile staging]`)

```
[staging]
aws_access_key_id =
aws_secret_access_key =
```

You are now good to go!


#### Explanation

So we have

```
~/.aws/config
```

and

```
~/.aws/credentials
```

In short, use

`~/.aws/credentials` for sensitive config like your access key and secret.


`~/.aws/config` for less sensitive config like `region=us-west-2` or `max_concurrent_requests=10`


Hope that clears up things a bit for you! 😀

You can also set the profile as environment variable.

```AWS_PROFILE=staging s3-deploy ...```


Full explanation?

Read it here. [https://docs.aws.amazon.com/cli/latest/userguide/cli-config-files.html](https://docs.aws.amazon.com/cli/latest/userguide/cli-config-files.html)

and here [https://docs.aws.amazon.com/cli/latest/topic/config-vars.html](https://docs.aws.amazon.com/cli/latest/topic/config-vars.html)


aws/config vs aws/credentials

This will be applicable for services with the rate that looks like this:

$X per `provisioned IOPS-month`

For example, it could be `RDS` (Relational Database SErvice), or `EBS` (Elastic Block Store).

![rate](rate.png)

The rate shown above is the rate for RDS of instance type `Provisioned IOPS SSD (io1) Volumes`.

If you have created the instance (or could be created by another service), but not sure what that means to your bill.
Chances are you might not need it, or otherwise, be prepared for a higher bill amount.

How the bill are calculated for provisioned IOPS-month type of instance:

$0.11 * 1000 IOPS * number of hours

= $110 for 1 month

= $3.67 for 1 day

That's for 1000 IOPS for an instance.

---

Also, please take note that:
1. Provisioned IOPS SSD (io1) volumes are **not included** in the AWS Free Tier
2. They are not charged by usage of I/O, but the **amount of IOPS enabled/provisioned**.

So if you enable an instance of 8000 IOPS of io1, but only used a bit of it, you will still be charged for

$0.11 * 8000 * number of hours


 
Plus, there will be a charge for the storage rate. Refer to the image attached above.

`$0.138 per GB-month`

 

So, if you are not sure, probably a General Purpose SSD (gp2) volume is your right choice.

Refer to the [EBS pricing](https://aws.amazon.com/ebs/pricing/) for another example. (the IOPS-month rate is applicable for RDS as well)

Billing for AWS Provisioned IOPS (io1)


    import { processColor } from 'react-native';

This is not the typical API you will use when working with React Native.

When working with iOS libraries, chances are you will need to use `UIColor`, and that's when you can use `processColor`.

I am researching for drawing board application written in React Native, and came across this package.

[https://github.com/terrylinla/react-native-sketch-canvas](https://github.com/terrylinla/react-native-sketch-canvas)


Out of curiosity on how it was done, I started digging into the implementation.

So we can pass `processColor('#00FFFF')` in the argument and it is ready to be accepted as `(UIColor*) colorVar` in `RCT_EXPORT_METHOD`.


Refer [processColor](https://github.com/terrylinla/react-native-sketch-canvas/blob/master/src/SketchCanvas.js#L94) usage in React Native.

and corresponding [native method](https://github.com/terrylinla/react-native-sketch-canvas/blob/master/ios/RNSketchCanvas/RNSketchCanvas/RNSketchCanvasManager.m#L53) in iOS.

It is glad to know that such API exist, it will definitely come in handy when bridging native code.

Sure it has different usage worth exploring.

---

For those who are curious. Check out the implementation of `processColor` over [here](https://github.com/facebook/react-native/blob/master/Libraries/StyleSheet/processColor.js).


processColor API

In today's topic, we will cover the details you need to know to make the decision.

Whether to use

 create-react-native-app MyAwesomeApp

or

 exp init HelloExpo

or

 react-native init VanillaRN


`create-react-native-app` (CRNA) was [introduced to the community](https://facebook.github.io/react-native/blog/2017/03/13/introducing-create-react-native-app.html) on March 13, 2017.
With the intention to make developers life easier without have to deal with native dependencies in Xcode or Android Studio.

Here is how you typically starts and run a new project with CNRA.

 create-react-native-app MyCRNA
 cd MyCRNA
 yarn start
 i

You get your iOS simulator running within minutes from project initialization and are ready to start coding right away.

While not having to open Xcode and run the project from there is nice, it's not the idea of using CRNA we are talking about here.

It's worth mentioning that we can run new project on iOS simulator/Android emulator because of these commands, which available to any ways of creating the project.

 react-native run-ios
 react-native run-android


What we need to appreciate that the beauty of creating project with CRNA is we are able to leverage on Expo's cool features(from Expo SDK, included during initialization).

Here's two of them that I am highlighting:

1. Access to Expo SDK API
2. Run project on real devices without hassle

 
<hr />
 

#### 1. Access to Expo SDK API

Notice the amount of work to add vector icon and MapView with Expo.

- Add icon

![Add icon code changes](addIconCodeChanges.png)


- Add MapView
![Add MapView code changes](addMapCodeChanges.png)


- Output
![Output](addMapOutput.png)


Without having to link native libraries, we are now able to use

`import { Ionicons } from '@expo/vector-icons';`

which is built on top of [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons)

and

`import { MapView } from 'expo';`

that built by [airbnb/react-native-maps](https://github.com/react-community/react-native-maps)

If you are not convinced that this will save a lot of your time, try go through the installation instructions for
[react-native-maps](https://github.com/react-community/react-native-maps/blob/master/docs/installation.md)
and
[react-native-vector-icons](https://github.com/oblador/react-native-vector-icons#installation).


 
 

#### 2. Run project on real devices without hassle

All you need to do is scan QR code from your console(provided after `yarn start`) using Expo client app and you are good to go.

No cable connection needed.

Plus, you can share the link to others to start testing the app, just need an Expo client installed.

 

As of the writing of this topic, I am running Expo client version 2.4.7 on my iOS device, and wen can't scan the QR code from the app anymore to open the project.

More about the changes [here](https://blog.expo.io/upcoming-limitations-to-ios-expo-client-8076d01aee1a).

Alternatively, you can send link to open the project via SMS or Email.

Or, you can still scan the QR code via your device's camera, and it will still prompt to open the project in Expo client.


 
<hr />
 

#### CRNA or exp
We have been talking a lot about Expo now, although it is a CRNA project.

Why use CRNA when it's using Expo under the hood?

Or should I use Expo instead?

A simple summary for the differences between CRNA and exp are:
- CRNA does not require an Expo account
- Expo project provides built binaries for app / play store distribution. (For CRNA app, we need to detach the app)
- Expo has some API that are not available on CRNA, like Push Notification.

Well if that doesn't give you enough of details for making a decision.

I would say go for Expo to access the Expo ecosystem and ways of distributing app.

Expo is excellent for development and testing(distribution with just sharing link/QR code).

Both CRNA and Expo are beginner friendly. You can start building apps with all the tools that is available to date, without knowing much about native development.

And when you are getting better in developing in React Native, try move to use vanilla React Native project with `react-native init`.
 
<hr />
 

#### react-native init

Expo/CRNA has it's limitation, and it is when you need to link native modules or write custom native code that are not supported by Expo.

So far using `react-native init` is my favourite.

It could be overwhelming at first dealing with native dependencies, Xcode and build binaries on your own.
But you are in control.

Eventually when you app is complicated enough or have some unique feature that are not in the list of supported libraries by Expo, you need to `detach`/`eject` your Expo app.

You have more works setting up app distribution with services like `TestFlight`(iOS) or `Fabric`(iOS, Android),
but it is getting easier with tools like `fastlane`

Also you can setup CI/CD for test automation and distribution when you have more control over your build process.

While it is not necessarily that it is required for all apps(especially prototypes or MVP) to have a CI/CD service, that could be the way to go forward beyond MVP phase.

 
<hr />
 

#### Conclusion

`react-native init` is my favourite tool, giving more controls over the build process and flexibility to add custom modules without going through detachment of app from Expo/CRNA.

That's just my personal preference.

Expo and CRNA are great and definitely fun to work with for experimenting features and libraries. And is going to keep improving with the effort of great team behind the project.

I will share about some of the features that require custom code that made me stick to `react-native init` when working on new project to stay flexible with the implementations.

Stay tuned.

CRNA, Expo or react-native init for your next project


Docker is helpful in a lot of ways.

Today, after dockerizing an application's services into different containers,
I ran into situation where I need to make changes to the code of one of the container that serves API.

Well, docker dev mode is not really a thing/command that available out of the box.
Though there are different ways to do it, I eventually did it with ``volumes``.


    volumes:
      - /Users/yourDir/yourAwesomeApp:/var/www/yourAwesomeApp

It is a concept of docker which let you ``mount`` a host to your container.

Any changes you made to your host machine will be reflected in the container, without the need to stop and compose the services again.

I will be sure to explore this topic deeper in the future.

Visit my blog again in the future if you want to know more about my exploration with docker :)



Docker development mode


Have you ever wanted to start your own blog?

I set this blog up with [Gatsby.js](https://www.gatsbyjs.org/).
If you are a developer and has always wanted to start writing on your blog, setting one up yourself with gatsby.js would be rewarding.
Though you have to spend significant amount of time to get your blog up and running and look attractive, it is fun to do, at least for one time.

While you can setup your own blog, there is an alternative to get started faster: write on existing blogging platform.

To name a few of them:
1. [Medium](https://medium.com/)
2. [Blogger](https://www.blogger.com)

Basically you just need to sign up on the platform and start writing.

Here are some of the advantages to get started with existing blogging platform right away.

1. Existing audience
2. Just focus on writing

While you can't leverage on existing audiences if you are hosting this your own, you have more control over your blog. You can customise the look and feel, add features that are necessary for your blog.

Your content will take care of getting to your audience themselves! (Well actually, not without some work).

However, hey! You have your own blog :)

Whichever way is suitable for you, the point is to get started.
Spread ideas by blogging.
So, let's just start writing today if blogging is what you always wanted to do!

Cheers.


Override version for package dependency

23 August 2023

About DeviceEventEmitter.removeAllListeners()

12 August 2023

Lessons learned from 100 Days CSS Challenge

27 July 2023

"Redux Ducks" pattern, redux-toolkit, redux-saga and circular dependencies

24 June 2023

react-native project upgrade

24 March 2023

Running Express app in Firebase Cloud Functions

16 December 2022

Cloudflare workers first impression

9 December 2022

Migrated my blog from Gatsby to Next.js

6 December 2022

First try with RASA chatbot

28 October 2022

Send email with nodemailer and Zoho mail SMTP

14 February 2022

Another react-native project upgrade

9 February 2022

Remove unused and reorder imports

21 January 2022

iOS Shared UserDefaults for App Extensions With RCTBridgeModule

20 January 2022

React Native Listen to Port Other Than 8081

17 January 2022

PM2 commands for your node.js backend

11 January 2022

LayoutAnimation in a nutshell

15 January 2021

Access to android files in cache directory

26 July 2020

Reduce your react-native android app size

19 July 2020

Upgrading a 16 months old react-native project

27 April 2020

GPS testing with .gpx file

21 December 2018

Background geolocation

18 December 2018

WooCommerce powered mobile app

6 November 2018

Going offline with Realm database

5 October 2018

iPay88 integration with react native

26 September 2018

aws/config vs aws/credentials

9 May 2018

Billing for AWS Provisioned IOPS (io1)

2 May 2018

processColor API

25 April 2018

CRNA, Expo or react-native init for your next project

17 April 2018

Docker development mode

12 April 2018

Starting a blog

8 April 2018