DEV Community: Thibault Maekelbergh

Single point versioning with Fastlane for React Native

Thibault Maekelbergh — Mon, 31 Jan 2022 08:39:40 +0000

This post originally appeared on our ITP Dev blog

The issue

When upgrading (or "bumping") a React native app you often need to touch multiple files. You need to change the version in the node package manifests, update that same version and the build id in every Xcode scheme you use, and on Android either set the version via gradle.properties or via CLI flags when executing Gradle.

Previously at ITP we tackled this with a conceptually simple bash script. You supplied it the current version and desired version and it did basic find and replace with sed:

#!/usr/bin/env bash
set -e

function _replace_in_file() {
  if command -v sed > /dev/null; then
    sed -i -e "s/$1/$2/g" "$3"
  else
    echo "You don't have sed and this script relies on it."
    echo "Please install sed via apt or brew"
    exit 1
  fi
}

function bump_android() {
  echo "Updating gradle.properties"

  _replace_in_file "$1" "$2" ./android/gradle.properties
  # shellcheck disable=SC2001
  _replace_in_file "$(echo "$1" | sed -e 's/\.//g')0" "$(echo "$2" | sed -e 's/\.//g')\0" ./android/gradle.properties
}

function bump_ios() {
  local schemes=("appstore" "client" "dev" "release")
  for scheme in "${schemes[@]}"; do
    echo "Updating Xcode scheme: $scheme"
    _replace_in_file "$1" "$2" "./ios/RNApp/Info-$scheme.plist"
  done
}

function bump_node() {
  echo "Updating package.json, package-lock.json"

  _replace_in_file "\"version\": \"$1\"" "\"version\": \"$2\"" package.json

  # Regenerate package-lock
  npm i --ignore-scripts
}

function main() {
  if [[ -z "$1" || -z "$2" ]]; then
    echo "Commands supplied were not valid."
    echo "This script expects the following form:"
    echo "  $ ./bump-version.sh <old_version> <new_version>"
    exit 1
  fi

  echo "Performing version bump from $1 👉 $2..."

  bump_node "$@"
  bump_android "$@"
  bump_ios "$@"

  # sed outputs some clutter files suffixed with -e, we delete them with xargs
  if [ "$(uname)" == "Linux" ]; then
    find . -type f -name \*-e -print0 | xargs --null /bin/rm -rf
  else
    find . -type f -name \*-e -print0 | /usr/bin/xargs -0 /bin/rm -rf
  fi
}

main "$@"

However, for people not familiar with Bash this script is some advanced dark magic. It was also reliant on which sed you have available on the system, GNU or BSD (see the check at the end of the script). The files changed were standards for iOS & node, but for Android we used an older way of putting the version in a variable inside of gradle.properties and then read that variable during the gradle assemble task.

Why automate

Why automate something you could just change in VS Code or Xcode in the relative files? Well, version upgrades might not happen that often and then you need to either take your chances or ask around with coworkers if they remember the files that need to be changed. It's also super fast for newcomers in the team or to native development to just run the script (however they won't know the deeper details of what's happening).

You could, if desired, also just run this in a CI pipeline and have CI take care of automating version upgrades instead of making it a semi-automatic process via script.

This worked great for a few years, but when I came to think about it this way is still a bit to over engineered. We already use the great Fastlane tool in all our projects for building iOS & Android so surely there must be a way to make it easier and integrated with Fastlane.

Single point versioning via Fastlane

The solution to this in Fastlane is really easy:

Use Fastlane's load_json plugin and read node's package.json
Get the semver version e.g 1.0.0 from the version property
Append a unique build identifier. We use the job ID from our CI/CD pipeline
Join version and build id to a string
Set that as the version in Fastlane gradle & gym tasks.

This gives us a single point to manage the version: package.json. Updating the version there makes Fastlane read that and supply it to gym/gradle relative commands.
We abstracted this to a utils.rb ruby module since we use different schemes and build configurations, but if you have a simpler app it could just as well be written inline or at the top of your Fastfile

utils.rb

def load_build_metadata(opts)
  package = load_json(json_path: './package.json')
  build_id = ENV['AZURE_UNIQUE_BUILD_ID']

  if build_id.nil? || build_id.empty?
    puts "Required environment variable 'AZURE_UNIQUE_BUILD_ID' not found. Got: #{build_id}"
    exit(1)
  end

  app_version = package['version']
  build_number = build_id.gsub('.', '') # We expect a date format like 20211122.6 here and trim the dot

  # Return a hashmap with all version metadata we could be interested in
  Hash[
    'build_number' => build_number,
    'app_version' => app_version,
    'full_version' => "#{app_version}#{opts[:suffix] || ''}.#{build_number}"
  ]
end

Fastfile

platform :ios do
  desc '📱🥉 Build iOS Client'
  lane :build_client do
    add_app_icon_badge(label: 'client')
