DEV Community: Áron Berezkin

How to Integrate Plaid SDK to React Native Using Expo Config Plugins

Áron Berezkin — Thu, 30 Dec 2021 16:38:15 +0000

Previously, if you wanted to integrate Plaid React Native SDK to Expo, you either had to forcefully eject to bare workflow or use a webview solution which could result in some funny unexpected issues such as this recaptcha pop up.

Well, in case you have stumbled upon my previous guide to Expo config plugins, you already know that customizing Expo managed workflow is more than possible and therefore, in this tutorial, we will look at a bit more advanced example how to integrate Plaid, a reliable service to connect financial accounts to our app.

SETUP

To get started you can use this Github repository as a starter or just follow these commands:

Initiate a new Expo project - here with typescript for better DX:

expo init expo-plaid-sdk-integration  -t expo-template-blank-typescript

Add the React Native Plaid SDK library:

yarn add react-native-plaid-link-sdk

Update App.tsx to:

import React from 'react'
import { StyleSheet, Text, View } from 'react-native'
import { PlaidLink, LinkSuccess, LinkExit } from 'react-native-plaid-link-sdk'

export default function App() {
  return (
    <View style={styles.container}>
      <PlaidLink
        tokenConfig={{ token: '#GENERATED_LINK_TOKEN#', noLoadingState: false }}
        onSuccess={(success: LinkSuccess) => console.log(success)}
        onExit={(exit: LinkExit) => console.log(exit)}
      >
        <Text>Add Account</Text>
      </PlaidLink>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  }
})

And include iOS bundleIdentifier and Android package name of your choice to app.json:

"expo": {
    ...otherProps,
    "ios": {
        "supportsTablet": true,
        "bundleIdentifier": "com.expo.plaid"
    },
    "android": {
        "adaptiveIcon": {
            "foregroundImage": "./assets/adaptive-icon.png",
            "backgroundColor": "#FFFFFF"
      },
      "package": "com.expo.plaid"
    }
}

If you now try running the application through Expo Go, you will likely see this error...

TypeError: null is not an object (evaluating '_reactNative.NativeModules.RNLinksdk.continueFromRedirectUriString')

...which should be expected.

PLAID INTEGRATION

To start integrating Plaid we will need to run the app through expo-dev-client which we can achieve either by using expo run commands locally or using EAS build process. By building the dev client we will have a custom Expo Go which will add the Plaid library to its bundle, meaning you can use this client until you decide to add again something new that is not supported by it. For simplicity we will stay with the local run commands. Then we just need to follow the Plaid readme setup guide for both iOS and Android.

iOS setup

This is actually super simple. The readme suggests adding to ios/Podfile following string pod 'Plaid', '~> <insert latest version> to pin the latest version, but, in reality, this is optional and we can easily work with the version currently bundled in the library. As a result, the only step we have to do is to initiate the expo-dev-client by running:

expo run:ios

After the build process finishes, the app launches without the error we experienced previously. You can press Add Account and you should see Plaid error complaining about the token we provided - but about that later.

Unexpected environment string value: (null). Expected one of: production, sandbox, or development.

Android setup

If you run expo run:android and press Add Account at this stage, you will get an unhandled promise rejection..

TypeError: null is not an object (evaluating '_reactNative.NativeModules.PlaidAndroid.startLinkActivityForResult')

..because there are actually bunch of steps to make Android work and as the readme suggests it is due to TurboModules not supporting autolinking. But in general this is nothing we cannot setup ourselves with Expo config plugins.

1) Setup your app id

This change you have to do on Plaid Dashboard at the API page - Allowed Android Package. You should configure there the Android package name from app.json - com.expo.plaid.

2) Update MainApplication.java

Here we have to fullfil 2 requirements:

Add import com.plaid.PlaidPackage; to the imports section
Add packages.add(new PlaidPackage()); to List<ReactPackage> getPackages();

Which we can do only with an expo config plugin:

Create in the root of your project withAndroidPlaid.ts file and start transpiling it to javascript with this command:

yarn tsc withAndroidPlaid.ts --watch --skipLibCheck

and import it in app.json as a plugin:

{
  "expo": {
    ...otherProps,
    "plugins": ["./withAndroidPlaid"]
  }
}

Finally, change withAndroidPlaid.ts content to following:

import type { ConfigPlugin } from '@expo/config-plugins'
import { withMainApplication } from '@expo/config-plugins'

function applyPackage(mainApplication: string) {
  const plaidPackageImport = `import com.plaid.PlaidPackage;\n`
  const plaidAddPackage = `packages.add(new PlaidPackage());`

  // Make sure the project does not have the settings already
  if (!mainApplication.includes(plaidPackageImport)) {
    mainApplication = mainApplication.replace(
      /package com.expo.plaid;/,
      `package com.expo.plaid;\n${plaidPackageImport}`
    )
  }

  if (!mainApplication.includes(plaidAddPackage)) {
    mainApplication = mainApplication.replace(
      /return packages;/,
      `
    ${plaidAddPackage}
    return packages;
    `
    )
  }

  return mainApplication
}

