DEV Community: Vladimir Vovk

Better Image Placeholders with ThumbHash

Vladimir Vovk — Mon, 14 Apr 2025 14:46:00 +0000

Depending on the network speed and image size, loading images may be slow. This could make the page design look ugly, lead to content shifts, and create bad UX.

One way to eliminate this problem is to use image placeholders. We can load very small blurred versions of our images and display them first (using the same size as the original images) while continue loading bigger images.

Introducing the ThumbHash.

A very compact representation of a placeholder for an image. Store it inline with your data and show it while the real image is loading for a smoother loading experience. It's similar to BlurHash but with the following advantages:

Encodes more detail in the same space

Also encodes the aspect ratio

Gives more accurate colors

Supports images with alpha

We can create the ThumbHash for an image using the thumbhash library or thumbhash-gen command-line utility. For example, to create the ThumbHash for the image above, we will need one command:

npx thumbhash-gen https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aj3ukzipq9acckn8a9ux.jpg

The result will be a compact hash string XakJJYI/WFWSaGZ1d/ZXdnlw5gdn which we can use as a placeholder.

One option is to use a "special" component that supports the ThumbHash format. For example, the nextjs-thumbhash and Expo Image.

const imageUrl = 'https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aj3ukzipq9acckn8a9ux.jpg'
const thumbhash = 'XakJJYI/WFWSaGZ1d/ZXdnlw5gdn'

...

<Image
  src={imageUrl}
  thumbhash={thumbhash}
/>

Another option will be to get the "URL data" from ThumbHash using the thumbhash library:

const thumbhash = 'XakJJYI/WFWSaGZ1d/ZXdnlw5gdn'
const urlData = thumbhash.thumbHashToDataURL(Buffer.from(thumbhash, 'base64'))
// urlData -> 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAA...'

And use it as the src attribute for the image:

<img src={urlData} />

That's it! 🎉

Please share your thoughts in the comments. Press the 💖 button, and happy hacking! 💻

Credits

Photo by Mike van den Bos on Unsplash
Photo by Andriyko Podilnyk on Unsplash

Absolute Path Imports with Typescript and Node.js

Vladimir Vovk — Mon, 31 Mar 2025 16:33:03 +0000

With absolute path imports, we can do import { functionA } from 'src/modules/moduleA'. Notice that the path starts with src instead of ../../.. dots when we use relative paths.

Set Up

Let's create a new Node.js project:

mkdir node-ts
cd node-ts
npm init -y

And install dependencies we will need:

npm install --dev typescript tsx tsc-alias

To use Typescript, we must create a tsconfig.json configuration file. Let's create a default configuration with:

npx tsc --init

And a separate directory for all our source files:

mkdir src

Now we can set the paths Typescript parameter to use absolute path imports:

{
  "compilerOptions": {
  ...
    "paths": {
      "src/*": ["./src/*"]
    },
  }
}

Also, let's set parameters that we will need to compile our Typescript files:

{
  "compilerOptions": {
    ...
    "rootDir": "./src",
    "outDir": "./dist"
  },
  ...
  "include": ["src/**/*.ts"],
  "tsc-alias": {
    "resolveFullPaths": true,
    "verbose": false
  }
}

We also added the tsc-alias command config. The tsc-alias command will replace all absolute paths with relative ones (to make Node.js happy). The resolveFullPaths: true parameter will add the .js at the end of imports. Eg import { log } from 'src/utils' will transform to import { log } from './utils.js'. Otherwise we will get the Cannot find module runtime error (which is weird in my opinion). Please read this Stack Overflow thread to learn more.

Now, it's time to add some useful commands to the package.json:

{
  ...
  "scripts": {
    "dev": "tsx watch src/main.ts",
    "build": "tsc && tsc-alias",
    "start": "node ./dist/main.js"
  },
  ...
}

The dev script will run Typescript in watch mode, so every time we update our source code, it will restart automatically.

The build script will compile all files from the src folder and output the result into the dist folder.

The start command will run our app in production.

Test

Let's write some code and test our config. Create the src/utils/log.ts file:

export const sayHello = (name: string) => {
  console.log(`Hello, ${name}!`)
}

Now that we have the sayHello function defined, let's call it from src/main.ts:

import { sayHello } from 'src/utils/log.ts'

sayHello('world')

Run the npm run dev command to see the famous Hello, world! phrase. 🎉

Please share your thoughts in the comments. Press the 💖 button, and happy hacking! 💻

Credits

Photo by Ugne Vasyliute on Unsplash

Fastify API with Postgres and Drizzle ORM

Vladimir Vovk — Mon, 31 Mar 2025 14:52:44 +0000

Before we start, we will need Node.js installed.

General Setup

Let's create a new directory for our API first:

mkdir fastify-api
cd fastify-api

Now, we need to initialize a new project:

npm init -y

And install dependencies:

npm install drizzle-orm pg pino pino-pretty fastify @fastify/env dotenv

Also, we will need some packages for development:

npm install --dev typescript tsx drizzle-kit @types/pg tsc-alias

TypeScript

As we want to use TypeScript, we must create a tsconfig.json configuration file. Let's create a default configuration with:

npx tsc --init

It's good to have all source files in one place. So, let's create a src folder for all our code:

mkdir src

Now that we have the src folder, it will be nice to use "absolute" path imports. E.g. import { funcA } from 'src/modules/moduleA'. Notice that the path starts with src instead of ../../.. dots when we use "relative" paths. Let's add the baseUrl parameter to our tsconfig.json:

