Forem: Masimo Orbanic

9 tricks to make your React Native development easier

Masimo Orbanic — Mon, 28 Feb 2022 08:58:36 +0000

We all agree that React Native is a great way to develop mobile apps. But in the process of making a mobile app, besides the endless hours spent reading the documentation and debugging some badly implemented package, you come across a situation that makes you think “hmm, I wonder if there is an easier way to do this”. So I bring you some tricks that I’ve learned over the years developing React Native apps and wish that somebody told them to me years ago. Hope you find something useful for yourself, let’s start!

1. Open a new terminal in the same folder - from the terminal (Mac only)

UPDATE

You can open new terminal in the same folder with a setting in the preferences. Go to the Terminal preferences, General settings, and under New windows open with select Same Working Directory.

Your work day probably starts with opening a Terminal, navigating to the project folder and running yarn android or/and yarn start . But after some time you need to install some React Native package or run some tricky git command, and wish to have another Terminal window in the same folder. So you press cmd + N to open new Terminal window and navigate in the terminal to the project folder. To make this thing easier you can run open -a Terminal \$(pwd) in the terminal, which basically opens the Terminal app in the desired folder, which in our case can be obtained with the pwd command. But that command is too long to write and remember, so you can add it in your .zshrc file as alias alias nt="open -a Terminal \$(pwd)" . After you restart the Terminal app, if you run nt command (I’ve named the alias nt for new terminal, you can call it whatever you want), you will get a new Terminal window in the same directory from which you ran the nt command.

2. Simulate push notifications on iOS

Let’s say that you are doing some push notification suff and you want to quickly test how your app reacts when a push notification is received. Instead of manually triggering a push notification by doing some in-app action or sending one from a dashboard, you can create a notification.apns file and drag ‘n drop it in the Simulator window! And what exactly is in the notification.apns file? Well, it looks like this:

{
 "Simulator Target Bundle": "com.example.simpush",
 "aps": {
   "alert": {
     "title": "New notification!",
     "subtitle": "notification.apns triggered notification",
     "body": "Hello there!"
   },
   "sound": "default"
 },
 "custom": {
   "test": "something",
 }
}

The first information is "Simulator Target Bundle": "com.example.simpush", and it tells which application to run, in our case it is the application with bundle id com.example.simpush . Next comes the "aps" section, and as you can see it has an alert section where you define the title, subtitle and body of the notification. Also in the “aps” section you can define the sound and vibration settings. In the “custom” you can define custom information that is sent with the push notification.

Depending on your app push notification setup, the notification.apns file can be different. But once you’ve configured in Xcode that your app can receive push notifications, and you granted permission to receive push notifications, you should be able to make it work.

3. Share Android device screen on your desktop

You will probably need to share your phone’s screen to your desktop. Either you don’t want to stay leaned above your phone all day, or you have something to present to your client/colleague over a video conference. There are some solutions like Vysor or Screen stream over HTTP, but the picture quality is not that great and there could be some ads playing during usage. But there is an app called scrcpy , that provides display and control of Android devices connected with USB (or over TCP/IP, covered in tip number 8). It does not require any root access, and it works on Linux, Windows and macOS. I’ve been using it for some time and it works great. Also the setup is very easy. You can learn how to install it and use here.

4. Generate app icons

When you have an app that is ready to go the stores, you must have an app icon. And you have one because your design team did a great job on creating one! But you must have them in a couple of specific dimensions, with square and rounded corners, for both iOS and Android. To spare yourself and designers from this time consuming and boring task, there are some web applications that can do that for you, and the best one we have been using in Lloyds digital so far is appiconmaker.co for iOS, and for Android AndroidAssetStudio. They is free and easy to use, no watermarks or limitations.

5. Open Xcode project from the Terminal

The longest way to open an Xcode project of your app is to open Finder > find your React Native project folder > open ios folder > open .xcworkspace file. The shortest way is to put "xc": "xed -b ios" in your projects package.json under “scripts”, and just run yarn xc from project folder to open Xcode project of your React Native app. You can find out more about xed in this Medium post.

6. Use transform.tools

Transforming code or data from one format to other can be time consuming and boring, and you could miss some piece of information if the structure is too confusing and big. To help you with that, there is an online app transform.tools which offers many kinds of transformations. I will mention just some of them, mostly used in React Native:

SVG to React Native (JSX)
JSON to JSDoc
JSON to Typescript
JSON to MobX-State-Tree Model
GraphQL to Typescript

Visit transform.tools and make transformations of your code or data with ease.

7. Consider implementing Code Push for faster feedback loop from developer to the testers and clients