const withAndroidPlaid: ConfigPlugin = (expoConfig) => {
  expoConfig = withMainApplication(expoConfig, (config) => {
    config.modResults.contents = applyPackage(config.modResults.contents)
    return config
  })

  return expoConfig
}

export default withAndroidPlaid

If you look closely, our plugin is utilizing withMainApplication, a mod provided by Expo allowing us to read and modify the content of MainApplication.java. We provide the content to our function applyPackage where we execute 2 string replacements to insert plaidPackageImport and plaidAddPackage constants into the file - the changes Plaid readme wanted from us.

Our strategy is to simply find a stable part of the file where we can append our changes. Due to the string replacement nature, it is quite dangerous thing to rely on, because they could change with consequent React Native and Expo updates - so be sure these replacements still work when you upgrade.

If you run expo prebuild -p android you should now see updated MainApplication.java. If you did something incorrectly, you may want to discard changes, check your plugin code, and try prebuild again.

3) Update app/build.gradle

We need to update dependencies to following:

dependencies {
    // ...
    implementation project(':react-native-plaid-link-sdk')
}

Which we can do utilizing withAppBuildGradle modifying the file within withAndroidPlaid function.

// ...
expoConfig = withAppBuildGradle(expoConfig, (config) => {
  config.modResults.contents = applyImplementation(config.modResults.contents)
  return config
})
// ...

And applyImplementation is our custom function following the previous strategy of appending plaidImplementation string to the right place of the file.

function applyImplementation(appBuildGradle: string) {
  const plaidImplementation = `implementation project(':react-native-plaid-link-sdk')`

  // Make sure the project does not have the dependency already
  if (!appBuildGradle.includes(plaidImplementation)) {
    return appBuildGradle.replace(
      /dependencies\s?{/,
      `dependencies {
    ${plaidImplementation}`
    )
  }

  return appBuildGradle
}

4) Update settings.gradle

Finally, we have to append following string to settings.gradle:

include ':react-native-plaid-link-sdk'
project(':react-native-plaid-link-sdk').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-plaid-link-sdk/android')

Which can be done using withSettingsGradle Expo mod:

expoConfig = withSettingsGradle(expoConfig, (config) => {
  config.modResults.contents = applySettings(config.modResults.contents)
  return config
})

And making the changes with our custom applySettings function. Notice that we are just concatenating the strings with plus symbol given that we don't really care about the exact placement of plaidSettings constant.

function applySettings(gradleSettings: string) {
  const plaidSettings = `include ':react-native-plaid-link-sdk'
  project(':react-native-plaid-link-sdk').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-plaid-link-sdk/android')`

  // Make sure the project does not have the settings already
  if (!gradleSettings.includes(`include ':react-native-plaid-link-sdk'`)) {
    return gradleSettings + plaidSettings
  }

  return gradleSettings
}

If you lost track of the changes or applied them incorrectly, you can always go to the solution branch of this github repository for my final implementation.

Troubleshooting: I have discovered 2 potential issues when implementing Plaid on Android, so if you are facing build errors or your app is crashing, you might find an answer in these github issues: Kotlin version and OkHttp version.

After applying all necessary changes you should just run expo run:android to build the app with all modifications.

Once the build process finishes and the app launches, you can press Add Account and you should see a different Plaid error complaining about configuration - but it is actually about the fake token we have provided.

null - unable to open link, please check that your configuration is valid

Getting the link token

At this point, you just need to provide a correct link token in App.tsx. Normally you would get it from your backend, but for testing purposes we can actually use a very handy Postman collection provided by Plaid.

After going through the setup and utilizing your client_id and secret from Plaid dashboard, you can hit https://sandbox.plaid.com/link/token/create API endpoint and use the returned link_token.

{
  "expiration": "2021-12-25T19:49:22Z",
  "link_token": "link-sandbox-965dbc89-14fc-4122-b900-27a562de6db0",
  "request_id": "AEBgG6EbWGsQ9aR"
}

Now pressing Add Account should finally open Plaid interface:

SUMMARY

This integration might feel scary at first, but in the end we are just doing the same thing over and over - inserting a string into a native file during the build time (or prebuild time more specifically). Note that the Expo mods we used are marked as dangerous given that they rely on our custom string replacement rules and you should expect them to break in the future. But for now, they are the best way how to combine the Expo managed workflow and Plaid React Native SDK.

How to Integrate Biometrics in React Native - Overview of 3 Approaches

Áron Berezkin — Tue, 21 Dec 2021 15:17:00 +0000

Being a mobile application developer, sooner or later you will face a request from your client to implement biometrics authentication and will be asked how many days it could take to release. Well, if you develop applications in React Native, the answer won't always offer itself right away because you need to find a solution that fits both Android and iOS. Therefore, some due diligence is needed first.

"Due diligence is an investigation, audit, or review performed to confirm facts or details of a matter under consideration."

There are several criteria you have to consider. Biometrics is usually a feature utilized in security-heavy focused applications to authenticate users; for example, your bank will likely sign your account out — either immediately once you close the app or in a very short time — to protect your finances should someone get control of your device. Therefore, security will surely play an important role in your decision-making process. Hopefully, every step you take in this direction will make it harder for a potential attacker.