+   build_metadata = load_build_metadata(suffix: opts[:suffix])

    update_settings_bundle(
      xcodeproj: "ios/RNApp.xcodeproj",
      configuration: 'Client',
      target: 'RNApp-iOS',
      key: 'version_preference',
+     value: build_metadata['full_version']
    )

    set_info_plist_value(
      path: "ios/RNApp-iOS/Info-Client.plist",
      key: 'CFBundleShortVersionString',
+     value: build_metadata['app_version']
    )

    set_info_plist_value(
      path: "ios/RNApp-iOS/Info-Client.plist",
      key: 'CFBundleVersion',
+     value: build_metadata['full_version']
    )

    gym(...)
  end
end

platform :android do
  desc '🤖🥉 Build Android Client'
  lane :build_client do
    add_app_icon_badge(label: 'client')
+   build_metadata = load_build_metadata(suffix: opts[:suffix])

    gradle(project_dir: 'android', task: 'clean')

    gradle(
      project_dir: 'android',
      task: 'assemble',
      build_type: 'Clientrelease',
      properties: {
+       "android.injected.version.name": build_metadata['full_version'],
+       "android.injected.version.code": build_metadata['build_number']
      }
    )
  end
end

Conclusion

We now just need to do npm version minor and commit that the branch so the CI pipeline can pick it up 👷🏻‍♂️

And then to summarise, this way of versioning multiple configurations/schemes is better for us because:

We stopped using gradle.properties to version Android and inject it into Gradle by reading from the properties file! Instead we now use CLI flags passed to Gradle under the hood to configure versions at build time rather than in code.
Creating a new version is actually handled by the one tool in control: Fastlane. The need to manually bump the correct files is gone. We narrowed it down to one: package.json
This works regardless of which OS you are running on or which version/flavour of bash and subtools you use (e.g sed, xargs)
It's more declarative than the bash script which required some knowledge of bash. That's not a common thing.
The file typically doesn't change a lot, and if it does, anyone can easily solve/adapt it.

"Fixing" React Navigation & iOS screen reader focus

Thibault Maekelbergh — Thu, 08 Apr 2021 09:14:41 +0000

The problem

During some extensive accessibility (mainly screen reader) testing on a React Native app we're currently developing, we bumped into an issue where focus would be lost for the screen reader when navigating to a new view in a stack using React Navigation.

You would transition from the overview to a detail page, but instead of respecting the navigation tree for that page, React Navigation would focus the screen reader on the position where your focus was in the previous screen. This would pose a big problem of course: Imagine scrolling through a long list (FlatList), then navigating to the detail for the item you tapped, and having the screen reader focus somewhere on the middle of the screen.

This issue was however only happening on iOS. My guess was that React Navigation in some way does not respect the iOS native navigation elements and does some JS things inbetween, which makes iOS act up in this case.

The "fix"

To fix it, we created the useAccessibilityFocus hook! It’s very simple and will just return a ref to bind to your element, and a function to trigger focus to the element carrying the ref:

import type { MutableRefObject } from 'react';
import { useCallback, useRef } from 'react';
import { AccessibilityInfo, findNodeHandle, Platform } from 'react-native';

/**
 * Returns a ref object which when bound to an element, will focus that
 * element in VoiceOver/TalkBack on its appearance
 */
export default function useAccessibilityFocus(): [MutableRefObject<any>, Void] {
  const ref = useRef(null);

  const setFocus = useCallback(() => {
    if (Platform.OS === 'ios') {
      if (ref.current) {
        const focusPoint = findNodeHandle(ref.current);
        if (focusPoint) {
          AccessibilityInfo.setAccessibilityFocus(focusPoint);
        }
      }
    }
  }, [ref]);

  return [ref, setFocus];
}

Now we can call it in a useEffect or even better, React Navigation's useFocusEffect to focus on the element when the screen appears:

const DetailScreen = ({ navigation }) => {
  const [focusRef, setFocus] = useAccessibilityFocus();

  useFocusEffect(setFocus);

  return (
    <View>
      <TitleInput />
      <View ref={focusRef}>
        <Text>Content I want the focus on</Text>
      </View>
    <View>
  )
}

Another way would be to hook into a listener on your stack’s screens:

const RootNav = () => {
  const [focusRef, setFocus] = useAccessibilityFocus();

  return (
    <Stack.Navigator>
      <Stack.Screen component={OverviewScreen} />
      <Stack.Screen
        component={DetailScreen}
        options={{
          header: () => (
            <NavHeader ref={focusRef} title="Detail" />
          ),
        }}
        listeners={{
          transitionEnd: () => setFocus()
        }}
      />
    </Stack.Navigator>
  )
}