As the project timeline comes to an end, communication and feedback loop between testers/client and developer must be the fastest possible. You will probably come to a situation where you made a test release of the app with some small bug that breaks the app and the testing can not continue. And the fix for the bug is very simple, one or two lines of JS code. In order to deliver that fixed version you need to increase build numbers, create a new release, and upload it to the TestFlight or Google Play store testing track, which we all can agree is at least 1 hour of work. To make the feedback loop shorter you can use Code push. Code Push is a cloud service from Microsoft Visual Studio App Center, that acts as a central repository where developers can publish certain updates. These updates are then queried by apps using the client Code Push SDK. Since Code Push is in semi-violation of the Google and Apple store guidelines, I won’t encourage you to implement it in the production version of the app, but for test and development purpose you can find it very helpful. I’ve covered Code Push in the Implementing Code Push in React Native applications article. In the article you can find more information on what Code Push is and how to implement it.

8. ADB over WiFi

Your computer communicates with your Android device using Android Debug Bridge (adb). Maybe you remember adb from the running on device tutorial, and in the tutorial you are guided to use USB to make everything work. But there is an option to have adb over WiFi! Here is how to setup adb over WiFi:

Make sure that your Android device and adb host computer are connected to a common Wi-Fi network accessible to both
Connect the device to the host computer with a USB cable
Set the target device to listen for a TCP/IP connection on port 5555 by running adb tcpip 5555 in your Terminal
Disconnect the USB cable from your device
Find the IP address of your Android device. You can usually find the IP address at Settings > About phone > Status > IP address
Connect to the device by its IP address using adb connect <<device_ip_address>>:5555
Confirm that your host computer is connected to the target device by running adb devices

From that point you can do everything on your Android device as if you were connected with USB, like run adb reverse tcp:8081 tcp:8081 , or use scrcpy from the #3 tip in this article!

Android devices running Android 11+ have a method to wirelessly use adb using Wireless debugging feature. You can find out goodies about adb here.

9. r - Terminal command (Mac)

This is a trick that can be widely used. Basically when you run r in your Terminal, the last command that you executed will be executed again, just like it would if you pressed up key and hit enter. But the trick is that it has options for start and end command that will be ran from your history.

The first option, -4 from the screenshot, is the start, and it runs the fourth command from your terminal history, and the second option -2 is the end and it runs every command between fourth and second one in your terminal history. You can find it useful if you have same the set of commands that you need to run multiple times, like running some test script, or for example pushing a fix to git.
If you once ran git add -Av , git commit -m "small fix" and git push , you can re-run all of them by running r -3 -1 in your Terminal.

Lloyds is available for partnerships and open for new projects. If you want to know more about us, click here.
Also, don’t forget to follow us on Instagram and Facebook!

Stripe in-app payments in React Native

Masimo Orbanic — Tue, 08 Dec 2020 11:05:29 +0000

Stripe is currently one of the best payment services that you can use in your web and mobile applications. It offers many features like subscriptions, the option to collect payments from customers and pay them out to sellers or service providers, invoicing, and many other good things. It is also very developer-friendly, it has support for popular programming languages, Webhooks for all types of events and the developer documentation is well written.

🚨 Important 🚨

Since May 2021 Stripe has an official package to support React Native platform called stripe-react-native . It's recommended to use the official package for long term support and stability.

Stripe does not have an official package for React Native, but the community has some libraries to offer. One of them is tipsi-stripe. The stable release of tipsi-stripe is not currently supported (December 2020) because the last stable release is from August 2019, and since then the EU Strong Customer Authentication (SCA) came into power. It requires a major update of the package because the native part of the package has been updated. The version of tipsi-stripe that supports SCA 8.0.0-beta.11 is still being developed.

Another package is react-native-stripe-payments, it has a stable release that supports SCA, but accepts only payments with credit cards. Other methods are not supported. We in Lloyds are using react-native-stripe-payments and so far it is working well.

What do you need in order to implement Stripe?

The first thing you will need is, of course, a Stripe account. After you create one, you are free to jump into testing mode by turning on the test mode ("View test data" switch in the sidebar). To switch Stripe to production environment, you must enter a bunch of company data and bank account information to receive payments. Also, you must be sure that Stripe is available in the country where the company is registered.

In order to have Stripe in your React Native app, you must have a backend where the majority of the checkout process is defined. The official Stripe package is available for Node, Ruby, Python, PHP, .NET, Java and Go. In Lloyds we are using Laravel, a PHP framework.

How it works?

Everything is revolving around Payment intents. Payment intents track a payment, from initial creation through the entire checkout process, and triggers additional authentication steps when required. In order for react-native-stripe-payments to work, you must have client_secret which is retrieved from the backend where the payment intent is created.

The flow is:

user presses the BUY button,
a request containing items to buy is sent to the backend,
payment intent is created on the backend and client_secret is returned in the response,
user is prompted to enter credit card details,
payment is confirmed on the client-side using client_secret and credit card details,
payment confirmation is recorded in the backend using Stripe Webhooks

