DEV Community: Aman Mittal

First few days with Codex CLI

Aman Mittal — Thu, 08 Jan 2026 07:46:37 +0000

There's something oddly satisfying about watching an AI agent read your messy notes and actually understand them.

I stumbled onto this realization after months of living entirely in Cursor. It had become my home base for code in 2025. Honestly, I was pretty happy in Cursorland. But I kept hitting this wall with my Obsidian vault, a place where I store all of my notes. Every time I wanted AI help with my notes, I had two options: open my entire vault in Cursor or copy-paste context back and forth either in Cursor or Claude/ChatGPT. I have to say, the second option is tiresome. Neither felt right.

When I read about AI agents running inside a terminal window like OpenAI's Codex CLI or Anthropic's Claude Code, something clicked. Why not just use them for non-coding-related tasks from the terminal? An AI agent can already see any directory on my machine when I am accessing that directory within the terminal window. My notes inside Obsidian are markdown files. The friction I was fighting against was entirely self-inflicted.

Now Codex CLI helps me create meeting summaries and organize tasks. It also proofreads and plays the role of an editor for my longer articles, like the one you are reading. It's like having a rubber duck that actually talks back and knows stuff.

What is Codex CLI

Codex CLI (Command-line interface) is OpenAI's version of a local coding agent that runs inside your terminal. You can talk to it in plain English, and possibly other natural languages. It can read your files, modify them, run code, and integrate different tools through Model Context Protocol (MCP) servers that run on your machine.

The key insight here is simple: your terminal already has access to everything. External apps like Obsidian, which stores everything as plain markdown files on your computer, become instantly accessible. No plugins. No API keys. Just cd into your vault and start chatting. And the good part is you don't have to be a terminal wizard or know everything about your current session.

Why I actually like the CLI approach

You might think a command-line interface is a step backward from pretty chat windows (even inside code editors like Cursor or Claude's/ChatGPT's desktop app). I disagree.

The killer feature for me is that Codex generates AGENTS.md and SKILL.md files, which are plain markdown files that live inside your project. A markdown file (.md) is a lightweight markup language that allows you to use plain text with minimal syntactic sugar, for example, _italic_, **bold**, ## Heading level 2, and so on.

Before switching to Codex, I was a heavy Claude user through its web and desktop apps. When switching to ChatGPT and Codex, I had to manually copy-paste or save some of my conversations to continue them and to not lose context.

Using a CLI app removes the possibility of a chat-like conversation in a beautiful environment, even though I think terminal interfaces are charming. It also allows you to create artifacts that you can locally save on your machine in Markdown files, if you decide to move to a different vendor tomorrow.

The goal with AI agents, I think, is to never repeat yourself. Having your workflows in version-controllable markdown files gets you surprisingly close to that ideal.

Even if you're not a developer and the blank terminal screen looks intimidating — give it 30 minutes. I promise the learning curve is smaller than you think.

How to quickly install Codex CLI

The way I choose to install Codex CLI is by using global npm packages inside a terminal window. Before you do that, you should install Node.js on your machine. There are other ways you can opt to install Codex CLI and you can view them from Codex's documentation page. You only need to install Node.js if you are following the installation method below.

Installing Node.js is one of the first few things I do when I am setting up my macOS. Node.js is a runtime environment that allows you to run apps like Codex CLI or Claude Code.

If you are on a different operating system, here are the installation guides:

Windows: Set up Node.js on native Windows
Linux: How to install Node.js on Linux

Once Node.js is installed, run the following command to install Codex CLI:

npm install --global @openai/codex

In terminal apps (like Terminal.app on macOS), a command is written as a text string followed by flags or options (such as --global) and their input values. They are executed by pressing Enter on your keyboard.

Your first session with a few common commands

Let's verify if the installation worked. Run the following command:

codex --version

You will receive an output like the following:

codex-cli 0.77.0

If you get back an output like the above, that means the installation process went smoothly.

Do note that in the above output, the 0.77.0 is the version of codex-cli at the time of writing this post. Depending on when you come across this post, the version displayed in your terminal will increment.

The next command you need to run is to authenticate with your OpenAI account:

codex login

After running this command, follow the authorization process from your terminal window. It will probably ask you to authorize access by opening a link in your machine's default web browser.

The next command you are going to run is to ask a question about your project. So, open your project inside the terminal window.

There are three ways you can open your project inside the terminal window. If you know your way inside a terminal window, then do so.

If not, you can always navigate to your project directory from the Finder app (file browser on macOS), and right-click on the project directory. Then, under Services, choose New Terminal at Folder or New Terminal Tab at Folder. Either of these options will open a terminal window and the navigation to the project directory will be done by your operating system for you.

If both options do not work for you, the third option is to ask ChatGPT.

After you have opened your project inside the terminal window, run the following command to start the process:

codex

Since this is your first time running the above command inside your project directory, you will see a prompt asking to take an action:

The first time you run this, it asks about permissions. You can choose between "auto" mode (Codex does whatever it needs) or "ask me first" mode. I use full auto now, but if you're nervous, start with the approval mode. You can always change it later.

Once you select an option, press Enter to continue. You will be welcomed by the start screen.

The default model is gpt-5.2-codex at medium reasoning. You can change both with /model and by adjusting reasoning settings.

Its reasoning level is also set to medium:

Try asking something simple: "what is this folder about?" in natural language (you can even try Hinglish :D). Depending on the model and reasoning level, you'll get anything from a brief summary to a detailed analysis of every file and subdirectory.

If you set the reasoning to max, you may get a verbose answer back from Codex, as it will spend more time exploring your project files and folders.

In both of the last two screenshots, you will see the actual logs the Codex model used to reach a conclusion. This also includes the Bash commands (ls) to list all files and folders. I find it weirdly reassuring to watch Codex run ls commands and actually explore the directory structure. You can see exactly what it's doing to form its answer.

Continue your last Codex session

What happens when you quit Codex and realize you weren't done?

When you exit (Ctrl+C), Codex shows you a session ID. Copy that ID and run:

codex resume ID

Once you run this command, it will open the conversation as if it was never closed. To continue the most recent conversation, you can also run codex resume --last.

A session started with the resume option will contain the context of your conversation. This works because all of your session logs are stored under the ~/.codex/sessions/ directory on your machine. The file format used by Codex is JSON Lines text format. These files contain timestamps, message types, the actual message you send, the output, token usage, and more.

Here's a fun fact I discovered: if you use the Codex extension in VS Code or Cursor, those sessions are the same files. You can start a conversation in your terminal and continue it in your editor, or vice versa.

I thought this was genuinely thoughtful design when I found it.

Useful Codex commands

Anytime you want to explore or run a Codex CLI system command, you can press / in your session. It will provide you with a list of commands it can run.

For example, if you run /status, it will show the current session configuration and token usage.

Some common ones you might find useful:

/init — Bootstrap initialization templates and settings
/new — Switch to a new conversation (clear session state)
/model — Switch AI model
/compact — Summarize and compress the conversation history tokens
/status
/quit — End the session (codex)

Codex CLI supports Bash commands and terminal shortcuts

If you think your terminal window is becoming overwhelming, you can always press Ctrl + K within a Codex session since it supports this shortcut and other Bash commands.

To run a Bash command, prefix it with ! and it runs immediately:

!ls           # List files
!pwd          # Where am I?
!git status   # Check git state

The output appears inline and stays in the conversation history. So instead of switching terminals to check git status and then describing what you see, just run it. Codex sees the output and can reference it. Small feature, big friction reducer.

Example: Using Codex as an editor

Different projects need different rules. My Obsidian vault behaves nothing like my code repositories.

When I started using Codex in my vault, I ran /init to create an AGENTS.md file, then customized it with instructions about how I write, what style I prefer, and what Codex should focus on when editing my drafts.

You can point Codex to specific files using @filename syntax for the correct file to read. (Yes, using @, you can refer to any file in your current project directory.) And keeping AGENTS.md at your project root means Codex checks it automatically at the start of each session.

In the first use case, my goal for Codex is to act as a strict editor and do multiple rounds of reviews. I'm the primary writer and I have my own personal writing style guide that I tend to follow at times when writing long articles.

My setup looks roughly like this:

Obsidian Vault (markdown files) ----\
                                     \
                                      > Codex CLI session -> Edits, summaries, reviews
                                     /
Project context files --------------/

For example, while writing this blog post, midway through the first draft, I asked Codex to review this post. Here's the output:

I have used Grammarly for years to catch typos in my initial drafts. After seeing results with Codex, it's sufficient for me to switch to Codex.

As I mentioned earlier in this post, Codex is a smart partner that can help you improve your work. Don't use it to take shortcuts; instead, take your time and learn with it. Especially with writing. There is no such thing as vibe-writing.

The above AGENTS.md I shared is what I actually use inside the Obsidian app to help me stay focused and improve my initial drafts when I am writing something for my blog.

Using Codex to manage your notes or summarize in Obsidian

I keep all my work meeting notes in an Obsidian directory called work-meetings. At year's end, I wanted an index linking to every meeting. So I asked Codex:

"Create an index.md file for all the meetings I had in 2025 and link to those meeting notes."

34 seconds later, I had a properly formatted index file with working links.

I also use an #idea/* tag convention for blog post ideas. I asked Codex to find all those tags, then asked how it could help me develop them:

Example: Syncing from Linear to Obsidian

Here's where things get interesting. I wanted my Linear "Todo" tasks to appear in my Obsidian vault so I wouldn't have to keep checking the Linear web app throughout the day.

Requirements:

No API keys
Use my existing logged-in browser session
Pull tasks directly into a markdown file

Using Codex CLI agent

Before diving into details about the skill, let's grasp the fact that Codex CLI can do things on your behalf. It's an agent. Here's an example query I asked Codex CLI: open amanhimself.dev. Running this query, Codex uses the default web browser set on my system and opens the link.

Troubleshooting

If the above natural language instruction does not work for you, you need to ensure that approval for this project directory (current working directory where you are running codex) has Agent (current) access.

To do so, within Codex CLI, run the slash command /approval and select the second option under Select Approval Mode:

Continue using Codex CLI agent

The previous query was quite simple and a stepping stone. Let's use the Codex CLI agent to open the website, do a search, and then open that web link on the blog.

It kind of works. If you look at the above screen recording, in a web browser tab, it opens the blog, does a quick search for the blog post title, but cannot open the link.

Codex CLI can't "click around websites like a human" by itself. But you can extend what it can do with Model Context Protocol (MCP) servers.

What's Model Context Protocol (MCP)?

MCP is an open standard that lets AI models connect to external tools. Think of it as a universal adapter - it lets Codex talk to your browser, Figma, documentation sites, whatever. The official MCP docs explain it better than I can here.

Setting Up Playwright MCP

Microsoft's Playwright MCP provides a server that enables Codex CLI to interact with web pages. Codex CLI has first-class support for connecting to any MCP server.

Adding it takes one command:

codex mcp add playwright npx "@playwright/mcp@latest" --extension

You can verify it's there with:

codex mcp list

Alternatively, you can add the following config to your global Codex configuration file:

[mcp_servers.playwright]
command = "npx"
args = ["@playwright/mcp@latest", "--extension"]

On macOS, this file is located at: ~/.codex/config.toml.