Worth noting that now, we have the added benefit that we can use this hook in other situations! Rather than moving to another view in the stack, we can now use this to trigger screen reader focus to modals, notifications, alerts, errors etc. Just be sure to remove the Platform.OS check in the hook in that case

The solution

The real fix however, is that React Navigation fixes this issue in their core implementation so that focus is carried along when navigating to another screen. A PR discussion about this is open, you can even see yours truly in the discussion, but sadly no development towards fixing this has been done I guess.

Why does typescript not conditionally pick the right type in a union?

Thibault Maekelbergh — Fri, 10 Jan 2020 14:05:29 +0000

Why does the | (Union) operator not work as a logical or?

In the following snippets I would've expected it to see that the name property is available in 1 of the provided union options? Instead it errors that it can't find name because it is not available in MyDevice but it is available in the interface provided in the union.

How do you go about conditionally deciding to pick the interface instead of MyDevice when the name property is available?

I know conditional types exist but that doesn't seem like an option because I'm providing plain interfaces and not types/interfaces with generics.

I'm writing a bash course

Thibault Maekelbergh — Sat, 16 Mar 2019 14:38:29 +0000

I love bash. For me it is the most powerful language I have ever used. But unfortunately it has a very difficult syntax and concepts which confuse the hell out of me time and time again.

This course started as a way for me to have a reference to all the things I keep forgetting or need to refresh syntax-wise before I use them in a script or automation. I was getting a lot of positive feedback from friends and coworkers about my ability to use bash scripts as automations or to perform difficult (manual) tasks, and that they found it difficult to start writing scripts themselves.

That's when I decided that this course shouldn't be just a catch-all or notepad for my thoughts but something more structured which offers a simple way and examples of how to do things in bash or use certain patterns.

I'm currently writing this course on Notion and it live updates, I'll try to do my best to update it regularly. If you want you can see what I'm doing here and comment on it!

https://www.notion.so/thibmaek/Bash-shell-scripting-bef80e00b7994a9bb1228f97594430a8

🐳 Migrating InfluxDB databases to docker-compose

Thibault Maekelbergh — Tue, 26 Feb 2019 14:20:09 +0000

This blogpost was originally publish on my blog

The problem

I got a brand new Intel NUC which I'm planning to use as a server with Docker. Some weeks earlier I had set up InfluxDB on a Raspberry Pi Zero W to collects my Home Assistant data and monitor my machines with Telegraf.

Incorrectly, I guessed that there would be an import/export module in Chronograf which I use to manage my InfluxDB database. The problem seems to be a bit more complicated though. The problem itself lies in the fact that the influxd service needs to be halted before the restoration of a database can happen and to replicate that scenario, you'd have to shut down the Docker container... and also making it useless to act upon.

Follow along for the quickest solution I've found using docker-compose and an intermediate container

Backing up

On the old host running InfluxDB (Rpi Zero) stop the service and export the databases. The most recent and recommend way of doing so is via the portable method:

# Ignore this if the service is already running of course.
$ sudo systemctl start influxdb
$ influxd backup -portable -database telegraf ./influxdb-backup/telegraf
$ influxd backup -portable -database home_assistant ./influxdb-backup/home_assistant
$ sudo systemctl stop influxdb

After the two databases were backed up, I copied those directories over with scp and then copied them back to NUC where I would run the Docker container

Restoring

Now I had my InfluxDB container already running to test the connection with Chronograf. Since I think the format is more readable, I use docker-compose to spin up these containers:

version: '2'

services:
  influxdb:
    image: influxdb:latest
    container_name: influxdb
    ports:
      - 8086:8086
    volumes:
      - /opt/appdata/influxdb:/var/lib/influxdb
    restart:
      always

The steps to restoring include first shutting down this container and then spinning up a throw-away container to copy the backup directories to the locally mounted volume /opt/appdata which will persist in the docker-compose created container.

First, stop our current container with docker-compose down (or docker stop influxdb)

Create intermediate container that maps the data volume and our backup directory and then enter the container's shell:

$ docker run --rm --detach -v /opt/appdata/influxdb:/var/lib/influxdb -v /home/thibmaek/influxdb-backup:/backups -p 8086 influxdb:latest
$ docker exec -it mystifying_kepler /bin/bash

Inside the intermediate container use the mapped backup folder to restore to our database and exit it afterwards:

$ influxd restore -portable -database telegraf /backups/telegraf
$ influxd restore -portable -database home_assistant /backups/home_assistant
$ exit

Kill and remove the intermediate container. Restart our previous docker-compose container and dbs should be restored:

$ docker stop mystifying_kepler
$ docker-compose up -d

Explain coroutines like I'm five

Thibault Maekelbergh — Thu, 07 Dec 2017 10:33:37 +0000

I have been using this concept in Javascript's redux-sagas & Python's asyncio but have failed to understand their underlying working. Who can explain to me how coroutines actually work?