Biometrics is also meant to make life easier for users so that they don't need to input their login credentials every time they need to authenticate themselves. That is why we need to look for a user-friendly solution, meaning the libraries we decide to implement should be actively maintained and offer the latest biometrics standards expected by users.

Finally, development time is money, so if the client's budget is limited, you have to take it into consideration and offer the best value solution.

WHAT ARE THE OPTIONS?

Once you start researching potential solutions, you will realize that you face a dilemma regarding where the big part of biometrics implementation should take place. On the backend, the mobile app or actually somewhere in between?

1. MOBILE APP IMPLEMENTATION

This approach is a very pragmatic and fast solution especially in cases when one does not want to rely on your backend counterpart's implementation. There can be many reasons: a limited client's budget, time sensitivity when the backend team is focused on another feature or just no need for a complex solution.

How does it work? Upon the user's first signup or login, we can store the user's credentials securely on the mobile device (iOS Keychain or Android Keystore). To achieve this, we can utilize, for example, the react-native-keychain library that allows us to hide the sensitive data behind biometrics authentication. Once a user's authenticated session expires, we offer a biometrics challenge and, if successfully passed, we retrieve the stored credentials to initiate a login API call.

This solution is not very sophisticated and therefore has some drawbacks. For example, if the mobile application complements a website where the user can change or reset his/her password, the next mobile login request after biometrics authentication will fail and we will need to ask for the user's credentials again.

Security might also be quite a concern because the user's credentials are stored on a mobile device, which is not considered best practice. The react-native-keychain library warns that the data could even be easily decrypted on devices running older than the Android 6.0 operating system. Use this option for fast implementation and simple flows where security is not the highest priority.

2. BACKEND IMPLEMENTATION

Having backend implementation allows us to utilize an extra layer of security, which is desirable for applications that want to go the extra mile in securing users' data.

The solution that offers itself is utilizing an RSA algorithm by creating a public/private key pair on the device when biometric authentication gets enabled. One way is to keep the private key securely on the device while the public key travels to the backend and is saved under the particular user. Note that one user can have multiple devices, meaning multiple public keys.

Source: android-developers.googleblog.com

As the diagram shows, upon biometric authentication (step 3) the private key signs a piece of data, sends it to the backend (4) and then the backend uses the paired public key to verify the data and sends back the result (5). In case of a login action, it will return an access token to initiate a new session. Alternatively, we could generate key pairs on the backend and make the mobile app request the public key. Remember that the private key should not travel.

This way, we shift a big portion of work to the backend, which can lead to much longer delivery time and cost for the client. On the other hand, this approach can be reused in other parts of the application, like approving financial transactions with biometrics — unlike in the first option, where credentials can only be used for a single purpose.

In React Native, this solution is readily available with the react-native-biometrics library, which is, unfortunately, not actively maintained (last commit 2/2020) and its biometrics part does not support the latest standards, such as fallback to passcode when Face ID fails.

To offer the users the best experience, we can implement our approach with two separate libraries: expo-local-authentication for the biometrics part and react-native-rsa-native for the RSA algorithm. Use this option for a more security-focused approach when backend resources are available and the deadline is not a week.

3. COMBINED IMPLEMENTATION

If our application utilizes refresh tokens, we can smartly combine the two previous options together. Upon signup or login, we can store a new refresh token securely on the device using the react-native-keychain library mentioned in the mobile app implementation. Once our session expires, we prompt the user to retrieve the refresh token stored behind biometrics authentication. If the user passes the challenge, we use the refresh token to call the backend and refresh the session/get a new access token.

The big security advantage compared to the first solution is that we don't have to keep the sensitive login credentials stored on the device. Also, backend verification of the refresh token provides certain security aspects we implemented with the second solution.

Overall, this approach is very practical to implement, especially in the case when refresh tokens are already utilized. The only downside is that it has a single purpose of refreshing the user's session.

Summary

While implementing biometric authentication on React Native is definitely not rocket science, time needs to be invested into due diligence to find the best solution that balances important criteria such as security, cost-effectiveness and user experience.

A Step By Step Guide To Writing Your First Expo Config Plugin

Áron Berezkin — Thu, 16 Dec 2021 21:01:25 +0000

Frustrated when your managed Expo project misbehaves and you have no option to customize it? Well, that is a thing of the past now. This tutorial will teach you how to start with Expo config plugins which allow you to add custom native Android and iOS configurations without ejecting the managed workflow. We will use a practical example by debugging and fixing Android's status bar translucent behavior to allow our splash screen reach all device edges.

INITIAL SETUP

To initiate our project you can simply clone this repository that has all demonstrative assets included. Or you can start yourself by running expo-cli:

expo init first-config-plugin -t expo-template-blank-typescript

Then add expo-splash-screen as your dependency..

expo install expo-splash-screen

..and necessary assets to reproduce the issue. We are using typescript for better development experience, which you will definitely find it helpful writing the plugins.

THE ISSUE

We want our application to look cool and therefore we show a full screen image on the intro page. For that we need to set the status bar to be translucent so that image can stretch under it.