In the above configuration, --extension is important. It's a special argument that Playwright accepts to connect to a running browser instance inside Chrome or Edge. It also requires that the browser has the "Playwright MCP Bridge" extension installed.

Back to the original query: open amanhimself.dev, click search, search for week notes 01, and open result. To run this, you need to run codex first and then run the query.

Install Playwright MCP Bridge extension

Playwright MCP Bridge extension works with Chrome and Edge. It allows you or an AI agent to launch the MCP server against an existing browser profile. If you use a browser profile like work, it will continue to use that and there is no requirement for you to log in to the web apps you want Codex to access.

To install this extension, you'll have to do it manually:

Download the Playwright MCP extension and unzip the file.
Open chrome://extensions or edge://extensions in your browser.
Enable Developer Mode.
Click Load unpacked and select the extension folder.

After following the steps above, you will see the Playwright MCP Bridge in your browser's extension list.

Once installed, pin the extension in your browser and click on it. It will give you a PLAYWRIGHT_MCP_EXTENSION_TOKEN. Copy the variable name and its value into ~/.codex/config.toml:

[mcp_servers.playwright.env]
PLAYWRIGHT_MCP_EXTENSION_TOKEN = "your-token-value"

For extension bridge mode, this token is necessary. This token tells the MCP server (Playwright MCP) to connect to your existing Chrome or Edge session via the Playwright MCP Bridge extension.

Sync Linear tasks into Obsidian workflow

With everything configured, I tested pulling my Linear todos:

Open https://linear.app/expo/my-issues/assigned

Wait for the page to load
Find the "Todo" group in the current browser window
Read the task titles, grab their issue keys, and save each task with a link back to Linear

This flow gave me a reliable checklist in my vault. I had to tell Codex the location of the file to save the tasks inside the Obsidian vault.

I compared the result to my actual Linear view. Every task synced correctly.

Making the workflow reusable with Skills

The final step was converting this workflow into a reusable skill. Skills extend Codex with task-specific capabilities and use a SKILL.md file inside a directory that has the name of the actual skill. The skill should run all the steps from the workflow defined in the previous section, every time it's asked.

A Skill is a package of instructions (in a markdown file), resources, and optional scripts so Codex can follow the workflow reliably. Do you remember that we created AGENTS.md earlier in this post for Codex to act as an editor for my writing? That can be a skill in itself that you can run on demand, and you won't have to keep an AGENTS.md file around or use it for project specification.

Skills for tools like Codex CLI or Claude Code are often built on the Agent Skills standard.

Obsidian doesn't let you create directories starting with a . character. Otherwise, I could have created a skills directory called .codex/skills, since that is the standard convention Codex seems to follow.

So I put my skills in LLMS/skills/. Each skill gets its own subdirectory with a SKILL.md file. For the Linear-to-Obsidian workflow, I named the skill linear-to-obsidian. Now, anytime I ask Codex to run the skill, I can type sync linear todo in Codex CLI and it will update the Tasks.md file in my vault.

To create your own skills, I'd highly recommend asking Codex to start the process and create the file with instructions. Then, you can edit them and tweak them as per your workflow's needs. Much faster. No need to write a SKILL.md from scratch.

Wrapping up

Codex CLI represents something I've wanted for a while: AI that works where my files already live, without forcing everything through a chat window or a code editor.

The workflows I've shown here barely scratch the surface. Once you understand how skills work, you can automate pretty much any multi-step process that involves reading, modifying, or creating files.

I'm convinced that using AI agents and working with LLMs has changed a lot in 2025. In 2024, LLMs were good at building toy apps. In 2025, they're good at building daily workflows. Tools like Codex CLI make AI useful for the boring, repetitive stuff that actually eats your time.

The terminal might seem like an odd place to find the future. But then again, the best tools usually are.

Stash changes in a git repository with VS Code

Aman Mittal — Tue, 12 Mar 2024 09:57:39 +0000

git stash is a useful command that temporarily stores current changes in a Git repository without committing them, making it possible to return to them later.

Stash using VS Code

Visual Studio Code (VS Code) is a highly capable code editor that offers many well-thought-out functionalities. Even after using it for years, I still find new things about it.

Using in-built Source Control, you can quickly view the modified files and temporarily save them by stashing them:

In VS Code, go to the Source Control tab.
Click the three-dotted menu (...) next to Source Control to open a dropdown menu.
In the menu, select Stash > Stash (Include Untracked).
That's it. The file changes are now stashed locally.

Bring the latest stashed changes to a branch

Let's assume you've now created a new branch where you want to bring those changes that are saved temporarily.

In VS Code's Source Control, open the dropdown menu.
Select Stash > Apply Latest Stash.

You can now bring those changes to the current branch and commit them.

Conclusion

Stashing is particularly useful when you want to fix something and keep those changes around so you can return to them later. Collecting the stashed changes can result in a new branch, where local changes can be brought later.

Change comment color visibility in a VS Code theme

Aman Mittal — Fri, 22 Dec 2023 22:16:33 +0000

Switching to a different theme in VS Code can often lead to a mismatch in personal preferences. I enjoy personalizing themes with subtle modifications, especially when I find one theme that suits my taste.

I recently started using Digi-Angler Dark theme, a variant of the renowned Dracula color scheme. Returning to a dark theme after a while felt like familiar territory, reminiscent of my years using the Dracula theme in VS Code.

The issue with the comment color

Using Digi-Angler, one thing that is a bit too much for me is the color value used for code comments. I prefer comment colors that blend into the background, a preference shaped by my experiences across various code editors, terminal apps, and even while reading code on documentation sites. The sharp, eye-catching color used for comments in this theme didn't sit well with me.

Customizing comment color in VS Code

To address this, I stumbled upon editor.tokenColorCustomizations in VS Code. It is a feature that allows altering specific color values in the active theme. You add this property to your editor's settings.json file and specify the scope for the desired change.

Using textMateRules for Token Customization

VS Code's tokenization engine is based on TextMate grammars, and the customization is done within textMateRules. Here's how you can change the comment color:

{
  "editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "scope": "comment",
        "settings": {
          "foreground": "#9c9c9c"
        }
      }
    ]
  }
}

The above code snippet applies the comment color #9c9c9c to all themes you use inside VS Code. It also means when you switch from one theme to another, this comment will remain consistent.

Theme specific customization

To tweak the token value for a particular theme, wrap textMateRules with the theme name. The following examples demonstrate defining the name of the [theme] only applies the comment color #9c9c9c for that theme.

{
  "editor.tokenColorCustomizations": {
    "[Digi-Angler Dark Theme]": {
      "textMateRules": [
        {
          "scope": "comment",
          "settings": {
            "foreground": "#9c9c9c"
          }
        }
      ]
    }
  }
}

Conclusion

VS Code's flexibility in customization is a significant advantage. It allows you to tailor any theme to your liking. To learn more about syntax highlighting, tokens, and scopes, see VS Code documentation.

How to add opacity to a Pressable component in React Native

Aman Mittal — Sun, 28 Aug 2022 05:53:00 +0000

Pressable component was introduced in 2020 as a core component wrapper that can be used instead of existing touchable components in React Native. These touchable components are TouchableOpacity, TouchableHighlight, and TouchableWithoutFeedback. These components include styles and effects that sometimes do not meet the desired outcome on individual platforms (iOS and Android).

The way I see using the Pressable component is that it can be customized in terms of style, appearance, and extended functionality by creating a custom wrapper/component around it. It also offers a lot of props such as onPressIn, onPressLong, hitSlop, delayLongPress and so on, that can be used to implement these extended functionalities.

At times, one thing I like to do is to add opacity feedback when the touch is active. It doesn't provide in the form of a prop directly. Something similar to what activeOpacity prop on TouchableOpacity does.

In this post, let's build a wrapper component that uses Pressable to add opacity feedback to the component.

Creating a wrapper component

Start by creating a custom Pressable component with no styles of its own so it can be a reusable component.

// Pressable.js

import React, { useCallback } from 'react';
import { Pressable as RNPressable } from 'react-native';

function Pressable({ children, style, ...otherProps }) {
  const _style = useCallback(() => [style && style], [style]);

  return (
    <RNPressable style={_style} {...otherProps}>
      {children}
    </RNPressable>
  );
}

export default Pressable;

So far, it accepts only two props:

children that is used to add a label on the button (using like a Text component from React Native)
...otherProps is used to pass down all the props to the underlying Pressable component.

In this case, since the wrapper component, you are creating will only be responsible for handling opacity, other important props like onPress are left to be handled where this wrapper component is used. I have to use the Touch indicator on an iOS simulator to show that the button is pressed.

Using the wrapper component

To use the wrapper component in its current state, import it:

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

import Pressable from './Pressable';

export default function App() {
  return (
    <View style={styles.container}>
      <Pressable
        style={{ borderRadius: 4, backgroundColor: '#FF0063', padding: 8 }}
      >
        <Text style={styles.text}>Press me</Text>
      </Pressable>
    </View>
  );
}

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

Make sure to add some styles to the Text and the Pressable components.

Running the example

Here is the output I get by running the code above. Notice that there is no visual feedback when I press the component on the app screen.

Adding opacity prop to the wrapper component

In some scenarios, you may want to add and use opacity as the feedback. For example, decrease the opacity to 0.5 when the button is being pressed.

You can extend the styles to accept a pressed argument. It is a boolean that tells whether the component is currently pressed or not. Using it, you can alter the value of the opacity property in styles.

In the wrapper component, add a new prop called activeOpacity. This prop accepts a number between 0 and 0.99. It is used conditionally on the opacity property and will only be true when the component is pressed.

When the component is not in a pressed state, the opacity value is 1.

import React, { useCallback } from 'react';
import { Pressable as RNPressable } from 'react-native';

function Pressable({ children, style, activeOpacity, ...otherProps }) {
  const _style = useCallback(
    ({ pressed }) => [{ opacity: pressed ? activeOpacity : 1 }, style && style],
    [style]
  );

  return (
    <RNPressable style={_style} {...otherProps}>
      {children}
    </RNPressable>
  );
}

export default Pressable;

Running the example with activeOpacity value

The below code snippet modifies the previous example to add an activeOpacity value of 0.5:

export default function App() {
  return (
    <View style={styles.container}>
      <Pressable
        style={{ borderRadius: 4, backgroundColor: '#FF0063', padding: 8 }}
        activeOpacity={0.5}
      >
        <Text style={styles.text}>Press me</Text>
      </Pressable>
    </View>
  );
}

The output after this step confirms that the opacity is changing as expected.

Conclusion

The Pressable component has many props that can be used to write an extensive and customized wrapper that fulfills your app's requirements. It is preferred in the official React Native documentation and provides a future-proof way of handling touch-based events.

🐙 Checkout the complete code at GitHub.
🚀 For more React Native tutorials, checkout my blog.

Getting Started with React Navigation v6 and TypeScript in React Native

Aman Mittal — Fri, 01 Jul 2022 14:27:15 +0000

When you have a complex mobile application structure or many screens in your application, handling navigation can become tricky. However, with open-source libraries like React Navigation, the process of implementing navigation patterns becomes easier.

React Navigation library is one of the most used navigation libraries in the React Native ecosystem. It is written in TypeScript, and you can create React components and apply any navigation patterns from Stack, Tab, and Drawer.