{
  "compilerOptions": {
    ...
    "baseUrl": "./"
}

Awesome! We have just a couple of options left to be able to compile our TypeScript files:

{
  "compilerOptions": {
    ...
    "rootDir": "./src",
    "outDir": "./dist"
  },
  ...
  "include": ["src/**/*.ts"]
}

Let's add build and start commands to our package.json:

{
  ...
  "scripts": {
    ...
    "build": "tsc -p tsconfig.json && tsc-alias",
    "start": "node ./dist/main.js"
  }
}

❗ Note the tsc-alias command. It will replace absolute paths with relative paths after the typescript compilation.

Huh! It looks like we are ready to write some code. Let's create the main.ts file inside the src directory:

console.log('Hello, world!')

To be able to run this file, we need to add another command to the package.json:

{
  ...
  "scripts": {
    ...
    "dev": "tsx watch src/main.ts" 
  }
}

Hurray! Now, we can run our code with the npm run dev command.

Fastify Server

Let's create a Fastify server inside the src/server.ts file:

import Fastify from 'fastify'

export const createServer = async () => {
  const fastify = Fastify({
    logger: true,
  })

  fastify.get('/ping', (request, reply) => {
    reply.send({ message: 'pong' })
  })

  return fastify
}

Now, we need to update the src/main.ts to run the server:

import { createServer } from 'src/server'

const main = async () => {
  const fastify = await createServer()
  const port = 3000

  try {
    fastify.listen({ port }, () => {
      fastify.log.info(`Listening on ${port}...`)
    })
  } catch (error) {
    fastify.log.error('fastify.listen:', error)
    process.exit(1)
  }
}

main()

To check the server, open the browser and navigate to the localhost:3000/ping. We should see the { message: 'pong' } response. 🎉

Environment Variables

We set the server port to 3000, which could be a problem if we deploy our service to a Cloud Application Platform (port will be assigned by the platform in this case). Let's use environment variables to get the port number and other parameters.

We will set environment variables with the .env file. Let's create the .env file inside our project directory:

DATABASE_URL='Our database URL. We will set it later'
PINO_LOG_LEVEL=debug
NODE_ENV=development

To be able to load this file, Fastify has a nice @fastify/env plugin. This plugin allows you to set the schema for environment variables and will check that all environment variables are set correctly. But it's only available with Fastify or Request instance, so we will use the dotenv package in "other" cases.

Let's add the @fastify/env plugin configuration to the src/server.ts:

...
import env from '@fastify/env'

const schema = {
  type: 'object',
  required: ['PORT', 'DATABASE_URL'],
  properties: {
    PORT: {
      type: 'string',
      default: 3000,
    },
    DATABASE_URL: {
      type: 'string',
    },
    PINO_LOG_LEVEL: {
      type: 'string',
      default: 'error',
    },
    NODE_ENV: {
      type: 'string',
      default: 'production',
    },
  },
}

const options = {
  schema: schema,
  dotenv: true,
}

declare module 'fastify' {
  interface FastifyInstance {
    config: {
      PORT: string
      DATABASE_URL: string
      PINO_LOG_LEVEL: string
      NODE_ENV: string
    }
  }
}

export const createServer = async () => {
  const fastify = Fastify({
    logger: true,
  })

  /* Register plugins */
  await fastify.register(env, options).after()

  ...
}

And get the port number inside main.ts:

...

const main = async () => {
  const fastify = await createServer()
  const port = Number(fastify.config.PORT)

...

Pino Logger

We did enable logger before inside the createServer function:

  ...
  const fastify = Fastify({
    logger: true,
  })
  ...

And we can use it with the fastify.log or request.log functions. But if we want to use it "outside" of Fastify or Request instances, we need to create a separate logger instance and export it.

Let's create the src/utils/logger.ts file:

import pino, { Level } from 'pino'

export { Level }

type CreateLoggerArgs = {
  level: Level
  isDev: boolean
}

export const createLogger = ({ level, isDev }: CreateLoggerArgs) =>
  pino({
    level,
    redact: ['req.headers.authorization'],
    formatters: {
      level: (label) => {
        return { level: label.toUpperCase() }
      },
    },
    ...(isDev && { transport: { target: 'pino-pretty' } }),
  })

Now we can use it in createServer.ts:

import dotenv from 'dotenv'
import { createLogger, Level } from 'src/utils/logger'

...

dotenv.config()

const level = process.env.PINO_LOG_LEVEL as Level
const isDev = process.env.NODE_ENV === 'development'
const logger = createLogger({ level, isDev })

export { logger }

export const createServer = async () => {
  const fastify = Fastify({
    loggerInstance: logger,
  })

...

We are using the dotenv package here to load environment variables because we can't access the Fastify instance. Then, create the logger instance, export it, and assign it to Fastify.

Drizzle ORM

Let's create src/db/index.ts:

import { Pool } from 'pg'
import { drizzle } from 'drizzle-orm/node-postgres'
import dotenv from 'dotenv'

dotenv.config()

const pool = new Pool({
  connectionString: process.env.DATABASE_URL,
  ssl: true,
})

export const db = drizzle(pool)

Now, we need a schema. Create the src/db/schema.ts:

import {
  pgTable,
  timestamp,
  uuid,
  varchar,
  text,
} from 'drizzle-orm/pg-core'

const timestamps = {
  createdAt: timestamp('created_at').defaultNow(),
  updatedAt: timestamp('updated_at')
    .defaultNow()
    .$onUpdate(() => new Date()),
}

export const posts = pgTable('posts', {
  id: uuid('id').primaryKey().defaultRandom(),
  title: varchar('title', { length: 256 }).notNull(),
  content: text('text').notNull(),
  ...timestamps,
})

Before we can create a migration for our schema, we need to create a drizzle.config.ts configuration inside the project root:

import dotenv from 'dotenv'
import { defineConfig } from 'drizzle-kit'

dotenv.config()

export default defineConfig({
  out: './migrations',
  schema: './src/db/schema.ts',
  breakpoints: false,
  dialect: 'postgresql',
  dbCredentials: {
    url: process.env.DATABASE_URL as string,
  },
})

And add new scripts to package.json:

{
  ...
  "scripts": {
    ...
    "db:generate": "drizzle-kit generate",
    "db:migrate": "drizzle-kit migrate"
  },
...
}

Let's create our first migration with:

npm run db:generate

We will need a real database to apply migrations and store our data. You can install Postgres on your machine or use a Cloud Platform like Neon, Render, etc.

❗ Please set the DATABASE_URL parameter inside the .env configuration file.

Let's apply migration to the database:

npm run db:migrate

Now that the posts table is created, we can start to query our data.

Posts Route

We will start from the database query. Let's create the src/modules/posts/db.ts file:

import { desc } from 'drizzle-orm'
import { db } from 'src/db'
import { posts } from 'src/db/schema'

export const getPosts = async () => {
  const result = await db
    .select()
    .from(posts).    
    .orderBy(desc(posts.createdAt))
    .limit(10)

  return result
}

❗ We are selecting the last 10 posts. It's better to implement pagination here instead.

Now we can create the /posts endpoint handler inside the src/modules/posts/handler.ts:

import { FastifyReply, FastifyRequest } from 'fastify'
import { getPosts } from './db'

export const getPostsHandler = async (
  request: FastifyRequest,
  reply: FastifyReply,
) => {
  const data = await getPosts()

  return { data }
}

Let's add the getPostsHandler to the src/modules/posts/router.ts:

import { FastifyInstance } from 'fastify'
import { getPostsHandler } from './handler'

export const postsRouter = (fastify: FastifyInstance) => {
  fastify.get('/', getPostsHandler)
}

Now, we can add the "posts router" to our server. Let's update the server.ts:

...

  fastify.get('/ping', (request, reply) => {
    reply.send({ message: 'pong' })
  })

  /* Add the posts router under the `ping` endpoint */
  fastify.register(postsRouter, { prefix: 'api/posts' })

...

We are using the api/posts prefix, so our posts will be available with the localhost:3000/api/posts URL.

Conclusion

We have learned how to create a Fastify API server and query data from a PostgreSQL database with Drizzle ORM.

Please feel free to use this setup as a foundation for your next app, press the 💖 button, and happy hacking!

Credits

Photo by Stephen Dawson on Unsplash

Split Keyboard Adventure

Vladimir Vovk — Mon, 03 Mar 2025 17:45:01 +0000

Recently, I decided to give a try to a split keyboard. You can find a lot of people saying that spit keyboards improve their productivity, and posture, remove hand pain, etc. Sounds interesting, right?

I already have a couple of mechanical keyboards, so I expected to have the same "plug and play" experience, but I was wrong... 😁

I was familiar with the "layer" concept, but I never used it. So I didn't realize that working with a smaller set of keys using layers will take some time and practice to get used to it and build muscle memory again. Specifically, it is true for smaller keyboards like Corne which has 3 by 6 or 3 by 5 keys on each half.

A gentle intro into the "keyboard layers" term, if you never heard of it. The idea is simple and we all already using it with the Shift key. We just agree to have a different set of characters when we hold down another key. For example, when we press 1 we will get 1. But if we hold down the Shift key and press 1 we will get !. So, we do not need to have two separate keys for 1 and ! which is convenient.

Another interesting concept that could improve our typing experience is called "Home Row Mods". Because we do not have dedicated keys for mod keys (Cmd/Win, Option/Alt, Ctrl and Shift) anymore. And because they used a lot, we can make our "home row" keys to be mod keys instead. For example, when we press and release the F key it will return the F character. And when we hold the F key it will work as the Shift key. So at our "home row", we will have A/Ctrl, S/Alt, D/Cmd and F/Shift. And symmetrically on the other half: J/Shift, K/Cmd, L/Alt and ;/Shift. Pretty nifty, right?

In my case, I have a 3 by 5 Corne Mini keyboard (3 rows and 5 columns). Plus 3 "modifier/thumb" keys on each half. The question is how to set up all letters, numbers and symbols using available keys, so it would be comfortable to type.

I started by searching popular layouts. But after reading other people's thoughts I realized that, there is no "best way", since it depends on what you doing (which keys and symbols are used more). Some people even try to measure statistics on key usage and place them closer to index fingers, which I think makes sense.

Spent some time reading I decided to start with something simple and evolve my setup on the go.

First, the "Home Row Mod" looks like a nice thing. So, my default/main layer will have modifier keys on the "home row".

"Thumb/modifier" keys on the left half will be Tab/Nav, Space/Sym and ESC. The Tab/Nav means that when you tap and release the key it will return the Tab symbol. And when you tap and hold the key it will switch to the Nav (navigation) layer (Layer/Tap behavior). The same thing for the Space/Sym key. It will return Space on tap and Sym (symbol) layer on hold.

"Thumb/modifier" keys on the right half will be Backspace, Space/Sym and Enter/Nav.

As you can see I have the Space and Sym in the middle since they used more.

Next, I have my Nav (navigation) and NumPad layers.

The idea is simple. I want my Vim-styled arrow keys on the right. And NumPad on the left. Some people prefer to have NumPad on the right which is also nice.

And last, but not least - Sym (symbol) layer.

The main idea here is to place the characters I use more closer to my index fingers. But I'm constantly changing the order while working daily. So I believe, this layer will take some time until I will be happy. 😄

I hope this information will be helpful on your split keyboard journey. Please share your thoughts, questions, and ideas in the comments. Press the 💖 button, and happy hacking! 🙌🏻

Credits

Photo by Peppy Toad on Unsplash

Automate Your Dev Environment Setup

Vladimir Vovk — Fri, 21 Feb 2025 19:53:40 +0000

How many hours do you need to set up all your favorite tools on a new machine? What if your colleague or friend wants the same setup and asks you for help? Or maybe you want to change something, but you set it up a long time ago and have no idea what you need to change...

Thinking of these questions it will be nice:

if we can have all configs in one place;
easily reproduce our setup on a new machine;
easily share configs with other people;
be able to look into our config, understand what was done and be able to easily change it.

This problem bothered me for quite some time. I tried automation tools like Salt, Ansible, Nix... but all of them looks too complex and inconvenient for this task:

they are designed for different use case - many distributed machines;
they are slow;
you need to learn a lot before you can use it.

No really, do I need to learn a new language to be able to install some programs and manage my configs? (Hello, Nix! 😬)

Fortunately, I recently came across a course from mighty ThePrimeagen where he suggests using plane bash to automate environment setup.

When I heard that, my first thought was "Bash? No way! I will never use this old and ugly thing"... But maybe I should give it a try if nothing else worked for me..? I tried and suprisingly it worked!

Let us be honest, bash is not the "best language" in the world. It looks weird and even scary at first. But it is simple and it is worked perfectly in this case. I was able to write config scripts for all my programs in a couple of hours.

The idea is pretty simple. Let us have one folder for all of our configurations - ~/env-setup. Inside this folder, we will have dotfiles and scripts. The dotfiles will contain all our configuration files. Each program configuration will have a separate folder, e.g. nvim, nvim-another-config, zshell, vscode, etc. Inside the scripts folder, we will have our configuration scripts, e.g. nvim.sh, zshell.sh, vscode.sh, etc. Each script will have logic related to a particular program (or set of programs).

For example, let us take a look into tmux.sh:

#!/usr/bin/env bash

. bash-utils.sh

start "tmux"

log "install tmux.."
brew install tmux

log "install tmux-plugin-manager..."
git clone https://github.com/tmux-plugins/tpm ~/.tmux/plugins/tpm

source="$HOME/env-setup/dotfiles/tmux/.config/tmux/tmux.conf"
dest="$HOME/.config/tmux/tmux.conf"
link_config $source $dest

finish

First, we import the bash-utils.sh which contains helper functions that we use in all scripts. start, log and finish functions print helper messages to the terminal. brew install tmux will install tmux program. Then we will install the tmux plugin manager with the git clone command. After that, we will create a link from the ~/env-setup/dotfiles/tmux folder into ~/.config/tmux. So tmux will use our configuration instead of a default one. The link_config function is "smart" enough to back up our "old" config if exists. Or remove the "old" link if it was created before.

That's it. Pretty simple, right?

In case we want to install all our favorite programs at once we can run the _setup-all_.sh script which will just run all scripts one by one.

You can find all files in the env-setup repo. It is done for MacOS, but I believe we can do the same for Linux and Windows. Please clone it and create your environment setup. 🥳

Credits

Photo by Tudor Baciu on Unsplash

Post your thoughts, questions, and ideas in the comments, press the 💖 button, and happy hacking! 🙌🏻

Terminal Animations with Node.js

Vladimir Vovk — Thu, 26 Dec 2024 16:58:52 +0000

Node.js has the process object with stdout property which is a stream connected to stdout. Using the process.stdout property, we can access several useful properties and methods: columns, rows, cursorTo, and write. These are essentials to start "animate" something in the terminal.

Imagine we want to animate a falling "character" from top to bottom of the screen, which could be a small part of the "digital rain" animation from the Matrix movie.

To do this we will need several steps:

Write the character in a starting position.
Make a pause.
Remove the character.
Write the character into a new position.
Repeat...

const column = 0
const character = '$'

/* Pause for 1 second (1000 ms) */
const pause = () => new Promise((resolve) => setTimeout(resolve, 1000))

const main = async () => {
  /* Clear screen */
  console.clear()
  /* Hide cursor */
  process.stderr.write('\x1B[?25l')

  /* The number of rows */
  const rows = process.stdout.rows

  /* Starting from the first row on the top of the screen.
   * Going to the bottom of the screen `process.stdout.rows`.
   */
  for (let row = 0; row < rows; row++) {
    /* Set cursor into position `cursorTo(x, y)`
     * and write a character */
    process.stdout.cursorTo(column, row)
    process.stdout.write(character)
    /* Pause for 1 second */
    await pause()
    /* Set cursor into position and clear the character
     * (write a space) */
    process.stdout.cursorTo(column, row)
    process.stdout.write(' ')
  }

  /* Show cursor */
  process.stderr.write('\x1B[?25h')
}

main()

You can play with this code here.

Next, it will be nice to add some colors to our animation. We can use the great Ansis library for that.

Let's output something in green color:

/* import Ansis library */
import { green } from 'ansis'

const character = '$'

/* Apply green color to our character */
const coloredCharacter = green`${character}`

/* Write colored character to the terminal */
process.stdout.write(coloredCharacter)

Or even better animate the color from dark to light green:

import { rgb } from 'ansis'

const column = 0
const character = '$'

/* Pause for 1 second (1000 ms) */
const pause = () => new Promise((resolve) => setTimeout(resolve, 1000))

const main = async () => {
  /* Clear screen */
  console.clear()
  /* Hide cursor */
  process.stderr.write('\x1B[?25l')

  /* The number of rows */
  const rows = process.stdout.rows

  /* Starting from the first row on the top of the screen.
   * Going to the bottom of the screen `process.stdout.rows`.
   */
  for (let row = 0; row < rows; row++) {
    /* Use the `rgb` function to change color
     * from dark to light green */
    const g = Math.floor((255 / rows) * row)
    const coloredCharacter = rgb(0, g, 0)`${character}`

    /* Set cursor into position `cursorTo(x, y)`
     * and write a character */
    process.stdout.cursorTo(column, row)
    process.stdout.write(coloredCharacter)
    /* Pause for 1 second */
    await pause()
    /* Set cursor into position and clear the character
     * (write a space) */
    process.stdout.cursorTo(column, row)
    process.stdout.write(' ')
  }

  /* Show cursor */
  process.stderr.write('\x1B[?25h')
}

main()

We can create something interesting and cool-looking using these simple ideas and animation techniques. 🌟

See the Matrix digital rain in action with the npx jmatrix command and check out the source code on Github.

Credits

Photo by Lukas on Unsplash

Please post your thoughts, questions, and ideas in the comments, press the 💖 button, and happy hacking! 🙌🏻

Starting React Native Project in 2025

Vladimir Vovk — Mon, 25 Nov 2024 16:47:40 +0000

Updated to Expo 54.

The 2026 version is here.

We will use Expo's create-expo-app command recommended by the docs.

Also, we will add ESLint, Prettier, and some custom configurations that will make our development process better.

TLDR You can use one command npx create-expo-app -t expo-ts to create a new React Native project with all tools already set up for you (see README for details) or follow instructions below. 🤓

Please refer to the official React Native and Expo documentation for more details. 🤩

General setup

We will need the Node.js and Git installed before we start.

Please check the docs to ensure everything is installed on your machine.

Now let's create a new app.

Run npx create-expo-app@latest --template blank-typescript command.
Type your project name.
Change the directory to your project with cd <your-project-name> command.
Run npm run start to start Metro Bundler.
Press i to start the iOS simulator or a to run the Android emulator.📱

Absolute path imports

To use absolute path imports, e.g. import { ComponentA } from 'src/components/A' (notice path starts with src), we need to add baseUrl parameter to the compilerOptions of tsconfig.json.

{
  "compilerOptions": {
    "baseUrl": "./"
  },
  ...
}

Move App.tsx to src folder

It's good to have all source files in one place. So let's move App.tsx to src with mv App.tsx src command.

Next, we need to change the index.ts file inside our project's root to load the App component from the src folder:

import { registerRootComponent } from 'expo'

import App from 'src/App'

registerRootComponent(App)

Check code for errors

We can use TypeScript compiler and ESLint for this.

TypeScript Compiler

Let's add a new check-typescript script to our package.json.

...
"scripts": {
  ...
  "check-typescript": "tsc --noEmit"
},
...

Now we can run the npm run check-typescript command to check our code for errors with the TypeScript compiler.

ESLint

ESLint is a JavaScript linter that helps you find and fix errors in your code. It's a great tool to help you write better code and catch mistakes before they make it to production. In conjunction, you can use Prettier, a code formatter that ensures all the code files follow a consistent styling.

npx expo lint

If you're using VS Code, install the ESLint extension to lint your code as you type.

Add a new check-eslint script to our package.json.

...
"scripts": {
  ...
  "check-eslint": "eslint './src/**/*{js,ts,jsx,tsx}'"
},
...

Now we can run the npm run check-eslint command to check our code for errors with ESLint. And npm run check-eslint --fix to fix errors automatically.

Lint script

Let's combine TypeScript and ESLint checks so we can run both at once.

Add a new lint script to our package.json.

...
"scripts": {
  ...
  "lint": "npm run check-typescript && npm run check-eslint"
},
...

Prettier

Prettier is an opinionated code formatter. Let's install it.

npx expo install -- --save-dev prettier

We will also need .prettierrc.js config file in the project root.

module.exports = {
  semi: false,
  trailingComma: 'none',
  singleQuote: true,
  printWidth: 100,
  tabWidth: 2,
  useTabs: false,
}

Sort imports

Unsorted imports look ugly. Also, it could be hard to read and add new imports. So why not sort them automatically? We can do it with trivago/prettier-plugin-sort-imports.

npm install --save-dev @trivago/prettier-plugin-sort-imports

Add plugin configuration to the Prettier config .prettierrc.js:

module.exports = {
  // ... prettier config here

  plugins: ['@trivago/prettier-plugin-sort-imports'],
  importOrderSeparation: true,
  importOrderSortSpecifiers: true,
  importOrderCaseInsensitive: true,
  importOrder: [
    '<THIRD_PARTY_MODULES>',
    // '^(.*)/components/(.*)$', // Add any folders you want to be separate
    '^src/(.*)$',
    '^(.*)/(?!generated)(.*)/(.*)$', // Everything not generated
    '^(.*)/generated/(.*)$', // Everything generated
    '^[./]' // Absolute path imports
  ]
}

Changelog

We can use the standard-version tool to generate a changelog, bump the version of the app, and create a new tag automatically.

How It Works:

Follow the Conventional Commits Specification in your repository.
When you're ready to release, run standard-version.

npm install --save-dev standard-version

Create the .versionrc.js config:

module.exports = {
  types: [
    { type: 'feat', section: 'New features' },
    { type: 'fix', section: 'Bug fixes' },
    { type: 'change', section: 'Changes' },
    { type: 'chore', hidden: true },
    { type: 'docs', hidden: true },
    { type: 'style', hidden: true },
    { type: 'perf', hidden: true },
    { type: 'test', hidden: true }
  ]
}

We enabled the feat, fix, and change commit types. If you want to enable the other commit types, you can remove the hidden boolean and replace it with the section string, and provide a title.

Add new release script to package.json:

...
"scripts": {
  ...
  "release": "standard-version"
},
...

Now we can run the npm run release command to get the changelog.

Husky

Husky improves your commits and more 🐶 woof!

We will use Husky to check if our commit messages follow the conventional commits rules, run the lint check, and format staged code with Prettier and ESLint.

npm install --save-dev husky
npm install --save-dev @commitlint/config-conventional @commitlint/cli
npm install --save-dev lint-staged

Create a config for commitlint with commitlint.config.js file:

module.exports = {
  extends: ['@commitlint/config-conventional']
}

Setup lint-staged with package.json > lint-staged configuration:

...
  "lint-staged": {
    "**/*.{js,jsx,ts,tsx}": [
      "eslint './src/**/*{js,ts,jsx,tsx}' --fix",
      "prettier --write './src/**/*{js,ts,jsx,tsx}'"
    ]
  },
...

We can add the "no-console" rule to the eslint.config.js to check that no console.logs are committed:

module.exports = defineConfig([
  ...
  /* for lint-staged */
  {
    globals: {
      __dirname: true
    },
    rules: {
      'no-console': 'error'
    }
  }
  ...
])

Configure Husky with:

npx husky init

The init command simplifies setting up Husky in a project. It creates a pre-commit script in .husky/ and updates the prepare script in package.json.

To add a pre-commit hook we need to replace everything inside the .husky/pre-commit file with:

npx --no-install lint-staged

To add a commit message hook we need to create the .husky/commit-msg file with:

npm run lint && npx --no-install commitlint --edit "$1"

SafeAreaContext

react-native-safe-area-context provides a flexible API for accessing device-safe area inset information.

npx expo install react-native-safe-area-context

Wrap your App component with SafeAreaProvider:

import { SafeAreaProvider } from 'react-native-safe-area-context'

function App() {
  return <SafeAreaProvider>...</SafeAreaProvider>
}

And now we can use the SafeAreaView component.

SafeAreaView is a regular View component with the safe area insets applied as padding or margin.

Test with Jest and React Native Testing Library

Jest is a delightful JavaScript Testing Framework with a focus on simplicity.

npx expo install jest-expo jest @types/jest --dev

Update the package.json to include:

"scripts": {
  ...
  "test": "jest"
}

Jest has a number of globally-available functions, so we need to introduce these functions to ESLint with eslint-plugin-jest.

npm install --save-dev eslint-plugin-jest

Add 'jest' to the plugins section of the eslint.config.js configuration file. We can omit the eslint-plugin- prefix:

module.exports = defineConfig([
  ...
  {
    plugins: ['jest']
  }
])

The React Native Testing Library helps you to write better tests with less effort and encourages good testing practices.

The jest-native library provides a set of custom jest matchers that you can use to extend jest. These will make your tests more declarative, clear to read, and maintain.

npm install --save-dev @testing-library/react-native
npm install --save-dev @testing-library/jest-native
npm install --save-dev @testing-library/dom

Now it is time to add the jest.config.js configuration file:

/** @type {import('jest').Config} */
const path = require('path')

const config = {
  preset: 'jest-expo',
  setupFilesAfterEnv: [path.join(__dirname, 'setup-testing.js')],
  transformIgnorePatterns: [
    'node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg)'
  ],
  moduleDirectories: ['node_modules', '<rootDir>']
}

module.exports = config

And setup-testing.js configuration file to make the jest-native library work:

import '@testing-library/jest-native/extend-expect'

Let's also add eslint-plugin-testing-library and eslint-plugin-jest-dom. Both are ESLint plugins that help to follow best practices and anticipate common mistakes when writing tests with Testing Library. For more info, see the excellent Common mistakes with React Testing Library article by Kent C. Dodds. 🤓

npm install --save-dev eslint-plugin-testing-library
npm install --save-dev eslint-plugin-jest-dom

Add 'testing-library' to the plugins section and 'plugin:testing-library/react' to the extends section of our eslint.config.js configuration file:

module.exports = {
  ...
  extends: ['plugin:testing-library/react', 'plugin:jest-dom/recommended'],
  plugins: ['testing-library']
}

Now we can write our first test to the src/App.test.tsx file:

import { render, screen } from '@testing-library/react-native'

import App from 'src/App'

describe('App', () => {
  it('should mount without errors', () => {
    expect(() => render(<App />)).not.toThrow()
  })

  it('should unmount without errors', () => {
    render(<App />)
    expect(() => screen.unmount()).not.toThrow()
  })
})

And run it with the npm run test command.

Credits

Photo by Bill Jelen on Unsplash

Please post your favorite tools in the comments, press the 💖 button, and happy hacking! 🙌🏻

Check Disk Usage with Terminal

Vladimir Vovk — Sun, 22 Sep 2024 22:01:42 +0000

At some point, we all face the problem of free space on our hard drives. I usually check how much space a particular folder takes with the du terminal command. It shows the size of the folder itself and its subfolders.

$ du node_modules
0       node_modules/.bin
72      node_modules/commander/typings
240     node_modules/commander/lib
456     node_modules/commander
8       node_modules/prettier/bin
12416   node_modules/prettier/plugins
248     node_modules/prettier/internal
15304   node_modules/prettier
32      node_modules/chalk/source/vendor/supports-color
32      node_modules/chalk/source/vendor/ansi-styles
64      node_modules/chalk/source/vendor
104     node_modules/chalk/source
144     node_modules/chalk
15928   node_modules

To make it prettier we need to pass a couple of parameters. -h for "human readable" output and -d controls depth directories deep.

$ du -h -d 1 node_modules
  0B    node_modules/.bin
228K    node_modules/commander
7.5M    node_modules/prettier
 72K    node_modules/chalk
7.8M    node_modules

Now we can sort the output with the sort command. Where -h is for "human numeric" sort and -r for reverse.

$ du -h -d 1 node_modules | sort -hr
7.8M    node_modules
7.5M    node_modules/prettier
228K    node_modules/commander
 72K    node_modules/chalk
  0B    node_modules/.bin

Looks good, right? But could we have a simpler command with better defaults?

Yes! Meet hdu the human-friendly du wrapper.

Please make sure you have Node.js installed on your machine.

Type npx hdu node_modules to get information about the node_modules folder.

By default, it will display the sizes of all directories from the selected folder (or current folder if not specified) and sort them descending by their size.

Did you notice that the .bin directory is not in the list? That's because its size is equal to zero. 🥲

We can also display files with the --include-files option.

There is a --sort option to change the sorting order.

And if we need only the first results, we can use the --head option.

Please try hdu, give it a star 🌟, and happy hacking! 💻

Credits

Photo by Art Wall - Kittenprint on Unsplash

How to Change iOS Push Notifications Permission Dialog with Expo

Vladimir Vovk — Fri, 13 Sep 2024 00:43:46 +0000

To receive push notifications we need to ask the user permission first. The requestPermissionsAsync function will show the user standard dialog asking to allow displaying alerts, setting badge count, and playing sounds.

Unfortunately, the docs have no information on how to change the dialog's text and make it more personal for our app. I found this Apple Developer Forums thread which recommends setting the NSUserNotificationsUsageDescription key in the Info.plist file.

For React Native app we can easily do that with XCode. And for the Expo app, we can set it with app.json or app.config.js configuration files.

All we need to do is to go to the ios -> infoPlist section of the configuration file and add NSUserNotificationsUsageDescription key like so:

{
  "name": "My awesome app",
  "ios": {
    "infoPlist": {
      "NSUserNotificationsUsageDescription": "Allow notifications to stay up to date. These can be configured from the System Settings."
    }
  }
}

That's it! 🎉
Rebuild your app binary and enjoy your new permission text.

If this post was helpful to you please, give it a star 🌟, and happy hacking! 💻

Credits

Photo by Adem AY on Unsplash

Compress, Convert and Trim Videos with Command Line

Vladimir Vovk — Sun, 14 Jul 2024 20:07:33 +0000

ffmpeg

Often, we have videos of different formats and resolutions from our phones and cameras, and also from our friends and family. Sometimes, these videos are uncompressed, so they take up a lot of space.

There are many methods how we can solve this problem. But here, I would like to tell you about FFmpeg. It is a free and open-source tool available for all major operating systems. FFmpeg is fast and gives good results in compression, changing formats, and resolution.

To compress our favorite cats.mov video and convert it to mp4 format, we need to run:

ffmpeg -i cats.mov cats.mp4

Pretty easy, right? The only downside of this command is that ffmpeg does not give us a user-friendly UI. There is no progress bar or estimated time to finish.

menc

Introducing menc (media encoder), a small "wrapper" utility around ffmpeg which gives a nicer UI and can help to process several files more easily.

To compress the same cats.mov video with menc, we need to run:

npx menc cats.mov

It will use the mp4 format by default and create a cats.mp4 file in the same folder.

Please ensure you have Node.js installed on your machine.

If you want to extract audio or change resolution it can be done with the --format argument. For example, the following command will compress our video and change the resolution to full HD.

npx menc -f fhd cats.mov

You can find all supported formats with --help argument:

npx menc --help

To trim a media file, we can use the --start-time and --end-time arguments:

npx menc -s 10 -e 1:09:04 cats.mov

This command will compress the cats.mov file into cats.mp4 from the 10th second to 1:09:04.

If we want to trim a file without changing format (re-encoding) we can use the --copy argument:

npx menc -e 1:05 --copy cats.mp4

This command will trim the cats.mp4 (no re-encoding) into a new file from the beginning until 1:05.

To convert several files, we can use the wildcard character. For example, if we have more than one mov file, we can process them all with only one command:

npx menc *.mov

If we want to write results into a separate my_compressed_mp4_files folder, we can do that with the --dir argument:

npx menc -d my_compressed_mp4_files *.mov

Custom ffmpeg arguments are also supported. For example, if we need to scale a video file, making the width equal to 320 pixels, keeping the aspect ratio, we can use the --custom argument:

npx menc --custom '-vf scale=320:-2' cats.mp4

Or, if we want to set a bitrate for the output MP3 file to 64k to make it a smaller size:

npx menc -c '-b:a 64k' -f mp3 meow.mp3

Please try menc, give it a star 🌟, and happy hacking! 💻

Credits

Photo by Alan Alves on Unsplash

Learning Flexbox Details by Building a Button in React Native

Vladimir Vovk — Sat, 05 Aug 2023 16:55:45 +0000

Imaging we need to build a simple UI for an article preview. Something like this one:

Let's start building it from the bottom. Why not? 🙃

We can use the Pressable and Text components to create the "Learn more" button.

import { Text, Pressable } from 'react-native'

type Props = {
  children: string
}

export const Button = ({ children }: Props) => {

  return (
    <Pressable style={({pressed}) => ({
      padding: 12,
      borderWidth: 1,
      borderRadius: 6,
      backgroundColor: pressed ? 'lightyellow' : 'white',
    })}>
      <Text>{children}</Text>
    </Pressable>
  )
}

Pretty simple, right?

But wait, why the button is stretched full width? 🤔

We did not use the flex: 1, flexGrow: 1, or width: '100%' in our styles. 😬

Let's try to find the answer in the React Native Flexbox docs.

flex will define how your items are going to “fill” over the available space along your main axis.

Ok, flex controls only the "main" axis. But what is the "main" axis?

flexDirection controls the direction in which the children of a node are laid out. This is also referred to as the main axis. The cross axis is the axis perpendicular to the main axis, or the axis which the wrapping lines are laid out in (flexDirection is default to column).

So, according to the docs the "main" axis for React Native by default is directed from top to bottom (which is different for the web❗️). It means, that in our case, flex and flexGrow styles do not affect the width of the button.

And what about the "cross" axis?

alignItems describes how to align children along the cross axis of their container. It is very similar to justifyContent but instead of applying to the main axis, alignItems applies to the cross axis (alignItems is default to stretch).

Eureka! That is it. As we can see now, for every element we add, the default behaviour for the "cross" axis will be stretch. That is why our button is stretched full width.

Let's try to fix it!

To do that, we need to change the "align" style for the "cross" axis, right? Theoretically, we can wrap the Pressible component with the View component and set the alignItems style for the wrapper View component to flex-start.

import { Text, Pressable, View } from 'react-native';

type Props = {
  children: string;
};

export const Button = ({ children }: Props) => {
  return (
    <View style={{ alignItems: 'flex-start' }}>
      <Pressable
        style={({ pressed }) => ({
          padding: 12,
          borderWidth: 1,
          borderRadius: 6,
          backgroundColor: pressed ? 'lightyellow' : 'white',
        })}>
        <Text>{children}</Text>
      </Pressable>
    </View>
  );
}

Looks good! 😻

But can we do it better without the "extra" View component? The answer is yes, we can! 💪

alignSelf has the same options and effect as alignItems but instead of affecting the children within a container, you can apply this property to a single child to change its alignment within its parent.

Wow, that is exactly what we need! 🎉

We just need to apply the alignSelf: 'flex-start' style to the Pressible component. Let's try it.

import { Text, Pressable } from 'react-native';

type Props = {
  children: string;
};

export const Button = ({ children }: Props) => {
  return (
    <Pressable
      style={({ pressed }) => ({
        padding: 12,
        borderWidth: 1,
        borderRadius: 6,
        backgroundColor: pressed ? 'lightyellow' : 'white',
        alignSelf: 'flex-start',
      })}>
      <Text>{children}</Text>
    </Pressable>
  );
};

Yey! It is what we wanted to achieve. 🥳

Awesome! I feel like we learned a lot just by building a simple button. That's amazing! 😊

Please, press the 💖 button, if you like this article, and have a happy hacking! 🙌🏻

P.S. You can play with the code using this Expo Snack.

Credits

Photo by kike vega on Unsplash

Image by Susann Mielke from Pixabay

Starting React Native Project in 2024

Vladimir Vovk — Fri, 06 Jan 2023 15:42:13 +0000

Updated to Expo 50.

There are many ways to start a new React Native project. Here we will be using Expo's create-expo-app command line tool because:

It has nice defaults out of the box.
It is compatible with Expo packages, which are usually very good, well-tested, and have excellent documentation.
We can easily switch to a "bare" react-native app at any moment with one npx expo eject command. See the docs to learn the difference between managed and bare workflows.

Also, we will add TypeScript, ESLint, Prettier, and some custom configurations that will make our development process better.

TLDR You can use one command npx create-expo-app -t expo-ts to create a new React Native project with all tools already set up for you (see README for details) or follow instructions below. 🤓

Please refer to the official React Native and Expo documentation for more details. 🤩

General setup

We will need Node.js, Git and Yarn before we start.

Please check React Native Setup Guide to ensure that everything is installed on your machine.

Awesome! 👍🏻
Now let's create a new app.

Run npx create-expo-app command.
Type your project name.
Change the directory to your project with cd <your-project-name> command.
Run yarn start to start Metro Bundler.
Press i to start the iOS simulator or a to run the Android emulator.📱

Tools

TypeScript

Let's add TypeScript support.

Create an empty tsconfig.json file in your project root: touch tsconfig.json.
Rename App.js to App.tsx: mv App.js App.tsx.
Run yarn start. It will prompt you to install the required dependencies (typescript, @types/react, @types/react-native), and automatically configure your tsconfig.json.

Absolute path imports

To use absolute path imports, e.g. import { ComponentA } from 'src/components/A' (notice path starts with src), we need to add baseUrl and paths parameters to the compilerOptions of tsconfig.json.

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "src/*": ["src/*"]
    },
    "strictNullChecks": true
  },
  ...
}