<StatusBar style="dark" translucent backgroundColor="transparent" />

The issue is that the status bar is not translucent from the start, resulting in our splash screen and logo shifting up once the translucency takes effect on the app mount. Notice also the color shift of the status bar.

Click for better resolution

Luckily Expo allows us to configure the Android status bar through app.json which will set the default behavior before the app mounts. Lets try to replicate our settings:

  "androidStatusBar": {
      "backgroundColor": "#00000000",
      "barStyle": "dark-content",
      "translucent": true
    }

The result is not exactly what we wanted. While we managed to make the color of status bar dark from the app launch and logo is not shifting up anymore as translucency is taking effect, the bar itself has that ugly overlay.

Click for better resolution

We need to investigate what is going on. By running expo run:android or expo prebuild -p android we can generate the Android folder with its configurations. If you don't know where the issue is coming from, you can use a simple strategy to see where changes are being made. Just stage all generated Android files (git add -A), remove translucent: true from app.json, and run expo prebuild -p android to generate native files again.

By removing the translucent property you should see following unstaged changes:

android/app/src/main/res/values/strings.xml

- <string name="expo_splash_screen_status_bar_translucent" translatable="false">true</string>
+ <string name="expo_splash_screen_status_bar_translucent" translatable="false">false</string>

android/app/src/main/res/values/styles.xml

- <item name="android:windowTranslucentStatus">true</item>

This already looks promising as the expo_splash_screen_status_bar_translucent custom Expo property sounds exactly like something we are trying to influence and being previously true we saw the status bar was really translucent during the splash screen. We also notice that android:windowTranslucentStatus was set to true which with some googling we realize was responsible for the status bar overlay. If you are in managed workflow, in the past you would feel trapped because you can't have one without the other to reach the behavior you wanted and the only option was to raise it in Expo issues. But now thanks to Expo config plugins you can take the solution in your hands.

THE SOLUTION

The solution is to make expo_splash_screen_status_bar_translucent set to true while keeping android:windowTranslucentStatus as false - which is the default therefore lets change only the Expo property. With expo run:android you can actually change it in your Android native files yourself to prove the effect after a new build. Yet if we want to stay in managed workflow and away from native file changes, we need to write a custom plugin which will do the change for us during the prebuild.

This means any native changes through plugins will be reflected in Expo development environment only using expo-dev-client - our custom Expo Go.

The @expo/config-plugins package is already part of Expo, so we don't need to install any new dependency. We will start by creating our plugin file in typescript, which is a recommended approach and can be useful not only for more advanced changes.

Lets create our initial plugin file withAndroidSplashScreen.ts in the root folder:

import type { ConfigPlugin } from '@expo/config-plugins'
import { withStringsXml } from '@expo/config-plugins'

const withAndroidSplashScreen: ConfigPlugin = (expoConfig) =>
  withStringsXml(expoConfig, (modConfig) => {
    return modConfig
  })

export default withAndroidSplashScreen

And start compiling it into javascript:

yarn tsc withAndroidSplashScreen.ts --watch --skipLibCheck

Finally, import resulting withAndroidSplashScreen.js file into app.json plugins property for Expo to process it on a next build. Our changes look like this:

{
  "expo": {
    ...otherProps,
    "androidStatusBar": {
      "backgroundColor": "#00000000",
      "barStyle": "dark-content"
    },
    "plugins": ["./withAndroidSplashScreen.js"]
  }
}

Now you can run expo prebuild -p android to see effects of your plugin. Obviously, if you inspect our withAndroidSplashScreen code it is not changing anything yet. It just returns whatever it receives. Our plugin is a simple function.

Initially our plugin receives expoConfig which is basically content of app.json and this object is passed to the withStringXml mod. This particular mod (modifier) from Expo enables us to read contents of android/app/src/main/res/values/strings.xml and change them based on what config we return (all available mods can be found here). For each mod its content can be read from modConfig.modResults - you can actually use console.log(JSON.stringify(config.modResults, null, 2)); to inspect the values during the prebuild command. To apply our desired changes we need to modify modResults.

import type { ConfigPlugin } from '@expo/config-plugins'
import { AndroidConfig, withStringsXml } from '@expo/config-plugins'

const withAndroidSplashScreen: ConfigPlugin = (expoConfig) =>
  withStringsXml(expoConfig, (modConfig) => {
    modConfig.modResults = AndroidConfig.Strings.setStringItem(
      [
        {
          _: 'true',
          $: {
            name: 'expo_splash_screen_status_bar_translucent',
            translatable: 'false'
          }
        }
      ],
      modConfig.modResults
    )
    return modConfig
  })

export default withAndroidSplashScreen

As you see, we assign to modResults what is returned from AndroidConfig helper method setStringItem which accepts the value we want to add and then remaining file strings already existing. Inspecting type of setStringItem and typescript in general should help you fill all needed properties correctly. After running prebuild we should see a new configuration string:

+ <string name="expo_splash_screen_status_bar_translucent" translatable="false">true</string>

We now have our desired splash screen behavior with a translucent status bar already from the app start and without the ugly overlay.