In this tutorial, let's look at how you can set up and use React Navigation and TypeScript together in a React Native app. One cool advantage that TypeScript provides is type checking for route names and route parameters.

Pre-requisites

If you are going to code along, make sure you have the following already installed:

Nodejs (>=12.x.x) with npm/yarn installed
expo-cli
Access to a real device or an iOS simulator or an Android Emulator so that you can run your code example

The source code used in this tutorial is available at this GitHub repository.

Creating a React Native project with expo-cli

Before diving deep into configuring TypeScript with React Navigation, let us create an example app that uses React Navigation to navigate between different screens. This example screen will also have example screens.

You can skip this section if you are already familiar with Stack and Tab navigators in React Navigation.

Open the terminal and run the following command to create a new React Native app. When asked to "choose a template", select blank (TypeScript). This template creates a React Native project with TypeScript already configured. Enough for us to get started.

expo init myApp

# This will prompt a "Choose a template" question
# Select "blank (TypeScript)"

# After the project is created, navigate inside the project directory
cd myApp

After navigating inside the project directory, run the following command to install React Navigation libraries and their packages in the terminal window.

yarn add @react-navigation/native @react-navigation/bottom-tabs @react-navigation/native-stack && expo install react-native-screens react-native-safe-area-context

The above command will install packages for implementing Stack and Tabs navigators. In the example app, we will use both of these patterns.

Adding a stack navigator

React Navigation's stack navigator allows your app to transition between screens and manage navigation history. The stack navigator you will implement in this section will allow the app user to navigate from one screen to another.

Start by creating src/ directory that will contain the screen and navigation-related code files.

The next step in the example app is to create mock screens. Create a screens/ directory inside src/. Inside this directory, let's create four component files:

HomeScreen.tsx
DetailsScreen.tsx

The HomeScreen component displays a list of characters from the Star Wars API. On pressing any item from the list, the app user will be able to navigate to the DetailsScreen where they can view the details of each character.

Add the following code snippet to the HomeScreen.tsx:

import { StyleSheet, View, Text, Pressable, FlatList } from 'react-native';
import { useNavigation } from '@react-navigation/native';

const DATA = [
  {
    id: 1,
    name: 'Luke Skywalker',
    birth_year: '19BBY',
  },
  {
    id: 2,
    name: 'C-3PO',
    birth_year: '112BBY',
  },
  {
    id: 3,
    name: 'R2-D2',
    birth_year: '33BBY',
  },
  {
    id: 4,
    name: 'Darth Vader',
    birth_year: '41.9BBY',
  },
  {
    id: 5,
    name: 'Leia Organa',
    birth_year: '19BBY',
  },
];

const HomeScreen = () => {
  const navigation = useNavigation();

  const renderListItems = ({ item }) => {
    return (
      <Pressable
        onPress={() =>
          navigation.navigate('Details', {
            name: item.name,
            birthYear: item.birth_year,
          })
        }
      >
        <Text
          style={{ fontSize: 18, paddingHorizontal: 12, paddingVertical: 12 }}
        >
          {item.name}
        </Text>
        <View
          style={{
            borderWidth: StyleSheet.hairlineWidth,
            borderColor: '#ccc',
          }}
        />
      </Pressable>
    );
  };

  return (
    <View style={{ flex: 1, paddingTop: 10 }}>
      <FlatList data={DATA} renderItem={renderListItems} />
    </View>
  );
};

export default HomeScreen;

In the above code snippet, observe that the onPress prop on the Pressable component is used to pass the name and birthYear of the character to the Details screen as route parameters.

Add the following code snippet to the DetailsScreen.tsx:

import { View, Text } from 'react-native';
import { useRoute } from '@react-navigation/native';

const DetailScreen = () => {
  const route = useRoute();
  const { name, birthYear } = route.params;

  return (
    <View style={{ flex: 1, paddingTop: 12, paddingHorizontal: 10 }}>
      <Text style={{ fontSize: 18, paddingBottom: 12 }}>Name: {name}</Text>
      <Text style={{ fontSize: 18 }}>Birth Year: {birthYear}</Text>
    </View>
  );
};

export default DetailScreen;

In the above code snippet, notice that the route.params is used to read the parameters passed from the HomeScreen.

After setting up the screens, create the navigation/ directory inside the src/ and inside it, add two files:

index.tsx: to keep the Root Navigator configuration
HomeStack.tsx: to create a Stack Navigator for Home and Details screens

Inside the HomeStack.tsx file, add the following code snippet:

import * as React from 'react';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

import HomeScreen from '../screens/HomeScreen';
import DetailsScreen from '../screens/DetailsScreen';

const HomeStack = createNativeStackNavigator();

const HomeStackNavigator = () => {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen name="Home" component={HomeScreen} />
      <HomeStack.Screen name="Details" component={DetailsScreen} />
    </HomeStack.Navigator>
  );
};

export default HomeStackNavigator;

In the above code snippet, notice that the name prop on the HomeStack.Screen component is used to define the route name. For example, the DetailsScreen has the route name defined as Details. Any time you navigate the Details screen, the route name is used to identify the screen either in the navigation.navigate() or navigation.push() method.

Next, add the following code snippet to the index.tsx file:

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';

import HomeStackNavigator from './HomeStack';

const RootNavigator = () => {
  return (
    <NavigationContainer>
      <HomeStackNavigator />
    </NavigationContainer>
  );
};

export default RootNavigator;

Lastly, modify the App.tsx file to include the RootNavigator component:

import { StatusBar } from 'expo-status-bar';

import RootNavigator from './src/navigation';

export default function App() {
  return (
    <>
      <RootNavigator />
      <StatusBar style="auto" />
    </>
  );
}

The HomeStack navigator configuration is done. Next, run any of the following commands to see the navigator in action:

# for iOS
expo start --ios

# for Android
expo start --android

Here is the output you will get after this step:

Adding type checking for stack navigator

To type check route name and parameters in both the HomeStack and RootStack navigators, you need to create type mappings for each route name and params.

Start by creating a new file called types.ts inside the src/navigation/ directory. This file will contain mappings for all route names and route params. Throughout this tutorial, it is used to define types for each type of navigator.

Inside the file types.ts, define the types for the route names: Home and Details.

export type HomeStackNavigatorParamList = {
  Home: undefined;
  Details: {
    name: string;
    birthYear: string;
  };
};

A route name that doesn't have any parameters being passed is specified with undefined. So, for example, in the above snippet, the Home route name doesn't have any parameters being passed to it.

The Details route receives two parameters from the HomeScreen. This is why the mapping object contains two properties in the above snippet.

After creating the mappings, you must let the stack navigator know about them. Go back to the HomeStack.tsx file and inside it, import HomeStackNavigatorParamList. It is passed as a generic to the createNativeStackNavigator function.

// rest of the import statements remain same
import { HomeStackNavigatorParamList } from './types';

const HomeStack = createNativeStackNavigator<HomeStackNavigatorParamList>();

// rest of the code remains the same

Testing type checking and IntelliSense

All the configurations in the previous section will enable type checking for the HomeStack navigator. For example, in the HomeStack.tsx file, change the name of the Details to Detail.

<HomeStack.Screen name="Detail" component={DetailsScreen} />

After the modification, you will see a red squiggly line appears on the name prop.

If you hover over the name prop, it will show a similar error message like the following:

The HomeStack navigator expects a HomeStackNavigatorParamList type with either Home or Details.

Another advantage of type checking is that it provides intelliSense for navigator props (depending on which IDE or Code editor you are using). For large applications where there are a lot of screens, this helps. You do not have to remember each route params for every screen.

Adding type checks for screens

In this section, let's learn how to add type checking for the Home screen. It is the screen where an app user will interact with a button to navigate to the Details screen.

To add type checking for a screen, the first step is to use a generic type to define types for the individual screens. Each navigator pattern in React Navigation library exposes its generic type. For example, NativeStackNavigationProp is used for @react-navigation/native-stack. Import that in the types.ts file.

import type { NativeStackNavigationProp } from '@react-navigation/native-stack';

export type HomeStackNavigatorParamList = {
  Home: undefined;
  Details: {
    name: string;
    birthYear: string;
  };
};

export type HomeScreenNavigationProp = NativeStackNavigationProp<
  HomeStackNavigatorParamList,
  'Details'
>;

The NativeStackNavigationProp accept two parameters. The first is the type that maps the route names and their params. Hence, the navigator itself. The second is the name of the screen as a string that matches the route name from the first parameter. In the above code snippet, the first parameter is HomeStackNavigatorParamList, and the second parameter, in this case, can only be Details.

The second parameter of NativeStackNavigationProp represents that the Home screen gets only the described route name as a possibility that the Home screen can navigate to. If the second parameter is not defined, then the Home screen will get all the route names from the HomeStack navigator as possibilities that it can navigate to.

Now, open the HomeScreen file, import the HomeScreeProps type, and use it to annotate the useNavigation hook.

// after other import statements

// import HomeScreenNavigationProp
import { HomeScreenNavigationProp } from '../navigation/types';

// inside the HomeScreen, component modify the following line
const HomeScreen = () => {
  const navigation = useNavigation<HomeScreenNavigationProp>();

  // rest of the code remains the same
};

If you are using the navigation prop directly on the functional component, you can pass the HomeScreenNavigationProp type to the functional component.

function HomeScreen({ navigation }: HomeScreenNavigationProp) {
  // ...
}

If you are using @react-navigation/stack, you can use StackScreenProps instead of StackNavigationProp.

Adding type checks for route params

To add type checking for a screen that receives route params (for example, in the example app Details screen receives two route params), you need to import the RouteProp from @react-navigation/native.

After importing it, create a type for the Details screen using the HomeStackNavigatorParamList as the first parameter and the route name of the Details screen as the second parameter to the RouteProp.

// after other import statements
import type { RouteProp } from '@react-navigation/native';

export type DetailsScreenRouteProp = RouteProp<
  HomeStackNavigatorParamList,
  'Details'
>;

// rest of the code remains the same

Open the DetailsScreen file, import the DetailsScreenRouteProp type, and use it to annotate the useRoute hook.

// after other import statements
import { DetailsScreenRouteProp } from '../navigation/types';

// inside the DetailsScreen, the component modify the following line

const DetailScreen = () => {
  const route = useRoute<DetailsScreenRouteProp>();

  // rest of the code remains the same
};

Adding a bottom navigator

Let's continue the saga of adding type checks to the app screens by adding a Bottom Tab Navigator to the example app. We have already installed the bottom tabs package when creating the example app.

Let's add two more screens to the src/screens/ directory. Inside it, create a new file FeedScreen.tsx and add the following code snippet:

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

const FeedScreen = () => {
  return (
    <View style={{ flex: 1, paddingTop: 12, paddingHorizontal: 10 }}>
      <Text style={{ fontSize: 18 }}>Feed Screen</Text>
    </View>
  );
};

export default FeedScreen;

Create another new file called SettingsScreen.tsx and add the following code snippet:

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

const SettingsScreen = () => {
  return (
    <View style={{ flex: 1, paddingTop: 12, paddingHorizontal: 10 }}>
      <Text style={{ fontSize: 18 }}>Settings Screen</Text>
    </View>
  );
};

export default SettingsScreen;

Next, add the type check mapping objects for the bottom tab navigator in the src/navigation/types.ts file. The name of the navigator is BottomTabNavigatorParamList.