Since the items to buy and client_secret are the only two thing shared between client and server, this process is very secure, there is very little room for the corruption of the payment process.

Backend

Backend is used to create Payment intent and to store information about the transactions that occurred.

First, we add the Stripe package to our framework so our backend can communicate with Stripe.

In total, the basic implementation of Stripe requires two API endpoints to be created:

to create payment intent and return client_secret to client
Webhook URL to receive information from Stripe about a successful payment

The endpoint to create payment intent is used to create payment intent and to bind created payment intent to order in the database. The order in the database must have stored information about payment intent because the payment is not confirmed yet, the confirmation of the payment is done through the Webhook endpoint. The response must contain client_secret, which can be found in the created Payment intent object.

The request from Stripe to our backend (Webhook) contains data about the payment intent, so we can find an order which is bound to payment intent in the database and mark that order as completed. Webhook can be configured on Stripe dashboard. The event that you want to trigger is payment_intent.succeeded. That is just the basic setup, but with Stripe Webhooks you can configure Webhook for many types of events, in other words, notify your backend about the change that occurred.

React Native

As mentioned earlier, we will use the react-native-stripe-payments package. Installation of the package does not require any linking process, everything is handled with autolinking.

The package is very simple and does not require a lot of configuration. The first thing we must do is to call setOptions method and pass the Stripe publishing key:

import stripe from 'react-native-stripe-payments';

stripe.setOptions({ publishingKey: 'STRIPE_PUBLISHING_KEY' });

Next thing, as we described in the "How it works" section, we'll send a request to your backend on route to create payment intent. In the request, you can pass the cart_id, or array of cart items that are being bought, as long as you can calculate the total price, you are good.
If the request was successful, the backend should return you the client_secret, and you can prompt the user to enter his credit card details. You can create your own design of the credit card input, or you can use react-native-credit-card-input or some other credit card input package. You can check if the credit card is valid using the stripes isCardValid method. For testing you can find the test credit cards here.

When you have client_secret and valid credit card, you can run the confirmPayment method:

stripe.confirmPayment('client_secret_from_backend', cardDetails)
  .then(result => {
    // payment was successful
  })
  .catch(err =>
    // error occurred
  )

If the payment was successful, Stripe will fire a Webhook request to the backend, and the backend will make a record that the transaction occurred and store data relevant to the transaction so the transaction can be back-traced if needed. You can also check the received payments on the Stripe dashboard and make sure that the transaction was successful.

Conclusion

The process of payment on the web and in mobile apps is evolving and is being made secure every day. It is on the developer to create flexible solutions and quickly respond to the changes that need to be made. Also, don't forget to check if you are viewing the test data or live data on the Stripe dashboard 🙂

Thank you for reading this! If you've found this interesting, consider leaving a ❤️, 🦄, and of course, share and comment your thoughts!

Lloyds is available for partnerships and open for new projects. If you want to know more about us, click here.

Also, don’t forget to follow us on Instagram and Facebook!

Implementing Code Push in React Native applications

Masimo Orbanic — Tue, 23 Jun 2020 06:23:54 +0000

Let me start by saying that this is an article for those who've never tried to implement Code Push or just want to find out more about it. I've heard about Code Push services many times before and it is one of the biggest features of Expo, but I've never tried to get one on react-native init app. I will talk about my motivation for implementing Code Push and the things that I found interesting and useful along the way.

Why is Code Push good?

I'm not a fan of production bugs. If a bug somehow manages to get into production (and it does), you are under pressure to fix it and to deploy a bugfix update across devices as soon as possible. The deployment part is a hassle, because you need to build iOS version, Android version, find and access developer accounts, make sure that version numbers are correct, wait for the app review from the stores, etc. and it is time-consuming.
To make deploying part easier, a service called Code Push comes to help. It is a cloud service from Microsoft Visual Studio App Center, that acts as a central repository where developers can publish certain updates. These updates are then queried by apps using the client Code Push SDK. In other words, you create a JavaScript bundle, which is published to the Code Push service, and you configure your client app to load JavaScript builds from Code Push repository of builds.

How to setup Code Push

Create an account

To start with Code Push you need to create an account on Visual Studio App Center.
Along with Code Push, Visual Studio App Center offers creation of app binary builds (apk, aab, ipa), crash and usage analytics, testing of app on real devices, and distribution management. You will see all these features on the App Center dashboard when you create an app in the App Center. Code Push is free for an unlimited number of builds and devices.

Create an app

When you add a new app in App Center, it is recommended to create a new app for each platform, one app for Android, one app for iOS. While creating a new app you will be asked for the name of your new app, release type, OS, and Platform. OS is Android or iOS, and Platform is React Native, and release type is for the label only, I have named mine Production. After you have created an app, in a sidebar, go to Distribute > Code Push, there you will have a list of all Code Push releases you have created.

Setup Client SDK