Also, we need to create src/package.json file.

{
  "name": "src"
}

Also, we will need to install the babel-plugin-module-resolver to be able to run our project on the web.

☝🏻 You can safely skip it, if you targeting only mobile platforms.

yarn add --dev babel-plugin-module-resolver

Specify the plugin configuration in babel.config.js:

module.exports = function(api) {
  api.cache(true);
  return {
    // ... presets settings goes here
    plugins: [
      [
        'module-resolver',
        {
          root: ['.'],
          alias: {
            src: './src'
          }
        }
      ],
    ]
  };
};

Move App.tsx to src folder

It's good to have all source files in one folder. So let's move App.tsx to src with mv App.tsx src command.

Next, we need to create a new App.js file inside our project's folder with touch App.js. And import our app logic there:

import App from 'src/App'

export default () => <App />

Prettier

Prettier is an opinionated code formatter. Let's install it.

yarn add -D prettier

We will also need .prettierrc.js config file in the project root.

module.exports = {
  semi: false,
  trailingComma: 'none',
  singleQuote: true,
  printWidth: 100,
  tabWidth: 2,
  useTabs: false,
}

Sort imports

Unsorted imports look ugly. Also, it could be hard to read and add new imports. So why not sort them automatically? We can do it with trivago/prettier-plugin-sort-imports.