The bottom tab navigator will contain the Home screen as its first tab. The second tab will be the Feed screen. The third tab will be the Settings screen. You can specify HomeStackNavigatorParamList as the value for the Home key.

export type BottomTabNavigatorParamList = {
  Home: HomeStackNavigatorParamList;
  Feed: undefined;
  Settings: undefined;
};

Inside the src/navigation/ directory, add a new file called Tabs.tsx with the following code snippet:

import * as React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import { BottomTabNavigatorParamList } from './types';
import HomeStackNavigator from './HomeStack';
import FeedScreen from '../screens/FeedScreen';
import SettingsScreen from '../screens/SettingsScreen';

const Tab = createBottomTabNavigator<BottomTabNavigatorParamList>();

const BottomTabs = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen
        name="HomeStack"
        component={HomeStackNavigator}
        options={{ headerShown: false }}
      />
      <Tab.Screen name="Feed" component={FeedScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
};

export default BottomTabs;

Annotating types for the bottom tab navigator with BottomTabNavigatorParamList, will add type checks for each screen in the tab navigator.

Let's also modify the src/navigation/index.tsx file to replace the previous HomeStack by importing the BottomTabs component and rendering it.

// rest of the import statements remain same
import BottomTabs from './Tabs';

const RootNavigator = () => {
  return (
    <NavigationContainer>
      <BottomTabs />
    </NavigationContainer>
  );
};

export default RootNavigator;

Here is the output you get after this step:

Composing nested navigator types

In the current state of the example app, you will notice that the HomeStack navigator is now nested inside the bottom tab navigator.

Let's assume, for some reason, you want to provide a button for the app user to navigate from the Home screen to the Feed screen. This is doable since both of these screens share the same parent navigator.

Add a button above the FlatList in the HomeScreen.tsx file that allows an app user to navigate to the Feed screen as shown below:

return (
  <View style={{ flex: 1, paddingTop: 10 }}>
    <Pressable
      onPress={() => navigation.navigate('Feed')}
      style={{
        padding: 8,
        borderWidth: 1,
        borderRadius: 4,
        borderColor: 'red',
        margin: 12,
        alignItems: 'center',
      }}
    >
      <Text style={{ fontSize: 16, fontWeight: '600' }}>Go to Feed screen</Text>
    </Pressable>
    <FlatList data={DATA} renderItem={renderListItems} />
  </View>
);

Here is how the button looks on the Home screen:

If you look closely at the JSX just added, a red squiggly line has appeared underneath Feed.

The error states that the Feed screen is not part of the HomeScreenNavigationProp, which is true because the Feed screen is not part of the param list we defined for the Home stack navigator in the src/navigation/types.tsx file.

React Navigation library exposes the CompositeNavigationProp type that allows annotating the navigation prop when nesting navigators. It takes two parameters. The first parameter is the primary navigator, in this case, the Home Stack navigator itself. The second parameter is the type of a parent navigator or any other source of secondary navigation. In this case, it will be the bottom tab navigator.

Modify the type HomeScreenNavigationProp as shown below:

import type {
  CompositeNavigationProp,
  RouteProp,
} from '@react-navigation/native';
// rest of the import statements remains same

export type HomeScreenNavigationProp = CompositeNavigationProp<
  NativeStackNavigationProp<HomeStackNavigatorParamList, 'Details'>,
  BottomTabNavigationProp<BottomTabNavigatorParamList, 'Feed'>
>;

// rest of the code remains the same

If you go back to the HomeScreen.tsx file, you will see the red squiggly gone.

Conclusion

In this tutorial, we discussed how to add type checks to the app screens and how to add type checks to the React Navigation navigators. Using type checks and annotating navigators is a great way to make your app more robust and maintainable when using TypeScript with React Navigation.

I recommend you check the complete type checking with TypeScript official documentation here provided by React Navigation library maintainers.

How To Use React Native AsyncStorage

Aman Mittal — Thu, 26 May 2022 10:42:03 +0000

AsyncStorage is a simple, asynchronous, unencrypted by default module that allows you to persist data offline in React Native apps. The persistence of data is done in a key-value storage system.

There are numerous scenarios where this module can be beneficial. Persisting data in a mobile app has benefits such as when the user restarts the app, the data or the setting variables being available to the user in the state they left before closing the app. This scenario is going to be covered in this tutorial.

Find the complete code for this tutorial at this GitHub repo.

Installing the community module

React Native version 0.60.0+ has lots of its API modules available as separate packages that you can easily install with a package manager such as npm or yarn. These packages are managed by community members as well as open-source developers.

To begin, let us create a new React Native project and install the module: @react-native-async-storage/async-storage. From a terminal window, execute the following commands in the order they are specified.



# create a new react-native app
npx react-native init rnAsyncStorageExample

# navigate inside the project directory
cd rnAsyncStorageExample

# install the async-storage module
yarn add @react-native-async-storage/async-storage

# Or is you prefer to use npm
npm install @react-native-async-storage/async-storage

If you are using the latest React Native version (0.60.x or above) you do not have to link the native binaries for iOS and Android platforms manually. This linking of the module is handled automatically by the CLI. Though, for iOS, you have to install cocoapods. Go back to the terminal window and execute the following command:



npx pod-install ios

That's it in terms of configuring the AsyncStorage module to work in the React Native app.

Changing the default storage limitation on Android

On iOS devices, the AsyncStorage is not limited programmatically.

On Android devices, by default, the current AsyncStorage size is set to 6MB. Reaching this limit is going to result in errors like the database or disk being full. There are valid reasons why this limit exists but if there is a need to increase the size, you can do that. Open the android/gradle.properties file and add the following:



AsyncStorage_db_size_in_MB=10

This file represents any project-wise settings that you can use to override the default values or settings.

Now, to make sure everything is working correctly, build the Android app (and make sure an Android device or emulator is running before you execute the command below).



npx react-native run-android

You are going to get the default screen that confirms that the app is configured.

Similarly, to build the app for iOS, execute the command below:



npx react-native run-ios

Using the AsyncStorage API

Let's start creating an example. In this example application, you will save a value from the user's input in the storage and fetch the value from the storage. This reading and writing of data are going to be done with the help of AsyncStorage API functions.

Open the App.js file and start by importing the following components.



import React, {useState, useEffect} from 'react';
import {
  StyleSheet,
  View,
  Text,
  TextInput,
  TouchableOpacity,
} from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';

Next, define a variable name STORAGE_KEY. It is used to read and save the data. You can think of this key as the identifier to the value that is being stored, hence, the key-value storage system. As you are going to store only one value at the moment, there is only one key required.



let STORAGE_KEY = '@user_input';

Inside the functional component App, define a state variable input that has an empty string as its default value.



const App = () => {
  const [input, setInput] = useState('');
  // ...
};

export default App;

Saving the data

To save the data for the app to read, let us define an asynchronous helper method called saveData. This method is going to be promise-based, which means you can use the async await syntax with a try-catch block.

Passing the identifier STORAGE_KEY as well as the input state variable, the API method AsyncStorage.setItem is going to store the value in storage.

Let us update the state as well as display an alert box when the data is successfully stored.



const saveData = async () => {
  try {
    await AsyncStorage.setItem(STORAGE_KEY, age)
    alert('Data successfully saved')
  } catch (e) {
    alert('Failed to save the data to the storage')
  }
}const saveData = async () => {
  try {
    await AsyncStorage.setItem(STORAGE_KEY, age)
    alert('Data successfully saved')
  } catch (e) {
    alert('Failed to save the data to the storage')
  }
}

Reading the data

When the app restarts, it should be able to read the data that persisted in the previous section. For this, create another helper function called readData that is going to be asynchronous. This function is going to read the value from the storage using the API method AsyncStorage.getItem and will only set the value of the state variable input when its value is not null.



const readData = async () => {
  try {
    const value = await AsyncStorage.getItem(STORAGE_KEY);

    if (value !== null) {
      setInput(value);
    }
  } catch (e) {
    alert('Failed to fetch the input from storage');
  }
};

To retrieve the data whenever the app starts, invoke this method inside the useEffect hook.



useEffect(() => {
  readData();
}, []);

Clearing all storage

Another API method that the current demo app is going to utilize from the AsyncStorage API is called clear. This method deletes everything that was previously saved.

If you want to delete only a specific item from the storage, there are other methods available such as removeItem or multiRemove by the AsyncStorage API.

Add the following snippet:



const clearStorage = async () => {
  try {
    await AsyncStorage.clear();
    alert('Storage successfully cleared!');
  } catch (e) {
    alert('Failed to clear the async storage.');
  }
};

Controlling the input

The last two helper functions this example app requires are onChangeText and onSubmitEditing.

These methods are going to be responsible for reading the input and updating the state variable as well as storing the input.



const onChangeText = value => setInput(value);

const onSubmitEditing = () => {
  if (!input) return;

  saveData(input);
  setInput('');
};

Completing the app

We have defined all the helper functions that are required by the app. Let us complete the return statement by defining the JSX as below:



const App = () => {
  // ... rest of the code remains the same

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.title}>AsyncStorage React Native</Text>
      </View>
      <View style={styles.panel}>
        <Text style={styles.label}>Enter your input here:</Text>
        <TextInput
          style={styles.inputField}
          value={input}
          placeholder="Enter"
          onChangeText={onChangeText}
          onSubmitEditing={onSubmitEditing}
        />
        <Text style={styles.text}>Your input is {input}</Text>
        <Pressable onPress={clearStorage} style={styles.button}>
          <Text style={styles.buttonText}>Clear Storage</Text>
        </Pressable>
      </View>
    </View>
  );
};

Here are the corresponding styles to the above code snippet:



const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  header: {
    width: '100%',
    backgroundColor: '#dcdcdc',
    paddingTop: 48,
    paddingBottom: 10,
    borderBottomWidth: StyleSheet.hairlineWidth,
    alignItems: 'center',
  },
  title: {
    fontSize: 22,
    color: '#333',
    fontWeight: 'bold',
  },
  panel: {
    paddingTop: 10,
    paddingHorizontal: 10,
  },
  label: {
    fontSize: 20,
  },
  text: {
    fontSize: 24,
    paddingTop: 10,
  },
  inputField: {
    backgroundColor: '#fff',
    height: 44,
    borderWidth: 1,
    borderColor: '#333',
    width: '100%',
    padding: 10,
    marginTop: 12,
  },
  button: {
    margin: 10,
    padding: 10,
    backgroundColor: 'orange',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 4,
  },
  buttonText: {
    fontSize: 18,
    color: '#444',
  },
});

Now, go back to the iOS simulator and you are going to be welcomed by the following screen:

Next, enter a value, close the app, and then open the app to see if the value was stored or not.

Lastly, see what happens when you click on the "Clear Storage" button.

Conclusion

Congratulations! I hope that, in this tutorial, you learned the basic API methods of using AsyncStorage API in your React Native app. Even though the demo app was minimal, it allowed us to understand the concepts.

Here is the link to the complete API for the AsyncStorage module that you can refer to for further reading.

And speaking of further reading, don't miss our guide on React Native Security and our tutorial on protecting the source code of React Native apps against code tampering and reverse-engineering.

Using Transifex Native to add internationalization (i18n) to a React app

Aman Mittal — Mon, 09 May 2022 16:36:57 +0000