SUMMARY

Hopefully this tutorial helped you to understand better the power of config plugins and that customizing your Expo project is actually not that difficult - you can see final solution in this branch. If you ask what to do with the native Android folder now when you are finished with debugging, you can just delete it together with all generated files. Important is to commit your new plugin file and changes in app.json. The prebuild command is a part of EAS build so next time you build your project, you can be sure your plugin will take effect the same way you did it locally.

What I Learned as a Web Dev on My First React Native Project

Áron Berezkin — Wed, 15 Dec 2021 19:37:37 +0000

What was your first year like when you started your coding career? I remember it went quite smoothly for me, and I jumped onto a project pretty early on. It was an ongoing project—so time to market wasn't a key factor—and I got great support from my colleagues. But let's face it: With older projects, you mostly deal with bugs, optimizations and continued refactoring, plus some features here and there.

Refactoring did actually keep my motivations high by opening up a path for learning how to write better code. Yet as a junior dev, it is essential to try new things to get a greater perspective; that's what helps you answer questions about your career, coding preferences or favorite libraries—which is the core of most fun arguments with your colleagues.

Therefore, when I hit one year in my coding career, it was a proper challenge and blessing in one when a new project came around—specifically a React Native (RN) project. Just like that, together with my senior colleague, I started building a new mobile app for iOS and Android using my web development skills. Meaning that my previous article should be renamed to How I Left a Financial Markets Career for ~~Web~~ Frontend Development. And, as in the previous article, this experience has come with plenty of lessons worth sharing.

GETTING STARTED

While the React Native coding environment feels quite familiar to a React developer, you actually lack the knowledge of what you are able to build with your skills. Here is where the afore-mentioned greater perspective comes into play; as a developer, you need to broaden your horizons—otherwise, you are risking living in your small bubble, fearing change and getting stuck.

Learning

Perpetually finding myself in somewhat of a "code newbie" mindset, I know that there are certain gaps in my coding skills that I need to fill.

I always prefer learning by actually seeing someone building something. At the time of this project, my favorite tutor, Mosh Hamedani, had released his React Native course (free YouTube preview), so I signed up for it and built my first app. Besides the app building and his coding tips, the great thing about Mosh's course is that he walks you through the setup of Xcode and Android Studio, which are needed for using mobile device emulators/simulators. You want to get this right. But do not worry, we can still write our code in, for example, VSCode.

Another great tutor, The Net Ninja, has a free course also worth checking out. And finally, I've discovered William Candillon, who is a big guru in the React Native community especially thanks to his "Can it be done in React Native?" YouTube series. While William is mostly focused on animations, around that time he also started a series called "React Native Fashion", where he builds an app from scratch based on designs in Figma—which is very close to the real developer experience, so check it out!

Expo vs. React Native CLI?

You will find that almost all tutorials, be it the ones from YouTube or Medium, will use Expo, a framework and set of tools for building React Native applications. Its "managed" workflow prevents and eases many headaches React Native developers face. Expo apps are super easy to set up and are made available on your mobile device through a simple Expo client, meaning it skips the App Store and Play Store in the process. This is obviously a great choice for a tutorial or an MVP, but is it good for a professionally built app?

For now, it usually isn't! Expo does not allow you to touch native Android and iOS modules and, in general, you are locked to their environment — which is very powerful, but the situation is still not ideal. If you'd need something that is not available in Expo, you would have to go through a potentially painful ejecting process. Also worth mentioning is that Expo apps are significantly bigger in size. At STRV, we always use React Native CLI to build apps so that we can provide the best value for our clients' money.

Many tutors and commentators heavily promote Expo and scare new developers by claiming that with React Native CLI, devs will have to touch native iOS and Android modules to get things working. But in reality, those are big scares of the past. Since React Native version 0.60, almost all libraries are auto-linked and you just have to install them with npm or yarn. I imagine that before that time, it was probably a huge headache; but now, already close to version 0.64, things are much better. Though, yes, there are cases when you have to play around with native modules—for example, to set up a splash screen and an app icon—but, again, you are a developer and, sometimes, you need to get your hands dirty. Avoiding difficult things may just create internal anxiety that will surface later.

THE DEVELOPMENT EXPERIENCE

It is different. Once you set up your Android Emulator and iOS Simulator, you can start exploring your code changes—and will soon discover that not everything is as simple as it is in tutorials.

Does It Work on Both Android and iOS?

As a web dev, you check how your app behaves across various internet browsers. In mobile development, you check if things are working in the same way on both Android and iOS. This is important. There are some libraries or component properties that are platform-specific only. Documentation is your friend, so keep it in mind. It can literally be trivial things—like shadow properties that have no effect on Android, because you'll have to utilize preset elevation properties.

How Does It Look on My Old Nexus Versus Iphone 12?

Another parallel is checking for website responsiveness while resizing the browser screen versus checking how your app looks on mobile devices with various screen sizes and pixel density. This can easily lead to misaligned design. If your simulator is big enough and fits all things on one screen, it may require a ScrollView component on a smaller device to allow users to reach all the offscreen content.

Debugging