yarn add --dev @trivago/prettier-plugin-sort-imports

Add plugin configuration to the Prettier config .prettierrc.js:

module.exports = {
  // ... prettier config here

  importOrderSeparation: true,
  importOrderSortSpecifiers: true,
  importOrderCaseInsensitive: true,
  importOrder: [
    '<THIRD_PARTY_MODULES>',
    // '^(.*)/components/(.*)$', // Add any folders you want to be separate
    '^src/(.*)$',
    '^(.*)/(?!generated)(.*)/(.*)$', // Everything not generated
    '^(.*)/generated/(.*)$', // Everything generated
    '^[./]' // Absolute path imports
  ]
}

Check code for errors

We can use TypeScript compiler and ESLint for this.

TypeScript Compiler

Let's add a new check-typescript script to our package.json.

...
"scripts": {
  ...
  "check-typescript": "tsc --noEmit"
},
...

Now we can run yarn check-typescript command to check our code for errors with the TypeScript compiler.

ESLint

ESLint has a lot of configuration options and rules. Let's start with the Expo eslint-config-universe package.

yarn add --dev eslint-config-universe
yarn add --dev eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser
yarn add --dev eslint-plugin-react-hooks
yarn add --dev eslint-import-resolver-typescript
yarn add --dev eslint-plugin-prettier