Internationalization in an application provides multi-language support for a target set of app users that vary in region and language. Building such an application can be challenging, but there are many solutions available to add support for multiple languages in React ecosystem. One of these solutions is the Transifex. It allows a cloud service that serves translation phrases when implementing internationalization and localization in your React applications.

The translations are fetched continuously over the air (OTA) to the application. This way, you get to keep the translation as a separate layer from the application's development phase.

In this tutorial, let's learn how to integrate Transifex Native in a React application to use internationalization. We will walk you through setting up a new app on Transifex and the implementation steps required to integrate its SDK in a React application. After integrating the SDK, we will see how to create and manage translatable content that can be managed and updated on the cloud.

Prerequisites

To follow this tutorial, you will need:

Transifex account
Node.js 14.x.x or above installed
A basic understanding of React

You will find the complete code for the tutorial in this GitHub repository.

Setting up a React app

Let's start by creating a React app. Open up a terminal window and create a new React project using the create-react-app toolchain.

npx create-react-app transifex-react

# after the project directory is created
# navigate inside it
cd transifex-react

After navigating inside the project directory, you will come across the familiar src directory, part of the pre-defined folder structure that create-react-app creates. This directory contains the source code of your React app. Let's build a general login page in the src/App.js file as an example.

The login page will be a simple form with a title and a subtitle that describes the form, email and password input fields, and a button. The focus of the example is to keep it minimal and learn how to use Transifex Native SDK. However, the example will conclude when the app user fills in the details in the form and presses the sign-in button. After the button is pressed, an alert box is shown.

Open up the App.js file and add the following code snippet:

import './App.css';

function App() {
  const handleSubmit = event => {
    event.preventDefault();
    alert('Your form is submitted!');
  };

  return (
    <div className="app">
      <div className="form">
        <h1>Login form</h1>
        <p className="subtitle">Please enter your credentials to proceed.</p>
        <form onSubmit={handleSubmit}>
          <div className="input-container">
            <label>Email</label>
            <input type="text" name="email" required />
          </div>
          <div className="input-container">
            <label>Password</label>
            <input type="password" name="password" required />
          </div>
          <button className="button-container" type="submit">
            <p className="button-text">Sign in</p>
          </button>
        </form>
      </div>
    </div>
  );
}

export default App;

Also, add the following CSS styles to the App.css file:

.app {
  display: flex;
  margin-top: 20px;
  justify-content: center;
  height: 100vh;
  background-color: #fff;
}

.subtitle {
  padding-bottom: 20px;
}

.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  background: #01d28e;
  width: 100%;
  height: 40px;
  margin-top: 20px;
  padding: 10px 20px;
}

.button-text {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
}

.input-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px;
}

From the terminal window, run the npm start command to see the login page in action. You will see the following output in the browser window:

Installing Transifex Native SDK

To use Transifex Native, the first step is to install the Transifex JavaScript SDK. It also provides packages for different frameworks. Since the example app is built using React, also install the Transifex SDK extension for React.

To do so, run the following command from the project directory:

npm install @transifex/native @transifex/cli @transifex/react --save

Briefly, let's take a look at what each package does:

@transifex/native is the core library package
@transifex/cli is the command line interface package. It collects all the localization phrases from the React app and pushes them to the Transifex Native project. It is enabled by adding a custom npm script to the package.json file
@transifex/react is a library extension that provides components and hooks to internationalize phrases in the React app

Transifex Native SDK retrieves translation phrases using a custom CDN called Content Delivery Service (CDS). As a developer, you have to option to use Transifex's hosted service or opt for self-hosting.

Creating a Transifex Native project

After signing in to the Transifex account, start by creating a new project.

On the Add a new project page:

Add the name of the project
For Choose project type, select the Native option since the example app is using the JavaScript SDK. Transifex also offers File-based and Live project type options
For Assign to team, select Create a new team for this project. You can also select Assign this project to an existing team and then select the team from the dropdown menu if you already have a team
Under Select languages, set the source of the language to English. Under Target languages, select as many languages you want to provide translation support in your application. For the example app, select Spanish and French

After adding these details, click the Create project button to create a new Transifex project. You will see the following dashboard screen in the browser window:

To connect the Transifex Native SDK with your account, you need to add your Transifex account credentials to the project. Then, click Resources from the side menu on the dashboard. You will see the following screen:

Click the button Generate Native Credentials now at the bottom of the page. It will open a popup that will display the token and secret keys.

The token is required to initialize the Transifex Native SDK in the React app. Both token and secret are used to push translation phrases from the React app to the Transifex service.

You will need both of these keys in your React app. Create a .env file in the React app and paste them as shown in the following code snippet:

REACT_APP_TRANSIFEX_TOKEN=XXXX
REACT_APP_TRANSIFEX_SECRET=XXXX

The X's represent the actual key in the above code snippet. After copying the keys to the .env file, you can close the popup.

Initializing the Transifex Native SDK in the React app

To initialize the Transifex Native SDK, you need to import the @transifex/native package in your React app. In the App.js file, add the following import statement:

// rest of the import statements

import { tx } from '@transifex/native';

The tx has a init method that is used to initialize the Transifex Native SDK. It requires the value of the token to be passed. For example, add the following code snippet before the App function:

tx.init({
  token: process.env.REACT_APP_TRANSIFEX_TOKEN,
});

If you are using the latest version of the create-react-app, you can directly read the value of environment variables defined inside the .env file using the prefix process.env.REACT_APP_.

Using Transifex in the React app

Transifex React extension package provides a T component that will translate the text passed as a prop. It also provides LanguagePicker that will display a dropdown menu with the enabled languages in your Transifex project.

The T component has a required prop called _str that accepts the translation phase as a string value. After the header and the subtitle, let's also add the LanguagePicker component to show the dropdown menu to display language options.

Modify the JSX in the App component as shown below:

return (
  <div className="app">
    <div className="form">
      <h1>
        <T _str="Login form" />
      </h1>
      <p className="subtitle">
        <T _str="Please enter your credentials to proceed." />
      </p>
      <div className="picker">
        <p className="picker-title">
          <T _str="Select the language: " />
        </p>{' '}
        <LanguagePicker />
      </div>
      <form onSubmit={handleSubmit}>
        <div className="input-container">
          <label>
            <T _str="Email" />
          </label>
          <input type="text" name="email" required />
        </div>
        <div className="input-container">
          <label>
            <T _str="Password" />
          </label>
          <input type="password" name="password" required />
        </div>
        <button className="button-container" type="submit">
          <p className="button-text">
            <T _str="Sign in" />
          </p>
        </button>
      </form>
    </div>
  </div>
);

In the above code snippet, notice that the T component is wrapped by the other HTML and React components to apply custom styling previously defined.

There are additional props available on the T component.

Modify the App.css file and the following code snippet to apply some styles for the text preceding the LanguagePicker component.

/* After the rest of the code */

.picker {
  display: flex;
  margin-top: 10px;
  padding: 10px;
  flex-direction: row;
}

.picker-title {
  font-size: 18px;
  font-weight: bold;
  margin-right: 10px;
}

If you have been running the dev server, you will need to restart the server to see the changes. Re-run the command npm start from the terminal window and go back to the browser window to see the changes:

In the above screenshot, notice that the LanguagePicker displays the languages that are enabled in the Transifex project (such as English, the source language, and target languages, Spanish and French).

Syncing translation strings with Transifex

The next step to enable translation is to sync the translation strings added in the previous section using the T component with the Transifex project. After that, it will use the Transifex Native CLI to push collect all the translation phrases from the React app and push them to the Transifex project.

To do so, let's define a custom npm script in the package.json file:

{
  // ...
  "scripts": {
    "sync-translations": "./node_modules/.bin/txjs-cli push src/ --token=<TOKEN> --secret=<SECRET>"
  }
}

In the above snippet, replace the <TOKEN> and <SECRET> with the actual values of the token and secret keys.

Next, run this npm script from the terminal window to push the translation phases.

npm run sync-translations

To verify that the translation strings are pushed to the Transifex project, go to the Transifex project in the browser window. You will see how the number of source strings increased (depending on how many translation strings were added in the React app).

As shown above, the current React app has six phrases that can be translated.

Adding translations

After pushing the translation strings, you can add the translation for each phrase. Then, from the dashboard screen, click the button Translate button. This will open a new page to the interface where you can manually add the translation for each phrase.

First, it will ask to select the source language. Choose French from the dropdown menu.

After selecting the language, all the strings are shown on the left-hand side. Select each of the strings, and then on the right-hand side, add the appropriate translation for each string depending on the target language. Click Save Translation to save the translated string.

Repeat this for all the phrases and both languages. After adding all the translations, the status of each phrase changes from gray to green. It is used to indicate that the translation of the specific phase is active and is translated.

Running the React app

Let's go back to the React app to see the translation in action. Since the syncing between Transifex and the React app is done by a hosted CDN-like service, there is no requirement to restart the server.

Exploring the Transifex React package

Transifex React package also provides other utilities in the form of hooks.

For example, you can use the useLanguages hook to asynchronously fetch the supported languages (both source and target) from the Transifex project.

Another useful hook provided by the package is the useLocal hook. It is used to return a state variable with the currently selected locale. To see it in action, let's modify the App function component:

import { tx } from '@transifex/native';
import { T, LanguagePicker, useLocale } from '@transifex/react';

import './App.css';

tx.init({
  token: process.env.REACT_APP_TRANSIFEX_TOKEN,
});

function App() {
  const currentLocale = useLocale();

  const handleSubmit = event => {
    event.preventDefault();
    alert('Your form is submitted!');
  };

  return (
    <div className="app">
      <div className="form">
        <h1>
          <T _str="Login form" />
        </h1>
        <p className="subtitle">
          <T _str="Please enter your credentials to proceed." />
          <p>Currently selected locale is {currentLocale}.</p>
        </p>
        <div className="picker">
          <p className="picker-title">
            <T _str="Select the language: " />
          </p>{' '}
          <LanguagePicker />
        </div>

        {/* rest of the code remains same*/}
      </div>
    </div>
  );
}

Here is the output after this step:

Conclusion

Thanks for reading this article. Using Transifex is quite simple to integrate, and I personally found it fun to use. Compared to an open-source alternative, it is paid if using Transifex hosting service but does provide self-hosting option.

Another feature I like about it is the Over the Air feature that allows for managing and updating translations in an automated way. Instead of having large json files, translatable phrases are maintained using an interface. It also bridges the gap between managing translations in different languages and the development of the application.

When to use keyExtractor prop in React Native's FlatList

Aman Mittal — Tue, 05 Apr 2022 04:46:27 +0000

In React Native, the FlatList component works well to render a long list of data. It renders only the items are shown on the screen in a scrolling list and not all the data items at once.

To render a scrollable list of items using FlatList, you need to pass the required data prop to the component. The data prop accepts an array of items. Each item in the array represents a single item in the list. Another required prop is renderItem, which takes an item from the data and renders it on the list. This prop accepts a function that returns the JSX to be rendered.

To display an item in the scrollable list, the FlatList component requires that each item has a unique key such as an id. This key is what allows the FlatList component (since it uses VirtualizedList under the hood) to track the order of items in the list. The key from the data array is extracted using the keyExtractor prop on the FlatList component.

In this post, let's talk about where you might need to use keyExtractor and what scenarios it is not required.