There are many ways to debug your app by reaching for tools like React Dev Tools, a simple element inspector or a network tab that you're used to. Tools such as React Native Debugger are also quite popular, but they require turning on the 'Remote debugging' mode on your simulator, which I found sometimes interferes with the app and throws weird errors.

With React Native version 0.62 comes Flipper, Facebook's own debugging tool included as a default for you to use. This is great because it works out of the box and you just need to enable plugins for your app to get it working. Maybe the UI is not the nicest you would expect (luckily, it is being improved), but having it built in and not interfering with your app is a great plus.

Also, if your build is failing, sometimes it is worth turning on Xcode and Android Studio to build your app there, as their logs may better point you to what is causing the issue. I know, those tools feel like a blackbox and your working machine will surely start loudly complaining, but some familiarity will pay off. Check, for example, this talk on Xcode.

To be honest, debugging errors will take a long time to get used to. For a novice, it is not always apparent where the error is coming from. And, more importantly, it'll take time to figure out if code changes alone can fix the issue, or if you have to reload—or even rebuild—your app. This can make you lose precious time, which is why I recommend documenting the steps you take when resolving common bugs—that's how you will save time later on.

Fast Refresh

When things are going quite smoothly, something I really enjoy is Fast Refresh, which allows you to see your code changes reflected instantly. Some great news is that this functionality has recently made its way to web development as well.

CODING TIPS

There's quite a lot to consider when you are building a mobile app in React Native after having worked solely in web development. As such, in this section I would like to touch on a few essential topics that you may find helpful.

Styling

All your components are display: flex and flexDirection: column as default, so forget grids and blocks and brush up on your flexbox skills. You will often be tempted to use flex: 1 to make your container fill the whole screen or all available space, which is perfectly fine—but remember that these don't have to play nicely if your component has any animation elements and the device has to recalculate the space. Similarly, another default is position: relative, meaning your absolute elements are positioned relative to their parent.

Forget CSS pseudo-elements and selectors; in React Native, we inline the styles. The recommended approach is to use a StyleSheet object, but I enjoy using Styled Components in a similar way as on the web. If you are a fan of styled systems, Restyle from Shopify is gaining popularity.

You can also choose from several UI kits to get started on your hobby project. Popular ones are, for example, React Native Paper and UI Kitten.

By the way, remember that you don't have semantic HTML elements at your disposal. Most components are View (container) or Text (you cannot use simple text with other components), therefore you may want to think about adding some accessibility props.

Images

You cannot use .svg files as a source for RN's Image component. You will probably end up using pngs, ideally 3x the size to account for iPhones' scale factor—so don't forget to compress it! If you want to use svgs, use React-Native-SVG library and SVGR playground for quick conversion to an RN component.

Animations

You can use the built-in Animated API, which performs well especially when using useNativeDriver: true prop. However, you get the best performance with the React-Native-Reanimated library, which is currently being upgraded to version 2 and expectations are high! Note that this only works with Hermes enabled (see the next section). More sophisticated animations used to, for example, wow users with an eye-catching splash screen, are commonly achieved with Lottie.

Libraries

In general, there are actually many built-in components within React Native. For example, Activity Indicator (loader) that behaves natively on both Android and iOS, or Flatlist, a component used to display and optimize lists of items, a preferred way compared to mapping over an array as we are used to from the web. The trend is to make the RN library lighter, which is why some nonessential ones were moved to React Native Community repo for maintenance.

One important note for Android: As you add more libraries, you may encounter an error that limits you to a certain number of allowed methods. To deal with this, enable Multidex. Another error may come if you enable Hermes, an optimized Javascript engine for running Android apps and, soon, also iOS. While some libraries—like the above-mentioned Reanimated—require it, others are not yet compatible with it (Realm - see below).

Keyboard Avoiding View

No comment. If you've worked with React Native, you get this. It is a topic one would rather skip. When you work with text inputs, you have to account for the keyboard sliding from the bottom, hence we utilize the Keyboard Avoiding View container that is able to adjust itself and make space for the keyboard. Unfortunately, consistency across iOS and Android is not always there, and you will probably end up adjusting Android's windowSoftInputMode at some point to get the best experience.

Landscape Mode

Another unpleasant thing you might face is optimizing for the landscape mode. For most apps, it is common practice to just disable it.

Navigation

To navigate between screens, you will probably end up using the very popular React Navigation library. There is a great, purely native alternative, React Native Navigation (the names get confused easily), from Wix. It is super performant but not that flexible. Therefore, again: If your design asks you for something custom, you have no choice but to go with React Navigation; luckily, it is a great, well-documented option.

Storing Data

The Redux library is quite a common choice thanks to its broad ecosystem. Luckily, there is now a very useful Redux Toolkit that mitigates the amount of boilerplate you have to usually write. RTK Query is a very new Redux solution for data fetching and caching, hopefully making our lives even easier. Though the web seems to slowly be moving away from Redux to React Query, SWR or other solutions, mobile is a different story; Redux is holding on to its popularity, as it integrates well with libraries that persist and rehydrate the global state for users when they relaunch the app.