Add .eslintrc.js config file to the project root.

module.exports = {
  extends: ['universe', 'universe/shared/typescript-analysis', 'plugin:react-hooks/recommended'],
  overrides: [
    {
      files: ['*.ts', '*.tsx', '*.d.ts'],
      parserOptions: {
        project: './tsconfig.json'
      }
    }
  ],
  settings: {
    'import/resolver': {
      typescript: {} // this loads <rootdir>/tsconfig.json to ESLint
    }
  },
  /* for lint-staged */
  globals: {
    __dirname: true
  },
  rules: {
    'no-console': 'error'
  }
}

Add a new check-eslint script to our package.json.

...
"scripts": {
  ...
  "check-eslint": "eslint './src/**/*{js,ts,jsx,tsx}'"
},
...

Now we can run the yarn check-eslint command to check our code for errors with ESLint. And yarn check-eslint --fix to fix errors automatically.

Lint script

Let's combine TypeScript and ESLint checks together so we can run both at once.

Add a new lint script to our package.json.

...
"scripts": {
  ...
  "lint": "yarn check-typescript && yarn check-eslint"
},
...

Changelog

We can use the standard-version tool to generate a changelog, bump the version of the app and create a new tag automatically.

How It Works:

Follow the Conventional Commits Specification in your repository.
When you're ready to release, run standard-version.