Display a list of items using FlatList

Consider the following structure of data. There are ten items in the array, and each item has two properties, id and title. The id is the unique key for each item.

const DATA_WITH_ID = [
  {
    id: 1,
    title: 'quidem molestiae enim'
  },
  {
    id: 2,
    title: 'sunt qui excepturi placeat culpa'
  },
  {
    id: 3,
    title: 'omnis laborum odio'
  },
  {
    id: 4,
    title: 'non esse culpa molestiae omnis sed optio'
  },
  {
    id: 5,
    title: 'eaque aut omnis a'
  },
  {
    id: 6,
    title: 'natus impedit quibusdam illo est'
  },
  {
    id: 7,
    title: 'quibusdam autem aliquid et et quia'
  },
  {
    id: 8,
    title: 'qui fuga est a eum'
  },
  {
    id: 9,
    title: 'saepe unde necessitatibus rem'
  },
  {
    id: 10,
    title: 'distinctio laborum qui'
  }
];

Using the FlatList component, you want to render the title of each item as shown below:

export default function App() {
  const renderList = ({ item }) => {
    return (
      <View style={styles.listItem}>
        <Text style={styles.listItemText}>{item.title}</Text>
      </View>
    );
  };

  return (
    <View style={styles.container}>
      <FlatList data={DATA_WITH_ID} renderItem={renderList} />
    </View>
  );
}

The result of the above component will display a list of items without any errors or warnings. In addition, the FlatList component doesn't require a unique key to identify each item since the original data structure already contains a key called id.

Here is the output on a device's screen from the above snippet:

Using the keyExtractor prop

By default, the keyExtractor prop checks for properties like key and id (in that order). If any of the two is present in the original data structure, it will be considered a the unique key by the FlatList component. In this case(as in the previous example), you do not have to explicitly use the keyExtractor prop.

If none of them are provided, the FlatList component will throw a warning "VirtualizedList: missing keys for items ...":

Now, let's consider a scenario where array of data contains a unique key with each list item but the name of the unique key is neither key nor id. It contains a unique key property with the name of userId.

const DATA_WITH_USER_ID = [
  {
    userId: 1,
    title: 'quidem molestiae enim'
  },
  {
    userId: 2,
    title: 'sunt qui excepturi placeat culpa'
  },
  {
    userId: 3,
    title: 'omnis laborum odio'
  },
  {
    userId: 4,
    title: 'non esse culpa molestiae omnis sed optio'
  },
  {
    userId: 5,
    title: 'eaque aut omnis a'
  },
  {
    userId: 6,
    title: 'natus impedit quibusdam illo est'
  },
  {
    userId: 7,
    title: 'quibusdam autem aliquid et et quia'
  },
  {
    userId: 8,
    title: 'qui fuga est a eum'
  },
  {
    userId: 9,
    title: 'saepe unde necessitatibus rem'
  },
  {
    userId: 10,
    title: 'distinctio laborum qui'
  }
];

When rendering the list, you will see the warning in this case because the FlatList component doesn't recognize the userId as the key or id name in the original data structure.

For custom key names such as userId in the example above, the keyExtractor prop is used. It extracts the unique key name and its value and tells the FlatList component to track the items based on that value.

For the above array of data, modify the FlatList component and use the keyExtractor prop to extract the key:

<FlatList
  data={DATA_WITH_ID}
  renderItem={renderList}
  keyExtractor={item => item.userId}
/>

The warning will also disappear after this step.

Conclusion

When using a FlatList component, if the data array has a unique id or a key property, you do not need to use the keyExtractor prop explicitly. However, for custom id names, use the keyExtractor prop to explicitly tell the component which unique key to extract.

If you like to learn more about React Native, check out the React Native category and Expo category pages on my blog. You can also subscribe my newsletter or follow on Twitter to get updates on whenever I publish a new article or tutorial.

Patterns and Anti-patterns in Node.js

Aman Mittal — Tue, 15 Mar 2022 11:40:43 +0000

Node.js is a backend JavaScript runtime built on Chrome's V8 engine that's asynchronous and event-driven by nature. It's relatively simple to create a REST API with Node.js and use frameworks like Express.js. With this simplicity comes a lot of flexibility. However, you can get side-tracked on what patterns to follow when building scalable network-driven applications.

This article focuses on some of the patterns and best practices to follow when building Node.js applications. You will learn about coding style, error handling, loggers, and testing.

Let's dive in!

Node.js Coding Style and Best Practices

`const` and `let` Keywords to Declare Variables

There are different ways to declare variables in JavaScript: the old school var and the more recent let and const.

var declares a function-scoped variable (when declared within a function) or globally-scoped variable (when declared outside a function).

let and const declare block-scoped variables.

let allows you to create variables whose value can change. When pointing to an object, it can be assigned another object.

let myInt = 3;
myInt = 6;
console.log(myInt); // 6
let myArray = [0, 1, 2, 3];
console.log(myArray); // [ 0, 1, 2, 3 ]
let myOtherArray = ["one", "two", "three"];
myArray = myOtherArray;
console.log(myArray); // [ 'one', 'two', 'three' ]

The const keyword can be a little confusing. It doesn't necessarily define a constant value, it defines a constant reference to a value. It creates a read-only reference to a value, but this doesn't mean the value it holds is immutable, just that it cannot be reassigned.

const myInt = 3;
myInt = 6; // TypeError: Assignment to constant variable.

const myArray = [0, 1, 2, 3];
console.log(myArray); // [ 0, 1, 2, 3 ]
myArray[0] = "eleven";
console.log(myArray); // [ 'eleven', 1, 2, 3 ]
let myOtherArray = ["one", "two", "three"];
myArray = myOtherArray; // TypeError: Assignment to constant variable

As shown above, if it holds a primitive, you cannot assign it another value. When it holds an object/array, you can alter the value of that object (its properties/elements), but you cannot assign it another object.

With the definitions down, let's look at why you should consider using let and const over var.

Duplicate variable declarations using var will not trigger an error.

With var you can declare a variable in the same scope as a similarly named variable. Because of this, you can unknowingly overwrite another variable's value.

function thisFunction() {
  var x = 1;

  // In another part of the code, declare another variable x
  var x = 2;

  console.log(x); // 2
}

thisFunction();

Both const and let cannot be re-declared, so you cannot accidentally create a duplicate variable in the same scope.

function thisFunction() {
  let x = 1;

  // In another part of the code, declare another variable x
  let x = 2;

  console.log(x);
}

thisFunction();

If you try to run the above code, you will get the following error:

SyntaxError: Identifier 'x' has already been declared

var allows you to read a variable that has not been declared.

When you try to access a var before it is declared, it will return undefined. This might cause bugs when you try to use a variable in your code that has not been declared. Tracking down the bug might be difficult since the code might cause no errors that will cause it to crash, but it might cause unexpected results when you use the undefined.

The following code will run just fine.

console.log(bar); // undefined
var bar = 1;

With let and const, you won't be able to use a variable that has not been declared.

console.log(foo); // ReferenceError
let foo = 2;

Trying to run the above will give the below error:

ReferenceError: Cannot access 'foo' before initialization

Because they are block-scoped, let and const make for more readable and straightforward code, that is less error-prone.

With block-scoped variables, it is easier to read through code and track down the scope in which a variable operates. You just have to look at the inner-most block in which it is declared to know its scope.

Look at the following code.

let x = 5;

function thisFunction() {
  let x = 1;

  if (true) {
    let x = 2;
  }

  console.log(x); // 1
}

thisFunction();

console.log(x); // 5

Since let x = 2; is declared inside the block of the if statement, you know it only operates inside that block. As you can see, it doesn't affect similarly named variables outside the block. You can declare variables inside blocks without worrying that you might be re-declaring them.

When using var, it's not so straightforward.

var x = 5;

function thisFunction() {
  var x = 1;

  if (true) {
    var x = 2;
  }

  console.log(x); // 2
}

thisFunction();

console.log(x); // 5

With var, you have to be more careful with variables.

In the above, we declare a variable var x = 2; inside the if statement. The scope of x is the entire function thisFunction(). Since there is a similarly named variable in the function, we re-declared x, and when we later use the function's x, it has the value 2. So you need to be aware of the variables that are in scope, so as not to accidentally overwrite them.

Proper Naming Conventions

It's important to follow a naming convention when naming constants, variables, classes, and functions in an app. This helps you visually differentiate between local variables, global variables, functions, classes, etc., and maintain a consistent style throughout your codebase.

For naming local variables and functions, use lowerCamelCase.

const myFunction() {
  let someVariable;
}

Even if you define local variables using the const keyword, lowerCamelCase is preferred.

const myFunction() {
  const someVariable = "That holds a string value";
}

There are specific use cases where a const would be named differently. If you intend to declare a constant whose value (or nested values, in the case of declaring an object) is not going to change throughout the lifecycle of a codebase, use UPPER_SNAKE_CASE.

const ANOTHER_VAR = 3;

Define classes in Node.js applications with UpperCamelCase:

class MyClass() {
  // ...
}

Following these naming conventions will help you write more readable code. Naming your functions is vital, especially when you are about to profile a Node.js project. Profiling makes it simpler to understand what function to look for when checking a memory snapshot. However, if you use anonymous functions, profiling can make it challenging to debug production issues.

ESLint and Style Guides

Instead of overthinking a project's coding style, use a linting tool like ESLint. Over the years, it has become the JavaScript ecosystem's standard for fixing code styles automatically. ESLint checks for possible code errors, fixes code styles such as spacing issues, avoids anti-patterns and small errors, and keeps project code uniform. Using ESLint with a tool like Prettier can help you fix formatting issues as well.

By default, ESLint contains standard rules for vanilla JavaScript. It has a plugin system specific to the framework. For Node.js, you can use plugins like eslint-plugin-node and eslint-plugin-node-security.

It is much easier to understand a large project when its code is written in a consistent style. This is where style guides come in handy. Using a style guide enhances a team's productivity and avoids arguments about the best style guide for Node.js projects. In addition, you can opt-in to already existing style guides created at companies like Google and Airbnb that have been tested with time.

Error Handling in Node.js

You can handle errors using async/await syntax and the built-in error object in Node.js. Let's take a look at both.

`async/await` Syntax to Catch Errors

When Node.js first came out, handling asynchronous code meant using callbacks. From my experience, it doesn't take too long for nested callbacks to get out of hand. This is known as 'callback hell', and here is a typical example:

function getData(err, function(err, res) {
  if(err !== null) {
    function(valueA, function(err, res) {
      if(err !== null) {
        function(valueB, function(err, res) {
          // it continues
        }
      }
    })
  }
})

The example above is quite ergonomic. In a real scenario, there will be many more lines of code in each function's scope. This is considered an anti-pattern: handling the callback style of errors gets more awkward and only gets more un-maintainable with more nested functions.

You can avoid nested callbacks or callback hell by using ES6 async/await syntax (completely supported by Node.js version 8 and onwards). async/await is a way to deal with asynchronous code. It provides a much more compact way of writing code and familiar code syntax. To handle errors, you can use try/catch blocks along with async/await syntax.

If we use async/await, we can rewrite the previous example like this:

async function getData(err, res) {
  try {
    let resA = await functionA(res);
    let resB = await functionB(resA);

    return resB;
  } catch (err) {
    logger.error(err);
  }
}

Built-in Node.js Error Object

Errors are impossible to avoid. However, in many cases, you'll want to handle errors such as rejected promises and thrown exceptions.

To avoid complications in error handling, use the built-in error object in Node.js. It helps you maintain uniformity and prevent loss of information. You can also reap the advantages of finding information with StackTrace.

As an example, throw a string as shown below:

if (!data) {
  throw "There is no data";
}

This lacks any stack trace information and is an anti-pattern.

Instead, use the built-in Error object:

if (!data) {
  throw new Error("There is no data");
}

Loggers for Your Node.js Project

There's no denying it — we've all used console statements at times. They can be good for quickly debugging something or printing a standard output. But the console lacks proper configuration options for production-grade applications.

It is also crucial for a logger to be high-performant in identifying errors and possible issues. A slow logging library might harm your application's runtime performance.

A typical logger lets you use correct log levels such as fatal, warn, info, error, debug, and trace. These levels help to identify and distinguish between different critical events. A logger will also help provide contextual information in a JSON object, with timestamped log lines for you to determine when the log entry occurred. The logging format should be readable by human beings.

A good logging library provides features that make it easier to centralize and format logs. In the Node.js ecosystem, the following are some of the options available:

Winston: A popular logging library that is easily configurable.
Bunyan: Another popular logging library that outputs in JSON by default.
Log4js: A logger for the Express framework that supports colored console logging out of the box.
Pino: A logger that is focused on performance. It is considered to be faster than its alternatives.

An example of configuring Pino:

const app = require("express")();
const pino = require("pino-http")();

app.use(pino);

app.get("/", function (req, res) {
  req.log.info("something");
  res.send("hello world");
});

app.listen(3000);

Pino also supports various Web frameworks in the Node.js ecosystem, such as Fastify, Express, Hapi, Koa, and Nest.

Writing Tests in Node.js

If you work on a big application, you'll make continuous changes to the app's source code. By writing tests, you can avoid breaking existing features when pushing a new change. Failing tests will also help you determine where to make changes in specific sections of your code.

Write API Tests

In a Node.js application, writing API tests is a good start. They provide more coverage than unit testing. You can use frameworks like Supertest, Jest, or any other library that provides a high-level abstraction for testing APIs.

Consider the example below. It is a simple Express app that serves one route:

const express = require("express");
const bodyParser = require("body-parser");

const app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

// Other middlewares...

app.get("/", (req, res, next) => {
  res.json({ hello: "Hello World" });
});

module.exports = app;

Here's appropriate way to write this using Supertest:

const request = require("supertest");
const app = require("./index");

describe("hello test", () => {
  it("/ should return a response", async () => {
    const res = await request(app).get("/");
    expect(res.statusCode).toEqual(200);
    expect(res.body).toEqual({ hello: "Hello World" });
  });
});

Write Clear Test Names

A test name should be descriptive and self-explanatory for other people working on your team. It should include what is being tested, the scenario, and expected result.

Inspect Outdated Packages

You can check for outdated packages with commands like npm outdated or use a package like npm-check. This will prevent build fails related to outdated packages.

Inspect for Vulnerable Dependencies

A package can have vulnerabilities. Use community-based tools such as npm audit or commercial tools like snyk to discover vulnerabilities. If you don't use these tools, your only alternative is to keep up with tech communities online.

Wrap Up: Write Better Code for Your Node.js Apps

In this article, we covered practices and patterns that could help you avoid anti-patterns and write better code for your Node.js applications.

We looked at some key principles around coding style, error handling, loggers, and testing. Some of the practices we discussed are more general — like checking for outdated packages or vulnerable dependencies. Others — such as using a performant logging library, using ESLint, and style guides — will help you maintain a consistent way of writing code, especially when working on large projects.

Happy coding!

P.S. If you liked this post, subscribe to our JavaScript Sorcery list for a monthly deep dive into more magical JavaScript tips and tricks.

P.P.S. If you need an APM for your Node.js app, go and check out the AppSignal APM for Node.js.

How to install Node.js using NVM on macOS M1

Aman Mittal — Sun, 06 Feb 2022 12:21:13 +0000

Node.js can be installed in different ways. I recently started working on an organization repository that requires using different Node.js versions. Using Node Version Manager (NVM) it is possible to switch between different Node.js versions on the fly. It also allows testing code with older Node.js versions.

NVM is a shell script used for installing and managing Node.js on a Unix based system. It allows switching between different versions of Node.js via the command line quickly. It also works with any POSIX shell such as zsh.

Prerequisites

Make sure you have installed the following before proceeding:

Remove existing installed Node.js version

This step is optional. If you haven't installed Node.js previously using Homebrew, skip this.

If you have an existing Node.js version installed, please remove it before installing NVM. For example, my machine already has a node version installed via Homebrew.

Open the terminal window and run:

brew uninstall --ignore-dependencies node
brew uninstall --force node

Install NVM via Homebrew

Install NVM using Homebrew:

brew install nvm

After the above command runs, create a directory for NVM at the home working directory:

mkdir ~/.nvm

When using the zsh shell, add the following config inside ~/.zshrc:

export NVM_DIR="$HOME/.nvm"
[ -s "/opt/homebrew/opt/nvm/nvm.sh" ] && \. "/opt/homebrew/opt/nvm/nvm.sh"  # This loads nvm
[ -s "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm" ] && \. "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm"  # This loads nvm bash_completion

Now, either restart the terminal app or execute source ~/.zshrc to re-load the latest config for the zsh shell from the file.

Run the command nvm --version to verify. For example, if the config has loaded, this command would display a version.

Install Node.js via NVM

Node.js is available in two different versions:

Long Term Support (LTS)
Current with latest features

Although I used to love using the Current version with the latest features on my personal machine, I use the LTS version for work. At the time of writing this post, the current LTS version is 16.

Running the command nvm install node would install the current version with the latest features.

To install the current LTS Node.js version, execute:

nvm install --lts

Then, verify the version by running:

node --version

# Output: v16.13.2

Multiple Node.js versions

To install different versions of Node.js, you can run:

# nvm install Version-Number
nvm install 14

Use a specific Node.js version

After installing multiple versions, use the command below to set a specific version as the default version and use it:

nvm use 16

Uninstall a Node.js version

Before uninstalling a Node.js version, make sure it is not the active version or currently used version on the machine. Switch to a different version and then run the command:

nvm uninstall 14

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Twitter!

Implementing Infinite Scroll with React Query and FlatList in React Native

Aman Mittal — Fri, 28 Jan 2022 12:48:48 +0000

Infinite Scrolling is a way to implement pagination in mobile devices. It is common among mobile interfaces due to the limited amount of space. If you use social media applications like Instagram or Twitter, this implementation is commonly used across those apps.

In this tutorial, let's learn how to implement an infinite scroll using the FlatList component in React Native. To fetch data, we will use a real REST API service provided by RAWG. It is one of the largest video game databases, and they have a free tier when it comes to using their API for personal or hobby projects.Then the React Query library will help us make the process of fetching data a lot smoother.

Prerequisites

To follow this tutorial, please make sure you have the following tools and utilities installed on your local development environment and have access to the services mentioned below:

Node.js version 12.x.x or above installed
Have access to one package manager such as npm or yarn or npx
RAWG API key

You can also check the complete source code for this example at this GitHub repo.

Creating a new React Native app

To create a new React Native app, let's generate a project using the create-react-native-app command-line tool. This tool helps create universal React Native apps, supports React Native Web, and you can use native modules. It is currently being maintained by the awesome Expo team.

Open up a terminal window and execute the following command:

npx create-react-native-app

# when prompted following questions
What is your app named? infinite-scroll-with-react-query
How would you like to start › Default new app

# navigate inside the project directory after it has been created
cd infinite-scroll-with-react-query

Then, let's install all the dependencies that will be used to create the demo app. In the same terminal window:

yarn add native-base react-query && expo install expo-linear-gradient react-native-safe-area-context react-native-svg

This command should download all the required dependencies. To run the app in its vanilla state, you can execute either of the following commands (depending on the mobile OS you're using). These commands will build the app.

# for iOS
yarn ios

# for android
yarn android

Creating a Home Screen

Let's create a new directory called /src. This directory will contain all the code related to the demo app. Inside it, create a sub-directory called /screens that will contain the component file, HomeScreen.js.

In this file, let's add some JSX code to display the title of the app screen.

import React from 'react';
import { Box, Text, Divider } from 'native-base';

export const HomeScreen = () => {
  return (
    <Box flex={1} safeAreaTop backgroundColor='white'>
      <Box height={16} justifyContent={'center'} px={2}>
        <Text fontSize={28} fontWeight={'600'} color={'emerald.500'}>
          Explore Games
        </Text>
      </Box>
      <Divider />
    </Box>
  );
};

The Box component from NativeBase is a generic component. It comes with many props, a few of them are to apply the SafeAreaView of the device. The prop safeAreaTop applies padding from the top of the device's screen. One advantage of using the NativeBase library is its built-in components provide props like handling safe area views.

Most NativeBase components also use utility props for most commonly used styled properties such as justifyContent, backgroundColor, etc., and shorthands for these utility props such as px for padding horizontally.

Setting up providers

Both the NativeBase and React Query libraries require their corresponding providers to be set up at the root of the app. Open the App.js file and add the following:

import React from 'react';
import { StatusBar } from 'expo-status-bar';
import { NativeBaseProvider } from 'native-base';
import { QueryClient, QueryClientProvider } from 'react-query';

import { HomeScreen } from './src/screens/HomeScreen';

const queryClient = new QueryClient();

export default function App() {
  return (
    <>
      <StatusBar style='auto' />
      <NativeBaseProvider>
        <QueryClientProvider client={queryClient}>
          <HomeScreen />
        </QueryClientProvider>
      </NativeBaseProvider>
    </>
  );
}

All the providers must wrap the entry point or the first screen of the application. In the above snippet, there is only one screen, so all the providers are wrapping HomeScreen.

The QueryClientProvider component provides an instance in the form of QueryClient that can be further used to interact with the cache.

After modifying the App.js file, you will get the following output on a device:

Add a Base URL to use RAWG REST API

If you want to continue reading this post and build along with the demo app, make sure you have access to the API key for your RAWG account. Once you've done that, create a new file called index.js inside the /src/config directory. This file will export the base URL of the API and API key.

const BASE_URL = 'https://api.rawg.io/api';
// Replace the Xs below with your own API key
const API_KEY = 'XXXXXX';

export { BASE_URL, API_KEY };

Replace the Xs in the above snippet with your own API key.

Fetching data from the API

To fetch the data, we will use the JavaScript fetch API method. Create a new file called index.js inside /src/api. It will import the base URL and the API key from the /config directory and expose a function that fetches the data.

import { BASE_URL, API_KEY } from '../config';

export const gamesApi = {
  // later convert this url to infinite scrolling
  fetchAllGames: () =>
    fetch(`${BASE_URL}/games?key=${API_KEY}`).then(res => {
      return res.json();
    })
};

Next, in the HomeScreen.js file, import the React Query hook called useQuery. This hook accepts two arguments. The first argument is a unique key. This key is a unique identifier in the form of a string, and it tracks the result of the query and caches it.

The second argument is a function that returns a promise. This promise is resolved when there is data or throws an error when there is something wrong when fetching the data. We've already created the promise function that fetches data asynchronously from the API's base Url in the form of gamesApi.fetchAllGames(). Let's import the gamesApi as well.

Inside the HomeScreen, let's call this hook to get the data.

import React from 'react';
import { Box, Text, FlatList, Divider, Spinner } from 'native-base';
import { useQuery } from 'react-query';

import { gamesApi } from '../api';

export const HomeScreen = () => {
  const { isLoading, data } = useQuery('games', gamesApi.fetchAllGames);

  const gameItemExtractorKey = (item, index) => {
    return index.toString();
  };

  const renderData = item => {
    return (
      <Text fontSize='20' py='2'>
        {item.item.name}
      </Text>
    );
  };

  return isLoading ? (
    <Box
      flex={1}
      backgroundColor='white'
      alignItems='center'
      justifyContent='center'
    >
      <Spinner color='emerald.500' size='lg' />
    </Box>
  ) : (
    <Box flex={1} safeAreaTop backgroundColor='white'>
      <Box height={16} justifyContent={'center'} px={2}>
        <Text fontSize={28} fontWeight={'600'} color={'emerald.500'}>
          Explore Games
        </Text>
      </Box>
      <Divider />
      <Box px={2}>
        <FlatList
          data={data.results}
          keyExtractor={gameItemExtractorKey}
          renderItem={renderData}
        />
      </Box>
    </Box>
  );
};

In the above snippet, take a note that React Query comes with the implementation of request states such as isLoading. The isLoading state implies that there is no data and is currently in the "fetching" state. To improve the user experience, while the isLoading state is true, a loading indicator or a spinner component can be displayed (as did in the above snippet using the Spinner component from NativeBase).

Here is the output after this step:

Adding pagination to the API request

The useInfiniteQuery hook provided by the React Query library is a modified version of the useQuery hook. In addition to the request states such as isLoading and data, it utilizes a function to get the next page number using getNextPageParam.

In the case of RAWG REST API, the data fetch on each request contains the following keys:

count: the total count of games.
next: the URL to the next page.
previous: the URL of the previous page. Is null if the current page is first.
results: the array of items on an individual page.

The key names next, and previous will depend on the response structure of the API request. Make sure to check your data response what are the key names and what are their values.

Currently, the API request made in the /api/index.js file does not consider the number of the current page. Modify as shown below to fetch the data based on the page number.

export const gamesApi = {
  // later convert this url to infinite scrolling
  fetchAllGames: ({ pageParam = 1 }) =>
    fetch(`${BASE_URL}/games?key=${API_KEY}&page=${pageParam}`).then(res => {
      return res.json();
    })
};

The addition &page=${pageParam} in the above snippet is how the getNextPageParam function will traverse to the next page if the current page number is passed in the request endpoint. Initially, the value of pageParam is 1.

Using useInfiniteQuery hook

Let's import the useInfiniteQuery hook in the HomeScreen.js file.

// rest of the import statements remain same
import { useInfiniteQuery } from 'react-query';

Next, inside the HomeScreen component, replace the useQuery hook with the useInfiniteQuery hook as shown below. Along with the two arguments, the new hook will also contain an object as the third argument. This object contains the logic to fetch the data from the next page using the getNextPageParam function.

The function retrieves the page number of the next page. It accepts a parameter called lastPage that contains the response of the last query. As per the response structure we discussed earlier in the previous section, check the value of lastPage.next. If it is not null, return the next page's number. If it is null, return the response from the last query.

const { isLoading, data, hasNextPage, fetchNextPage } = useInfiniteQuery(
  'games',
  gamesApi.fetchAllGames,
  {
    getNextPageParam: lastPage => {
      if (lastPage.next !== null) {
        return lastPage.next;
      }

      return lastPage;
    }
  }
);

Implementing infinite scroll on FlatList

In the previous snippet, the hasNextPage and the fetchNextPage are essential. The hasNextPage contains a boolean. If it is true, it indicates that more data can be fetched. The fetchNextPage is the function provided by the useInfiniteQuery to fetch the data of the next page.

Add a handle method inside the HomeScreen component called loadMore. This function will be used on the FlatList prop called onEndReached. This prop is called when the scroll position reaches a threshold value.

const loadMore = () => {
  if (hasNextPage) {
    fetchNextPage();
  }
};

Another difference between useInfiniteQuery and useQuery is that the former's response structure includes an array of fetched pages in the form of data.pages. Using JavaScript map function, get the results array of each page.

Modify the FlatList component as shown below:

<FlatList
  data={data.pages.map(page => page.results).flat()}
  keyExtractor={gameItemExtractorKey}
  renderItem={renderData}
  onEndReached={loadMore}
/>

Here is the output after this step. Notice the scroll indicator on the right-hand side of the screen. As soon as it reaches a little below half of the list, it repositions itself. This repositioning indicates that the data from the next page is fetched by the useInfiniteQuery hook.

The default value of the threshold is 0.5. This means that the loadMore will get triggered at the half-visible length of the list. To modify this value, you can add another prop, onEndReachedThreshold. It accepts a value between 0 and 1, where 0 is the end of the list.

<FlatList
  data={data.pages.map(page => page.results).flat()}
  keyExtractor={gameItemExtractorKey}
  renderItem={renderData}
  onEndReached={loadMore}
  onEndReachedThreshold={0.3}
/>

Display a spinner when fetching next page data

Another way to enhance the user experience is when the end of the list is reached, and the data of the next page is still being fetched (let's say, the network is weak). While the app user waits for the data, it is good to display a loading indicator.

The useInfiniteQuery hook provides a state called isFetchingNextPage. Its value will be true when the data from the next page is fetched using fetchNextPage.

Modify the HomeScreen component as shown below. The loading spinner renders when the value of isFetchingNextPage is true. The ListFooterComponent on the FlatList component is used to display the loading indicator at the end of the list items.

export const HomeScreen = () => {
  const { isLoading, data, hasNextPage, fetchNextPage, isFetchingNextPage } =
    useInfiniteQuery('games', gamesApi.fetchAllGames, {
      getNextPageParam: lastPage => {
        if (lastPage.next !== null) {
          return lastPage.next;
        }

        return lastPage;
      }
    });

  const loadMore = () => {
    if (hasNextPage) {
      fetchNextPage();
    }
  };

  const renderSpinner = () => {
    return <Spinner color='emerald.500' size='lg' />;
  };

  const gameItemExtractorKey = (item, index) => {
    return index.toString();
  };

  const renderData = item => {
    return (
      <Box px={2} mb={8}>
        <Text fontSize='20'>{item.item.name}</Text>
      </Box>
    );
  };

  return isLoading ? (
    <Box
      flex={1}
      backgroundColor='white'
      alignItems='center'
      justifyContent='center'
    >
      <Spinner color='emerald.500' size='lg' />
    </Box>
  ) : (
    <Box flex={1} safeAreaTop backgroundColor='white'>
      <Box height={16} justifyContent={'center'} px={2}>
        <Text fontSize={28} fontWeight={'600'} color={'emerald.500'}>
          Explore Games
        </Text>
      </Box>
      <Divider />
      <Box px={2}>
        <FlatList
          data={data.pages.map(page => page.results).flat()}
          keyExtractor={gameItemExtractorKey}
          renderItem={renderData}
          onEndReached={loadMore}
          onEndReachedThreshold={0.3}
          ListFooterComponent={isFetchingNextPage ? renderSpinner : null}
        />
      </Box>
    </Box>
  );
};

Here is the output:

Wrapping up

In this tutorial, you've successfully implemented infinite scroll using useInfiniteQuery from React Query. Using this library for fetching and managing data inside a React Native app takes away a lot of pain points. Make sure to check out the Infinite Queries documentation here.

You can also check the complete source code for this example at this GitHub repo.

Finally, don't forget to pay special attention if you're developing commercial React Native apps that contain sensitive logic. You can protect them against code theft, tampering, and reverse engineering by following our guide.

How to rename default branch in Git and GitHub

Aman Mittal — Wed, 12 Jan 2022 14:11:32 +0000

I'm currently maintaining a GitHub repo that is grown over the last year. It primarily contains all the example code that I create when working on React Native and Expo articles and tutorials.

Recently, I switched the default branch to main. Here are the steps I took. All of these commands execute inside a terminal window.

Start by moving the default branch locally using the -m flag.

git branch -m master main

Set the new branch as the local default on the remote. By default, Git doesn't allow renaming a remote branch.

git push -u origin main

# output
* [new branch]      main -> main
Branch 'main' set up to track remote branch 'main' from 'origin'.

Set the current local HEAD branch to point to the new branch on GitHub.

git remote set-head origin main

Now, go to the GitHub repo. Open Settings > Branches. Under Default Branch, click the edit button to switch to the main branch.

Now, go back to the terminal window and run the following command to delete the previous old default branch.

git push origin --delete master

# output
To https://github.com/account/repo.git
- [deleted]         master

That's it!

DEV Community: Aman Mittal

First few days with Codex CLI

What is Codex CLI

Why I actually like the CLI approach

How to quickly install Codex CLI

Your first session with a few common commands

Continue your last Codex session

Useful Codex commands

Codex CLI supports Bash commands and terminal shortcuts

Example: Using Codex as an editor

Using Codex to manage your notes or summarize in Obsidian

Example: Syncing from Linear to Obsidian

Using Codex CLI agent

Troubleshooting

Continue using Codex CLI agent

What's Model Context Protocol (MCP)?

Setting Up Playwright MCP

Install Playwright MCP Bridge extension

Sync Linear tasks into Obsidian workflow

Making the workflow reusable with Skills

Wrapping up

Stash changes in a git repository with VS Code

Stash using VS Code

Bring the latest stashed changes to a branch

Conclusion

Change comment color visibility in a VS Code theme

The issue with the comment color

Customizing comment color in VS Code

Using textMateRules for Token Customization

Theme specific customization

Conclusion

How to add opacity to a Pressable component in React Native

Creating a wrapper component

Using the wrapper component

Running the example

Adding opacity prop to the wrapper component

Running the example with activeOpacity value

Conclusion

Getting Started with React Navigation v6 and TypeScript in React Native

Pre-requisites

Creating a React Native project with expo-cli

Adding a stack navigator

Adding type checking for stack navigator

Testing type checking and IntelliSense

Adding type checks for screens

Adding type checks for route params

Adding a bottom navigator

Composing nested navigator types

Conclusion

How To Use React Native AsyncStorage

Installing the community module

Changing the default storage limitation on Android

Using the AsyncStorage API

Saving the data

Reading the data

Clearing all storage

Controlling the input

Completing the app

Conclusion

Using Transifex Native to add internationalization (i18n) to a React app

Prerequisites

Setting up a React app

Installing Transifex Native SDK

Creating a Transifex Native project

Initializing the Transifex Native SDK in the React app

Using Transifex in the React app

Syncing translation strings with Transifex

Adding translations

Running the React app

Exploring the Transifex React package

Conclusion

Further Reading

When to use keyExtractor prop in React Native's FlatList

Display a list of items using FlatList

Using the keyExtractor prop

Conclusion

Patterns and Anti-patterns in Node.js

Node.js Coding Style and Best Practices

const and let Keywords to Declare Variables

Proper Naming Conventions

`const` and `let` Keywords to Declare Variables

`async/await` Syntax to Catch Errors