To persist data on the device, it is common to use AsyncStorage, which is an asynchronous alternative to web's LocalStorage. Another interesting option (though a bit more complex) is to use the Realm database.

Other Mobile Development Considerations

Sooner or later, you will encounter a situation where you need to add permissions to your app; for example, to access the camera and photos library during a file upload. Though not always required, it is common to use the React Native Permissions library to offer a consistent experience across platforms.

Further, mobile devices can lose connectivity easily; for that, you can count on the NetInfo library to offer a user experience while offline. Finally, notifications are an essential part of mobile apps and Firebase offers great React Native integrations.

FINAL WORDS

We live in an amazing time. Our React coding skills can easily transfer from web to mobile to build full-fledged iOS and Android apps. Sometimes, this allows us to offer significant cost savings to our clients in the process. Yet one has to understand that mobile and web development do differ and, to offer a great user experience, it is not only about the code we write.

Experienced mobile app developers can easily smell when something is not right, therefore I insist that you put your ego aside and ask them—be it your colleagues or peers on Twitter or Reddit, or anyone with mobile UX know-how—to review your app and provide feedback. Only with this approach can you progress and apply your skills to build great products.

Originally published at aronberezkin.com and strv.com on February 18, 2021.

How I Left a Financial Markets Career for Web Development

Áron Berezkin — Wed, 15 Dec 2021 19:17:34 +0000

Thinking about breaking into web development? Unsure if you have sufficient knowledge or if it's too late for you? Maybe you have a friend struggling with taking the leap. Whatever the case, my story might help.

I studied finance & investments at university for five years, then spent another five years working as an analyst for Bloomberg in London. Yet when I turned 30, I joined STRV — starting my journey as a web developer.

As you might guess, the path to get here wasn't clearcut. The biggest roadblock for a person changing careers is the psychological battle. Your brain can easily calculate what you're leaving behind (10 years in finance), but can't really determine what you might gain. Let's go over what to ask yourself when making this big life decision, and how to move forward.

DECIDING IF IT'S THE RIGHT MOVE

Learning what a web developer does is the first piece of the puzzle. Obviously, the ideal situation is to know someone who actually works as a developer, and even better if that someone's also gone through a career change. If you don't personally know anyone that fits the bill, you can easily find someone at a local development meetup (use the Meetup app or Facebook events). You can also read about building a web development career at freeCodeCamp or Medium, watch relevant Youtube videos or listen to a podcast. I did all of that and found everything equally helpful. Remember: You're entering a very broad and fast-moving space, so one developer alone cannot provide all the necessary info.

What intrigued me most was the lifestyle (remote work, flexible hours) and an opportunity to constantly develop myself, learn new things and build something people will find useful. If you like learning new things, this industry is for you. There are new programming technologies popping up all the time and while this can get tiring for someone who's been in the industry for years, those newer to the job find this exciting. This actually gives newbies a great advantage — companies need fresh, flexible minds that are enthusiastic and willing to learn a specific stack of technologies used.

As for having joined STRV, I'm thrilled to have the opportunity to determine my own hours and, even more than that, it's incredible to have smart colleagues around, all of whom help me develop my coding skills and provide guidance when trying new technologies.

READY TO LEARN?

The learning process for new developers can be split into the categories below. Since we all have a different learning style, I mention both pros and cons for each category. I'd recommend starting with the first category (as though it's the first step) and going from there—or choosing and combining what works for you.

Interactive Platforms

If you've never coded before, you need to start with the basics (data structures, conditionals, loops, functions, etc.). The best way to do that is to use a free interactive coding app, such as Codecademy, Sololearn or freeCodecamp basic courses. They are great because you don't have to install or set anything up, which can be a demotivating headache for a beginner. Some of them have a mobile app, too.

The apps teach users that writing code has to be precise. For example, it's not always apparent to new developers that lower and upper case letters matter. Another revelation for beginners is the importance of conditionals, and that showing either 'login' or 'logout' in a navigation menu is just an if condition based on a user being logged in or not. My advice would be to use these platforms to grasp the basics before they become repetitive and lengthy, then move on to more comprehensive material.

Video Tutorials

The next step involves taking more comprehensive video courses that teach how to build an app from the ground up. It is closer to reality than interactive platforms and is a good way to check if you actually enjoy the development process. Udemy and YouTube are great inexpensive sources to start with. Finding the right content among the vast amount of videos might be a challenge, but reviews and the number of subscribers/likes are a good guide.

When searching for videos, finding updated content is crucial given that the technologies advance very quickly. If you use outdated content, you might encounter compatibility issues if the tutor does not specify which version of a library he/she is using.

Once you've found some good options, observe the teachers and learn from those with a teaching style that suits you best. Among free content with good tutors, I recommend Kevin Powell (html/css), The Net Ninja (frontend) and Traversy Media (various tutorials).

Motivation, Inspiration, Clarity

Following a lengthy tutorial, you often get to a point when it's useful to step back from coding and consolidate what you've learned. Listening to podcasts such as CodeNewbie and Syntax or watching YouTube videos like Web Development in 2020 can complement the learning process, help you keep up with the industry's new trends and guide you in what to learn next.