Before we create a release for Code Push, let's implement Code Push SDK to our React Native app. The package needed for Code Push in React Native apps is react-native-code-push. Before you start implementing Code Push SDK, check the corresponding Code Push version, depending on your React Native version. My version of react native is 0.62.2 so I will use
react-native-code-push@v6.2 .
After installing the NPM package, you need to install the native module, so follow the iOS setup and Android setup. For Android the process is similar to others, adding some lines to android/settings.gradle , android/app/build.gradle, MainApplication.java and strings.xml. In the MainApplication.java the most important change is

/// MainApplication.java
...
@Override
    protected String getJSBundleFile() {
        return CodePush.getJSBundleFile();
    }
...

These line tells that the JS bundle is not provided by a local JS bundle that is in the app binary, but from Code Push.
In strings.xml the most important thing is CodePushDeploymentKey. You can get it with Code Push CLI, but also you can find it in the App Center app dashboard, under Code Push section, click on the options icon which is next to deployment selection. This is the key that identifies the deployment, and with that key app knows from which deployment to look for updates. By default, there are two deployments, Staging and Production. This enables you to have testing, staging, production, and other versions of the app, so that you can send a Code Push update only to specific deployment of the app. The guide for Code Push has an entire section for managing multiple deployments. For trying-out purposes, my advice is that you don't define CodePushDeploymentKey inside strings.xml, but in android/app/build.gradle, under buildTypes section. By default there are two build types: debug {} , and release {}, and you can define the CodePushDeploymentKey as
resValue "string", "CodePushDeploymentKey", '"<< your CodePushDeploymentKey >>"' , for each build type. My buildTypes looks like this.


// android/app/build.gradle

buildTypes {
    debug {
        signingConfig signingConfigs.debug
        resValue "string", "CodePushDeploymentKey", '""'
    }
    release {
        signingConfig signingConfigs.debug
        minifyEnabled enableProguardInReleaseBuilds
        proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
        resValue "string", "CodePushDeploymentKey", '"<< CodePushDeploymentKey >>"'
    }
}

You can see that for debug I left CodePushDeploymentKey empty so that I don't get any interaction with Code Push in the debug/development mode. Also, if you have another build type, here you can add the deployment key for that build type. The good thing to know is that the deploymentKey can be defined by script, with codePush options .
For iOS part, you need to add some lines to AppDelegate.m, and change from where the app gets release JS bundle.
My sourceURLForBridge method looks like this.

// AppDelegate.m

(NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
    #if DEBUG
        return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
    #else
        return [CodePush bundleURL]; // this is important line
    #endif
}

The deployment key goes to info.plist. To make different build types target different deployments, under Build settings you need to add user-defined setting, called CODEPUSH_KEY. For debug, I've left it empty, and for release, I've added Production deployment key. With that, inside info.plist configure that CodePushDeploymentKey is looking at setting defined in Build settings.

// info.plist

...
<key>CodePushDeploymentKey</key>
<string>$(CODEPUSH_KEY)</string>
...

There is a part for HTTP exception domains configuration for iOS apps, and code signing setup for Android and iOS, but for trying out purposes I did not setup it, but it is definitely something to look up and setup.

Now we go to Javascript part of the setup. The first thing we do is that we wrap our App entry to Code Push higher order component (HOC), and add Code Push options

import codePush from "react-native-code-push";

let codePushOptions = { 
    checkFrequency: codePush.CheckFrequency.ON_APP_RESUME, 
    updateDialog: { appendReleaseDescription: true }
};

class MyApp extends Component {
        ..
        ..
}

export default codePush(codePushOptions)(MyApp);

You can check the list of codePushOptions here . The option updateDialog: { appendReleaseDescription: true } means that the user gets update dialog when an update is available.

And that is all the setup needed. There are many options and things to look after in every step of the setup so far, but this setup so far is good enough to get you started.

You can find a lot of valuable information on React Native Client SDK guide

Releasing of the Code Push updates

Releasing of updates is done only through Terminal, and to access App Center the from terminal you need to install App Center CLI . For more details on App Center CLI and how to set it up check the guide
To release an update of current code you run

appcenter codepush release-react -a <your username>/<your app name> -d <your deployment>

This will create a new React Native bundle, and upload it to Code Push.
Next time you launch the release version of the app, you will get a prompt that the update is available.

There is an App Center CLI option to pass a token as an argument, so you can publish new build without logging in to App Center. This is very helpful for DevOps when you want to automatically publish an update when you git push on the production branch.

Stores guide

Even though this is an "abstract" way to apply updates across devices, Android does not have a specific guideline for this, but Apple does (as usual). You can find more info in the Store guideline compliance

Example apps

I've created a simple TODO app with Code Push implemented, you can check it out here on github.com/BugBlaster5000/todocp. It's a simple app that has navigation, Redux for state management and Async storage.