yarn add --dev standard-version

Create the .versionrc.js config:

module.exports = {
  types: [
    { type: 'feat', section: 'New features' },
    { type: 'fix', section: 'Bug fixes' },
    { type: 'change', section: 'Changes' },
    { type: 'chore', hidden: true },
    { type: 'docs', hidden: true },
    { type: 'style', hidden: true },
    { type: 'perf', hidden: true },
    { type: 'test', hidden: true }
  ]
}

In this config, we enable the feat, fix, and change commit types. And if you want to enable the other commit types, you can remove the hidden boolean and replace it with the section string and provide a title.

Add new release script to package.json:

...
"scripts": {
  ...
  "release": "standard-version"
},
...

Now when you are ready to release, just run the yarn release command.

Husky

Husky improves your commits and more 🐶 woof!

We will use Husky to check if our commit messages follow the conventional commits rules, run the lint check, and format staged code with Prettier and ESLint.

yarn add --dev husky
yarn add --dev @commitlint/config-conventional @commitlint/cli
yarn add --dev lint-staged

Create a config for commitlint with commitlint.config.js file:

module.exports = {
  extends: ['@commitlint/config-conventional']
}

Setup lint-staged with package.json > lint-staged configuration:

...
  "lint-staged": {
    "**/*.{js,jsx,ts,tsx}": [
      "eslint './src/**/*{js,ts,jsx,tsx}' --fix",
      "prettier --write './src/**/*{js,ts,jsx,tsx}'"
    ]
  },