You might also find yourself battling dilemmas such as learning a programming framework (React, Vue, Angular) versus focusing more on core knowledge of vanilla JavaScript, or styling your app with pure CSS versus utilizing a design library (Bootstrap, Material UI, Tailwind). Whatever it is you're struggling to answer, focus on keeping your motivations high by remembering where you're headed: building something real and valuable.

Furthermore, reading freeCodeCamp or Medium articles about career changes or development work also keeps you motivated and inspired. Twitter is great for this as well. And if you need more accountability, sign up for the #100DaysOfCode challenge to join a great community of upcoming programmers, who will support you whenever needed.

Content can feel repetitive after some time, especially while you haven't moved on to advanced topics yet. But personally, I loved this part of the learning process because it's — unlike when you've moved on to actual coding and you have to find free time and really focus. With a full-time job, that usually means waking up quite early or staying up late.

Meetups, Bootcamps, Academies

Meetups are irreplaceable. You get to know real developers who can answer any questions that pop up in your head. Sometimes, the topics might be too advanced to comprehend when you're a newbie, but give it a few months. Keep listening and learning. You'll gain a lot more clarity about standards and new trends in development. I once went to a Jamstack meetup in London (before it became such a buzzword) and the knowledge I gained definitely helped me keep up during various conversations with other developers before officially becoming one myself.

Bootcamps are also a popular way to speed up the learning process, but they aren't for everyone. It depends on whether you prefer learning at your own pace or the pace set by a tutor. Bootcamps can be very intense and a bit on the expensive side, so think twice whether or not the format works for you. While another huge benefit of them is that they connect you with like-minded developers and the industry, you can do that on your own if you put in the time. So if the format does suit you, and you prefer investing money over time — go for it.

As part of their hiring process, some development companies set up academies where they invite both developers and non-developers to attend a series of workshops. It's a great alternative to bootcamps because they are usually free, with no strings attached. You just have to show that you have the right attitude and hunger for learning. The fact that I attended STRV React Nights in 2019 definitely played an important role in eventually getting hired.

Whether you decide to go with any of these options or not, my advice is to keep asking questions. Leave all doubts behind; so what if it ends up not working out? The worst thing that can happen is that you will have spent time on learning something new.

Building stuff

Probably the most crucial part of the learning process is to start building stuff on your own. Here, you will question yourself the most because it is the hardest. Tutorials teach you to follow along, but taking things into your own hands and actually making calls about how to structure your project and code is a whole different ballgame. If you lose confidence, even right at the beginning, there's nothing wrong with turning to your peers or sources for inspiration. Have a look back at the tutorials you've gone through or check out STRV's open source templates.

A big question during this time is: What do you actually build? If you come up with an idea, do it. Starting a project will be your biggest motivation. And if you're low on ideas, a good tactic is to start replicating designs of other websites, even popular ones like Twitter. Google Developer Tools can help to guide you.

A good way to give purpose to your project is by adding it to your portfolio. You probably don't yet have the skills to build something that you could ask money for, so build a website for someone that needs it. It can be your friend, a small local business or a charity. When I was starting to develop, I noticed that a pastry shop near my apartment didn't have a website, so I went ahead and built a simple landing page. The plan was to first build it, then show them. Unfortunately, before I got the opportunity to present it to them, they already had one ¯\_(ツ)_/¯.

Be kind to yourself during this stage. Becoming confident in your coding skills takes time. Nobody expects you to know everything and write code on par with senior developers. Embrace being a newbie.

Mentoring

Having a mentor is not a requirement when becoming a developer. For most of my career-change journey, I've managed to do things on my own. But when I briefly tried mentorship during React Nights, I definitely saw the benefits; it helps you get clarity on many things. From the coding logic you use to technologies you should be learning as a developer, mentorship provides a lot of answers and puts them at your fingertips.

There are specialized websites you can Google to find a mentor. Some are free, some are paid. Or you can take things into your own hands and ask someone to mentor you, be it in person or via Twitter or a different channel. You might be surprised, but most developers are more than happy to offer you their help — for them, it's an activity that lets them hone their skills and, in general, people tend to get satisfaction from giving advice. And of course, should you find a mentor, always respect and appreciate their time.

Teaching

The ultimate way to solidify your knowledge is to teach someone what you know. For example, you can either help other friends who are learning development or write an article. The article can be published on your personal blog, Medium or places like freeCodeCamp. It is totally optional, yet great for your resume and a good habit that will help you gather feedback from others and build confidence.

ON A PERSONAL NOTE

Learning coding can be frustrating at times. The biggest lessons often come from failing and fixing your mistakes, meaning you'll sometimes feel like you've hit a wall. And when trying to make a career shift, hitting a wall can be especially demotivating. You may question whether it's even worth it. Whether it's too big of a risk. My advice is, just remember why you decided to do it in the first place. And try to make the learning process fun!

Having successfully made the jump, I can now say with absolute certainty — to me, this career, this lifestyle, is worth it. And making a big career change later in life than most people, that in itself is a great feeling.

Originally published at aronberezkin.com and strv.com on February 25, 2020.