...

Configure Husky with:

npx husky init

The init command simplifies setting up husky in a project. It creates a pre-commit script in .husky/ and updates the prepare script in package.json.

To add a pre-commit hook we need to replace everything inside the .husky/pre-commit file with:

npx --no-install lint-staged

To add a commit message hook we need to create the .husky/commit-msg file with:

yarn lint && npx --no-install commitlint --edit "$1"

SafeAreaContext

react-native-safe-area-context provides a flexible API for accessing device-safe area inset information.

npx expo install react-native-safe-area-context

Wrap your App component with SafeAreaProvider:

import { SafeAreaProvider } from 'react-native-safe-area-context'

function App() {
  return <SafeAreaProvider>...</SafeAreaProvider>
}

And now we can use the SafeAreaView component.

SafeAreaView is a regular View component with the safe area insets applied as padding or margin.

Test with Jest and React Native Testing Library

Jest is a delightful JavaScript Testing Framework with a focus on simplicity.

npx expo install jest-expo jest
yarn add --dev @types/jest

Update the package.json to include:

"scripts": {
  ...
  "test": "jest"
}

Jest has a number of globally-available functions, so we need to introduce these functions to ESLint with eslint-plugin-jest.

yarn add --dev eslint-plugin-jest

Add 'jest' to the plugins section of the .eslintrc.js configuration file. We can omit the eslint-plugin- prefix:

module.exports = {
  ...
  plugins: ['jest']
}

The React Native Testing Library helps you to write better tests with less effort and encourages good testing practices.

The jest-native library provides a set of custom jest matchers that you can use to extend jest. These will make your tests more declarative, clear to read, and maintain.

yarn add --dev @testing-library/react-native
yarn add --dev @testing-library/jest-native
yarn add --dev @testing-library/dom

Now it is time to add the jest.config.js configuration file:

/** @type {import('jest').Config} */
const path = require('path')

const config = {
  preset: 'jest-expo',
  setupFilesAfterEnv: [path.join(__dirname, 'setup-testing.js')],
  transformIgnorePatterns: [
    'node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg)'
  ]
}

module.exports = config

And setup-testing.js configuration file to make the jest-native library work:

import '@testing-library/jest-native/extend-expect'

yarn add --dev eslint-plugin-testing-library
yarn add --dev eslint-plugin-jest-dom

Add 'testing-library' to the plugins section and 'plugin:testing-library/react' to the extends section of our .eslintrc.js configuration file:

module.exports = {
  ...
  extends: ['plugin:testing-library/react', 'plugin:jest-dom/recommended'],
  plugins: ['testing-library']
}

Now we can write our first test to the src/App.test.tsx file:

import { render, screen } from '@testing-library/react-native'

import App from 'src/App'

describe('App', () => {
  it('should mount without errors', () => {
    expect(() => render(<App />)).not.toThrow()
  })

  it('should unmount without errors', () => {
    render(<App />)
    expect(() => screen.unmount()).not.toThrow()
  })
})

And run it with the yarn test command.

What to add next?

Credits

Photo by SpaceX on Unsplash.

You can find the 👴🏻 2022 version of this article here.

Please post your favorite tools in the comments, press the 💖 button, and happy hacking! 🙌🏻