---
title: 'How to configure ESLint and Prettier in an Expo project'
date: '2023-09-15'
slug: 'configure-eslint-prettier-expo-project'
thumbnail: '/thumbnails/expo.png'
tag: 'expo'
canonicalUrl: 'http://localhost:3000/blog'
---

> Make sure to see the official Expo documentation on using [ESLint](https://docs.expo.dev/guides/using-eslint/) in your React Native project.

When writing JavaScript, I spend a good amount of time fixing basic mistakes. Different project files sometimes end up following different syntax and formatting conventions.

Using ESLint rescues me from those mistakes. It is a linter for the JavaScript programming language that helps keep the code syntax consistent and match conventions and warns against the possible source of problems. It is written in Node.js.

Also, I like to use some specific set of Prettier rules in my projects. ESLint configures well with it.

## Create a new project

To create a new React Native project, I use `create-expo-app`:

```shell
npx create-expo-app projectName

# Navigate inside the project folder
cd projectName
```

## Install ESLint and Prettier dev dependencies

After creating a new project, the next step is to install ESLint and Prettier as dev dependencies.

The Expo team has been awesome to provide a package called [eslint-config-universe](https://github.com/expo/expo/tree/master/packages/eslint-config-universe) that comes with basic and shared ESLint configuration for Node.js, React Native and web projects. This is useful because I don't have to set up and define the ESLint configuration from scratch.

Run the following command in the terminal:

```shell
yarn add --dev eslint-config-universe eslint prettier
```

These packages are installed as `devDependencies` since they are only required during the development of the project.

## Configure ESLint

Start by creating a new file called `.eslintrc.js` at the root of the project. This file is responsible to contain all the configuration and linting rules.

Here is the minimal configuration I use:

```js
module.exports = {
  extends: ['universe', 'universe/native'],
  rules: {
    'import/order': 0,
    'react-native/no-inline-styles': 0,
    'import/namespace': 0,
    'no-duplicate-imports': 'error'
  }
};
```

Sometimes I extend this configuration or tweak with rules but for most of the projects I start with this configuration.

In the above snippet, the `extends` is used to apply the pre-defined set of rules from `universe` and `universe/native`.

The `universe` contains basic config JavaScript projects. The `universe/native` contains the config for React Native and Expo projects, with support for React and JSX.

## Configure Prettier

Prettier is a code formatter that ensures that all the code files follow a consistent styling. If you are into Web development, chances are you are already using it.

Create a new file called `.prettierrc` and inside it add the following (_minimal_) configuration:

```json
{
  "printWidth": 100,
  "tabWidth": 2,
  "singleQuote": true,
  "bracketSameLine": true,
  "trailingComma": "es5",
  "arrowParens": "avoid"
}
```

## Ignore files

I also created two new files to ignore trivial or other configurable files and folders from both linting and formatting. Both `.eslintignore` and `.prettierignore` have the following snippet:

```shell
node_modules/**
package.json
yarn.lock
ios/**
android/**
assets/**
.vscode
.expo-shared
.prettirrc
.eslintrc.js
```

## Conclusion

There are about a dozen ways one can configure ESLint rules. However, in this post, I wanted to share this minimal configuration for my future self.


How to configure ESLint and Prettier in an Expo project

---
title: 'Resolve merge conflicts with git rebase'
date: '2023-06-23'
slug: 'resolve-merge-conflicts-with-git-rebase'
thumbnail: '/thumbnails/git.png'
tag: 'git'
canonicalUrl: 'http://localhost:3000/blog'
---

Resolving merge conflicts can sometimes be difficult, and using the GitHub UI may not always be the most effective solution. As the complexity of the conflicts increases, it may be necessary to rely on tools on your local machine rather than the web interface provided by GitHub.

I have discovered that using the `git rebase` command is a useful method for resolving merge conflicts in my feature branch before merging it into the `main` branch. Although it took some time to fully understand the process and the necessary steps.

## Problem

I have been working on a `feature-branch` in an open-source repository for work for quite some time. However, recent commits merged into the main branch have caused conflicts in my branch, preventing me from merging my own commit. I have two options to proceed:

- Resolve the conflicts to merge the branches.
- Create a new pull request if the conflicts are too complex and my changes are of low priority.

## Solution: Resolve conflicts with git rebase

Using `git rebase` in the `feature-branch` allows to bring changes from the `main`, and resolve the merge conflicts. Then, I can use VSCode (which has a Resolve merge conflict editor and is pretty handy) and push the changes back to my feature branch. Once the conflicts are resolved, I can merge my branch into the `main` without any issues which will make GitHub happy.

### Step 1: Fetch the latest changes from the main

Open a fresh terminal tab, and navigate into the repository. On the `main` branch, run:

```shell
git pull
```

This makes sure that the local copy of the `main` branch on my machine has all the latest changes.

### Step 2: Run git log to verify

Running `git log` helps verifying that `main` branch has all the latest commits:

```shell
git log --oneline --graph --decorate --color

# I use an alias: glog
```

### Step 3: Checkout to the feature-branch

Time to switch to the `feature-branch`:

```shell
git checkout feature-branch

# I use an alias: gck feature-branch
```

### Step 4: Run git rebase to bring changes from the main

To bring changes from the `main` to the `feature-branch`, run:

```shell
git rebase main
```

Then run `git status` to know the status of the branch:

```shell
git status

# I use an alias: gs
```

### Step 5: Resolve merge conflicts

If there are merge conflicts, running `git status` will let you know. Open VSCode, click on open Resolve Merge Conflict editor and you can now accept changes in the left tab which shows the latest changes from `main` branch.

On the right side, changes from the current `feature-branch` (probably the ones that are causing conflicts) are shown.

After resolving conflicts, save the file and from the terminal run the following command to stage the modified files:

```shell
git add file-name

# I use an alias: ga file-name

# In case, multiple files modified and need to be staged, run:
git add .
```

Then, run `git status` once again to see if the modified files are staged.

Then run the following command to commit those changes:

```shell
git commit -m "commit message..."

# I use an alias: gc "commit message..."
```

### Step 6: Continue the rebase

Run `git rebase` command with `--continue` flag to continue the rebase process:

```shell
git rebase --continue
```

> **Tip:** If required, save changes by pressing `:wq!` in the terminal.

### Step 7: Verify new commits

Run the following command to verify that the new commits from `feature-branch` are at the top of the commit history and changes from the `main`:

```shell
git log --oneline --graph --decorate --color

# I use an alias: glog
```

### Step 8: Commit changes from local to remote

Finally, push the changes from the local `feature-branch` to the remote `feature-branch`:

```shell
git push --force
```

## Summary

A few added rules I think are worth mentioning in this process:

- Only use rebase for local branches and if you are the owner of that branch.
- If you anticipate that the conflicts can become messy, use the strategy described above at regular intervals to avoid a lot of conflicts.

> A big thank you to my colleague [Sundeep Peswani](https://www.sundeeppeswani.com/) for teaching this via live coding and jumping on a call to help me understand the process and making my life easier.


Resolve merge conflicts with git rebase

---
title: 'How to clear global npx cache'
date: '2023-05-30'
slug: 'clear-global-npx-cache'
thumbnail: '/thumbnails/terminal.png'
tag: 'tools'
canonicalUrl: 'https://amanhimself.dev/blog/clear-global-npx-cache'
---

Recently, I've seen myself running into the following message whenever I'm using a certain CLI tool with `npx`.

```bash
A new version of "x-package" is available
You can update by running: npm install -g x-package
```

I don't want to install the CLI tool globally and go into the rabbit hole of maintaining it as a dependency.

One way I've found that works on macOS to clear the global `npx` cache:

```bash
rm -rf ~/.npm/_npx
```

This will clear the global `npx` cache and you'll be able to use the latest version of the CLI tool.

Also, you can add an alias to your `.zshrc` or `.bashrc` file to make it easier to run:

```bash
alias clearnpx="rm -rf ~/.npm/_npx"
```

If you've trouble finding where npm stores `npx` cache on your system, run the following command to find out the exact path to the `_npx` directory:

```bash
npm config get cache
```


How to clear global npx cache

---
title: 'Bypass CORS to fetch files when working with localhost'
date: '2023-05-24'
thumbnail: '/thumbnails/terminal.png'
slug: 'bypass-cors-when-working-with-localhost'
tag: 'tools'
canonicalUrl: 'https://amanhimself.dev/blog/bypass-cors-when-working-with-localhost/'
---

Sometime back I learned about [opening files or directories using the `open` command from the CLI on a Mac](/blog/how-to-open-any-folder-from-terminal-in-finder-on-mac/). It's simple yet effective.

Another use case that I've been using it for is to open the current project when in `localhost` in the browser and bypass the CORS policy to fetch files that are also available locally.

```shell
open -a "Google Chrome Canary"  --args --user-data-dir="/tmp/chrome_dev_test" --disable-web-security
```

The argument passed in the above command overrides the browser's default behavior.


Bypass CORS to fetch files when working with localhost

Setup Macbook M1 for Web and React Native development

---
date: '2023-05-02'
title: 'Set default location for images, files and attachments in Obsidian'
thumbnail: '/thumbnails/ob.png'
slug: 'set-default-folder-for-images-files-and-attachments-in-obsidian'
tag: 'obsidian'
canonicalUrl: 'https://amanhimself.dev/blog/set-default-folder-for-images-files-and-attachments-in-obsidian/'
---

I've used Obsidian as my primary note-taking app for over six months. One thing I've found myself often doing (either work or personal) is using screenshots as images in my notes.

Now, if you have used Obsidian or started using it, all images or attachments are stored in the root vault folder. If you are fine with it, you can skip reading this article and spend your time on something more useful. However, if you are like me, and want to stick to using a note-taking app and keep things organized, then keep reading.
I organize my notes into two top-level folders:

I organize my notes into two top level folders:

- `Areas`: Notes on stuff related to my personal life, books I read, and things I'm learning.
- `Inbox`: Notes on work, meetings, people, and the articles I'm working on.

I wanted a separate folder for images and attachments that could serve both folders and keep things organized in the vault. In Obsidian, it's doable by changing one setting:

- Click **Settings** in the Obsidian desktop app and in the Settings menu, click **Files & Links**.
- In the **Default location for new attachments**, in the dropdown, select **In the folder specified below**.
- In the **Attachment folder path**, choose the path of the folder you want to save all images and other files.

![ss1](https://i.imgur.com/D2AyGqt.png)


Set default location for images, files and attachments in Obsidian

---
title: 'Convert png to jpg using ffmpeg'
date: '2023-04-01'
slug: 'convert-png-to-jpg-using-ffmpeg'
thumbnail: '/thumbnails/terminal.png'
tag: 'tools'
canonicalUrl: 'https://amanhimself.dev/blog/convert-png-to-jpg-using-ffmpeg'
---

As a documentarian, I've used [ffmpeg](https://ffmpeg.org/) command-line tool for a while now. It is a powerful tool that can do a lot of things. At work, I use it to convert videos and images.

## Prerequisites

Install [`ffmpeg` using homebrew](https://formulae.brew.sh/formula/ffmpeg).

## Why use ffmpeg?

On macOS, Cleanshot X app by default captures the screenshot in **png** format. These files are large in file size and have a large resolution (not usually suitable for a web page).

## How to use ffmpeg to convert png to jpg?

A **jpg** can have a smaller file size and is preferred for web pages. To convert a **png** to **jpg** using ffmpeg, use the following command:

```shell
ffmpeg -i input.png -preset ultrafast output.jpg
```


Convert png to jpg using ffmpeg

---
title: 'Keep homebrew up to date'
date: '2023-04-01'
slug: 'keep-homebrew-up-to-date'
thumbnail: '/thumbnails/terminal.png'
tag: 'tools'
canonicalUrl: 'https://amanhimself.dev/blog/keep-homebrew-up-to-date'
---

I've been using [homebrew](https://brew.sh/) for as long as I can remember using macOS. I recently learned about cleaning up old and outdated files using the `brew cleanup` command.

Sometimes, I periodically upgrade packages that are installed using brew. Thus, I thought, why not add an alias such as below in my `.zshrc` file:

```shell
alias hbc="brew update && brew upgrade && brew cleanup"
```

This helps me to update and upgrade outdated packages, and clean up old files. Now, whenever I have to run all three tasks, I simply run `hbc` in the terminal.

Upgrading outdated packages periodically saves me from a situation when installing a new package, homebrew will upgrade all outdated packages first.


Keep homebrew up to date

---
title: '2022 - A year in review'
slug: 'year-in-review-2022'
date: '2023-01-01'
thumbnail: '/thumbnails/writing.png'
tag: 'year-review'
canonicalUrl: 'https://amanhimself.dev/blog/year-in-review-2022/'
---

My blog has been neglected for the last few months. Writing a year review is my way of making amendments to start writing back and reflecting on the year gone by.

It's been a good year that allowed me to focus on myself. I do not feel one bit guilty about not writing enough or creating enough. I spent most of my time prior to this year in a burnout state. I did not want to repeat that. Getting over burnout is tricky, and I am not sure if I am completely over it, but I often feel that I am coping better than before.

Right now, I'm still trying to balance my life and work and find a way to fit the new endeavors I'm seeking to pursue in between.

## Starting the year with a new job

I started the year by switching jobs in a new role as a [Senior Content Developer at Vercel](https://twitter.com/amanhimself/status/1488351029708341251).

I was excited to work full-time on the docs team. In the past year, I have often felt like I have been working towards this career path. I started at the end of January and left it at the end of April.

During my time there, I learned a lot about working on a team full of creative and hyper-focused people who shared a love for writing and creating content like mine. But unfortunately, it was a short adventure. I felt left out as the weeks passed. Besides writing in tech, I've been a part of React Native community since almost the beginning of my career. So that shift in tech focus I was working daily was a huge leap to take mentally.

## App.js conf 2022

[App.js conference](https://appjs.co/) has been a vital part of my professional career. I forgot what it felt like to be at a tech conference (since the last one I attended was in 2019) and in the end, it was an amazing experience.

Meeting with beautiful and like-minded people who share their work and interesting ways of solving problems is always fascinating and curiosity-engaging. Not only one gets to see the new and exciting upcoming stuff but also meeting people in person after such a long and limited human exposure felt like it was the first time.

![Me with friends at the App.js conference in June 2022](https://2022.appjs.co/images/photos/0014.jpg)

[It was a wonderful experience to attend it in person](https://twitter.com/amanhimself/status/1535694759653740547), meet old friends, make new ones and travel once again. Everything from the venue, the beautiful city of Krakow, the quality talks, and the MCs, was a great experience. Kudos to the organizers for hosting it and providing that altogether!

## Joining Expo

I joined Expo at the end of June 2022. Leaving my previous role, traveling and attending a tech conference, and getting the new opportunity was like a full circle. I am working majorly on the docs. Other areas of my work include engaging with the community.

Before joining, I'd been familiar with the team and their work for four years. From the outside, I know the tremendous amount of hard work the whole team puts in. Driving React Native ecosystem forward, making exponential improvements with each SDK version, focusing on better tooling, Developer Experience (DX), and adding support for native modules. After joining, it is exciting to observe that closely and be a part of it every day!

## I wrote 21 articles

I enjoy the process of writing for many reasons. One is that I get to learn something new and deepen my understanding of a topic. Another is pretending to be the first user and trying to understand a way of solving a specific problem.

It also opens doors for me to explore new opportunities. This year, I got to work with some of the publications I have been working with for a long time such as Jscrambler and Logrocket. Two new additions where I published a couple of tutorials as a guest author for [Sentry](https://blog.sentry.io/authors/aman-mittal/) and [FlyCode](https://blog.flycode.com/how-to-use-flycode-to-update-your-react-apps-on-the-fly).

It also turns out people like to read them too. Here are some of the most popular posts I wrote this year:

- [Setup Macbook M1 for Web and React Native development](https://amanhimself.dev/blog/setup-macbook-m1/): Even though, this post was Originally published in 2021, I'm actively updating this post and will continue to do so for a while. It's been a popular post once again and I hope it helped folks to get started with their new Macbooks.

- [How to install Node.js using NVM on macOS M1](https://amanhimself.dev/blog/install-nodejs-using-nvm-on-macos-m1/): I had fun collecting this piece of information. For a long time, I have been using NVM to manage Node.js on the fly. I wrote this one to make a walkthrough of how to set it up and keep up with the latest Node.js versions.

- [Getting Started with React Navigation v6 and TypeScript in React Native](https://amanhimself.dev/blog/react-navigation-v6-and-typescript-in-react-native/): A post that was exciting to work on. In this tutorial, I 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.

- [Implementing Infinite Scroll with React Query and FlatList in React Native](https://amanhimself.dev/blog/infinite-scroll-with-react-query-and-flatlist-in-react-native/): Another exciting post that I wrote to explore how to implement infinite scrolling in an app using React Query and a real-time external API.

- [Set up a Next.js project with ESLint, Prettier, Husky, and Lint Staged](https://amanhimself.dev/blog/setup-nextjs-project-with-eslint-prettier-husky-lint-staged/): In this post, I shared my personal and minimal configuration that I used in a couple of Next.js projects.

## I redesigned my blog

My blog is one of the most consistent things in my life. This year, I decided to finally move it to Next.js (if you have been reading this post from the top, you might have realized why 😄). It was fun to do it and to learn new frameworks such as Next.js and Chakra UI.and and implement some of the tweaks that have been on my backlog for a while. I have decided to call the current version 9. Honestly, there have been so many changes and tweaks since I started it in 2019 that I have lost track in the past.

### My blog in numbers

I moved away from Google Universal Analytics since their public announcement about GA4 to Fathom in the middle of March. However, I did not remove Google Analytics from my blog after I realized that I might lose historical data for the first three months.

Overall I got a pretty consistent readership this year with over [150k+ views](https://amanhimself.dev/blog/year-in-review-2021/#i-wrote-43-articles):

![Yearly stats from Google Analytics 3](https://res.cloudinary.com/amanmittal/image/upload/v1672559907/CleanShot_2023-01-01_at_13.24.51_2x_zujbbg.png)

It is also interesting to see that what's driving most of the traffic is a mixture of both old and new articles:

![This year, both old and new articles are driving traffic to my blog](https://res.cloudinary.com/amanmittal/image/upload/v1672561827/CleanShot_2023-01-01_at_13.59.48_2x_bv5t2n.png)

Also that visitors are coming mostly through organic search:

![Most traffic is organic](https://res.cloudinary.com/amanmittal/image/upload/v1672561601/CleanShot_2023-01-01_at_13.56.26_2x_x6jacf.png)

I occasionally cross-posted my articles on [Medium](https://medium.com/@amanhimself), [Dev.to](https://dev.to/amanhimself) and [Hashnode](https://amanhimself.hashnode.dev/). Not as much as I would like to since I didn't spend that much time writing.

Dev.to is my primary platform to focus on cross-posting this year. I did manage to get 45k+ views.

![Dev.to stats, in a nutshell, this year](https://res.cloudinary.com/amanmittal/image/upload/v1672562431/CleanShot_2023-01-01_at_14.05.52_2x_z0rws4.png)

## Hackernoon award

Awesome folks at Hackernoon nominated me for two categories in the Noonies 2022 awards. One of the categories was [Most authentic Developer Advocate of the year](https://noonies.hackernoon.com/2022/programming/2022-most-authentic-developer-advocate-of-the-year).

I ended up winning the award (to my surprise). **A huge thanks to anyone who voted for me (and is reading this post 🤗).** I'm humbled by the recognition

![Noonies 2022 award for most authentic developer advocate of the year](https://pbs.twimg.com/media/Fj7zc51acAELXgH?format=jpg&name=medium).

### Newsletter saga continues

Less writing equals less number of issues. I did manage to send out a newsletter anytime I had something to share. However, this project was also abandoned for the last four or five months.

[Last year](https://amanhimself.dev/blog/year-in-review-2021), I was charmed by Revue and decided to jump on the wagon. Unfortunately, however, Twitter's new owners have decided to close it down. After moving to Revue, I thought I could stick with the service for some time, but the newsletter saga continues.

I have decided to move to Substack. I have used it in the past, and it's a good service. If you haven't already subscribed and would like to, here is the link: [amanhimself.substack.com](https://amanhimself.substack.com/). Even though Revue did allow migrating existing subscribers to Substack, there was no way of migrating the previous issues.

## Highlights from my GitHub

A couple of years back, I started to maintain a [single repo](https://github.com/amandeepmittal/react-native-examples) for all the demos and example apps I write using React Native and Expo. These example apps are part of the tutorials you see on this blog. To my surprise, it reached 700+ stars. It's still being actively maintained by me and occasional PRs from other contributors.

I also continued to maintain the [Expo Community project that integrates Firebase JS SDK in an Expo app](https://github.com/expo-community/expo-firebase-starter). After being involved directly with the [changes in the latest Expo SDK around Firebase](https://docs.expo.dev/guides/using-firebase), I planned out a new version of this project. Even after working on official integration documentation and guides, I feel this project can still serve as an additional resource.

### I made a lot of commits

Working on open-source projects makes the GitHub chart go green:

![A glimpse of activity on my GitHub account](https://res.cloudinary.com/amanmittal/image/upload/v1672574631/CleanShot_2023-01-01_at_17.32.15_2x_px9qkx.png)

_A big shout and a huge thanks to folks who [sponsored me on GitHub](https://github.com/sponsors/amandeepmittal) this year!_

## Reading

I did manage to go through some good books this year. Here are some of my picks that I enjoyed reading:

- [First, We Make the Beast Beautiful by Sarah Wilson](https://www.goodreads.com/book/show/35847961-first-we-make-the-beast-beautiful): A beautifully written book about anxiety for anxious people without any fluff. Love the short chapters, and the writing style which is quite soothing.
- [The Practice of Groundedness by Brad Stulberg](https://www.goodreads.com/book/show/57504944-the-practice-of-groundedness): I first heard Brad speaking about his book on a podcast. I don't remember what got me hooked in the first place. I remember picking this book after listening to that episode and I am glad I did. It talks a lot about patience.
- [Four Thousand Weeks by Oliver Burkeman](https://www.goodreads.com/book/show/55742688-four-thousand-weeks): Having read "time hacks" books in the past, this book becomes a bit easier to read and understand the flaws with the former strategies (or hacks). I realized that those "hacks" work only until one gets burned out completely and gets put off track in life. The importance of flexibility, living one's life, being patient, and coming to a realization that work is a never-ending, spiral pit.

## Traveling

I did manage to escape on two occasions but overall did not travel as much as I would have liked to.

## Wrapping up

I have been writing [yearly reviews](https://amanhimself.dev/tags/year-review/) since 2020. It's fun for me to look back over what I did and what I focused on last year or where my time went.

Thank you all for reading this post or reading any other post!

That's it for now. Happy New Year!


2022 - A year in review

---
title: 'Change the color of hidden files and folders in VSCode'
date: '2022-09-04'
slug: 'change-color-hidden-file-folder-name-in-vscode'
thumbnail: '/thumbnails/vscode.png'
tag: 'vscode'
canonicalUrl: 'https://amanhimself.dev/blog/change-color-hidden-file-folder-name-in-vscode/'
---

Using VSCode, I love switching back and forth between dark and light themes to make things interesting for myself when working. Generally, I prefer a [light-ish dark theme](https://amanhimself.dev/blog/setup-macbook-m1/#themes) such as [fairyFloss](https://marketplace.visualstudio.com/items?itemName=nopjmp.fairyfloss) or Quiet Light that comes pre-installed.

I recently switched to [morgan.code](https://marketplace.visualstudio.com/items?itemName=morgan-codes.morgan-codes-vscode-theme) theme, which uses a set of contrasting colors that are pleasing to my growing old eyes. It is developed by a fellow developer [Morgan Richardson](https://www.instagram.com/morgan.codes/).

Using this theme for a while, I realized I am so used to seeing files and folder names that git ignores in a specific gray color.

The original theme comes with blue-ish (maybe some sort of Cyan or Aqua) color for the ignored files and folders.

![original theme](https://i.imgur.com/J6hik7g.jpg)

To customize this color value, VSCode, provides a property called `gitDecoration.ignoredResourceForeground` which accepts a color value in hexadecimal format. It can be used with the VSCode theme color setting: [`workbench.colorCustomizations`](https://code.visualstudio.com/api/references/theme-color) to override the value that the original theme provides.

```json
// settings.json

{
  // ...
  "workbench.colorCustomizations": {
    // select theme you want to apply color customization value
    "[morgan.codes]": {
      "gitDecoration.ignoredResourceForeground": "#434343"
    }
  }
}
```

That's it! And now, my optic nerves are happy again.

![customized theme](https://i.imgur.com/sk0tFYi.jpg)

VSCode is so customizable that it surprises me at times.


Change the color of hidden files and folders in VSCode

---
title: 'How to add opacity to a Pressable component in React Native'
date: '2022-08-04'
thumbnail: '/thumbnails/react.png'
slug: 'add-opacity-to-pressable-component-react-native'
tag: 'react-native'
canonicalUrl: 'https://danblogs.vercel.app/blog/add-opacity-to-pressable-component-react-native/'
---

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 (Android and iOS).

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](https://reactnative.dev/docs/touchableopacity#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.

```jsx
// 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](https://danblogs.vercel.app/blog/show-touch-indicator-on-ios-simulator/) to show that the button is pressed.

## Using the wrapper component

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

```jsx
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.

![ss1](https://i.imgur.com/XcLXQbn.gif)

## 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`.

```jsx
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`:

```jsx
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.

![ss2](https://i.imgur.com/LDyiXIu.gif)

## Conclusion

The [Pressable component](https://reactnative.dev/docs/pressable) 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.


How to add opacity to a Pressable component in React Native

---
title: 'Open any folder from the Terminal app in a Finder on macOS'
date: '2022-07-21'
thumbnail: '/thumbnails/terminal.png'
slug: 'how-to-open-any-folder-from-terminal-in-finder-on-mac'
tag: 'tools'
canonicalUrl: 'https://amanhimself.dev/blog/how-to-open-any-folder-from-terminal-in-finder-on-mac/'
---

Often, I struggle or want to open the current directory I am working from the Terminal app to the Finder window on macOS.

I have been a macOS user for almost eight years now, and it never occurred to me that I couldn't open the current location from the Terminal app. Until recently, a frustration point led me to find the solution. Again, though, I am surprised by its simplicity.

To open the current working directory in the Finder window, use the following command:

```shell
open .
```

The `open` command opens a file or a folder. It exists on the macOS.

You can do more with this command. The `/` argument opens the root directory.

```shell
open /
```

A specific directory is also allowed:

```shell
open ~/Desktop
```

Using the option `R`, you can locate a specific file or folder in the Finder:

```shell
open -R /blog
```

## Opening files

There are more things that the `open` command can do. It can open files. For example, to open a markdown file in the default editor or IDE:

```shell
open ./blog/mm-yy/your-file-name.md
```

The above command opens the markdown file in the Xcode. You can pass the `-t` option to open in the file in a text editor.

```shell
open -t ./blog/mm-yy/your-file-name.md
```

## Opening URLs

It can do more than open files and folders. It can also open a URL in the default web browser set up on your machine:

Use option `a` to override the default web browser and specify a different one.

```shell
open -a Safari https://www.google.com
```


Open any folder from the Terminal app in a Finder on macOS

---
title: 'How to push local git tag to remote repository on GitHub'
date: '2022-06-26'
slug: 'push-local-git-tag-to-remote-repository-on-github'
thumbnail: '/thumbnails/git.png'
tag: 'git'
canonicalUrl: 'https://amanhimself.dev/blog/push-local-git-tag-to-remote-repository-on-github/'
---

After creating a git tag locally on a local project, I needed to push it on GitHub. The reason is that I'm hosting the project repository on GitHub.

## Pushing a tag to GitHub

Pushing a tag in git is similar to pushing a branch. The only difference is that it needs the specific git tag name.

```shell
git push -u origin <tag_name>
```

Here is an example. I had already created a new tag, `v0.1` on my local project. To push it to GitHub, I had to run:

```shell
gpush v0.1
Total 0 (delta 0), reused 0 (delta 0), pack-reused 0
To https://github.com/amandeepmittal/[project-name].git
 * [new tag]         v0.1 -> v0.1
```

Note: I use the `gpush` alias for `git push -u origin`. Complete list of all the aliases I use for git, check this [dotfile](https://github.com/amandeepmittal/dotfiles/blob/master/.zshrc).

## Checking for if a tag is already pushed

To check if a tag is only available on local, run:

```shell
git push --tags --dry-run
```

The `--dry-run` option in the above command summarizes what will be included in the next commit.

If the output of the above command states `Everything up-to-date`, it means there are no tags available to push.

In case when the above command comes back with an output like the below, it means that the tag is available to push.

```shell
To https://github.com/amandeepmittal/[project-name].git
 * [new tag]         v0.1 -> v0.1
```


How to push local git tag to remote repository on GitHub

---
title: 'How to remove console statements from React Native apps'
slug: 'remove-console-log-from-react-native-apps-in-production'
date: '2022-06-19'
thumbnail: '/thumbnails/react.png'
tag: 'react-native'
canonicalUrl: 'https://amanhimself.dev/blog/remove-console-from-react-native-apps/'
---



For debugging purposes, I often use `console.log` statements in React Native and Expo applications.

A babel plugin called [babel-plugin-transform-remove-console](https://github.com/babel/minify/tree/master/packages/babel-plugin-transform-remove-console) takes care of removing any `console` statements from the code. This is a great plugin that I like to use, especially before releasing apps in production.

## How to use it

Install the plugin as a dev dependency in the project:

```shell
yarn add -D babel-plugin-transform-remove-console
```

Then, add it as a plugin under `env.production` in the `babel.config.js` file:

```js
module.exports = function () {
  return {
    // ... other project config such as presets and plugins
    env: {
      production: {
        plugins: ['transform-remove-console']
      }
    }
  };
};
```

This will remove any `console` statements from the code.

## Why does it work

React Native uses [Babel](https://babeljs.io/) as a tool to read and parse React and ES6 (or later) syntax into a specific version of JavaScript code that can run in an environment (that doesn't support newer ES6 or React syntax).

How to remove console statements from React Native apps

Getting Started with React Navigation v6 and TypeScript in React Native

---
title: 'Remove bottom border or shadow on header in React Navigation'
slug: 'remove-bottom-border-shadow-on-header-in-react-navigation'
date: '2022-06-05'
thumbnail: '/thumbnails/react-navigation.png'
tag: 'react-native'
canonicalUrl: 'https://amanhimself.dev/blog/remove-bottom-border-shadow-on-header-in-react-navigation/'
---



React Navigation is an amazing navigation library in React Native ecosystem. I have been a big fan because it allows a lot of customization when using different navigators (such as Stack, Tab, or Drawer).

One of the customizations that can be done is to remove the border at the bottom of the header. By default, the Stack and Tab Navigators in this library add a header on a screen. This header has a default bottom border or shadow.

Here is an example of a border on the header on iOS:

![ss1](https://i.imgur.com/PnxIHxT.png)

The orange arrows are used to highlight the shadow. Similarly, on Android, the width is thin and hard to notice.

![ss2](https://i.imgur.com/MoP6J0t.png)

To make it more visible, you can populate the `screenOptions` of the navigator as shown below:

```js
screenOptions={{
  headerStyle: {
    borderBottomWidth: 4,
  },
}}
```

Increasing the value of the property `borderBottomWidth` will make the border thicker.

![ss3](https://i.imgur.com/I7l8INR.png)

At times, the UI of the screen might not require a header border or shadow at all. In such cases, you can always customize the `screenOptions` by adding the property `headerShadowVisible` and setting it to `false`.

```js
screenOptions={{
  headerShadowVisible: false,
}}
```

You will get the desired output both on iOS and Android:

![ss4](https://i.imgur.com/bBQuIJJ.png)

![ss5](https://i.imgur.com/NId2zbQ.png)

## Conclusion

[React Navigation docs](https://reactnavigation.org/) are a great asset for learning more about the library and what customization options it provides.

Also, check out my other post on [how to remove the bottom tab bar border in React Navigation](https://amanhimself.dev/blog/react-navigation-remove-tab-bar-border/).

[Source code available at GitHub](https://github.com/amandeepmittal/react-native-examples/tree/main/remove-header-border-react-navigation)

Remove bottom border or shadow on header in React Navigation

---
title: 'How to remove AsyncStorage warning when using Firebase JS SDK with React Native'
slug: 'remove-asyncstorage-has-been-extracted-warning-using-firebase'
date: '2022-05-28'
thumbnail: '/thumbnails/firebase.png'
tag: 'firebase'
canonicalUrl: 'https://amanhimself.dev/blog/remove-asyncstorage-has-been-extracted-warning-using-firebase/'
---

The [Firebase JS SDK](https://github.com/firebase/firebase-js-sdk) is a library that provides a set of JavaScript APIs for interacting with Firebase services. I use it with some of the production React Native apps built with Expo, mainly for authentication, database, and storage. I also use it for an open-source template that I am currently maintaining called [expo-firebase-stater], which provides a head start when building a React Native app with Firebase.

For React Native apps, the Firebase SDK uses AsyncStorage under the hood to store an authentication session when an app restarts. It is one of the out-of-the-box features that Firebase provides that I like and use when implementing authentication in React Native apps using the Firebase Auth service.

## Why does the AsyncStorage warning occur

Typically, the Firebase Auth module is configured as shown below in a React Native app:

```js
import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
```

Using this code snippet to initialize Firebase auth service in the app will cause the warning:

```shell
AsyncStorage has been extracted from the react-native core and will be removed in a future release ...
```

![ss1](https://i.imgur.com/pBiiXzY.png)

Firebase SDK uses the AsyncStorage module from the `react-native` core. From React Native versions `0.59` and up, the AsyncStorage module has been moved to its own package: `@react-native-async-storage/async-storage`.

[Here](https://github.com/firebase/firebase-js-sdk/blob/96ab56bac05ccaf506ed3a02ccad5ff7e01a07d0/packages/app/index.rn.ts#L27) is the line of code in Firebase JS SDK repo that imports AsyncStorage from `react-native` core:

![ss2](https://i.imgur.com/uWt9gRQ.jpg)

## Remove the AsyncStorage warning

To remove the AsyncStorage warning, start by installing the `@react-native-async-storage/async-storage` package:

```shell
# for Expo projects
npx expo install @react-native-async-storage/async-storage
```

Firebase SDK provides another method in its Auth module called `initializeAuth`. This method allows more control over the Auth instance from the `getAuth` method. In addition, it provides a way to define what persistence layer to use to store the authentication session using the method `getReactNativePersistence` and using which Dependency. Since we are using the Firebase auth service in a React Native app, we can use the React Native Dependency.

> Note: [Dependencies interface](https://firebase.google.com/docs/reference/js/auth.dependencies.md#dependencies_interface) in Firebase enables tree shaking. This means that a web app does not have to include all the dependencies that Firebase supports, such as Cordova or React Native.

Start by importing `initializeAuth` and `getReactNativePersistence` from `firebase/auth/react-native`. To initialize `auth`, pass an object as the second argument to the `initializeAuth` method. This object has a `persistence` key that takes the value of which persistence layer to use.

```js
import AsyncStorage from '@react-native-async-storage/async-storage';
import { initializeApp } from 'firebase/app';
import {
  initializeAuth,
  getReactNativePersistence
} from 'firebase/auth/react-native';

// add firebase config here

// initialize firebase app
const app = initializeApp(firebaseConfig);

// initialize auth
const auth = initializeAuth(app, {
  persistence: getReactNativePersistence(AsyncStorage)
});

export { auth };
```

Using the same strategy as the above code snippet should resolve the warning about AsyncStorage.


How to remove AsyncStorage warning when using Firebase JS SDK with React Native

---
title: 'Patterns and Anti-patterns in Node.js'
date: '2022-04-03'
slug: 'patterns-and-anti-patterns-in-nodejs'
thumbnail: '/thumbnails/node.png'
tag: 'nodejs'
canonicalUrl: 'https://blog.appsignal.com/2022/02/23/patterns-and-anti-patterns-in-nodejs.html/'
---

![cover_image](https://blog.appsignal.com/_next/image?url=%2Fimages%2Fblog%2F2022-02%2Fpatterns.png&w=2048&q=50)

> Originally posted at [AppSignal Blog](https://blog.appsignal.com/2022/02/23/patterns-and-anti-patterns-in-nodejs.html)

Node.js is a back-end 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](https://expressjs.com/). 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 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 (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 to another object.

```js
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.

```js
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`.

1. 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.

```js
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.

```js
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:

```shell
SyntaxError: Identifier 'x' has already been declared
```

2. `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.

```js
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.

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

Trying to run the above will give the below error:

```shell
ReferenceError: Cannot access 'foo' before initialization
```

3. 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 has been declared to know its scope.

Look at the following code.

```js
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.

```js
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 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.

```js
const myFunction() {
  let someVariable;
}
```

Even if you define variables using the `const` keyword within the scope of a function, lowerCamelCase is preferred.

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

Variables can also be defined by a `const` keyword in a specific use case. If you intend to declare a variable 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 with the `const` keyword.

```js
const ANOTHER_VAR = 3;
```

Define classes in Node.js applications with UpperCamelCase:

```js
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](https://eslint.org/). 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](https://prettier.io/) 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](https://github.com/google/eslint-config-google) and [Airbnb](https://github.com/airbnb/javascript) 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:

```js
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:

```js
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:

```js
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:

```js
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](https://github.com/winstonjs/winston): A popular logging library that is easily configurable.
- [Bunyan](https://github.com/trentm/node-bunyan): Another popular logging library that outputs in JSON by default.
- [Log4js](https://github.com/log4js-node/log4js-node): A logger for the Express framework that supports colored console logging out of the box.
- [Pino](https://github.com/pinojs/pino): A logger that is focused on performance. It is considered to be faster than its alternatives.

An example of configuring Pino:

```js
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](https://github.com/pinojs/pino/blob/HEAD/docs/web.md#express), 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](https://github.com/visionmedia/supertest), [Jest](https://jestjs.io/), 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:

```js
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:

```js
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 and 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](https://docs.npmjs.com/cli/audit) or commercial tools like [snyk](https://snyk.io/) 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 to 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!


Patterns and Anti-patterns in Node.js

---
title: 'How to show Touch indicator on iOS simulator'
date: '2022-04-03'
slug: 'show-touch-indicator-on-ios-simulator'
thumbnail: '/thumbnails/xcode.png'
tag: 'xcode'
canonicalUrl: 'https://amanhimself.dev/blog/show-touch-indicator-on-ios-simulator/'
---

Sometimes it is necessary to highlight a single touch event on the iOS simulator's screen and show the tap that registers it. For example, this is useful when recording a video or a [gif](https://en.wikipedia.org/wiki/GIF) using the simulator.

The iOS simulator comes with a pre-configured list of settings, including to display the touch indicator. However, sometimes, it is hard to find them.

## Enable Touch Indicator on iOS simulator

To enable the touch indicator, open the terminal window and run the following command:

```shell
defaults write com.apple.iphonesimulator ShowSingleTouches 1
```

It accepts a boolean value of `1`.

After running the command, if the iOS simulator is already running, close and restart it.

To test it out, open the simulator and tap on the screen.

![ss1](https://i.imgur.com/h31kDO1.gif)

## Disable Touch Indicator on iOS simulator

To disable the touch indicator from the terminal window, run the following command to change the boolean value to `0`:

```shell
defaults write com.apple.iphonesimulator ShowSingleTouches 0
```


How to show Touch indicator on iOS simulator

How to handle Deep Linking in a React Native app

---
title: "When to use keyExtractor prop in React Native's FlatList"
slug: 'use-key-extractor-in-react-native-flatlist'
date: '2022-03-27'
thumbnail: '/thumbnails/react.png'
tag: 'react-native'
canonicalUrl: 'https://amanhimself.dev/blog/use-key-extractor-in-react-native-flatlist'
---

![cover_image](https://i.imgur.com/sRxXsyt.png)

In React Native, the [FlatList component](https://reactnative.dev/docs/flatlist) 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](https://reactnative.dev/docs/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.

```js
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:

```js
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:

![ss2](https://i.imgur.com/ShoysNV.png)

## 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 ...":

![ss1](https://i.imgur.com/0zN4FXy.png)

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`.

```js
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:

```js
<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](https://amanhimself.dev/tags/react-native/) and [Expo category](https://amanhimself.dev/tags/expo/) pages on my blog. You can also subscribe my [newsletter](https://amanhimself.substack.com/) or follow on [Twitter](https://twitter.com/amanhimself) to get updates on whenever I publish a new article or tutorial.


When to use keyExtractor prop in React Native's FlatList

---
title: 'Set up a Next.js project with ESLint, Prettier, Husky, and Lint Staged'
slug: 'setup-nextjs-project-with-eslint-prettier-husky-lint-staged'
date: '2022-02-13'
thumbnail: '/thumbnails/nextjs.png'
tag: 'nextjs'
canonicalUrl: 'https://amanhimself.dev/blog/setup-nextjs-project-with-eslint-prettier-husky-lint-staged/'
---

Working on a large codebase, having a consistent style guide is important. Inconsistencies can occur by using single quotes instead of double quotes, tabs instead of spaces, etc.

A pre-commit hook can address this problem. Before making a new commit, a pre-commit hook can check for types in TypeScript files, run a lint test, use prettier to format files, etc. All of this is possible by using:

- ESLint
- Prettier
- Husky
- Lint Staged

I'll share my personal and minimal configuration that I have recently started using for Next.js projects in this post.

## Setting up a new Next.js project

Creating a new Next.js project with TypeScript enabled is done by running the following command from a terminal:

```shell
npx create-next-app@latest --typescript

# After the project directory is created
# Navigate inside it
cd next-typescript-config
```

After the project directory generated, navigate inside it.

The `--typescript` flag prepares the Next.js app with all the configuration required to enable and use TypeScript. In addition, it comes with a `tsconfig.json` file:

```js
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}
```

The flag also installs the required dependencies and type definitions installed as devDependencies found in the `package.json` file.

## ESLint is already set up

Linting is a technique to check the code for syntax errors. It also allows checking for code style issues. All the checking happens based on the defined set of rules and plugins.

Since [Next.js version 11](https://nextjs.org/blog/next-11#conformance), it comes with ESLint integration out-of-the-box. This means that Next.js installs devDependencies like `eslint` and `eslint-config-next` and creates an `eslintrc.json` file. Next.js uses the `next lint` command to catch ESLint errors.

The [eslint-config-plugin](https://github.com/vercel/next.js/tree/canary/packages/eslint-config-next) by Next.js team contains pre-defined set of rules. You do not have to define them explicitly. These rules include some common and best practices in React ecosystem.

For example, the `eslint-config-plugin` uses `eslint-plugin-react-hooks` and `eslint-plugin-react` as dependencies, and the recommended set of rules from both these packages are already included. This takes care of installing the standard eslint packages for React apps in the Next.js app and then manually adding them as `plugins`.

Next.js ESLint plugin also includes best practices around Core Web Vitals and accessibility.

## Setting up Prettier

Prettier is a code formatter that ensures that all the code files follow a consistent styling. If you are into Web development, chances are you are already using it.

ESLint rules in Next.js already come with some code formatting rules. To override them and initiate your personal prettier config, start by installing the following devDependencies:

```shell
yarn add --dev prettier eslint-plugin-prettier eslint-config-prettier
```

To do Prettier work with ESLint, add `"prettier"` to the `extends` and the `plugins` array in the `.eslintrc.json` file.

```json
{
  "extends": ["next/core-web-vitals", "prettier"],
  "plugins": ["prettier"]
}
```

In the `extends` array, make sure `prettier` is the last item so that when you define your Prettier configuration that takes precedence over other configurations that may have their way of formatting code.

You can also define the `rules` in this file. For example, whenever there is a code formatting issue with any of the files in my Next.js app, I like it to be exposed as a warning rather than an error.

```json
{
  "extends": ["next", "next/core-web-vitals", "prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "warn",
    "no-console": "warn"
  }
}
```

Create a new file `.prettierrc` and add a custom Prettier configuration:

```json
{
  "singleQuote": true,
  "trailingComma": "none",
  "arrowParens": "avoid",
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
  "bracketSameLine": false,
  "bracketSpacing": true,
  "tabWidth": 2
}
```

Also, add a `.prettierignore` file to ignore formatting on certain directories and files:

```js
.next
.cache
package-lock.json
public
node_modules
next-env.d.ts
next.config.ts
yarn.lock
```

## Installing Husky

[Husky](https://typicode.github.io/husky/#/) is a utility that allows linting and testing when committing the code.

To set it up, initially, install the package as a dev dependency:

```shell
yarn add --dev husky
```

To enable Husky run:

```shell
yarn husky install
```

In the next step, I will configure Husky's pre-commit hook after setting up lint-staged.

## Setting up Lint Staged

The [lint-staged](https://github.com/okonet/lint-staged) package allows linting staged git files. It also checks for the changed files instead of the whole source code.

You can configure lint-staged to not lint files in markdown or json format. You can also separate ESLint checks based on a file's extension.

Create a `.lintstagedrc.js` file at the root of the Next.js app and add the following snippet:

```js
module.exports = {
  // Type check TypeScript files
  '**/*.(ts|tsx)': () => 'yarn tsc --noEmit',

  // Lint & Prettify TS and JS files
  '**/*.(ts|tsx|js)': filenames => [
    `yarn eslint ${filenames.join(' ')}`,
    `yarn prettier --write ${filenames.join(' ')}`
  ],

  // Prettify only Markdown and JSON files
  '**/*.(md|json)': filenames => `yarn prettier --write ${filenames.join(' ')}`
};
```

After setting up the lint-staged configuration, open the `/.husky/pre-commit` file and add the following pre-commit hook:

```shell
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

# Add the following
yarn lint-staged

# If using npm, remove above and uncomment below
# npm run lint-staged
```

To test it, I have modified the `/pages/_app.tsx` file and removed the reference of `AppProps`. This will return a type error when committing this file:

![ss1](https://i.imgur.com/ubLHL12.png)

## Conclusion

That's all for setting up ESLint, Prettier, Husky, and Lint Staged with a minimal configuration. You can expand the configuration for any tools as per your needs or modify the pre-commit hook.


Set up a Next.js project with ESLint, Prettier, Husky, and Lint Staged

---
title: 'How to install Node.js using NVM on macOS M1'
date: '2022-02-06'
slug: 'install-nodejs-using-nvm-on-macos-m1'
thumbnail: '/thumbnails/node.png'
tag: 'nodejs'
canonicalUrl: 'https://amanhimself.dev/blog/install-nodejs-using-nvm-on-macos-m1/'
---

> Updated on July 24, 2023

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)](https://github.com/nvm-sh/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](https://en.wikipedia.org/wiki/POSIX) shell such as `zsh`.

## Prerequisites

Make sure you have installed the following before proceeding:

- [Command line tools](https://amanhimself.dev/blog/setup-macbook-m1/#xcode)
- [Homebrew](https://amanhimself.dev/blog/setup-macbook-m1/#homebrew)
- [Git](https://amanhimself.dev/blog/setup-macbook-m1/#git)
- [zsh](https://amanhimself.dev/blog/setup-macbook-m1/#zsh-and-oh-my-zsh)

## 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:

```shell
brew uninstall --ignore-dependencies node
brew uninstall --force node
```

## Install NVM via Homebrew

Install NVM using Homebrew:

```shell
brew install nvm
```

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

```shell
mkdir ~/.nvm
```

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

```shell
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:

```shell
nvm install --lts
```

Then, verify the version by running:

```shell
node --version

# Output: v16.13.2
```

## Multiple Node.js versions

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

```shell
# 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:

```shell
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:

```shell
nvm uninstall 14
```

## List all installed Node.js versions

To check for all the installed Node.js versions via nvm, run:

```shell
nvm ls
```

## Set the latest Node.js version as the default

To always set the latest Node.js version as the default in the shell, run:

```shell
nvm alias default node
```

## Update to the latest version

To update to the latest version `nvm` provides the following command:

```shell
nvm install --lts
```

After installing the latest version, to re-install any global packages installed with the previous version, run:

```shell
nvm reinstall-packages previous_version
```


How to install Node.js using NVM on macOS M1

---
title: 'Implementing Infinite Scroll with React Query and FlatList in React Native'
date: '2022-01-30'
slug: 'infinite-scroll-with-react-query-and-flatlist-in-react-native'
thumbnail: '/thumbnails/expo.png'
tag: 'expo'
canonicalUrl: 'https://blog.jscrambler.com/implementing-infinite-scroll-with-react-query-and-flatlist-in-react-native/'
---

> Originally published at [Jscrambler.com](https://blog.jscrambler.com/implementing-infinite-scroll-with-react-query-and-flatlist-in-react-native/)

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](https://rawg.io/apidocs). 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. 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](https://nodejs.org/en/) version `12.x.x` or above installed
- Have access to one package manager such as npm or yarn or npx
- [RAWG API key](https://rawg.io/apidocs)

You can also check the [complete source code for this example is at this GitHub repo](https://github.com/amandeepmittal/react-native-examples/tree/main/infinite-scroll-with-react-query).

## Creating a new React Native app

To create a new React Native app, let's generate a project using [create-react-native-app](https://github.com/expo/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:

```shell
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:

```shell
yarn add native-base react-query && expo install 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.

```shell
# 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.

```js
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 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 horizontal.

## Setting up providers

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

```js
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 `App.js`, you will get the following output on a device:

![ss1](https://i.imgur.com/aFep48m.png)

## 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.

```js
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 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.

```js
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 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. 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.

```js
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:

![ss2](https://i.imgur.com/jSX1Aqu.gif)

## 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.

```js
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.

```js
// 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.

```js
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 `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.

```js
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:

```js
<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.

![ss3](https://i.imgur.com/IiJMVA7.gif)

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.

```js
<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.

```js
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:

![ss4](https://i.imgur.com/uLmbrjC.gif)

## 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](https://react-query.tanstack.com/guides/infinite-queries) documentation here.

You can also check the [complete source code for this example is at this GitHub repo](https://github.com/amandeepmittal/react-native-examples/tree/main/infinite-scroll-with-react-query).


Implementing Infinite Scroll with React Query and FlatList in React Native

---
title: 'How to rename default branch in Git and GitHub'
date: '2022-01-10'
thumbnail: '/thumbnails/git.png'
slug: 'how-to-rename-default-branch-name-in-git-and-github'
tag: 'git'
canonicalUrl: 'https://amanhimself.dev/blog/how-to-rename-default-branch-name-in-git-and-github/'
---

I'm currently [maintaining a GitHub repo](https://github.com/amandeepmittal/react-native-examples) that has 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.

```shell
git branch -m master main
```

Above, `master` is the old branch name and `main` is the new branch name.

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

```shell
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.

```shell
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.

![ss1](https://i.imgur.com/T9Mm8g5.png)

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

```shell
git push origin --delete master

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

That's it!


How to rename default branch in Git and GitHub

---
title: 'Tamagui for React Native: Create faster design systems'
slug: 'tamagui-for-react-native'
date: '2022-01-09'
thumbnail: '/thumbnails/expo.png'
tag: 'expo'
canonicalUrl: 'https://blog.logrocket.com/tamagui-react-native-create-faster-design-systems/'
---

> Originally Published at [Blog.Logrocket.com](https://blog.logrocket.com/tamagui-react-native-create-faster-design-systems/) on December 24, 2021

The React Native system is gradually progressing towards solutions for sharing code between React Native and React Native web applications.

One recent addition to the React Native ecosystem is [Tamagui](https://tamagui.dev), a UI kit that includes a series of themes, media queries, and typed inline styles, as well as an optimizing compiler. Tamagui aims to close the gap between React Native and React Native web applications by covering the foundational elements of an app, like styling, theming, and providing cross-platform components, all while keeping the app’s performance in mind.

In this article, we’ll learn how to configure Tamagui in a React Native app and a React Native Web app, checking out the components it offers in its current state. Let’s get started!

## Create a new React Native app

We’ll start by creating a new React Native project using [Expo CLI](https://docs.expo.dev/workflow/expo-cli/), which enhances the developer experience with tools in the React Native ecosystem, for example, a variety of templates. Choosing one of these templates is a great starting point for the demo app we’ll build in this tutorial. Open up a terminal window and execute the following command:

```shell
npx expo init tamagui-app
# after the project directory is created, navigate inside it
cd tamagui-app
```

On running the command, you’ll be prompted to choose a template. Choose `blank (TypeScript)`. It will create a project with minimal TypeScript configuration.

## Installing dependencies

After navigating inside the project directory, we’ll install the libraries required to configure Tamagui inside a React Native project. But first, run the following command from the terminal:

```shell
yarn add tamagui@1.0.0-alpha.37 @tamagui/babel-plugin@1.0.0-alpha.37
```

Since Tamagui is still in its alpha release, I'm using specific package versions. However, when a more stable version is released in the future, this may change. Be sure to refer to the [official documentation](https://tamagui.dev/docs/intro/installation) for the most up to date information on installing dependencies.

`tamagui` is the UI kit, and `@tamagui/babel-plugin` is the babel plugin that loads the design system properties defined inside another file called `tamagui.config.ts`. You’ll need to create this file in the root of your project, but you can leave it blank for now. We’ll return to it later.

The `@unimodules/core` dependency is required by the Tamagui UI kit to work with an Expo project. Open the terminal window and execute the following command:

```shell
expo install @unimodules/core
```

Next, we need to install dev dependencies to use Tamagui with Expo web. Open the terminal window and execute the command below:

```shell
yarn add -D @expo/webpack-config@0.16.14 esbuild-loader@2.17.0 tamagui-loader@1.0.0-alpha.37 thread-loader@3.0.4
```

As before, we've installed packages with specific versions. In the `package.json` file, you’ll find the following summary of dependencies and dev dependencies that we installed:

```json
{
  "dependencies": {
    "@tamagui/babel-plugin": "^1.0.0-alpha.37",
    "@unimodules/core": "~7.2.0",
    "expo": "~43.0.2",
    "expo-status-bar": "~1.1.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-native": "0.64.3",
    "react-native-web": "0.17.5",
    "tamagui": "^1.0.0-alpha.37"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@types/react": "~17.0.21",
    "@types/react-native": "~0.66.6",
    "typescript": "~4.5.2",
    "@expo/webpack-config": "^0.16.14",
    "esbuild-loader": "^2.17.0",
    "tamagui-loader": "^1.0.0-alpha.37",
    "thread-loader": "^3.0.4"
  }
}
```

Now that our dependencies are installed, add `@tamagui/babel-plugin` to the `babel.config.js` file:

```js
module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      [
        '@tamagui/babel-plugin',
        {
          components: ['tamagui'],
          config: './tamagui.config.ts'
        }
      ]
    ]
  };
};
```

In the code snippet above, ensure that the path defined for `config` is the relative path to the Tamagui config file. `components` contains an array of npm modules containing Tamagui components. For this example app, we're using Tamagui base components. Therefore, we don't need to add any further configuration.

## Setting up Tamagui configuration

Tamagui lets you create themes, define tokens, add shorthands, and more. However, it requires you to describe all the properties and set up the foundation of a design system before you dive into building the components for your React Native app.

To set up the required Tamagui configuration, we’ll use the `createTamagui` function. We’ll need to define the following:

- `tokens`: Generate variables in `theme` and `app`
- `media`: Defines reusable responsive media queries
- `themes`: Defines your design theme
- `shorthands`: Allows you to define keys that expand the `style value` props. For example, you can define `f` for flex, `ai` for `alignItems`, `jc` for `justifyContent`, etc.

You can start setting up the configuration with the `size` and `space` properties. We’ll also need `defaultFont` using the `createFont` function with a configuration object that contains values for font `family`, `size`, `lineHeight`, `fontWeight`, and `letter spacing`.

All of the values above are used inside of the `createTokens` function, which allows you to create tokens, or the variables mapped to CSS variables at build time. The `createTokens` function requires the `size `, `space`, `font`, `color`, `radius`, and `zIndex` properties in its configuration object.

The code block below contains a minimal configuration that I've created for the demo app with all of the required properties:

```ts
import { createFont, createTokens, createTamagui } from 'tamagui';
const size = {
  0: 0,
  1: 4,
  2: 8
};
const space = {
  ...size,
  '-0': -0,
  '-1': -5
};
const defaultFont = createFont({
  family: 'Arial',
  size: {
    1: 14,
    2: 18,
    3: 22
  },
  lineHeight: {
    1: 15,
    2: 20
  },
  weight: {
    4: '300',
    7: '600'
  },
  letterSpacing: {
    4: 0,
    7: -1
  }
});
const tokens = createTokens({
  size,
  space,
  font: {
    title: defaultFont,
    body: defaultFont
  },
  color: {
    lightPurple: '#EDD2F3',
    darkPurple: '#544179'
  },
  radius: {
    0: 0,
    1: 3,
    2: 5,
    3: 10,
    4: 15,
    5: 20
  },
  zIndex: {
    0: 0,
    1: 100,
    2: 200,
    3: 300,
    4: 400,
    5: 500
  }
});
const shorthands = {
  ai: 'alignItems',
  bg: 'backgroundColor',
  br: 'borderRadius',
  f: 'flex',
  h: 'height',
  jc: 'justifyContent',
  m: 'margin',
  p: 'padding',
  w: 'width',
  lh: 'lineHeight',
  ta: 'textAlign'
} as const;
const media = {
  xs: { maxWidth: 660 },
  gtXs: { minWidth: 660 + 1 },
  sm: { maxWidth: 860 },
  gtSm: { minWidth: 860 + 1 },
  md: { minWidth: 980 },
  gtMd: { minWidth: 980 + 1 },
  lg: { minWidth: 1120 },
  gtLg: { minWidth: 1120 + 1 },
  xl: { minWidth: 1280 },
  xxl: { minWidth: 1420 },
  short: { maxHeight: 820 },
  tall: { minHeight: 820 },
  hoverNone: { hover: 'none' },
  pointerCoarse: { pointer: 'coarse' }
};
const config = createTamagui({
  defaultTheme: 'light',
  shorthands,
  media,
  tokens,
  themes: {
    light: {
      bg: tokens.color.lightPurple
    }
  }
});
type Conf = typeof config;
declare module 'tamagui' {
  interface TamaguiCustomConfig extends Conf {}
}
export default config;
```

## Using Tamagui Provider

Tamagui configuration provides a [Tamagui.Provider](https://tamagui.dev/docs/intro/configuration#add-provider) component that wraps all the other components inside your app:

```tsx
import React from 'react';
import Tamagui from './tamagui.config';
export default function App() {
  return <Tamagui.Provider>{/* The rest of your app here */}</Tamagui.Provider>;
}
```

## Tamagui views, utility props, and shorthands

In Tamagui, stacks are the core view elements for creating flex-based layouts. There are three different types of stacks available, `XStack`, `YStack`, and `ZStack`, and each implies a different axis.

In the example below, the `defaultTheme` takes the value of the theme you've defined in the config file. The `XStack` uses several shorthands; for example, `f` stands for `flex`, `ai` for `alignItems`, `jc` for `justifyContent`, and `bg` for `backgroundColor`.

The value of the `$bg` prop is also coming from the config file, where we’ve explicitly defined that the `bg` property for the `light` theme should have a particular color value. The value of `space` on the `YStack` is set to `$2` from the config file itself:

```tsx
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { YStack, Text, XStack } from 'tamagui';
import Tamagui from './tamagui.config';
export default function App() {
  return (
    <Tamagui.Provider defaultTheme="light">
      <StatusBar style="dark" />
      <XStack f={1} ai="center" jc="center" bg="$bg">
        <YStack space="$2">
          <Text fontSize={20} marginBottom={20}>
            Tamagui
          </Text>
          <Text fontSize={20}>Tamagui</Text>
        </YStack>
      </XStack>
    </Tamagui.Provider>
  );
}
```

You can further define shorthands for properties like `margin`, `marginBottom`, and `padding` and use them as utility props on components, giving you more control over your styles and themes, as seen in the following example

![ss1](https://i.imgur.com/kZX0PQk.png)

## Making Tamagui work on the web

Now, we’ll take advantage of the `@expo/webpack-config` package that we installed earlier, which is used to create a custom webpack configuration. When running the `expo start --web` command, the Expo CLI checks whether the project has a custom webpack configuration in the root directory. If the project does not have a custom webpack configuration, Expo uses the default configuration.

To create our custom webpack configuration, we’ll first run the following command from a terminal window, which will create a `config` file for you to customize the webpack configuration. When you run this command, you’ll be prompted to choose from several options. Select the `webpack.config.js` option:

```shell
expo customize:web
```

Next, add the custom configuration to the `webpack.config.js` file, as recommend by the [Tamagui documentation](http://(https://tamagui.dev/docs/intro/installation). The configuration will allow us to run `tamagui-loader` on the web:

```js
const createExpoWebpackConfigAsync = require('@expo/webpack-config');
module.exports = async function (env, argv) {
      const config = await createExpoWebpackConfigAsync(env, argv);
      // Customize the config before returning it.
      // add TAMAGUI_TARGET = web to defines
      const DefinePlugin = config.plugins.find(
        x => x.constructor.name === 'DefinePlugin'
      );
      DefinePlugin.definitions\['process.env'\]['TAMAGUI_TARGET'] = `"web"`;
      // replace babel-loader with our snackui + esbuild loaders
      const rules = config.module.rules[1].oneOf;
      const ruleIndex = rules.findIndex(x =>
        x.use?.loader?.includes('babel-loader')
      );
      rules[ruleIndex] = {
        test: /\.(mjs|[jt]sx?)$/,
        use: [
          'thread-loader',
          {
            loader: require.resolve('esbuild-loader'),
            options: {
              loader: 'tsx',
              target: 'es2019',
              keepNames: true
            }
          },
          {
            loader: require.resolve('tamagui-loader'),
            options: {
              config: './tamagui.config.ts',
              components: ['tamagui']
            }
          }
        ]
      };
      return config;
};
```

After adding the configuration, execute the command `yarn web` or `expo start --web`.
You’ll get the following output at `http://localhost:19006/`:

![ss2](https://i.imgur.com/jlLUyaX.png)

## Responsive styles using media queries

You can incorporate media queries directly in the UI elements of your app. After defining your media queries in the `tamagui.config.ts` file, you’ll use a Hook called `useMedia` provided by the library:

```tsx
import { YStack, Text, XStack, useMedia } from 'tamagui';
```

Now, let's add a background color to `YStack`. The color value will vary on the screen's minimum width using the media query `md: { minWidth: 980 }`.

In the code snippet below, the `backgroundColor` value is set to `yellow` if the screen width is less than `980`, otherwise, it's set to `red`:

```tsx
export default function App() {
  const media = useMedia();
  return (
    <Tamagui.Provider defaultTheme="light">
      <StatusBar style="dark" />
      <XStack f={1} ai="center" jc="center" bg="$bg">
        <YStack
          space="$2"
          width={200}
          height={100}
          p={10}
          bg={media.md ? 'red' : 'yellow'}
        >
          <Text fontSize={media.md ? 32 : 18} marginBottom={20}>
            Tamagui
          </Text>
          <Text fontSize={20}>React Native</Text>
        </YStack>
      </XStack>
    </Tamagui.Provider>
  );
}
```

You can check out the following example:

![ss3](https://i.imgur.com/LpckfEH.png).

Similarly, the `fontSize` property also changes based on the media query, as seen in the example:

![ss4](https://i.imgur.com/InzeIX3.gif)

## Conclusion

Although Tamagui is still in its [alpha release](https://tamagui.dev/docs/intro/releases), it provides [benchmarks](https://tamagui.dev/docs/intro/benchmarks) over other UI kits in the React Native space that support web and outperforms them. In this tutorial, we took a first look at Tamagui, learning the best way to configure it for different use cases.

As a developer, I'll be keeping a close eye on Tamagui’s development and growth. The idea of creating a custom design system from scratch to support both native and web platforms is both fascinating and useful. I hope you enjoyed this tutorial!


Tamagui for React Native: Create faster design systems

---
title: '2021 - A year in review'
slug: 'year-in-review-2021'
date: '2021-12-31'
thumbnail: '/thumbnails/writing.png'
tag: 'year-review'
canonicalUrl: 'https://amanhimself.dev/blog/year-in-review-2021/'
---

As we transition to 2022 and leave 2021 behind, it's a great time to reflect on the year passing by. It is my second year writing a ["year review"](https://amanhimself.dev/blog/year-rewind-2020/). It's fun for me to look back over what I did and what I focused on last year. I want to continue the tradition this year as well.

I started this year in a burnout phase. I didn't feel like doing things that generally excite me. It took me a while to realize that I was in the phase. If you don't realize it, you won't know what hit you. Getting burned out from last year was not over. It takes time to accept it and get out of it. That's okay, and I'm glad I took my time.

That said, I focused on the areas I could or had the energy to do so. And I'm happy with the choices I've made so far.

## Working as a Developer Advocate 🥑

I got my first role in DevRel early this year from a career perspective. I started [working as a Developer Advocate at Draftbit](https://amanhimself.dev/blog/first-three-months-as-developer-advocate/). It was not something I was actively looking for, but I couldn't say no to it when the opportunity arrived. It was a significant change for me, the kind of change I needed without knowing.

Working as a Developer Advocate allowed me to learn a lot about different things, majorly about documentation and working in a fast-paced environment. Working closely with a team with a lot of experience and learning about moving pieces of a business is a precious addition to any technical career.

Most of my work time was spent on writing content and leading documentation. Picking up pieces and trying to recognize the gaps were challenging. That's still a work in progress. For me, technical writing and blogging have been an integral part of my career. This year was better because I used my skills and experience and acquired more knowledge.

## I wrote 43 articles ✍️

Writing tech articles or tutorials is a gateway for me to engage with the tech community and keep me indulging in upcoming updates, starting conversations with people, and meeting new folks. I enjoy the process of writing and everything that comes with it. I still get to learn and share many long-form tutorials, but I also tried publishing a few short notes on this blog. Something that I haven't done in a long time and turns out people like to read them too.

Here are some of the most popular posts I wrote this year:

- [Setup Macbook M1 for Web and React Native development](https://amanhimself.dev/blog/setup-macbook-m1/): one of the most read blog posts. I'm glad I wrote it. The process of setting up a new laptop thrice a year can be daunting (the laptop that I bought at the start of this year went dead for no apparent reason, and then I had to buy a replacement for it while it went for repair, fun times 😬). I'm also actively updating this post and will continue to do so for a while.

- [How to Create a Custom Image Gallery in React Native](https://amanhimself.dev/blog/custom-preview-image-gallery-in-react-native/) In this tutorial, I talk about how to create a custom gallery of images using react-native-snap-carousel and FlatList component from React Native. The FlatList is used to display the thumbnail view for each image below the carousel. The construction of the syncing part between the two is to add functionality such that when an image in the carousel is scrolled either left or right, the thumb in the FlatList is also going to be scrolled along with it. To achieve this synchronization between the two, I used React Hooks.

- [How to use shared element transitions in React Native](https://amanhimself.dev/blog/shared-element-transitions/) I learned a bit about using Shared Elements in React Native and React Navigation. Transitions in mobile applications provide design continuity. This continuity is provided by connecting common elements from one view to the next while navigating in the app. I wrote about the process of doing that in this post.

- [How to Create a Custom Tab Bar in React Native](https://amanhimself.dev/blog/create-custom-tab-bar-in-react-native/) Another post that I was excited to work on. Creating a custom tab bar using Bottom Tab Navigator from React Navigation and Blur View.

My personal blog is one of the most consistent things in my life. I didn't run experiments on it, move to a new framework, or try a complete overhaul. It is still flawed. I have an ongoing list of things that I'd like to implement as I find myself writing more active over the years. I also love that people like to visit it and read the content I share here.

Overall, I got a pretty consistent readership this year with over 90k+ views:

![ss1](https://i.imgur.com/0gGHK68.png)

It is also interesting to see that what’s driving most of the traffic is old articles:

![ss3](https://i.imgur.com/msuWpjr.png)

And, also that visitors are coming mostly through organic search:

![ss4](https://i.imgur.com/xErLMj1.png)

I still cross-post stuff at times on [Medium](https://medium.com/@amanhimself), [Dev.to](https://dev.to/amanhimself) and [Hashnode](https://amanhimself.hashnode.dev/). Not as much as I would like to, but I am eager to explore Hashnode more next year.

Dev.to has been my focus on cross-posting this year. I did manage to get 70k+ views and 15k followers.

![ss2](https://i.imgur.com/B8tQxBN.png)

## I spoke at a few events 🗣

Giving talks or speaking is not my strongest asset, and I used to find it quite challenging (at least in my head). Although, after going through some appearances, I did find it quite satisfying.

Thanks to React Day Bangalore for inviting me for a panel discussion on React Native. It's on [YouTube](https://www.youtube.com/watch?v=_HKzhe8f47Y). I also [gave workshops](https://amanhimself.dev/speaking) due to my role of working as a Developer Advocate.

I also got invited [to speak at a Twitter space](https://twitter.com/TheAnkurTyagi/status/1465624585773228034). Thanks to my friend Ankur ([@TheAnkurTyagi](https://twitter.com/TheAnkurTyagi/)) for the invitation and hosting it. We talked about tech writing and its impact on being a Developer Advocate role and working with startups.

## Highlights from my GitHub 🐙

Last year, I started to maintain [a single GitHub repo](https://github.com/amandeepmittal/react-native-examples) for all the demos and example apps I write using React Native and Expo. These example apps are part of the tutorials you see on this blog. I continued to do it this year as well.

Another thing I maintain is an [Expo Community project](https://github.com/expo-community/expo-firebase-starter) that integrates Firebase JS SDK in an Expo app. Since the Expo SDK's exponential growth in the past year with the awesome tooling, Developer Experience (DX), and support for native modules, I have some thoughts on what changes I'll be doing next year. Keep an eye on this [GitHub repo](https://github.com/expo-community/expo-firebase-starter).

I also got my first [GitHub sponsor](https://twitter.com/amanhimself/status/1454352509124820994) this year 🤩

## Newsletter saga continues 💌

I failed to run my [weekly newsletter](https://amanhimself.substack.com/). First, it became bi-weekly and then monthly. It's all due to my inconsistency in sending out and not managing my time with publishing posts. However, it did grow to 1319 subscribers from 1201 last year. I appreciate folks who stick around after me being inconsistent enough to deliver.

I did move it from Substack to Revue after Twitter acquired Revue. With Revue, I like the experience so far. I've been using it for three months and have sent three newsletters. Anyone using Twitter can now easily subscribe from [my Twitter profile](https://twitter.com/amanhimself). Thanks to my buddy [Scott Spence](https://twitter.com/spences10) who showed me how easy it was to migrate to Revue. If you're on Twitter, then give Scott a follow. He's an amazing person, an experienced developer, and he creates awesome content in the Web Dev space.

## Reading 📚

I did manage to go through some good books this year. Here are some of my picks that I enjoyed reading:

- [Getting Started in Developer Relations by Sam Julien](https://www.goodreads.com/book/show/57735972-getting-started-in-developer-relations) - One of the best resources I read starting out. Sam concisely talks about what a Dev Rel/Advocacy role is about, the skillset, the mindset, and some red flags when seeking a role like this one. I highly recommend this book.
- [The Business Value of Developer Relations: How and Why Technical Communities Are Key to Your Success](https://www.goodreads.com/book/show/40167835-the-business-value-of-developer-relations) - It goes more in-depth and talks about the importance of nurturing a community, maintaining positive relations, building a team of DevRels, and much more.
- [Before the Coffee Gets Cold: Tales from the Café](https://www.goodreads.com/book/show/54373691-before-the-coffee-gets-cold) - I've only one word for it: mesmerizing!

## Travelling

During the end of the year, I managed to get out of New Delhi for the first time in two years for a [weekend trip](https://www.instagram.com/p/CXsVqr9lJyY/):

![ss5](https://i.imgur.com/qRBwCNO.jpg)

## Wrapping up

Even though I have been inconsistent with my personal goals this year, failing to achieve many of them, yet, there is a lot of things when I look back at this year that I did and the choices I made, I am glad it happened.

Thank you for reading this post and reading any other post, opening and reading email newsletters, reading my tweets on Twitter, and listening to me 🙏

Have a great 2022!


2021 - A year in review

---
title: 'Create a custom hook to Show/Hide Password Visibility in React Native'
date: '2021-12-11'
thumbnail: '/thumbnails/expo.png'
slug: 'show-hide-password-in-react-native-using-custom-hook'
tag: 'expo'
canonicalUrl: 'https://amanhimself.dev/blog/show-hide-password-in-react-native-using-custom-hook/'
---

> Updated on May 24, 2023

Building log-in and sign-up forms in a React Native app are fundamentally composed of input fields and buttons. One field that you will often find yourself adding to these forms is the password field. This password field is created using React Native's `TextInput` component. The common behavior of this field is to hide a user's password behind obscure characters.

Take a look at an example of the `TextInput` component that is used to create a password field.

```js
import { useState } from 'react';
import { StyleSheet, TextInput, View } from 'react-native';

export default function App() {
  const [password, setPassword] = useState('');

  return (
    <View style={styles.container}>
      <View style={styles.inputContainer}>
        <TextInput
          style={styles.inputField}
          name="password"
          placeholder="Enter password"
          autoCapitalize="none"
          autoCorrect={false}
          textContentType="newPassword"
          secureTextEntry
          value={password}
          enablesReturnKeyAutomatically
          onChangeText={text => setPassword(text)}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5EEDC',
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: 12
  },
  inputContainer: {
    backgroundColor: 'white',
    width: '100%',
    borderRadius: 8,
    flexDirection: 'row',
    alignItems: 'center',
    borderWidth: 4,
    borderColor: '#d7d7d7'
  },
  inputField: {
    padding: 14,
    fontSize: 22,
    width: '90%'
  }
});
```

It uses the `secureTextEntry` prop such that when a text value is entered in the input field, it is not visible as to what is being entered in that field. Here is the output of the above snippet on a device:

![ss1](https://i.imgur.com/kn0yv9z.gif)

However, giving an option to a user to let them see the current value they enter leads to a good experience and might be necessary in most cases.

> [Source code in this GitHub repo](https://github.com/amandeepmittal/react-native-examples/tree/main/password-visibility-custom-hook-example).

## Show or Hide Password Visibility hook

To add the ability to show or hide the password field's visibility, let's create a custom hook in a new file called `useTogglePasswordVisibility.js`.

Start by importing the `useState` hook from React library. You will need to create two different state variables to toggle between the field's visibility and change the icon.

Then define a function called `useTogglePasswordVisibility`. Inside this function, create two new state variables:

- `passwordVisibility`: set its initial value to `true`. The reason is that this variable will be the value of the prop `secureTextEntry` on the `TextInput` component. You would want to hide the password field initially when the user enters the password in the input field.
- `rightIcon`: set its default valye to `eye`. This value depends on the icon library you're using in your React Native app. For this example, I'm using **MaterialCommunityIcons** from [Expo Vector Icons](https://docs.expo.dev//guides/icons/#expovector-icons).

```js
export const useTogglePasswordVisibility = () => {
  const [passwordVisibility, setPasswordVisibility] = useState(true);
  const [rightIcon, setRightIcon] = useState('eye');

  // ...
};
```

Next, add a method called `handlePasswordVisibility` that will allow the app user to toggle the password field's visibility between shown and hidden state. Do not forget to return all the variables and the handler method.

```js
export const useTogglePasswordVisibility = () => {
  const [passwordVisibility, setPasswordVisibility] = useState(true);
  const [rightIcon, setRightIcon] = useState('eye');

  const handlePasswordVisibility = () => {
    if (rightIcon === 'eye') {
      setRightIcon('eye-off');
      setPasswordVisibility(!passwordVisibility);
    } else if (rightIcon === 'eye-off') {
      setRightIcon('eye');
      setPasswordVisibility(!passwordVisibility);
    }
  };

  return {
    passwordVisibility,
    rightIcon,
    handlePasswordVisibility
  };
};
```

## Use the Password Visibility hook

Start by updating import statements in the `App.js` file:

```js
import { useState } from 'react';
import { StyleSheet, Pressable, TextInput, View } from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons';

import { useTogglePasswordVisibility } from './hook/useTogglePasswordVisibility';
```

Next, access the required variables and method from the `useTogglePasswordVisibility` hook. Add the following line at the top of the `App` component:

```js
export default function App() {
  const { passwordVisibility, rightIcon, handlePasswordVisibility } =
    useTogglePasswordVisibility();
  const [password, setPassword] = useState('');

  // ...
}
```

Modify the `TextInput` component's prop. Make sure to add the `passwordVisibility` as the value to the `secureTextEntry` prop.

```js
<TextInput
  secureTextEntry={passwordVisibility}
  // ... rest of the props remain unchanged
/>
```

Inside the `View` component that wraps the `TextInput`, add a button using the `Pressable` component. This button will allow the user to toggle between the hidden and shown state of the password field. It also wraps the icon component.

```js
<View style={styles.inputContainer}>
  {/* After TextInput component */}
  <Pressable onPress={handlePasswordVisibility}>
    <MaterialCommunityIcons name={rightIcon} size={22} color="#232323" />
  </Pressable>
</View>
```

That's all! Here is the output after this step:

![ss2](https://i.imgur.com/rTNH2Ud.gif)

Here is the complete code for the `App.js` file:

```js
import React, { useState } from 'react';
import { StyleSheet, Pressable, TextInput, View } from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons';

import { useTogglePasswordVisibility } from './hook/useTogglePasswordVisibility';

export default function App() {
  const { passwordVisibility, rightIcon, handlePasswordVisibility } =
    useTogglePasswordVisibility();
  const [password, setPassword] = useState('');

  return (
    <View style={styles.container}>
      <View style={styles.inputContainer}>
        <TextInput
          style={styles.inputField}
          name="password"
          placeholder="Enter password"
          autoCapitalize="none"
          autoCorrect={false}
          textContentType="newPassword"
          secureTextEntry={passwordVisibility}
          value={password}
          enablesReturnKeyAutomatically
          onChangeText={text => setPassword(text)}
        />
        <Pressable onPress={handlePasswordVisibility}>
          <MaterialCommunityIcons name={rightIcon} size={22} color="#232323" />
        </Pressable>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5EEDC',
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: 12
  },
  inputContainer: {
    backgroundColor: 'white',
    width: '100%',
    borderRadius: 8,
    flexDirection: 'row',
    alignItems: 'center',
    borderWidth: 4,
    borderColor: '#d7d7d7'
  },
  inputField: {
    padding: 14,
    fontSize: 22,
    width: '90%'
  }
});
```


Create a custom hook to Show/Hide Password Visibility in React Native

---
date: '2021-10-14'
title: 'How to avoid notches with Safe Area Context in React Native apps'
thumbnail: '/thumbnails/react.png'
slug: 'safe-area-context-in-react-native-apps'
tag: 'expo'
canonicalUrl: 'https://amanhimself.dev/blog/safe-area-context-in-react-native-apps/'
---

Most devices nowadays come with a notch or some kind of status bar. Therefore, when building a mobile application using React Native, it is vital to ensure that the content of an app screen is rendered correctly across different types of devices.

In this article, let's take a look at two different approaches to make app screens in React Native to avoid the content being positioned behind a notch or status bar.

The first approach will discuss `SafeAreaView` component from React Native components API. The second approach will discuss the advantage of using [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context#readme) open source library and how it provides a cross-platform solution.

## The Notch Problem

When you are starting to build a screen in React Native app, you might add use the following code snippet to display text:

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

export const HomeScreen = () => {
  return (
    <View style={[styles.container]}>
      <View style={{ backgroundColor: 'blue' }}>
        <Text style={{ fontSize: 28, color: 'white' }}>Hello World</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'red'
  }
});
```

The above code snippet has a parent `View` component with a background color of `red`. It wraps another `View` component with a background color of `blue` that contains a `Text` component to display some text on the screen.

This will display the content of the app screen on an iOS device as shown below:

![ss1](https://i.imgur.com/Qfizjpr.png)

The contents of the nested `View` component hides behind the status bar and the notch on the iOS device.

On an Android device, the behavior is exactly the same:

![ss2](https://i.imgur.com/RY1tEfz.png)

## How to Use the SafeAreaView component from React Native

One approach is to use [SafeAreaView component](https://reactnative.dev/docs/safeareaview) available in React Native.

```js
import { SafeAreaView } from 'react-native';
```

It can be used in the place of the top-level `View` component. It renders content within the safe area boundaries around the nested content and automatically applies padding.

Modify the previous code snippet:

```js
import React from 'react';
import { StyleSheet, Text, View, SafeAreaView } from 'react-native';

export const HomeScreen = () => {
  return (
    <SafeAreaView style={[styles.container]}>
      <View style={{ backgroundColor: 'blue' }}>
        <Text style={{ fontSize: 28, color: 'white' }}>Hello World</Text>
      </View>
    </SafeAreaView>
  );
};
```

It works perfectly on iOS:

![ss3](https://i.imgur.com/Mve0Nhu.png)

In React Native, this component is only applicable to iOS devices with iOS version 11 or later. Unfortunately, that means it doesn't work for Android devices as the screen's content is still behind the status bar.

## How to Use React Native's Safe Area Context Library

To use a cross-platform solution to handle safe areas on notch devices, there is a library called [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context). It provides a flexible API to handle safe area insets in JS and works on iOS, Android, and Web.

Start by installing it in your React Native app:

```shell
# for plain React Native apps
yarn add react-native-safe-area-context

# install pod dependency for iOS only
npx pod-install

# for Expo apps
expo install react-native-safe-area-context
```

This library provides a `SafeAreaProvider` that needs to wrap either your Root Navigator or the screen where you want to handle safe area insets.

For example, in the code snippet below, the `SafeAreaProvider` wraps the `HomeScreen` component since there is only one screen in the example app.

```js
import React from 'react';
import { SafeAreaProvider } from 'react-native-safe-area-context';

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

export default function App() {
  return (
    <SafeAreaProvider>
      <HomeScreen />
    </SafeAreaProvider>
  );
}
```

Now, you can import the `SafeAreaView` component from the `react-native-safe-area-context` library and replace it with the one from React Native.

```js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';

export const HomeScreen = () => {
  return (
    <SafeAreaView style={[styles.container]}>
      <View style={{ backgroundColor: 'blue' }}>
        <Text style={{ fontSize: 28, color: 'white' }}>Hello World</Text>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'red'
  }
});
```

It works both for iOS and Android:

![ss4](https://i.imgur.com/lfOTL3J.png)

If you give the nested `View` component, a property of `flex: 1` as:

```js
<View style={{ backgroundColor: 'blue', flex: 1 }}>
```

You can observe the safe are edges for iOS:

![ss5](https://i.imgur.com/86uwW7N.png)

The `SafeAreaView` acts like a regular `View` component from React Native and includes additional padding to position the content after the notch or the status bar of a device.

It also comes with an `edges` prop that customizes safe area insets around different edges such as top, bottom, left, and right.

## How to Use the useSafeAreaInsets Hook

Another advantage of using this library is that it provides a hook called `useSafeAreaInsets`. It offers more flexibility. It also gives more control, and you can apply padding for each edge using a property from this hook. For example, a `View` component below uses only wants the padding to be applied at the top edge:

```js
import { useSafeAreaInsets } from 'react-native-safe-area-context';

export const HomeScreen = () => {
  const insets = useSafeAreaInsets();

  return (
    <View
      style={{
        paddingTop: insets.top
      }}
    >
      {children}
    </View>
  );
};
```

## Conclusion

Handling status bars and notches across different devices become seamless with the [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context#readme) library. Try it out in your next React Native app.

_[Source code at this GitHub repository](https://github.com/amandeepmittal/react-native-examples/tree/master/rnSplashAndIconExample)_

_This post was also published at [freeCodeCamp](https://www.freecodecamp.org/news/how-to-use-safe-area-context-to-avoid-notches-in-react-native-apps/)._


How to avoid notches with Safe Area Context in React Native apps

---
title: 'How to configure VSCode Bracket Pair Colors Natively'
date: '2021-10-12'
slug: 'how-to-configure-vscode-bracket-colors-natively'
thumbnail: '/thumbnails/vscode.png'
tag: 'vscode'
canonicalUrl: 'https://amanhimself.dev/blog/how-to-configure-vscode-bracket-colors-natively/'
---

![cover image](https://res.cloudinary.com/practicaldev/image/fetch/s--lgaAXnJK--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r84rtekdnk3qd4r4v31e.png)

With an [update in August 2021](https://code.visualstudio.com/updates/v1_60#_high-performance-bracket-pair-colorization), VSCode started supporting Bracket pair colorization natively. It means there is no need to use the [Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer) extension (_which I love_).

In their official announcement, the VSCode team states they choose to implement this feature natively to address performance issues.

I recently uninstalled the extension and thought, let's try to use the editor without any bracket color extension. I cannot. I've been using the extension [as long as I remember](https://amanhimself.dev/blog/how-i-configure-vscode-for-everything/) and I cannot go back to plain, colorless brackets.

![ss1](https://i.imgur.com/JBOVcnV.png)

To enable this setting, open the `settings.json` file for the VSCode editor and add the following:

```json
{
  // ...
  "editor.bracketPairColorization.enabled": true,
  "workbench.colorCustomizations": {
    "editorBracketHighlight.foreground1": "#ffb86c",
    "editorBracketHighlight.foreground2": "#8be9fd",
    "editorBracketHighlight.foreground3": "#bd93f9",
    "editorBracketHighlight.foreground4": "#50fa7b",
    "editorBracketHighlight.foreground5": "#f1fa8c",
    "editorBracketHighlight.foreground6": "#abb2c0",
    "editorBracketHighlight.unexpectedBracket.foreground": "#ff5555"
  }
}
```

And tweak the colors according to your style!

![ss2](https://i.imgur.com/tSgx02e.png)

By the way, the above colors are from [Dracula theme's 🧛‍♂️ color palette](https://draculatheme.com/contribute) to match the overall editor theme I am currently using.


How to configure VSCode Bracket Pair Colors Natively

---
title: 'How to add Splash Screen and an App Icon in React Native'
date: '2021-10-01'
slug: 'how-to-add-a-splash-screen-and-app-icon-in-react-native-with-react-native-bootsplash'
thumbnail: '/thumbnails/react.png'
tag: 'react-native'
canonicalUrl: 'https://amanhimself.dev/blog/how-to-add-a-splash-screen-and-app-icon-in-react-native-with-react-native-bootsplash'
---

Every mobile application has a splash screen and an app icon, and together they provide the first impression. An app icon is displayed in various places, such as on an app store, on the device's app drawer, etc., whereas a splash screen is shown during the app startup. Adding a splash screen or an app icon to a React Native app can be an agile process.

In this tutorial, let's learn how to use an awesome package called [react-native-bootsplash](https://github.com/zoontek/react-native-bootsplash) to display a splash screen when an app starts and then learn the process of adding app icons in a React Native app.

## 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](https://nodejs.org/en/) version `12.x.x` or above installed
- Have access to one package manager such as npm or yarn or npx
- [react-native-cli](https://www.npmjs.com/package/react-native-cli) installed, or use npx

Note, the example app is created using React Native version `0.65.x`.

[**Complete source code for this example is at this GitHub repo**](https://github.com/amandeepmittal/react-native-examples/tree/master/rnSplashAndIconExample)

## Setup a React Native app

As an example for this tutorial, we will use a React Native project with two screens and React Navigation integrated.

To create a new React Native project and install the react-navigation dependencies, run the following command from the terminal window:

```shell
npx react-native init myAwesomeApp

# after the project directory is created
# navigate inside the directory
# and install the following dependencies

yarn add @react-navigation/native @react-navigation/native-stack react-native-safe-area-context react-native-screens
```

Inside `src/` directory, create a new directory called `navigation/` with a new file named `RootNavigator.js`. Add the following code to use the stack navigation pattern inside this file:

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

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

const Stack = createNativeStackNavigator();

const RootNavigator = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{ headerShown: false }}>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default RootNavigator;
```

Modify the `App.js` file:

```js
import React from 'react';

import RootNavigator from './src/navigation/RootNavigator';

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

export default App;
```

Now, let’s create two new screens. Start by creating a new directory called `src/screens/` and inside it, add the first file with the name `HomeScreen.js` and with the following code snippet:

```js
import React from 'react';
import { View, Text, StyleSheet, Pressable } from 'react-native';

const HomeScreen = ({ navigation }) => {
  return (
    <View style={styles.screenContainer}>
      <Text style={styles.title}>Home Screen</Text>
      <Pressable
        style={styles.buttonStyle}
        onPress={() => navigation.navigate('Details')}
      >
        <Text style={styles.buttonTextStyle}>Go To Detail Screen</Text>
      </Pressable>
    </View>
  );
};

const styles = StyleSheet.create({
  screenContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff'
  },
  title: {
    fontSize: 32
  },
  buttonStyle: {
    height: 54,
    width: '80%',
    marginTop: 32,
    borderRadius: 8,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#2EE59D',
    shadowRadius: 5,
    shadowOpacity: 0.7,
    shadowColor: 'rgba(46, 229, 157, 0.5)',
    shadowOffset: {
      width: 0,
      height: 3
    }
  },
  buttonTextStyle: {
    color: '#fdfdfd',
    fontWeight: '700'
  }
});

export default HomeScreen;
```

Now, add the second screen component file, `DetailScreen.js`, and the following code snippet:

```js
import React from 'react';
import { View, Text, StyleSheet, Pressable } from 'react-native';

const DetailScreen = ({ navigation }) => {
  return (
    <View style={styles.screenContainer}>
      <Text style={styles.title}>Detail Screen</Text>
      <Pressable
        style={styles.buttonStyle}
        onPress={() => navigation.navigate('Home')}
      >
        <Text style={styles.buttonTextStyle}>Go To Home Screen</Text>
      </Pressable>
    </View>
  );
};

const styles = StyleSheet.create({
  screenContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff'
  },
  title: {
    fontSize: 32
  },
  buttonStyle: {
    height: 54,
    width: '80%',
    marginTop: 32,
    borderRadius: 8,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#2EE59D',
    shadowRadius: 5,
    shadowOpacity: 0.7,
    shadowColor: 'rgba(46, 229, 157, 0.5)',
    shadowOffset: {
      width: 0,
      height: 3
    }
  },
  buttonTextStyle: {
    color: '#fdfdfd',
    fontWeight: '700'
  }
});

export default DetailScreen;
```

With the boilerplate setup done, now let’s build the apps for iOS and Android.

For iOS, run the following command:

```shell
npx react-native run-ios
```

For Android, run the following command:

```shell
npx react-native run-android
```

Here is what the example app looks like in its current form. Notice that the splash screen and the app icon are defaults that come with React Native.

![js1](https://i.imgur.com/dh7TYQF.gif)

We are picking an icon from [Flaticon.com](https://www.flaticon.com/premium-icon/atom_3326760?term=react&related_id=3326850&origin=search) for the example app.

After creating the original app icon, save it inside the directory `src/assets/` and name the file `original_icon`. (_Note: you can name the original icon file as per your requirement_).

![js2](https://i.imgur.com/WJakXfC.png)

_Tip_: Make sure your initial app logo is `1024x1024px`.

## Installing react-native-bootsplash

The initial step is to install the react-native-bootsplash package and then generate assets using it.

Open the terminal window and execute the following command to install the package:

```shell
yarn add react-native-bootsplash

# or if using npm
npm install react-native-bootsplash
```

Next, for iOS, execute the command to install pods.

```shell
npx pod-install ios
```

Tip: If you use a React Native version lower than `0.60`, please follow the instructions [here](https://github.com/zoontek/react-native-bootsplash#-manual-linking) to link the package manually.

Next, add the following script in the `package.json` file under the `"scripts"` section:

```json
"scripts": {
  "generate": "npx react-native generate-bootsplash ./src/assets/original_icon.png --background-color=2EE59D   --logo-width=100 --assets-path=./src/assets --flavor=main"
}
```

Here is each option described:

- `generate-bootsplash` is the command to generate the assets.
- `./src/assets/original_icon.png` is the path to the original icon file. The path may vary depending on where you save the file in your React Native project.
- `--background-color=hexadecimal_value` is a color value in hexadecimal format. The color here is used as the background color of the splash screen.
- `--logo-width=100` is the width of the logo. This is a default value provided by the package
- `assets-path` is the path to the assets directory.
- `flavor` is an Android only option. Let's pass the value `main` here to target the default version of the Android app. You can learn more about [Build Variants on Android here](https://developer.android.com/studio/build/build-variants).

This will generate assets in the path specified for the option `assets-path`, a storyboard called `BootSplash.storyboard` file inside the `ios/app-name` directory, as well as generate assets for the Android app inside different sub-directories of the `android/app/src/main/res` folder.

![js3](https://i.imgur.com/xmqvhmG.png)

Android requires five different sizes for different screen pixel densities. Icons for lower resolution are created automatically from the baseline (_mdpi_). Refer to the table below for more information on pixel densities:

|   Resolution    | Density | Pixel units |
| :-------------: | :-----: | :---------: |
| mdpi (Baseline) | 160 dpi |     1×      |
|      hdpi       | 240 dpi |    1.5×     |
|      xhdpi      | 320 dpi |     2×      |
|     xxhdpi      | 480 dpi |     3×      |
|     xxxhdpi     | 640 dpi |     4×      |

## Adding splash screen on iOS

Start by opening the file `ios/app-name.xcodeproj` in Xcode.

![js4](https://i.imgur.com/kjxEF8z.png)

Then, drag the file `BootSplash.storyboard` under the Project directory in the Xcode file manager on the left side of the Xcode from the path `ios/app-name/` directory.

![js5](https://i.imgur.com/Doa8D2k.png)

After dragging it, Xcode will prompt the following to create a folder reference. First, make sure that under the `Add to targets` option, the `app-name` is selected. Then click the **Finish** button.

![js6](https://i.imgur.com/RHMsIQL.png)

The `BootSplash.storyboard` file will now be represented in the file manager as shown below:

![js7](https://i.imgur.com/cJwlRGv.png)

Click on the `BootSplash.storyboard` file to verify that the background color was added when generating assets.

![js8](https://i.imgur.com/hSjkXLi.png)

Select the Xcode project from the file manager and select `BootSplash` from the dropdown menu next to `Launch Screen File`.

![js9](https://i.imgur.com/kdNCGCL.png)

Now, open the `ios/app-name/AppDelegate.m` file and add the import to the following header reference:

```c
#import "AppDelegate.h"

#import <React/RCTBridge.h>
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>

#import "RNBootSplash.h" // <- add this
```

In the same file, add the following line to initialize the BootSplash.

```c
@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  // ... other statements
   [RNBootSplash initWithStoryboard:@"BootSplash" rootView:rootView];
  return YES;
}
```

## Adding splash screen on Android

Start by modifying the `android/app/src/main/java/com/app-name/MainActivity.java` file.

```java
package com.rnsplashandiconexample;

import com.facebook.react.ReactActivity;

// ----- Add the following imports --------
import android.os.Bundle;
import com.zoontek.rnbootsplash.RNBootSplash;

public class MainActivity extends ReactActivity {

  /**
   * Returns the name of the main component registered from JavaScript. This is used to schedule
   * rendering of the component.
   */
  @Override
  protected String getMainComponentName() {
    return "rnSplashAndIconExample";
  }

  // ----- Add the following --------
  @Override
    protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    RNBootSplash.init(R.drawable.bootsplash, MainActivity.this);
  }
}
```

Then, modify the `android/app/src/main/res/values/styles.xml` file:

```xml
<resources>

    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <item name="android:textColor">#000000</item>
    </style>

    
    <style name="BootTheme" parent="AppTheme">
      
      <item name="android:background">@drawable/bootsplash</item>
    </style>

</resources>
```

Next, modify the `android/app/src/main/AndroidManifest.xml` file by removing the original `<intent-filter>` tag and its contents. Replace it by adding `android:exported="true"` and create a new `activity` element to use the theme created in the previous step.

```xml
<activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
        android:launchMode="singleTask"
        android:windowSoftInputMode="adjustResize"
        android:exported="true">  
</activity>


<activity
      android:name="com.zoontek.rnbootsplash.RNBootSplashActivity"
      android:theme="@style/BootTheme"
      android:launchMode="singleTask">
      <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
      </intent-filter>
</activity>
```

## Control how to display a splash screen when the navigator is mounted

You can control the behavior of the splash screen to display until all the children of the React Navigation's `NavigationContainer` are mounted for the first time. This can be done by using a prop on the `NavigationContainer` called [`onReady`](https://reactnavigation.org/docs/navigation-container/#onready).

Modify the `RootNavigator.js` file by importing the `react-native-bootsplash` and adding the prop `onReady`.

```js
// after other import statements
import RNBootSplash from 'react-native-bootsplash';

const RootNavigator = () => {
  return (
    <NavigationContainer onReady={() => RNBootSplash.hide()}>
      {/* Rest remains same */}
    </NavigationContainer>
  );
};
```

## Testing the splash screen configuration

The last step to see the splash screen in action is to run the build command for both iOS and Android.

Open the terminal window and run the command to build the app for iOS and Android:

```shell
# for iOS
npx react-native run-ios

# for Android
npx react-native run-android
```

Here is the output after this step:

![js10](https://i.imgur.com/QYtfVuP.gif)

## Adding app icon to iOS app

To generate assets for different iOS devices, I am using a free app icon generator called [appicon.co](https://appicon.co/).

![js11](https://i.imgur.com/odLO1I4.png)

After generating all the image assets, you will be able to download them in a zip file.

Uploading an app icon for iOS follows the same process as using native iOS development. Open the file `ios/app-name.xcodeproj` in Xcode. Select the `Image.xcassets` from the file manager. Then select the **AppIcon**.

![js12](https://i.imgur.com/N0iQPnH.png)

Drag and drop all the required image assets after downloading and unzipping them from appicon.co. Place the images as per the necessary pixel densities. After you are done, here is how the Xcode might look like:

![js13](https://i.imgur.com/Ub2KLe9.png)

Open a terminal window and run the command to build an app for iOS:

```shell
npx react-native run-ios
```

After the rebuild, the app icon will display.

![js14](https://i.imgur.com/ojOLDxb.png)

## Adding app icon to Android app

The leverage react-native-bootsplash package generates all the app icons for Android and stores them in the multiple sub-directories under the `android/app/src/main/res` directory.

![js15](https://i.imgur.com/4araXHx.png)

The simple way here is to replace the default values for the properties `android:icon` and `android:roundIcon` in the `android/app/src/main/AndroidManifest.xml` file to point to the `bootsplash_logo` file name.

```xml
<application
  android:name=".MainApplication"
  android:label="@string/app_name"
  // modify the two lines below
  android:icon="@mipmap/bootsplash_logo"
  android:roundIcon="@mipmap/bootsplash_logo"
  // ----------------------------
  android:allowBackup="false"
  android:theme="@style/AppTheme">
```

After this modification, rebuild the Android app using the following command from a terminal window:

```shell
npx react-native run-android
```

After the rebuild, the app icon will display.

![js16](https://i.imgur.com/giZq4u9.png)

## Conclusion

Once you get the hang of this process, it doesn't take much time. Those are all the necessary steps to add a splash screen and an app icon to a React Native app.

For more advanced usage of `react-native-bootsplash` please check its [official documentation here on GitHub](https://github.com/zoontek/react-native-bootsplash). There are some advanced strategies explained there, including animating the splash screen.

[**Complete source code for this example is at this GitHub repo**](https://github.com/amandeepmittal/react-native-examples/tree/master/rnSplashAndIconExample)

How to add Splash Screen and an App Icon in React Native

---
title: 'How to use iOS simulator in full-screen'
date: '2021-09-15'
slug: 'how-to-use-ios-simulator-in-full-screen'
thumbnail: '/thumbnails/xcode.png'
tag: 'xcode'
canonicalUrl: 'https://amanhimself.dev/blog/how-to-use-ios-simulator-in-full-screen/'
---

When working on React Native or Expo applications, it is important to create focus to get in a flow. Sometimes, there are a lot of tasks to cover and very little time. To help focus on the task ahead, one way to speed up development is to use full-screen mode for iOS simulators. For example, a focused environment on my laptop screen includes zero visibility for Dock and the menu bar.

Before Xcode version 12, the full-screen support was hidden behind a user flag. The below command can be run to solve the issue for older Xcode versions.

```shell
defaults write com.apple.iphonesimulator AllowFullscreenMode -bool YES
```

With the latest version of Xcode and each new macOS version trying to outperform its previous one, it has never been easy to enable full-screen mode for an iOS simulator.

![ss1](https://i.imgur.com/mvSX1u2.png)

In the above image, observe that [VSCode editor](setup-macbook-m1) is on the left and the iOS simulator is on the right.

To enter the full-screen mode, click on the resize window icon (green icon) on the application (iOS simulator and the editor/IDE of your choice).

![ss2](https://i.imgur.com/nhkQdNs.png)

Then, you can position one application on the left and another on the right.

![ss3](https://i.imgur.com/ZjU2UUi.gif)

It's already challenging to keep distractions at bay. But, sometimes, a little bit of focus can go a long way.


How to use iOS simulator in full-screen

---
title: 'How to solve RCTBridge required dispatch_sync to load warning on iOS for React Native'
slug: 'rctbridge-required-dispatch-sync-to-load-warning'
date: '2021-09-04'
thumbnail: '/thumbnails/react.png'
tag: 'react-native'
canonicalUrl: 'https://amanhimself.dev/blog/rctbridge-required-dispatch-sync-to-load-warning/'
---

The _RCTBridge required dispatch_sync to load RCTDevLoadingView_ has become a common occurence when developing React Native apps with version `0.64` and `0.65`.

![ss1](https://i.imgur.com/IqzhnvQ.png)

I came across this warning when installing packages like:

- react-native-bootsplash
- react-navigation v6

Recently, I came across an open issue on [github.com/facebook/react-native](https://github.com/facebook/react-native/issues/16376) that contains the following resolution for this.

Open the file `./ios/AppName/AppDelegate.m`. First, add the following just after the import statement `#import "AppDelegate.h"`:

```c
#import "AppDelegate.h"

// Add this
#if RCT_DEV
#import <React/RCTDevLoadingView.h>
#endif
// ---------------
```

Then, in the `@implementation AppDelegate`, before `RCTRootView`, add the following:

```c
  #if RCT_DEV
    [bridge moduleForClass:[RCTDevLoadingView class]];
  #endif

  RCTRootView *rootView ...
```

Build the iOS app again by running:

```shell
yarn run ios

# or

npx react-native run-ios
```

The warning will be gone now.


How to solve RCTBridge required dispatch_sync to load warning on iOS for React Native

---
title: 'How to Offer Multi-language Support in a React Native App'
slug: 'multi-language-support-in-react-native-with-react-i18next'
date: '2021-08-16'
thumbnail: '/thumbnails/react.png'
tag: 'react-native'
canonicalUrl: 'https://blog.crowdbotics.com/how-to-offer-multi-language-support-in-a-react-native-app/'
---

![cover_image](https://crowdbotics.ghost.io/content/images/2021/08/React-Native--1-.png)

_[Originally Published at Crowdbotics.com](https://crowdbotics.ghost.io/how-to-offer-multi-language-support-in-a-react-native-app/)_

Internationalization is an important feature to overcome the language barrier among people who use a particular software application. Not every app requires us to consider a global customer base. But if you have plans to include support for international users in your app, you’ll need internationalization in your React Native app.

[i18next](https://www.i18next.com/) is an internationalization framework written in JavaScript and provides methods for localizing the app and implement the other standard i18n features.

In this tutorial, let's take a look at the steps to add multi-language support to a React Native app using i18n.

## Prerequisites

To follow this tutorial, please make sure you are familiarized with JavaScript/ES6, basics of React and meet the following requirements in your local dev environment:

- Node.js version `12.x.x` or above installed.
- Have access to one package manager such as npm or yarn or npx.
- [react-native-cli](https://www.npmjs.com/package/react-native-cli) installed, or use npx.



## Setting up a React Native app

After initializing a React Native project, make sure to install the external libraries to follow along with this tutorial. Navigate inside the project directory, and then run the following command install the following libraries:

```shell
yarn add react-i18next i18next @react-navigation/native @react-navigation/bottom-tabs @react-native-async-storage/async-storage react-native-vector-icons react-native-screens react-native-safe-area-context react-native-reanimated react-native-localize react-native-gesture-handler

# after this step, for iOS, install pods
npx pod-install ios
```

React Native Vector Icons will be used for adding icons in the app. React Navigation is used to add and enable navigation between screens in the app. Make sure to initialize and configure navigation as described in [React Navigation library getting started doc](https://reactnavigation.org/docs/getting-started/).

The following libraries are going to be used for adding multi-language support to the app:

- `i18next`: internationalization library.
- `react-i18next`: provides binding for React and React Native projects using Hooks, High Order Components (HOCs), etc. We will use the `useTranslation` hook to translate the text within React Native function components.
- `react-native-localize`: provides helper functions to figure based on the device's localized language preference.
- `@react-native-async-storage/async-storage`: is an unencrypted, asynchronous, persistent, key-value storage system that is global to the app. It is used to store the user's language preference such that it persists when the app restarts.

> 🔥 Tip: Always make sure to check out installation steps in the documentation of libraries installed in a React Native app. Some may differ and change over time. It's hard to keep a blog post up to date with all these changes.

## Building a React Native app

After installing libraries, let's setup the React Native app with mock screens and navigation.

Create a `src/` folder inside the project root directory and inside it, create the following files and folders:

- `/constants`
  - `/translations`
  - `IMLocalize.js`
- `/navigation`
  - `RootNavigator.js`
- `/screens`
  - `/HomeScreen.js`
  - `SettingsScreen.js`
- `/components`
  - `LanguageSelector.js`

Start by adding a `RootNavigator.js` file inside the `/navigation` folder. It will have both screens as tabs and some configuration to display an icon and a label for each tab.

```js
import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Ionicons from 'react-native-vector-icons/dist/Ionicons';

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

const Tab = createBottomTabNavigator();

export default function RootNavigator() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => {
            let iconName;

            if (route.name === 'Home') {
              iconName = focused ? 'ios-home' : 'ios-home-outline';
            } else if (route.name === 'Settings') {
              iconName = focused ? 'ios-settings' : 'ios-settings-outline';
            }

            return <Ionicons name={iconName} size={size} color={color} />;
          },
          tabBarActiveTintColor: 'tomato',
          tabBarInactiveTintColor: 'gray',
          headerShown: false
        })}
      >
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}
```

Next, let's add code snippets for screens. In `HomeScreen.js`, add the following code. For now, it only displays a `Text` component:

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

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home</Text>
    </View>
  );
}
export default HomeScreen
```

Similarly, the `SettingsScreen.js` file will also display a `Text` component:

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

export default function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}
```

Now, modify the `App.js` file to add the following code snippet:

```js
import React from 'react';

import RootNavigator from './src/navigation/RootNavigator';

export default function App() {
  return <RootNavigator />;
}
```

At this point, if you run the `npx react-native run-ios` or `npx react-native run-android` command, you should see the following screen on a simulator/emulator or on a device:

![cb1](https://crowdbotics.ghost.io/content/images/2021/08/cb1.png)

## Create translation files

Initially, we will like to translate tab names based on the language selected within the app. To do this, we need to create translation config files.

You can organize these translation files in the way you want, but here we are following a pattern. Inside `constants/translations/` directory, let's create subdirectories for each language to support in this demo app. The languages supported here are `en` for English and `fr` for French.

Inside each language directory, create separate files that will split the translations from commonly used text to translate specific texts such as for tab navigation labels. Under `i18n`, this separation leads to creating namespaces for each language. Later in the tutorial, you will see how to access the value of a key, for example, `home` from the namespace `navigation` to translate the tab bar label.

Here is how the directory structure would like under `translations/`:

![cb2](https://crowdbotics.ghost.io/content/images/2021/08/cb2.png)

Inside `en/common.js` file, add the following snippet:

```js
export default {
  hello: 'Hello',
  languageSelector: 'Select Your Language'
};
```

Inside `en/navigate.js` file, add the following code snippet:

```js
export default {
  hello: 'Bonjour',
  languageSelector: 'Sélecteur de langue'
};
```

Next, inside add translated tab labels for each language in their corresponding `navigate.js` files:

```js
// en/navigate.js
export default {
  home: 'Home!',
  settings: 'Settings'
};


// fr/navigate.js
export default {
  home: 'Écran principal',
  settings: 'Le réglage'
};
```

Lastly, export these translated texts:

```js
// en/index.js
import common from './common';
import navigate from './navigate';

export default {
  common,
  navigate
};

// fr/index.js
import common from './common';
import navigate from './navigate';

export default {
  common,
  navigate
};
```

## Adding multi-language support configuration

Now that you have translation files ready and dependencies installed, let's configure how to create a configuration using those libraries installed earlier.

All of this configuration will live inside `IMLocalize.js` file. Start by importing the following dependencies. Also, define a `LANGUAGES` object that requires each language file as an object and using JavaScript syntax of `Object.keys` convert the `LANGUAGES` object to an array.

```js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import AsyncStorage from '@react-native-async-storage/async-storage';
import * as RNLocalize from 'react-native-localize';

import en from './translations/en';
import fr from './translations/fr';

const LANGUAGES = {
  en,
  fr
};

const LANG_CODES = Object.keys(LANGUAGES);
```

The `i18n` is configured in a certain way. The initial step it requires is to detect a language. Hence, define your own custom language detector. It will check the user's stored language preference when the app starts. If the user's language preference is not available, you will need to define a fallback language or find the best available language to fall back on.

Create a `LANGUAGE_DETECTOR` configuration object:

```js
const LANGUAGE_DETECTOR = {
  type: 'languageDetector',
  async: true,
  detect: callback => {
    AsyncStorage.getItem('user-language', (err, language) => {
      // if error fetching stored data or no language was stored
      // display errors when in DEV mode as console statements
      if (err || !language) {
        if (err) {
          console.log('Error fetching Languages from asyncstorage ', err);
        } else {
          console.log('No language is set, choosing English as fallback');
        }
        const findBestAvailableLanguage =
          RNLocalize.findBestAvailableLanguage(LANG_CODES);

        callback(findBestAvailableLanguage.languageTag || 'en');
        return;
      }
      callback(language);
    });
  },
  init: () => {},
  cacheUserLanguage: language => {
    AsyncStorage.setItem('user-language', language);
  }
};
```

Then, add the configuration initialize `i18n`. It will start by detecting the language, passing the i18n instance to `react-i18next`, and initializes using some options. This option makes `i18n` available for all React Native components.

```js
i18n
  // detect language
  .use(LANGUAGE_DETECTOR)
  // pass the i18n instance to react-i18next.
  .use(initReactI18next)
  // set options
  .init({
    resources: LANGUAGES,
    react: {
      useSuspense: false
    },
    interpolation: {
      escapeValue: false
    },
    defaultNS: 'common'
  });
```

These options may vary depending on your React Native project. We recommend you to go through [available configuration options for i18n](https://www.i18next.com/overview/configuration-options).

Next, import the `IMLocalize` file in `App.js` file:

```js
// after other import statements
import './src/constants/IMLocalize';
```

## Creating a Language Selector component

Since you have initialized the languages in the React Native app, the next step is to allow the user to select between different languages available inside the app.

Inside `LanguageSelector.js` file, start by importing the following libraries:

```js
import React from 'react';
import { View, Text, StyleSheet, Pressable } from 'react-native';
import Ionicons from 'react-native-vector-icons/dist/Ionicons';
import { useTranslation } from 'react-i18next';
```

The `useTranslation` hook will allow accessing `i18n` instance inside this custom component which is used to change the language.

Next, define an array of `LANGUAGES`.

```js
const LANGUAGES = [
  { code: 'en', label: 'English' },
  { code: 'fr', label: 'Français' }
];
```

Then, define the function component `Selector`. It will allow the user to switch between different languages inside the app and also enlist the available languages.

It will get the currently selected language from the `i18n` instance. Using a handler method called `setLanguage`, you can allow the functionality to switch between different languages from the `LANGUAGES` array defined above this function component.

This function component uses `Pressable` from React Native to change the language.

```js
const LANGUAGES = [
  { code: 'en', label: 'English' },
  { code: 'fr', label: 'Français' }
];

const Selector = () => {
  const { i18n } = useTranslation();
  const selectedLanguageCode = i18n.language;

  const setLanguage = code => {
    return i18n.changeLanguage(code);
  };

  return (
    <View style={styles.container}>
      <View style={styles.row}>
        <Text style={styles.title}>Select a Language</Text>
        <Ionicons color="#444" size={28} name="ios-language-outline" />
      </View>
      {LANGUAGES.map(language => {
        const selectedLanguage = language.code === selectedLanguageCode;

        return (
          <Pressable
            key={language.code}
            style={styles.buttonContainer}
            disabled={selectedLanguage}
            onPress={() => setLanguage(language.code)}
          >
            <Text
              style={[selectedLanguage ? styles.selectedText : styles.text]}
            >
              {language.label}
            </Text>
          </Pressable>
        );
      })}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    paddingTop: 60,
    paddingHorizontal: 16
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between'
  },
  title: {
    color: '#444',
    fontSize: 28,
    fontWeight: '600'
  },
  buttonContainer: {
    marginTop: 10
  },
  text: {
    fontSize: 18,
    color: '#000',
    paddingVertical: 4
  },
  selectedText: {
    fontSize: 18,
    fontWeight: '600',
    color: 'tomato',
    paddingVertical: 4
  }
});

export default Selector;
```

Import the `Selector` component inside the `SettingsScreen.js` file:

```js
import React from 'react';
import { View } from 'react-native';

import Selector from '../components/LanguageSelector';

export default function SettingsScreen() {
  return (
    <View style={{ flex: 1, backgroundColor: '#fff' }}>
      <Selector />
    </View>
  );
}
```

Here is the output in the simulator after this step:

![cb3](https://crowdbotics.ghost.io/content/images/2021/08/cb3.png)

## Using the useTranslation hook

The `useTranslation` hook has two important functions that you can utilize inside your React Native app. You have already seen the first one (`i18n` instance) in the previous step. The next is called `t` (my personal guess is that it is short for translation) function. You can refer the namespaces defined in the translation files and pass them as arguments to this function.

Let's see that in action. Let's start with the `LanguageSelector` component itself. It has a title called `Select a Language`. While defining the translation files, we've already defined its translation in both English and French languages in their corresponding `common.js` files.

The initial step to getting the `t` function is to import the `useTranslation` hook. However, the `LanguageSelector.js` file already has it from the previous section.

Modify the following line to get the `t` function from the hook inside the `Selector` component:

```js
const { t, i18n } = useTranslation();
```

Next, modify the `Text` component contents used to define the title:

```js
<Text style={styles.title}>{t('common:languageSelector')}</Text>
```

Here is the output. The default or the initial language in our case is English. When the next language is selected, it translates the title on the Settings screen.

![cb4](https://crowdbotics.ghost.io/content/images/2021/08/cb4.gif)

You can also modify the text strings according to the previously defined namespaces in the translation files.

For an example, the `RootNavigator` will be modified as follows:

```js
import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Ionicons from 'react-native-vector-icons/dist/Ionicons';
import { useTranslation } from 'react-i18next';

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

const Tab = createBottomTabNavigator();

export default function RootNavigator() {
  const { t } = useTranslation();
  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => {
            let iconName;

            if (route.name === 'Home') {
              iconName = focused ? 'ios-home' : 'ios-home-outline';
            } else if (route.name === 'Settings') {
              iconName = focused ? 'ios-settings' : 'ios-settings-outline';
            }

            return <Ionicons name={iconName} size={size} color={color} />;
          },
          tabBarActiveTintColor: 'tomato',
          tabBarInactiveTintColor: 'gray',
          headerShown: false
        })}
      >
        <Tab.Screen
          name="Home"
          component={HomeScreen}
          options={{ tabBarLabel: t('navigate:home') }}
        />
        <Tab.Screen
          name="Settings"
          component={SettingsScreen}
          options={{ tabBarLabel: t('navigate:settings') }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}
```

Here is the final output:

![cb5](https://crowdbotics.ghost.io/content/images/2021/08/cb5.gif)

## Conclusion

This completes our tutorial on how to add multi-language support in a React Native app. There are different strategies you can use inside your app to provide translation support. This tutorial is just one of the examples.

Please don't mind my translation for French text corresponding to English text. I am not good at it at all. 😅

**Useful Links**

- [useTranslation Hook](https://react.i18next.com/latest/usetranslation-hook)
- [**You can find the complete source code at GitHub**](https://github.com/amandeepmittal/react-native-examples/tree/master/rnMultiLanguageExample)

How to Offer Multi-language Support in a React Native App

---
title: 'GET Request params with Axios'
date: '2021-08-11'
thumbnail: '/thumbnails/js.png'
slug: 'get-request-params-with-axios'
tag: 'javascript'
canonicalUrl: 'https://amanhimself.dev/blog/get-request-params-with-axios/'
---

One of the popular libraries in JavaScript land to perform HTTP requests is [axios](https://github.com/axios/axios). It is promised based and allows writing code using `async await` syntax.

## Installation

Run the command below:

```bash
yarn add axios
```

## Simple GET HTTP request with axios

A simple GET HTTP request may look like:

```js
axios.get({
  url: `${BASE_URL}/movie/popular?api_key=${API_KEY}&page=1`,
  method: 'get'
});
```

This returns a promise object. Using async await syntax, the promise object can be resolved.

```js
export const getPopularMovies = async () => {
  try {
    return await axios.get(
      `${BASE_URL}/movie/popular?api_key=${API_KEY}&page=1`
    );
  } catch (error) {
    console.error(`[API RESPONSE ERROR]: ${error}`);
  }
};
```

## Adding parameters to GET requests

A GET response can contain parameters. With Axios you can add parameters to the URL:

```js
axios.get(`${BASE_URL}/movie/popular?api_key=${API_KEY}&page=1`);
```

Or can use `params` property in the options:

```js
axios.get(`${BASE_URL}/movie/popular`, {
  params: {
    api_key: API_KEY,
    page: pageNumber
  }
});
```


GET Request params with Axios

---
title: 'Environment Variables in Expo and TypeScript'
slug: 'environment-variables-in-expo-managed-workflow'
date: '2021-08-04'
thumbnail: '/thumbnails/expo.png'
tag: 'expo'
canonicalUrl: 'https://amanhimself.dev/blog/environment-variables-in-expo-managed-workflow/'
---

> Updated: Apr 12, 2023

Managing different keys for different environments, such as development or production, is common among JavaScript developers. Therefore, variables defined in this file may change during development and production, but the code remains unchanged. Hence, the mechanism of the `.env` file exists.

Using Expo, there are different ways you can set up and use environment variables. My preferred method is to use the dotenv file. Environment variables defined in this file are loaded using a package called `dotenv`.

## Install dotenv

To set up environment variables in an Expo app, the initial step is to install the `dotenv` and `expo-constants` packages.

```bash
npx expo install dotenv expo-constants
```

## Rename app.json

Next, rename the `app.json` file to `app.config.js` or, if using TypeScript: `app.config.ts`, at the root of your project. Then, add the import statement to use the `dotenv` configuration. Since it's a JSON file, you will have to export all Expo configuration variables and add an `extra` object containing Environment variables.

```ts
import 'dotenv/config';

export default {
  expo: {
    // ...
    extra: {
      // Add your extra configs here
      apiKey: process.env.API_KEY
    }
  }
};
```

## Constants with expo-constants

All the keys inside the extra object are readable app-wide using `expo-constants`. An environment variable is accessible through `Expo.Constants.manifest.apiKey`.

In the case of TypeScript, use optional parameter syntax to avoid squiggly: `"Object is possibly 'undefined' or 'null'"`.

```tsx
const API_KEY = Constants?.manifest?.extra?.apiKey;
```

## More

To learn more about how to use Environment variables in an Expo project, refer to Expo's [official documentation](https://docs.expo.dev/guides/environment-variables/).


Environment Variables in Expo and TypeScript

How To Integrate Firebase Authentication With an Expo App

---
title: 'Common Prop Types in TypeScript and React'
date: '2021-06-29'
slug: 'common-prop-types-in-typescript-and-react'
thumbnail: '/thumbnails/typescript.png'
tag: 'typescript'
canonicalUrl: 'https://amanhimself.dev/blog/common-prop-types-in-typescript-and-react'
---

All **primitives in JS** are available in TS.

```ts
type Props = {
  size: number;
  name: string;
  disabled: boolean;
};
```

An **object** **type** is simply an empty object or an object with keys. An empty object can have any number of properties and values.

If the object is defined explicitly with keys, it will only accept those values. The shape of the object will remain certain.

```ts
type Props = {
  emptyObject: {};
  product: {
    id: string;
    price: number;
  };
};
```

Using square brackets `[]`, an **array type** is defined:

```ts
type ListProps = {
  items: string[];
};
```

The prop `items` here only expects values in the array of `string` type. To define an array of objects of a certain shape:

```ts
type ListProps = {
  items: {
    id: string;
    name: string;
    price: number;
  }[];
};
```

TypeScript does not asks you to define the shape of each object. Although, refactoring `ListProps` as below is valid:

```ts
type Item = {
  id: string;
  name: string;
  price: number;
};

type ListProps = {
  item: Item;
  items: Item[];
};
```

Using **[union type](https://react-typescript-cheatsheet.netlify.app/docs/basic/troubleshooting/types/#union-types-and-type-guarding)**, certain values for a prop can be described as:

```ts
type Button = {
  variant: 'primary' | 'danger' | 'info';
  value: string | number;
};
```

TypeScript cares when it comes to passing arguments on a function.

```ts
type Props = {
  onEventListener: () => void; // some times event listeners do not have return type
  onChangeText: (title: string) => void;
};
```

On a function, it is possible to define return type as inline type declaration:

```ts
function add(x: number, y: number): number {
  return a + b;
}
```


Common Prop Types in TypeScript and React

---
title: 'Prop types in React and TypeScript'
date: '2021-06-28'
slug: 'prop-types-in-react-and-typescript'
thumbnail: '/thumbnails/typescript.png'
tag: 'typescript'
canonicalUrl: 'https://amanhimself.dev/blog/prop-types-in-react-and-typescript/'
---

[PropTypes](https://www.npmjs.com/package/prop-types) provide built-in typechecking capabilities when writing a React app. Checking the type of prop in a React component in a large application helps catch bugs at run-time.

Typically in a React app, you will need to install the package `yarn add prop-types`. Then, inside a component, explicitly define the type of a prop.

```js
import React from 'react';
import PropTypes from 'prop-types';

// A component that accepts "color" prop
function FavoriteColor({ color }) {
  return <h2>My favorite Color is {color}</h2>;
}

FavoriteColor.propTypes = {
  color: PropTypes.string
};

// Parent component
function App() {
  return (
    <div className="App">
      <FavoriteColor color={'Red'} />
    </div>
  );
}

export default App;
```

Above code snippet will run fine, and there no errors or warnings yet. If you use VSCode, hover over the prop `color` in the `App` component. You will see the expected data type on the prop.

![s1](https://res.cloudinary.com/amanmittal/image/upload/v1624823701/s1_beblnm.png)

But what if in the `App` component, the value of prop `color` is changed to a number by mistake. The component will still render in the web browser.

```js
function App() {
  return (
    <div className="App">
      <FavoriteColor color={120} />
    </div>
  );
}
```

But if you open the browser's Developer Tools and go to console, you will see the error.

![s2](https://res.cloudinary.com/amanmittal/image/upload/v1624823701/s2_p9h3mq.png)

The `prop-types` package provide validation at run-time. Not a great developer experience (imagine large applications). Using TypeScript in a React application can make the developer experience better.

## PropTypes with TypeScript and React

Take the previous code snippet, copy it in a `.tsx` file. Here is how the components will look. Notice the red squiggly line beneath the prop `color`.

![s3](https://res.cloudinary.com/amanmittal/image/upload/v1624823702/s3_okboft.png)

TypeScript is smart enough not to compile the code if a prop has a type of `any`.

## Inferring PropTypes in TypeScript

`PropTypes` package offers `InferProps` that enables to infer the types for an existing prop-type definition on a component. It uses the `@types/prop-types` package to create type definitions.

To use `InferProps`, import it from the `prop-types` library and then define type declarations on the components prop.

```tsx
import PropTypes, { InferProps } from 'prop-types';

function FavoriteColor({ color }: InferProps<typeof FavoriteColor.propTypes>) {
  return <h2>My favorite Color is </h2>;
}

FavoriteColor.propTypes = {
  color: PropTypes.string
};
```

Code compiles, and there are no errors.

## Using type keyword to declare prop type definitions

TypeScript comes with a `type` keyword. It can be used to define prop types without using the `prop-types` package.

```tsx
type Props = {
  color: string;
};

function FavoriteColor({ color }: Props) {
  return <h2>My favorite Color is {color} </h2>;
}
```

The VSCode IntelliSense will detect the type of `color` prop in the `App` component. It will allow you to provide anything other than a `string` value for this prop.

![s4](https://res.cloudinary.com/amanmittal/image/upload/v1624823701/s4_fyz6bw.png)

## Props are required in TypeScript

Another difference to notice here is that, with TypeScript, all props required by default. In the `prop-types` package, all props are optional by default. To make a prop required, you will have to use `.isRequired` explicitly.

With TypeScript, that is not the case.

![s5](https://res.cloudinary.com/amanmittal/image/upload/v1624823702/s5_m36cnq.png)

## Optional props in TypeScript

If a component has an optional prop, add a question mark when declaring prop type:

```tsx
type Props = {
  color?: string;
};
```


Prop types in React and TypeScript

---
title: '🌱 Life at Draftbit - First 3 Months as a Developer Advocate'
date: '2021-05-25'
thumbnail: '/thumbnails/avo.png'
slug: 'first-three-months-as-developer-advocate'
tag: 'devrel'
canonicalUrl: 'https://amanhimself.dev/blog/first-three-months-as-developer-advocate/'
---

![cover_image](https://i.imgur.com/TBebjua.jpg)

<blockquote>
Photo by <a href="https://unsplash.com/@x_prayer?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Prayer X</a> on <a href="https://unsplash.com/s/photos/galaxy?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
</blockquote>

<br />

It has been 3 months since I joined [Draftbit](https://draftbit.com/). It feels like I’ve been on a journey. I was initially hired as a tech writer but the role eventually evolved (within a month) into Developer Advocate 🥑.

On a personal level, the first thing I learned is that embrace your surroundings (new) without overthinking too much. It has been the highlight for me this year, so far.

The reason I say this is because my background is not in Developer Advocacy or Relations per se. I've been working as a contract developer/consultant for most of my time, in the last three years. I've worked with different tech stacks inside the JavaScript ecosystem such as Node.js, AngularJS, React and React Native but not on things outside it.

But for the past few years, I have been writing blog posts and tutorials. Trying to document what I am learning in a way I could go back and read the stuff myself or refer to someone else when required. I do not have an extraordinary memory and like to take notes when I am learning. I enjoy the process. It doesn't feel like "work".

## What is a Developer Advocate?

In 2019, when I first got to know about Draftbit at [App.js conf](https://appjs.co/), I was excited to learn that there's a world beyond building mobile apps inside VSCode (insert your preferred editor here). At that time though I did not know what exactly a Dev Advocate is.

What I've gathered about Dev Advocacy or understand right now is that various organizations differ in responsibilities when it comes to the role. Though there are common responsibilities or activities that most people working in Dev Advocacy share. Content creating is one. Brand awareness. Creating and sharing resources through the medium of blogging or live streams publishing videos and speaking at remote or offline events. Building community is also one aspect of it. Creating demos using the product to solve specific use cases is another aspect.

Without spreading out my unorganized thoughts around the matter too much, here are some of the resources that helped me get the context on what Developer Advocacy is:

- Sam Julien's book on [Getting Started in Developer Relations](https://learn.samjulien.com/getting-started-in-developer-relations)

A few weeks back I did share my thoughts in the [newsletter](https://amanhimself.substack.com/). I do recommend this book if you are seeking your first role or are curious about getting to know more. This is the best introduction I've found so far. It made me realize that I have been doing some of the stuff in my free time that a Dev Advocate might do.

- Mary Thengvall's [The Business Value of Developer Relations](https://www.persea-consulting.com/book)

It goes more in-depth and talks about the importance of nurturing a community, maintaining positive relations, building a team of DevRels, and much more. She [has an amazing post on her blog](https://www.marythengvall.com/blog/2020/6/29/the-camunda-developer-relations-career-path) sharing her own experience.

## Working with Draftbit

Since joining, a common question I get asked is how my day as a Developer Advocate looks like. I would say, depending on the day, that it depends. 🙃

It depends on some factors as to the kind of thing I am working on, in the following week. Usually, I spend a huge amount of time creating guides and tutorials for various use cases or some of the features that get released. At times, I am trying to help community members to resolve their issues.

Living in an Eastern time zone is one of the reasons that I had missed out on some of the exciting opportunities in past. But here, it is a welcoming aspect. I think it is good to have open mind about it in this ever connected world.

The experience has been a delightful one. I have huge gratitude to express for the entire team at Draftbit. They are friendly, have tons of experience, are willing to offer feedback and helpful suggestions, and allow me to express my own ideas (which I think is vital to be a part of something and be excited about it at the same time).

## Some challenges and personal obstacles

One challenge that I face at times is explaining the semantics of the product from a non-engineering point of view, in written words.

Draftbit is a visual tool to build a mobile app. It is uses React Native and Expo's ecosystem under the hood. The end-user does not have to know about that and there is no requirement for them to know React Native framework.

I've spent a lot of time in the first three months on a feature called [Custom Code](https://docs.draftbit.com/docs/custom-code). It is an advanced feature where an individual can utilize open-source libraries available with Expo and React Native to achieve custom functionalities like integrating a Camera within their app or utilize Firebase Authentication.

This requires me to create demos and write guides in a way that an individual from non-technical background or having no React Native experience can understand with little effort. One way I am trying to tackle is to explain concepts without including too much technical jargon.

If I cannot avoid mentioning something that I think is too technical, I try to provide references or links to documentation wherever necessary to provide a better context (or try improve the internal documentation). Including GIFs of the flow of work or documenting steps to achieve the desired result is another thing that has become a part of my flow.

Making cameo appearances on [Draftbit’s YouTube channel](https://www.youtube.com/c/Draftbit/videos) is one more thing I am getting comfortable with. I never thought I would engage in [speaking in public](https://www.youtube.com/watch?v=YIRxTUCY0NQ) (👋 hello, anxiety) but now I've done it a few times in a row. I won't say I am good at it. There is a lot of room to improve on a personal level but without doing it I wouldn't know that. Engaging in this activity has helped me realize that coming out of my shell is important.

Here is me talking about Custom Code during Draftbit office hours:

[![IMAGE ALT TEXT HERE](https://img.youtube.com/vi/pMz4XRjdOd0/0.jpg)](https://www.youtube.com/watch?v=pMz4XRjdOd0)

🙌 Shoutout to my colleague [Nick](https://twitter.com/nickselman) for these timely opportunities.

## Final Thoughts

Providing a value is vital and it is with this mindset I try to approach things. Working as a Developer Advocate, I get to do it more often and it is fun!

If you want to work with me, check out [draftbit.com/jobs](https://draftbit.com/jobs#openings) to see if there's a role that is exciting to you.

If you want to talk about Draftbit, have questions, or React Native, or DevRel, please DM me on [Twitter](https://twitter.com/amanhimself).

💌 To get notified about my future articles, subscribe my [personal newsletter here](https://amanhimself.substack.com/).


🌱 Life at Draftbit - First 3 Months as a Developer Advocate

---
title: 'How to Create a Custom Image Gallery in React Native'
slug: 'custom-preview-image-gallery-in-react-native'
date: '2021-05-17'
thumbnail: '/thumbnails/react.png'
tag: 'react-native'
canonicalUrl: 'https://blog.crowdbotics.com/how-to-create-a-custom-tab-bar-in-react-native/'
---

In React Native, there are many ways to display a collection of images in a gallery view. One form is commonly known as carousel. Using an open-source library such as [react-native-swiper](https://github.com/leecade/react-native-swiper) or more advance [react-native-snap-carousel](https://github.com/meliorence/react-native-snap-carousel) serves the purpose. But what if we want to create a custom gallery view with additional functionality?

In this tutorial, let's create a custom gallery of images using `react-native-snap-carousel` and `FlatList` from React Native. The open-source library is going to display each image in a carousel view. The `FlatList` is what we will use to display the thumbnail view for each image below the carousel. The construction of the syncing part between the two is to add a functionality such that when an image in the carousel is scrolled either left or right, the thumb in the `FlatList` is also going to be scrolled along with it. Of course, to achieve this synchronization between the two, we are going to use React Hooks such that you will be able to implement such a pattern in your own React Native apps.

## Pre-requisites

To follow this tutorial, please make sure you are familiarized with JavaScript/ES6 and meet the following requirements in your local dev environment:

- [Node.js](https://nodejs.org/en/) version >= 12.x.x installed.
- Have access to one package manager such as npm or yarn or npx.
- [react-native-cli](https://www.npmjs.com/package/react-native-cli) installed, or use npx.

## Setup a React Native Project

To follow along with this tutorial, set up a new React Native project and install all the dependencies that are required to implement the example. Open up a terminal window and run each command as mentioned in the order:

```shell
npx react-native init rnPreviewImageGallery

cd rnPreviewImageGallery

yarn add react-native-snap-carousel
```

The reason I like to use `react-native-snap-carousel` is that it does not require any additional steps to configure to be used on native devices. Plus, it offers different layouts to configure the carousel view, out of the box.

After installing the dependencies, let's bring in the image assets to use. I am using images from [Unsplash](https://unsplash.com/s/photos/amsterdam) to demonstrate. To follow along, the images are stored at [this location](https://github.com/amandeepmittal/react-native-examples/tree/master/rnPreviewImageGallery/assets/images) in the example GitHub repo.

After setting up the source images to be used, open up the `App.js` file, and let's initiate it with a title of the screen to display. Import the following statements, then create an `IMAGES` object by importing each image using Common JS require statements.

Using the `useState` React hook, create an array of images called `images`, with each image having a unique `id` to differentiate between each object in the array.

```js
const [images, setImages] = useState([]);
```

The `useState` hook returns two values in an array. The first value is the current value of the state object, and the second value in the array is the function to update the state value of the first. This why the second value starts with a conventional prefix of a set. You can technically name it anything, but following conventions that are commonly used in the React world is a good practice to follow.

Also, define some constants that will be used throughout the example such as the overall spacing between each thumbnail and the width and height of each thumbnail to represent in the `FlatList`.

To set up the carousel view of an image for different screen sizes, let's use the `Dimensions` API from React Native.

Add the following code snippet to `App.js` and make sure to define state variables at the top of the `App` function. Hooks are always called at the top level of a functional component in React. When defining a state, they must be the first thing in the function, especially before returning a JSX.

```js
import React, { useState, useRef } from 'react';
import {
  TouchableOpacity,
  View,
  Text,
  Image,
  FlatList,
  Dimensions
} from 'react-native';

const { width } = Dimensions.get('window');
const SPACING = 10;
const THUMB_SIZE = 80;

const IMAGES = {
  image1: require('./assets/images/1.jpeg'),
  image2: require('./assets/images/2.jpeg'),
  image3: require('./assets/images/3.jpeg'),
  image4: require('./assets/images/4.jpeg'),
  image5: require('./assets/images/5.jpeg'),
  image6: require('./assets/images/6.jpeg'),
  image7: require('./assets/images/7.jpeg')
};

const App = () => {
  const [images, setImages] = useState([
    { id: '1', image: IMAGES.image1 },
    { id: '2', image: IMAGES.image2 },
    { id: '3', image: IMAGES.image3 },
    { id: '4', image: IMAGES.image4 },
    { id: '5', image: IMAGES.image5 },
    { id: '6', image: IMAGES.image6 },
    { id: '7', image: IMAGES.image7 }
  ]);

  return (
    <View style={{ flex: 1, backgroundColor: 'black', alignItems: 'center' }}>
      <Text
        style={{
          color: 'white',
          fontSize: 32,
          marginTop: 50,
          marginBottom: 25
        }}
      >
        Custom Gallery
      </Text>
      {/* Carousel View */}
      {/* Thumbnail component using FlatList */}
    </View>
  );
};

export default App;
```

To initialize the development server for iOS, please execute the command `npx react-native run-ios` from a terminal window. Similarly, the build command for Android is `npx react-native run-android`.

Here is the app running after this step on an iOS simulator:

<img src='https://miro.medium.com/max/880/0*kS7PBYWOT71qfQ-g.png' />

## Add a carousel view with react-native-snap-carousel

The component library `react-native-snap-carousel` has a vast API of properties and different layout patterns that are plug-n-use and even allows you as a developer to implement custom interpolations and animations. You can find more information on how to customize it in the official documentation [here](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/CUSTOM_INTERPOLATIONS.md).

For the current example, let's stick to the default layout pattern to display a carousel. To create a carousel view, import the component from `react-native-snap-carousel` by adding the following import statement in the `App.js` file. Let's also import the `Pagination` component offered separately by this library to display the dot indicator.

```js
// after other import statements
import Carousel, { Pagination } from 'react-native-snap-carousel';
```

Then, add a `View` component after the title in the `App.js` file. It is going to wrap the `Carousel` component which takes a set of required props to work:

- `data` the array of `images` or items to loop.
- `layout` to define the way images are rendered and animated. We will use the `default` value.
- `sliderWidth` to define the width in pixels for the carousel container.
- `itemWidth` to define the width in pixels for each item rendered inside the carousel.
- `renderItem` takes an image item from the `data` array and renders it as a list. To render the image, the `Image` component from React Native is used.

Add the following code snippet in `App.js` to see the carousel in action:

```js
return (
  <View style={{ flex: 1, backgroundColor: 'black', alignItems: 'center' }}>
    {/* Title JSX Remains same */}
    {/* Carousel View */}
    <View style={{ flex: 1 / 2, marginTop: 20 }}>
      <Carousel
        layout="default"
        data={images}
        sliderWidth={width}
        itemWidth={width}
        renderItem={({ item, index }) => (
          <Image
            key={index}
            style={{ width: '100%', height: '100%' }}
            resizeMode="contain"
            source={item.image}
          />
        )}
      />
    </View>
  </View>
);
```

In the simulator you are going to get the following result:

<img src='https://miro.medium.com/max/536/0*9-RZy5PEztyt-lEF.gif' />

## Add a dot indicator

The `Pagination` component from the `react-native-snap-carousel` is used to display a dot indicator. This dot indicator requires the following props:

- `activeDotIndex` to represent the current image shown in the carousel.
- `dotsLength` to calculate how many dots to display based on the number of items or images in the carousel.
- `inactiveDotColor` to display the dot indicator color when it is inactive.
- `dotColor` to display the dot indicator color when it is active.
- `inactiveDotScale` is used to set the value to scale the dot indicator when it's inactive.
- `animatedDuration` is used to control the length of dot animation in milliseconds. The default value for it is `250`. It is not required, but to change the value, use this prop.

Add the following code snippet after the `Carousel` component in `App.js` file:

```js
<View>
  {/* Carousel Component code remains same */}
  <Pagination
    inactiveDotColor="gray"
    dotColor={'orange'}
    activeDotIndex={indexSelected}
    dotsLength={images.length}
    animatedDuration={150}
    inactiveDotScale={1}
  />
</View>
```

The value of `activeDotIndex` is calculated based on the current index of the image item. Let's add a state variable called `indexSelected` in the `App` component with a value of zero. It is going to update when the index value of the current image changes. The initial value of this state variable is going to be `0`. Create a handler method called `onSelect()` which updates the value of the current index.

Add the following code snippet before rendering the JSX in `App` component:

```js
const App = () => {
  // code remains same
  const [indexSelected, setIndexSelected] = useState(0);

  const onSelect = indexSelected => {
    setIndexSelected(indexSelected);
  };
};
```

Now, add a prop to the `Carousel` component called `onSnapToItem`. It accepts a callback as a value. This callback is fired every time the index of the image item changes, in other words, every time the user swipes to the next image. The only argument passed to this callback is the current `index` of the item which is updated with the help of the `onSelect()` handler method.

```js
<Carousel
  // rest remains same
  onSnapToItem={index => onSelect(index)}
/>
```

In the simulator, you will get the following result. The dot indicator now syncs with the Carousel item.

<img src='https://miro.medium.com/max/588/0*hE8I2aJxoFp5UnDu.gif' />

Let's add another view component below the `View` that wraps the carousel to display the total number of images and the current image index number.

```js
// Carousel View
<View
  style={{
    marginTop: 20,
    paddingHorizontal: 32,
    alignSelf: 'flex-end'
  }}
>
  <Text
    style={{
      color: 'white',
      fontSize: 22
    }}
  >
    {indexSelected + 1}/{images.length}
  </Text>
</View>
```

Here is the result after this step:

<img src='https://miro.medium.com/max/800/0*9h1KAqUOt9LzOORL.png' />

Awesome! The configuration for the Carousel component is now complete. Let's see how to sync it with a custom FlatList component in the next section.

## Create a list of thumbnails using FlatList

Let's display a list of thumbnails using `FlatList` from React Native using the same array of `images` from the state variable. This list is going to be displayed at the bottom of the device's screen and is a horizontal list. To achieve that, let's set use `position: absolute` style property with a `bottom` of value `80`.

Each thumbnail is composed of an `Image` component. It has the width and the height of the `THUMB_SIZE` variable we declared earlier. To show the selected thumbnail or the current thumbnail, using a ternary operator, let's manipulate the style properties `borderWidth` and `borderColor` on this `Image` component.

It is going to be wrapped by a `TouchableOpacity` component because its `onPress` prop is going to fire a handler method we have yet to create, to allow a user to change the selected image by a tap.

Add the following code snippet after Carousel's View:

```js
<FlatList
  horizontal={true}
  data={images}
  style={{ position: 'absolute', bottom: 80 }}
  showsHorizontalScrollIndicator={false}
  contentContainerStyle={{
    paddingHorizontal: SPACING
  }}
  keyExtractor={item => item.id}
  renderItem={({ item, index }) => (
    <TouchableOpacity activeOpacity={0.9}>
      <Image
        style={{
          width: THUMB_SIZE,
          height: THUMB_SIZE,
          marginRight: SPACING,
          borderRadius: 16,
          borderWidth: index === indexSelected ? 4 : 0.75,
          borderColor: index === indexSelected ? 'orange' : 'white'
        }}
        source={item.image}
      />
    </TouchableOpacity>
  )}
/>
```

The list of thumbnails renders as shown below:

<img src='https://miro.medium.com/max/800/0*JyzPZ5toA-v8mg3k.png' />

In the previous image, you will see that the first image is selected. You cannot change the currently selected image yet in the FlatList.

## Syncing the Carousel view with the FlatList

The basic element that is going to allow us to sync the image change between both the Carousel view and the thumbnail is a React hook called `useRef`.

It is a function that returns a mutable ref object whose `current` property can be initialized to keep track of the current index value for each image. The index value here is the image selected. Initially, it is going to be the first thumbnail and the first image shown in the carousel.

Let's create a ref that is going to be the reference of the current image from `Carousel` component and add it to the `App.js` file:

```js
const App = () => {
  const carouselRef = useRef();
  // ...
};
```

Since the `Carousel` component keeps track of the change of the current index of the image component by triggering a callback called `snapToItem()`, we can use it to sync with the `FlatList`.

Start by adding a handler method called `onTouchThumbnail()` after defining the ref. It accepts one argument called `touched` which is the index value of the current image selected from the `TouchableOpacity` component or Carousel. If the value of the argument `touched` and `indexSelected` is the same, do nothing. Otherwise, when the value of the `touched` or `indexSelected` updates, change the current image in the `Carousel` and the `FlatList` at the same time.

```js
const onTouchThumbnail = touched => {
  if (touched === indexSelected) return;

  carouselRef?.current?.snapToItem(touched);
};
```

Add the `ref` prop on `Carousel` component:

```js
<Carousel
  ref={carouselRef}
  //...
/>
```

Next, add an `onPress` prop on the `TouchableOpacity` component:

```js
<TouchableOpacity
  onPress={() => onTouchThumbnail(index)}
  activeOpacity={0.9}
>
```

Here is the output after this step:

<img src='https://miro.medium.com/max/582/0*TdtJeFSTFtRUV5L_.gif' />

The selection sync works do you notice there is a problem with the `FlatList` component? It doesn't scroll on its own when an image from the Carousel is selected that is not in the current view on the screen.

## Scroll the FlatList using scrollToOffset

Start by creating a new ref called `flatListRef` in `App.js` and add the ref prop to `FlatList` component:

```js
const App = () => {
  // ...
  const flatListRef = useRef();

  return (
    // ...
    <FlatList
      ref={flatListRef}
      // rest remains same
    />
  );
};
```

The [scrollToOffset method](https://reactnative.dev/docs/flatlist#scrolltooffset) available on `FlatList` can be used to scroll the thumbnails to a certain offset. This method accepts two arguments. The first is called `offset` which accepts a number as a value. The second argument is the `animated` property which determines whether the scroll to even should be animated or not.

The value for the `offset` is going to be `indexSelected` of the thumbnail multiplied by the size of the thumbnail. Let's also set the value of `animated` to true.

Since the `FlatList` has to scroll on every selection, let's add mutate the ref inside the handler method `onSelect()`.

```js
const onSelect = indexSelected => {
  setIndexSelected(indexSelected);

  flatListRef?.current?.scrollToOffset({
    offset: indexSelected * THUMB_SIZE,
    animated: true
  });
};
```

Here is the output after this step:

<img src='https://miro.medium.com/max/584/0*YVetWmnrP5zLKCi5.gif' />

## Conclusion

We have discussed only one scenario of creating a custom image gallery with FlatList. The main objective here is to get familiar with the use of react-native-snap-carousel, useRef hook, and `scrollToOffset` method in FlatList.

## Further reading

- [A complete list of FlatList methods available](https://reactnative.dev/docs/flatlist#methods)
- [A complete list of props available on Carousel component from react-native-snap-carousel](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/PROPS_METHODS_AND_GETTERS.md)
- [In detail guide on how to use Hooks in React & React Native apps](https://blog.crowdbotics.com/build-a-react-app-with-localstorage-api-and-hooks/)

Originally Published at **[Crowdbotics's Blog](https://blog.crowdbotics.com/how-to-create-a-custom-tab-bar-in-react-native/)**.


How to Create a Custom Image Gallery in React Native

---
title: 'How to Create a Custom Tab Bar in React Native'
slug: 'create-custom-tab-bar-in-react-native'
date: '2021-05-07'
thumbnail: '/thumbnails/react.png'
tag: 'react-native'
canonicalUrl: 'https://blog.crowdbotics.com/how-to-create-a-custom-tab-bar-in-react-native/'
---

[React Native](https://reactnative.dev/) is an amazing tool for creating beautiful and high performing mobile applications that run on both iOS and Android. Developing these apps, you might need navigation to navigate from one screen to another. To implement navigation in a React Native app, [React Navigation](https://reactnavigation.org/docs/getting-started) library does an awesome job of providing various navigation patterns such as stack, tabs, and drawer that can be utilized and customize based on the UI design of the app.

In this post, let's create a custom tab bar using React Navigation library bottom tabs component. We are going to create a simple tab bar and then learn how to make it translucent using a [Blur view](https://github.com/Kureev/react-native-blur).

## Pre-requisites

To follow this tutorial, please make sure you are familiarized with JavaScript/ES6 and meet the following requirements in your local dev environment:

- [Node.js](https://nodejs.org/) version >= `12.x.x` installed.
- Have access to one package manager such as npm or yarn or npx.
- [react-native-cli](https://www.npmjs.com/package/react-native-cli) installed, or use npx.

## Installing react-navigation library

To create a new React Native app, please execute the following command from a terminal window on your local dev environment. Navigate inside the project directory created by `react-native-cli` and then install the dependencies:

```shell
npx react-native init customTabBar

cd customTabBar

# install dependencies
yarn add @react-navigation/native @react-navigation/bottom-tabs react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view react-native-vector-icons @react-native-community/blur
```

Do note that to demonstrate the example described in this article, we are using React Navigation v5 library. After installing these dependencies, please import the Gesture Handler library at the top of the `index.js` file of your React Native app:

```js
import 'react-native-gesture-handler';
```

Then, for iOS, install the Cocoapods for all these dependencies by navigating inside the `ios` directory in a terminal window and executing the following command. Do note that, if you do not have the Cocoapods installed on your local dev machine, please follow the alternate command as described below:

```shell
cd ios && pod install

# after pods are installed
cd ..

# alternate command
npx pod-install ios
```

## Installing react-native-vector-icons

The `react-native-vector-icons` module needs a bit more configuration steps for the iOS and Android platforms.

For iOS, you need to add the following inside `ios/customTabBar/Info.plist`:

```c
<key>UIAppFonts</key>
<array>
  <string>AntDesign.ttf</string>
  <string>Entypo.ttf</string>
  <string>EvilIcons.ttf</string>
  <string>Feather.ttf</string>
  <string>FontAwesome.ttf</string>
  <string>FontAwesome5_Brands.ttf</string>
  <string>FontAwesome5_Regular.ttf</string>
  <string>FontAwesome5_Solid.ttf</string>
  <string>Foundation.ttf</string>
  <string>Ionicons.ttf</string>
  <string>MaterialIcons.ttf</string>
  <string>MaterialCommunityIcons.ttf</string>
  <string>SimpleLineIcons.ttf</string>
  <string>Octicons.ttf</string>
  <string>Zocial.ttf</string>
  <string>Fontisto.ttf</string>
</array>
```

Then, the following to the `ios/Podfile` and run `cd ios && pod update` from a terminal window:

```js
pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'
```

For Android, add the following snippet in the file: `android/app/build.gradle`:

```java
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
```

That's it to setup the react-native-vector-icons library.

Since we have installed and configured everything we need to build and run the React Native app, you can now edit the `App.js` file which is the entry point of the React native app.

To build the app for iOS, please execute the command `npx react-native run-ios` from a terminal window. Similarly, the build command for Android is `npx react-native run-android`.

Here is the default app running after the building for iOS:

<img src='https://crowdbotics.ghost.io/content/images/2021/02/ss1-3.png' />

## Add mock screens

The tab bar of this example app is going to display three different tabs. The first tab is used to display a list of items with images such that when the tab bar is added to the app, we can configure its translucency.

Let's create them inside a separate directory called `screens/` and create the first file called `data.js` that contains the mock data to display inside the list view in the first tab. Add the following code snippet:

```js
// Images in this example demo are being used from Unsplash
// Manarola - https://unsplash.com/photos/rknrvCrfS1k
// Venezia - https://unsplash.com/photos/hFXZ5cNfkOk
// Prague - https://unsplash.com/photos/pz0P5piDQXs

export const data = [
  {
    id: '1',
    title: 'Manarola, Italy',
    description: 'The Cliffs of Cinque Terre',
    image_url:
      'https://images.unsplash.com/photo-1516483638261-f4dbaf036963?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=633&q=80',
    iconName: 'location-pin'
  },

  {
    id: '2',
    title: 'Venezia, Italy',
    description: 'Rialto Bridge, Venezia, Italy',
    image_url:
      'https://images.unsplash.com/photo-1523906834658-6e24ef2386f9?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=630&q=80',
    iconName: 'location-pin'
  },
  {
    id: '3',
    title: 'Prague, Czechia',
    description: 'Tram in Prague',
    image_url:
      'https://images.unsplash.com/photo-1513805959324-96eb66ca8713?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80',
    iconName: 'location-pin'
  },
  {
    id: '4',
    title: 'Venezia, Italy',
    description: 'Rialto Bridge, Venezia, Italy',
    image_url:
      'https://images.unsplash.com/photo-1523906834658-6e24ef2386f9?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=630&q=80',
    iconName: 'location-pin'
  }
];
```

In the above code snippet, you can see that `data` is an array that has different objects. Let's create the first tab screen called `Home.js` where this array of mock data will be used. Import the following statements inside it and then define a custom and width and height of the image card. This image card is displayed inside the list view as the item. Using React Native's `Dimensions` API, the width and height of the image are calculated based on the width of the device's screen.

```js
import React from 'react';
import {
  View,
  Text,
  StyleSheet,
  Image,
  Dimensions,
  ScrollView
} from 'react-native';

import { data } from './data';

const { width } = Dimensions.get('screen');

const ITEM_WIDTH = width * 0.9;
const ITEM_HEIGHT = ITEM_WIDTH * 0.9;
```

Using a `Text` component, the title of the tab is displayed. Using the `ScrollView` the list of items is implemented by using JavaScript's `map()` method that allows to iterate over each item. After importing the statements, add the following snippet:

```js
const Home = () => {
  const tabBarheight = useBottomTabBarHeight();
  return (
    <View style={styles.container}>
      <View style={styles.contentContainer}>
        <Text style={styles.title}>Home</Text>
      </View>

      {/* Scrollable Content */}
      <View style={styles.scrollContainer}>
        <ScrollView
          indicatorStyle="white"
          contentContainerStyle={[
            styles.scrollContentContainer,
            { paddingBottom: tabBarheight }
          ]}
        >
          {data.map(item => (
            <View key={item.id} style={styles.imageContainer}>
              <Image
                style={styles.imageCard}
                source={{ uri: item.image_url }}
                resizeMode="cover"
              />
            </View>
          ))}
        </ScrollView>
      </View>
    </View>
  );
};

export default Home;
```

Lastly, the add the styles reference for each component in the above snippet:

```js
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#0f0f0f'
  },
  contentContainer: {
    marginTop: 50,
    alignItems: 'center',
    paddingHorizontal: 20,
    paddingBottom: 20
  },
  title: {
    fontSize: 20,
    color: '#fff'
  },
  scrollContainer: {
    flex: 1
  },
  scrollContentContainer: {
    alignItems: 'center'
  },
  imageContainer: {
    marginBottom: 14
  },
  imageCard: {
    borderRadius: 14,
    width: ITEM_WIDTH,
    height: ITEM_HEIGHT
  }
});
```

The other two tab screens are created inside `Browse.js` and `Library.js` and they do not render much information other than the name of the tab screen. Let's keep them bare minimum for the brevity of this example.

Inside the file `Browse.js`, add the following code snippet:

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

const Browse = () => {
  return (
    <View style={styles.container}>
      <View style={styles.contentContainer}>
        <Text style={styles.title}>Browse</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#0f0f0f'
  },
  contentContainer: {
    marginTop: 50,
    alignItems: 'center',
    paddingHorizontal: 20
  },
  title: {
    fontSize: 20,
    color: '#fff'
  }
});

export default Browse;
```

Inside the `Library.js` file, add the following snippet:

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

const Library = () => {
  return (
    <View style={styles.container}>
      <View style={styles.contentContainer}>
        <Text style={styles.title}>Library</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#0f0f0f'
  },
  contentContainer: {
    marginTop: 50,
    alignItems: 'center',
    paddingHorizontal: 20
  },
  title: {
    fontSize: 20,
    color: '#fff'
  }
});

export default Library;
```

That's it for the tab screens and mocking data inside one of the tab screen components.

## How to create a tab bar

Create a new directory called `navigation/` at the root of the React Native project. In this directory, we are going to keep all the navigation configuration files. Inside it create a new directory called `TabNavigator`. It is going to have two separate files:

- `index.js` to initiate the complete Tab Bar configuration
- `CustomTabBar.js` to render the custom tab bar

Inside the file `TabNavigator/index.js` import the `createBottomTabNavigator` from `@react-navigation/bottom-tabs` package. Using this, a `Tab` object is initialized. This object allows defining the structure of the routes using `Tab.Navigator` and the define each route using the `Tab.Screen` component.

```js
import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import Home from '../../screens/Home';
import Browse from '../../screens/Browse';
import Library from '../../screens/Library';

const Tab = createBottomTabNavigator();

const TabNavigator = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={Home} />
      <Tab.Screen name="Browse" component={Browse} />
      <Tab.Screen name="Library" component={Library} />
    </Tab.Navigator>
  );
};

export default TabNavigator;
```

The simple tab bar configuration is done. To see it in action, let's wrap it with the `NavigationContainer` component inside the new file called `navigation/RootNavigator.js`. This component manages the navigation tree. It contains the navigation state prop.

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

import TabNavigator from './TabNavigator';

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

export default RootNavigator;
```

The last step is to import and render the Root Navigator from inside the `App.js` file:

```js
import React from 'react';
import { StatusBar } from 'react-native';

import RootNavigator from './navigation/RootNavigator';

const App = () => {
  return (
    <>
      <StatusBar hidden />
      <RootNavigator />
    </>
  );
};

export default App;
```

On an iOS simulator, the tab bar is shown as below. There are no custom styles currently applicable on the tab bar. The way it looks is because the tab bar component from React Navigation library has some default styles.

<img src='https://crowdbotics.ghost.io/content/images/2021/02/ss2-1.png' />

## Add icons to the tab bar

To add icons to each tab, first import the `Icon` component from react-native-vector-icons` library inside the`navigation/TabNavigator/index.js` file. For this example, let's use AntDesign based icons.

```js
// after other import statements
import Icon from 'react-native-vector-icons/AntDesign';
```

Using the `screenOptions` object on `Tab.Navigator`, the configuration to display icons for each tab is enabled. This object has different methods and properties to enable different configurations. One such method is called `tabBarIcon` that allows us to display a custom icon for each tab. This function returns an `Icon` component that has props like `color` and `size` to apply tint color on the icon for each tab and define a numeric value for the size of the icon. It also has a prop called `name`
that allows defining which icon to be used for which screen.

Add the following code snippet:

```js
const screenOptions = (route, color) => {
  let iconName;

  switch (route.name) {
    case 'Home':
      iconName = 'home';
      break;
    case 'Browse':
      iconName = 'appstore-o';
      break;
    case 'Library':
      iconName = 'folder1';
      break;
    default:
      break;
  }

  return <Icon name={iconName} color={color} size={24} />;
};

const TabNavigator = () => {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ color }) => screenOptions(route, color)
      })}
    >
      {/* rest remains same */}
    </Tab.Navigator>
  );
};
```

Go back to the iOS simulator and you will notice that the icons for each tab route are now displayed.

<img src='https://crowdbotics.ghost.io/content/images/2021/02/ss3.png' />

## Customizing the tab bar

To customize a tab bar, more options using the `tabBarOptions` object can be applied. This options object has properties to set active and inactive tint color for each tab, the background color for the whole tab bar, and so on.

Add the following options object on `Tab.Navigator`:

```js
<Tab.Navigator
// ...
tabBarOptions={{
  activeTintColor: 'white',
  inactiveTintColor: '#d9d9d9',
  style: {
    borderTopColor: '#66666666',
    backgroundColor: 'transparent',
    elevation: 0,
  },
}}
>
```

The property `elevation` is set to zero in the above code snippet such that there are no shadows overlap on Android when we will make the custom tab bar translucent in the next section.

## Making the tab bar translucent

To make the tab bar translucent, we are going to use `BlurView` component from [@react-native-community/blur](https://github.com/Kureev/react-native-blur) component. It is used to add a blur view effect on iOS and Android. It is going to wrap a component called `BottomTabBar` from @react-navigation/bottom-tabs library. This component is a React element that is used to display the actual tab bar. It is provided by a prop called `tabBar` on `Tab.Navigator`. Using this React element, the tab bar can be defined explicitly inside the `CustomTabBar.js` component file.

Start by adding the following snippet inside `TabNavigator/CustomTabBar.js` file:

```js
import React from 'react';
import { BottomTabBar } from '@react-navigation/bottom-tabs';
import { BlurView } from '@react-native-community/blur';

const CustomTabBar = props => {
  return <BottomTabBar {...props} />;
};

export default CustomTabBar;
```

The `props` received by this custom React component are passed from `tabBar` option. Add it on the `Tab.Navigator` inside `TabNavigator/index.js` file:

```js
<Tab.Navigator
  // ... rest remains same
  tabBar={(props) => <CustomTabBar {...props} />}
>
```

Using the `props` you can further modify the configuration of a bottom tab bar. We are not going to get into that since it's out of the scope of this article.

Inside the `CustomTabBar.js` file, wrap the `BottomTabBar` with `<BlurView>` component. It has a different set of props for iOS and Android to add the blur view effect.

For iOS, to create a blur view effect, add `blurType` which accepts the type of blur effect as a string value. On an iOS device, different values such as `light`, `dark`,` xlight`, `regular` etc. are available.

Another property `blurAmount` is applied to adjust the intensity of the blur effect. Similarly, for Android, in addition to these props, props such as `overLayColor` to set a custom overlay and `blurRadius` to manually adjust the blur effect radius are used.

To make sure to apply styles on the `BlurView` component such that the tab bar is displayed over the content of each screen, set its `position` to `absolute`.

Here is the final snippet for `CustomTabBar` component:

```js
<BlurView
  style={{
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0
  }}
  blurType="dark"
  blurAmount={10}
  blurRadius={25}
  overlayColor="transparent"
>
  <BottomTabBar {...props} />
</BlurView>
```

The tab bar is now translucent. Here is the example app running on an iOS simulator.

<img src='https://crowdbotics.ghost.io/content/images/2021/02/ss4.gif' />

Do notice that, since the `BlurView` component has the position set to `absolute` we need to apply the `paddingBottom` property at the `ScrollView` component inside the `Home.js` tab screen. The value of this property is going to be the height of the whole tab bar. To get the height of the current tab bar, the @react-navigation/bottom-tabs module has a hook called `useBottomTabBarHeight` that gives this value.

Add the import statement in the `screens/Home.js` file and inside it, use the hook to get the height as shown below and apply it as the value of the `paddingBottom` style property at the `ScrollView` component:

```js
import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs';

// ...

const Home = () => {
  const tabBarheight = useBottomTabBarHeight();

  // ...

  return (
    // ...
    <ScrollView
      indicatorStyle="white"
      contentContainerStyle={[
        styles.scrollContentContainer,
        {paddingBottom: tabBarheight},
    ]}>
  )
}
```

Back in the iOS simulator, you will notice that it works fine now:

<img src='https://crowdbotics.ghost.io/content/images/2021/02/ss5.gif' />

Running the app build on an Android device, the results are similar:

<img src='https://crowdbotics.ghost.io/content/images/2021/02/ss6.gif' />

## Conclusion

We have discussed only one scenario of customizing the bottom tab bar. The main objective here is to get familiar with the component-based configuration of the Tab Navigator in the latest version of the react-navigation library and learn the steps to create a custom tab bar.

Originally Published at **[Crowdbotics's Blog](https://blog.crowdbotics.com/how-to-create-a-custom-tab-bar-in-react-native/)**.


How to Create a Custom Tab Bar in React Native

---
title: 'How to use ES6 import syntax in Node.js'
date: '2021-04-07'
thumbnail: '/thumbnails/node.png'
slug: 'how-to-use-es6-import-syntax-in-node'
tag: 'nodejs'
canonicalUrl: 'https://amanhimself.dev/blog/how-to-use-es6-import-syntax-in-node/'
---

![cover_image](https://i.imgur.com/mztPVQI.png)

<blockquote>
Photo by <a href="https://unsplash.com/@weirick?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Jake Weirick</a> on <a href="https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
</blockquote>

<br />

A module is a JavaScript file that exports one or more values. The exported value can be a variable, an object, or a function.

An ES6 import syntax allows importing modules exported from a different JavaScript file. It is a common pattern to use modules across React and React Native applications. The syntax is composed of the following ES module standard:

```js
import XXX from 'xxx';
```

An ES module is the ECMAScript standard of working with modules. Node.js uses the CommonJS standard to import modules. The syntax for this type of standard can be described as:

```js
const XXX = require('xxx');
```

Node js doesn’t support ES6 import directly. Try writing the `import` syntax in a JS file:

```js
// index.js

import { ApolloServer, gql } from 'apollo-server';
```

Run the Node.js server either by using `npm start` or `npm run dev` and you will encounter the following error:

![ss1](https://i.imgur.com/lbHW7pl.png)

The solution to this error is in the first line of the above error snippet and is now [a recommend way by Node.js](https://nodejs.org/api/esm.html#esm_enabling). Set the `"type": "module"` in `package.json` file.

```json
{
  "type": "module"
}
```

This solution works for the latest Node.js versions (which is `15.4.x` at the time of writing) and versions above `14.x.x`.

![ss2](https://i.imgur.com/Mm92hul.png)

## What about environments using Node version lower than 14

Another solution to this problem is to use [Babel](https://babeljs.io/). It's a JavaScript compiler and allows you to write JS using the latest syntax. Babel is not framework or platform opinionated. This means that it can be used in any project that is written in JavaScript and thus, in a Node.js project as well.

Start by installing the following dev dependencies from a terminal window:

```bash
npm i -D @babel/core @babel/preset-env @babel/node
```

Then create a file at the root of the Node.js project called `babel.config.json` and add the following:

```json
{
  "presets": ["@babel/preset-env"]
}
```

The package `@babel/node` is a CLI utility that compiles JS code in a Node.js project with Babel presets and plugins before running it. It means it will read and apply any configuration mention in `babel.config.json` before executing the Node project.

Replace the `node` with `babel-node` to execute the server in the `start` or `dev` scripts.

An example of running Node server using `npm run dev` script:

```json
{
  "scripts": {
    "dev": "nodemon --exec babel-node server.js"
  }
}
```


How to use ES6 import syntax in Node.js

---
title: 'How to upload an image using Expo Camera to Cloudinary'
date: '2021-03-31'
slug: 'upload-image-to-cloudinary-using-expo-camera'
thumbnail: '/thumbnails/expo.png'
tag: 'expo'
canonicalUrl: 'https://jscrambler.com/blog/how-to-upload-an-image-using-expo-camera-to-cloudinary/'
---

> Originally Published at **[Jscrambler's Blog](https://jscrambler.com/blog/how-to-upload-an-image-using-expo-camera-to-cloudinary/)**.

The camera feature in a mobile device allows it to capture pictures and record videos, making it very helpful in many circumstances. By using the expo-camera library the process of adding that camera feature to an application becomes seamless, which is why in this tutorial, we’ll take a look at how to use [Expo Camera](https://docs.expo.io/versions/latest/sdk/camera/) to take a picture and then upload that same picture to a real-time cloud service [Cloudinary](https://cloudinary.com/).

## Prerequisites

To follow this tutorial, please make sure you are familiarized with JavaScript/ES6 and meet the following requirements in your local dev environment:

- Have [Node.js](https://nodejs.org/) version >= 14.x.x installed.
- Have access to one package manager such as npm or yarn or npx.
- Have [expo-cli](https://github.com/expo/expo-cli) installed, or use npx

**The source code is available at this [Github repository](https://github.com/amandeepmittal/react-native-examples/tree/master/camera-upload-to-cloudinary).**

## Create an Expo app

Start by creating a new Expo app and then install the dependency `expo-camera`. Execute the following commands in a terminal window:

```shell
npx create-expo-app project-name

# select the blank template

cd project-name

npx expo install expo-camera
```

## Create a custom camera component

The `expo-camera` library provides a React component that allows snapping pictures using a device's front or back camera. It exposes properties like zoom, autofocus, preview image after snapping, white balance, face detection, barcode scanning, and flash mode.

For this demo, let's create a component that when rendered renders the `<Camera>` component initially.

Start by adding the following import statements in the `App.js` file.

```js
import React, { useState, useRef, useEffect } from 'react';
import {
  StyleSheet,
  Dimensions,
  View,
  Text,
  TouchableOpacity
} from 'react-native';
import { Camera } from 'expo-camera';
import { AntDesign, MaterialIcons } from '@expo/vector-icons';
```

The `@expo/vector-icons` is another package bundled with Expo SDK and allows the use of various icons from different icon sets. You can find the references to these icons at [icons.expo.fyi](https://icons.expo.fyi/).

The `Dimensions` from React Native is used to get the application’s windows width and height.

- To display the camera in full-screen mode, let's get the height of the window on which the application is running.
- Then, define a custom variable called CAPTURE_SIZE representing 80% of the window height. This variable is used in styles later.
- Add the following code snippet before the `App` component.

```js
const WINDOW_HEIGHT = Dimensions.get('window').height;
const CAPTURE_SIZE = Math.floor(WINDOW_HEIGHT * 0.08);
```

The `expo-camera` library exposes an API of methods. To invoke any of these methods, define a reference to the useRef React hook.

Add the following code snippet just after defining the `App`. Make sure to add a `ref` prop to the `Camera` component whose value is `cameraRef`.

```js
return (
  <View style={styles.container}>
    <Camera ref={cameraRef} style={styles.container} />
  </View>
);
```

## Why use absoluteFillObject to position View component

The `absoluteFillObject` automatically sets a `View` component to be full screen and absolutely positioned. It also allows overriding the values such as `top`. For example, you may want to absolute position the `View` component with an offset like `top: 30` to display it below the status bar.

Add the corresponding styles to the `App` component.

```js
const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject
  },
  text: {
    color: '#fff'
  }
});
```

## How to check for camera permissions

To use a device's camera, the application needs to ask a user to utilize the hardware functionality. This is done by asking the user to grant permission for camera access, and naturally, if the request gets denied, the application won't be able to use it.

- First, define a state variable using the `useState` React hook called `hasPermission`.
- Then, create a method called `onHandlePermission`. It is asynchronous and returns a Promise that resolves when the permissions are granted. To ask for permission, `Camera.requestPermissionsAsync` is used.
- Update the state variable using the update function from the array if the promise is resolved and the permission has been granted.
- Then, using a `useEffect` hook, invoke the method `onHandlePermission`.

Add the following code snippet in `App` component:

```js
export default function App() {
  const cameraRef = useRef();
  const [hasPermission, setHasPermission] = useState(null);

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

  const onHandlePermission = async () => {
    const { status } = await Camera.requestPermissionsAsync();
    setHasPermission(status === 'granted');
  };

  if (hasPermission === null) {
    return <View />;
  }
  if (hasPermission === false) {
    return <Text style={styles.text}>No access to camera</Text>;
  }

  // ...
}
```

In the above code snippet, the two `if` statements are used either when:

- The permission hasn’t been requested.
- A user denies the permission, in which case, a text message stating that there is no access to the camera will be displayed.

Here is how asking for permissions are prompted on an Android device:

![ss1](https://i.imgur.com/5iOMbr1.png)

After the permission is granted, the Camera is now accessible on the device:

![ss2](https://i.imgur.com/90zdXLT.png)

## Switching between Camera types

To switch between different types of cameras on a device, let's add a custom method. The Camera component has a prop called `type` and by using it, the type of camera currently in use on the device can be determined.

Start by defining a state variable called `cameraType` to track the camera's current type. Give it a default value of type `back`. It determines that the default camera mode type is going to be back. The camera type is accessible from `Camera.Constants.Type.back`.

Define another state variable called `isPreview`. It will determine whether the app is in camera mode or image preview mode. It is going to have a default value of boolean `false`.

Add a method called `switchCamera` in the `App` component. Then, check if it is in the preview mode. If yes, return nothing.

If it is in the camera mode, write the logic to handle the switch between the back and front camera mode by updating the state value of `cameraType`.

Then, on the `Camera` component add a prop `type={cameraType}`.

Define the state variable to determine whether the camera is ready to capture photos or not. Call it `isCameraReady` with a default value of boolean `false`. Then, add a method called `onCameraReady` to update its value. Also, add the prop `onCameraReady={onCameraReady}` on the `Camera` component.

```js
export default function App() {
  const cameraRef = useRef();
  const [hasPermission, setHasPermission] = useState(null);
  const [cameraType, setCameraType] = useState(Camera.Constants.Type.back);
  const [isPreview, setIsPreview] = useState(false);
  const [isCameraReady, setIsCameraReady] = useState(false);

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

  const onHandlePermission = async () => {
    const { status } = await Camera.requestPermissionsAsync();
    setHasPermission(status === 'granted');
  };

  const onCameraReady = () => {
    setIsCameraReady(true);
  };

  const switchCamera = () => {
    if (isPreview) {
      return;
    }
    setCameraType(prevCameraType =>
      prevCameraType === Camera.Constants.Type.back
        ? Camera.Constants.Type.front
        : Camera.Constants.Type.back
    );
  };

  if (hasPermission === null) {
    return <View />;
  }
  if (hasPermission === false) {
    return <Text style={styles.text}>No access to camera</Text>;
  }

  return (
    <View style={styles.container}>
      <Camera
        ref={cameraRef}
        style={styles.container}
        type={cameraType}
        onCameraReady={onCameraReady}
      />
    </View>
  );
}
```

To allow the Camera to switch, add a custom icon button to switch between two different camera types. The icon is used from the `MaterialIcons` set from the `@expo/vector-icons library`.

After the `Camera` component in JSX code, add a `View` component that wraps the buttons such as switch camera types and capture a picture.

Inside the `View` component, create an icon button using `TouchableOpacity`. The `onPress` prop on this component is used to trigger an action. In this case, it is used to invoke the `switchCamera` method.

Add a `disabled` prop on `TouchableOpacity` that disables the button depending on the value of `isCameraReady`. If its value is false, then this button will not function.

```js
<View style={styles.container}>
  <Camera
    ref={cameraRef}
    style={styles.container}
    type={cameraType}
    onCameraReady={onCameraReady}
  />
  <View style={styles.container}>
    {!isPreview && (
      <View style={styles.bottomButtonsContainer}>
        <TouchableOpacity disabled={!isCameraReady} onPress={switchCamera}>
          <MaterialIcons name="flip-camera-ios" size={28} color="white" />
        </TouchableOpacity>
      </View>
    )}
  </View>
</View>
```

Add the styles for the above code snippet:

```js
const styles = StyleSheet.create({
  // ...
  bottomButtonsContainer: {
    position: 'absolute',
    flexDirection: 'row',
    bottom: 28,
    width: '100%',
    alignItems: 'center',
    justifyContent: 'center'
  }
});
```

Here is how the switch button is displayed:

![ss3](https://i.imgur.com/aPslkxl.png)

## Take a picture from the Camera and preview it

Camera API from the `expo-camera` library uses a method called `takePictureAsync()` to take a picture. It saves the photographed image in the app's cache directory by default.

The method accepts a configuration object with different options such as quality, base64, skipProcessing, exif, etc. We will use two options:

- `quality` to specify the compression rate of the image snapped
- `base64` to include the image data in Base64 format.

These options are passed as properties in a JavaScript object. This object is then further passed as an argument to the `takePictureAsync` method.

Start by adding a new asynchronous method called `onSnap`. Start by checking the value of the `cameraRef.current`. If available, then the following logic defined in the code snippet below to take a picture will execute from this method.

Then, define an object called `options` with the following properties:

- quality and set its value to `0.7`. This option selects a value between 0 to 1.
- base64 and set its value to `true`. It accepts a boolean value of true or false

The `takePictureAsync` method, when invoked, returns a promise that resolves into an object. Store the value resolved in a variable called `data`. It contains the image data in form of the following properties:

- uri of the image stored in the app's cache.
- width and height of the image.
- if the base64 option is enabled, it will return the base64 data of the image.

Store the base64 data of the image in another variable called `source`.

Next, add an if condition to check if the source exists. If it exists, pause the camera mode and set the image preview mode to true to show the current picture after it is taken.

```js
const onSnap = async () => {
  if (cameraRef.current) {
    const options = { quality: 0.7, base64: true };
    const data = await cameraRef.current.takePictureAsync(options);
    const source = data.base64;

    if (source) {
      await cameraRef.current.pausePreview();
      setIsPreview(true);
    }
  }
};
```

To go back from the image preview mode to camera mode, add a method called `cancelPreview`. When this method invokes, it resumes the camera mode.

```js
const cancelPreview = async () => {
  await cameraRef.current.resumePreview();
  setIsPreview(false);
};
```

Add the `onSnap` method as an action on `TouchableOpacity` component as the value of `onPress` prop. This button is responsible for capturing an image and is wrapped by the View component when the image preview mode is false.

```js
<View style={styles.container}>
  {!isPreview && (
    <View style={styles.bottomButtonsContainer}>
      <TouchableOpacity disabled={!isCameraReady} onPress={switchCamera}>
        <MaterialIcons name="flip-camera-ios" size={28} color="white" />
      </TouchableOpacity>
      <TouchableOpacity
        activeOpacity={0.7}
        disabled={!isCameraReady}
        onPress={onSnap}
        style={styles.capture}
      />
    </View>
  )}
</View>
```

Add the styles for the above code snippet:

```js
const styles = StyleSheet.create({
  // ...
  capture: {
    backgroundColor: '#5A45FF',
    borderRadius: 5,
    height: CAPTURE_SIZE,
    width: CAPTURE_SIZE,
    borderRadius: Math.floor(CAPTURE_SIZE / 2),
    marginBottom: 28,
    marginHorizontal: 30
  }
});
```

Here is how the capture button is shown. It can now take pictures.

![ss4](https://i.imgur.com/RYAKlLf.png)

Add JSX code to trigger the `cancelPreview` method as an action on a `TouchableOpacity` component. It wraps an icon component from `AntDesign`. This is shown when the application is in image preview mode.

```js
<View style={styles.container}>
  {isPreview && (
    <TouchableOpacity
      onPress={cancelPreview}
      style={styles.closeButton}
      activeOpacity={0.7}
    >
      <AntDesign name='close' size={32} color='#fff' />
    </TouchableOpacity>
  )}
  {!isPreview && (
    // ...
  )}
</View>
```

Add the styles for the above code snippet:

```js
const styles = StyleSheet.create({
  // ...
  closeButton: {
    position: 'absolute',
    top: 35,
    right: 20,
    height: 50,
    width: 50,
    borderRadius: 25,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#5A45FF',
    opacity: 0.7
  }
});
```

After taking a picture, here is how the image preview mode is displayed:

![ss5](https://i.imgur.com/dIyq9ce.png)

## Setup the Cloudinary service

Before starting with this section, make sure you have a Cloudinary account set up. If you already have an account, [log in here](https://cloudinary.com/users/login).

After logging in, you will be welcomed by a dashboard screen similar to below:

![ss6](https://i.imgur.com/jIX6Yio.png)

To upload an image to their service, two things are required.

First, an apiUrl which is constructed of the following base URL:

```shell
'https://api.cloudinary.com/v1_1/<your-cloud-name>/image/upload'
```

The value for the placeholder `<your-cloud-name>` is the cloud name you entered when creating a new account or as shown in the dashboard screen.

The second parameter required is called `upload_preset`. It is created by following the steps below:

- From the Dashboard, click Settings in the menu bar and select the Upload tab.
- Look for the section "Upload presets" and click "Add upload preset".
- Enter the name of the upload preset. In the "Signing mode," select the value "Unsigned" from the drop-down menu.
- Then click Save.

![ss7](https://i.imgur.com/sfEYaDR.gif)

## Upload an image to Cloudinary

To upload an image to the service, we need a few required presets. We will use JavaScript's `fetch` API to send a POST request to the Cloudinary API URL. A service that allows uploading base64 images requires the image data to be appended by the `data:image/jpg;base64,` prefix.

The request also requires a `data` object which has the image data as the `file` and the value of the `upload_preset`.

Modify the `onSnap` method inside as shown below.

```js
const onSnap = async () => {
  if (cameraRef.current) {
    const options = { quality: 0.7, base64: true };
    const data = await cameraRef.current.takePictureAsync(options);
    const source = data.base64;

    if (source) {
      await cameraRef.current.pausePreview();
      setIsPreview(true);

      let base64Img = `data:image/jpg;base64,${source}`;
      let apiUrl =
        'https://api.cloudinary.com/v1_1/<your-cloud-name>/image/upload';
      let data = {
        file: base64Img,
        upload_preset: '<your-upload-preset>'
      };

      fetch(apiUrl, {
        body: JSON.stringify(data),
        headers: {
          'content-type': 'application/json'
        },
        method: 'POST'
      })
        .then(async response => {
          let data = await response.json();
          if (data.secure_url) {
            alert('Upload successful');
          }
        })
        .catch(err => {
          alert('Cannot upload');
        });
    }
  }
};
```

Take a picture and when it is successfully uploaded to the Cloudinary service, an alert message like below is displayed:

![ss8](https://i.imgur.com/gEQe5wP.png)

## Using Camera2 api for Android

Android devices have a new package called [android.hardware.camera2](https://developer.android.com/reference/android/hardware/camera2/package-summary) that provides an interface to an individual camera. It replaces the deprecated [Camera](https://developer.android.com/reference/android/hardware/Camera) class.

To use the latest package using `expo-camera`, add the following prop with a value of boolean `true` on the `Camera` component.

```js
<Camera
  // ...
  useCamera2Api={true}
/>
```

## Conclusion

In this post, we have successfully used Expo Camera to take a picture and then upload it to a real-time service like Cloudinary. To add image saving functionality check out the [expo-media-library](https://docs.expo.io/versions/latest/sdk/media-library/).

The source code is available at this [Github repository](https://github.com/amandeepmittal/react-native-examples/tree/master/camera-upload-to-cloudinary).


How to upload an image using Expo Camera to Cloudinary

---
title: 'How to use React Native Geolocation to get Postal Address'
date: '2021-02-25'
slug: 'react-native-geolocation-to-get-postal-address'
thumbnail: '/thumbnails/expo.png'
tag: 'expo'
canonicalUrl: 'https://jscrambler.com/blog/how-to-use-react-native-geolocation-to-get-postal-address/'
---

Geolocation in React Native applications is the ability to fetch the geographic position of the device when it is connected to the internet. It takes advantage of an API that provides the current location of the device in the form of Longitude and Latitude coordinates. It can be used to add features such as fetching simple location coordinates of a device or getting the current location of the device. Ultimately, Geolocation provides support to the development functionalities seen in delivery or ride-hailing applications.

In this tutorial, let's learn how you can implement a feature to get the current location of a device in a React Native app. To do this we’ll be using an API provided by Expo in the form of a package called `expo-location`. We will then convert the location coordinates into human-readable postal address format.

The source code is available at this [GitHub repo](https://github.com/amandeepmittal/react-native-examples/tree/master/expo-geolocation-example).

## Prerequisites

To follow this tutorial, please make sure you are familiarized with JavaScript/ES6 and meet the following requirements in your local dev environment:

- Have [Node.js](https://nodejs.org/) version >= `12.x.x` installed.
- Have access to one package manager such as npm or yarn or npx.
- Have [expo-cli](https://github.com/expo/expo-cli) installed, or use npx

## Create a React Native app with expo-cli

Create a new React Native project using `expo-cli` and then install the dependencies required to build this demo app. Let's breakdown what we are going to implement:

- The demo app is going to mimic a food delivery app feature where when an end-user opens the app, the first thing they are prompted for is to fetch their current location. Let's call this screen a Welcome screen.
- Only once the location is fetched, will the end-user be taken to the Home screen of the app. This is a condition we are going to put in our demo.
- We will be using a stack navigator from [React Navigation](https://reactnavigation.org/docs/getting-started) library. This is just an example to understand the concepts of using Geolocation data in a React Native app. You can use the same concepts in the way you want to implement the feature of fetching the current location.

Open a terminal window and execute the following commands:

```shell
npx expo init expo-geolocation-example

# navigate into that directory
cd expo-geolocation-example
yarn add @react-navigation/native @react-navigation/stack

# install dependencies with Expo specific package version
expo install expo-location react-native-gesture-handler react-native-reanimated
react-native-screens react-native-safe-area-context
@react-native-community/masked-view
```

After installing these dependencies, let's create two mock screens that are going to be the two core screens for the demo app. Create a new `screens/` directory and inside it, create the first screen file `Welcome.js`. This screen is going to display an image, a title, and a dummy mock location address for now. Later in this post, this dummy mock location address is going to display a real address based on the current location.

Add the following code snippet to this file:

```js
import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';

const Welcome = ({ navigation }) => {
  return (
    <View style={styles.container}>
      <View style={styles.contentContainer}>
        <Image source={require('../assets/geo.png')} style={styles.image} />
        <Text style={styles.title}>What's your address?</Text>
      </View>
      <Text style={styles.text}>Mock Address</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#070707',
    alignItems: 'center',
    paddingTop: 130
  },
  contentContainer: {
    alignItems: 'center',
    marginBottom: 20
  },
  image: {
    width: 150,
    height: 150,
    resizeMode: 'contain',
    marginBottom: 20
  },
  title: {
    fontSize: 22,
    fontWeight: '700',
    color: '#FD0139'
  },
  text: {
    fontSize: 20,
    fontWeight: '400',
    color: '#fff'
  }
});

export default Welcome;
```

Create the second screen file `Home.js` with the following code snippet:

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

const Home = ({ navigation }) => {
  return (
    <View style={styles.container}>
      <Text>Home</Text>
    </View>
  );
};

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

export default Home;
```

Let's hook up the stack navigation container in the `App.js` file since we do not have multiple files and different ways to navigate in this demo app. I am not going through how to set up and use the React Navigation library. If you'd like to learn more on that subject please go through the post [How to Set Up and Use Navigators in React Native](https://blog.jscrambler.com/how-to-set-up-and-use-navigators-in-react-native/).

Open up the `App.js` file and add the following:

```js
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

// Custom screens
import Welcome from './screens/Welcome';
import Home from './screens/Home';

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Welcome" headerMode="none">
        <Stack.Screen name="Welcome" component={Welcome} />
        <Stack.Screen name="Home" component={Home} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
```

Once the navigator is set, you can open up a terminal window and run the command `expo start`. You can either choose an iOS simulator or an Android emulator or the Expo Go client app to view the results so far. Here is current the state of the demo app in an iOS simulator:

<img src="https://i.imgur.com/l0cuYI1.png" width="300" />

## Check if the device's location service enabled

The first thing in the demo app we are going to implement is to check whether a device's location services are enabled or not. For this, let's create a state variable called `locationServiceEnabled`.

To check the status of the service let's create a new handler method called `CheckIfLocationEnabled`. The `expo-location` has an asynchronous method called `Location.hasServicesEnabledAsync()`. It returns a boolean value of true if the location service on the device is enabled and if otherwise, it returns false. In case of the value false, let's display an alert box indicating the same. If the location service is enabled, then update the value of the state variable using the `setLocationServiceEnabled` method.

The handler method is then called inside a `useEffect` React hook with no dependency such that it triggers only after the first render.

Modify the `Welcome.js` screen as shown below. Do note the placeholder message displayed in the place of the mock location address using a state variable called `displayCurrentAddress`. It will get an update once the current location of the device is found.

```js
import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, Image, Alert } from 'react-native';
import * as Location from 'expo-location';

const Welcome = ({ navigation }) => {
  const [locationServiceEnabled, setLocationServiceEnabled] = useState(false);
  const [displayCurrentAddress, setDisplayCurrentAddress] = useState(
    'Wait, we are fetching you location...'
  );

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

  const CheckIfLocationEnabled = async () => {
    let enabled = await Location.hasServicesEnabledAsync();

    if (!enabled) {
      Alert.alert(
        'Location Service not enabled',
        'Please enable your location services to continue',
        [{ text: 'OK' }],
        { cancelable: false }
      );
    } else {
      setLocationServiceEnabled(enabled);
    }
  };

  return (
    <View style={styles.container}>
      <View style={styles.contentContainer}>
        <Image source={require('../assets/geo.png')} style={styles.image} />
        <Text style={styles.title}>What's your address?</Text>
      </View>
      <Text style={styles.text}>{displayCurrentAddress}</Text>
    </View>
  );
};

// styles remain same

export default Welcome;
```

To test it out in the iOS simulator, go to **Settings > Privacy > Location Services**.

<img src="https://i.imgur.com/Q0yZjbv.png" width="300" />

If it says on, as shown in the above image, tap it and make sure to switch off the **Location Services**.

<img src="https://i.imgur.com/yic9jlo.gif" width="250" />

Now open the app and you will notice that the alert box appears.

<img src="https://i.imgur.com/xzE8giE.gif" width="250" />

Similarly, on Android device, the location can be disabled from the following menu:

<img src="https://i.imgur.com/TKFYDhq.png" width="300" />

And the alert message will appear on the opening of the app:

<img src="https://i.imgur.com/Mk9egWP.png" width="300" />

Make sure to enable the location service again on the device before proceeding to the next section.

## Get current location and postal address

It is necessary to request access to a device's information whether it is location or any other sensitive information. Fortunately, `expo-location` has methods that can be directly used when fetching the current location of the device.

Let's break down the steps on how we are going to fetch the current location of the device and obtain the information of the current address (which includes name, street name, city, and postal code) to display on the app screen.

- First, create a new asynchronous handler method called `GetCurrentLocation`. Make sure to call it inside the `useEffect` hook after the previous code.
- Inside it, using the Location API method `requestPermissionsAsync`, ask the device's user to grant permission for the location. If, in any case, the user denies it, display them an alert box stating the same.
- If the permission is granted, get the current coordinates of the device's location using the Location API method `getCurrentPositionAsync`. The coordinates here are an object representing the location.
- Then, when the coordinates object is present, destructure the value of Latitude and Longitude. The Location API has a method called `reverseGeocodeAsync` which reverses the geocode of a location to a postal address. Using the result from this, we can update the value of `setDisplayCurrentAddress` to display the device's current address.

Update the code snippet in `Welcome.js` as shown below:

```js
// first update the useEffect hook
useEffect(() => {
  CheckIfLocationEnabled();
  GetCurrentLocation();
}, []);

// create the handler method

const GetCurrentLocation = async () => {
  let { status } = await Location.requestPermissionsAsync();

  if (status !== 'granted') {
    Alert.alert(
      'Permission not granted',
      'Allow the app to use location service.',
      [{ text: 'OK' }],
      { cancelable: false }
    );
  }

  let { coords } = await Location.getCurrentPositionAsync();

  if (coords) {
    const { latitude, longitude } = coords;
    let response = await Location.reverseGeocodeAsync({
      latitude,
      longitude
    });

    for (let item of response) {
      let address = `${item.name}, ${item.street}, ${item.postalCode}, ${item.city}`;

      setDisplayCurrentAddress(address);
    }
  }
};
```

Here is the output after this step:

<img src="https://i.imgur.com/JW51WSR.gif" width="250" />

The complete postal address is an object in JSON format and has the following fields (some of them might be useful for various cases):

```json
Object {
    "city": "Stockholm",
    "country": "Sweden",
    "district": "Stockholm City",
    "isoCountryCode": "SE",
    "name": "Gustav Adolfs torg",
    "postalCode": "111 52",
    "region": "Stockholm",
    "street": "Gustav Adolfs torg",
    "subregion": "Stockholm",
    "timezone": "Europe/Stockholm",
}
```

Once the location is fetched, we can send the current postal address as an object and navigate to the Home screen after a delay of two seconds using a `setTimeout` function.

Add the following code snippet after the statement `setDisplayCurrentAddress(address)`:

```js
if (address.length > 0) {
  setTimeout(() => {
    navigation.navigate('Home', { item: address });
  }, 2000);
}
```

Then, update the `Home.js` file to get the `item` object from `route.params` as well as its styles:

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

const Home = ({ route }) => {
  const { item } = route.params;
  return (
    <View style={styles.container}>
      <View style={styles.contentContainer}>
        <Text style={styles.title}>Home Delivery address: </Text>
        <Text style={styles.text}>{item}</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#070707',
    alignItems: 'center',
    justifyContent: 'center'
  },
  contentContainer: {
    paddingHorizontal: 20,
    alignItems: 'center'
  },
  title: {
    fontSize: 22,
    fontWeight: '700',
    color: '#FD0139',
    paddingBottom: 10
  },
  text: {
    fontSize: 20,
    fontWeight: '400',
    color: '#fff'
  }
});

export default Home;
```

Here is the final output:

<img src="https://i.imgur.com/48csotO.gif" width="250" />

## Further Reading

That's it! We hope you have found this tutorial helpful. We are adding some references for you to learn more about using Location API in Expo and React Native apps, plus which different packages can be used for your particular use case.

- [Reverse Geocode from expo-location](https://docs.expo.io/versions/latest/sdk/location/#locationreversegeocodeasynclocation)
- [@react-native-community/geolocation](https://github.com/react-native-geolocation/react-native-geolocation#README.md)
- [react-native-geolocation-service](https://github.com/Agontuk/react-native-geolocation-service)
- [Hiring a React Native Developer: What Should You Look For? by Jess Marranco](https://www.g2i.co/blog/hiring-a-react-native-developer)

**The source code is available at this [GitHub repo](https://github.com/amandeepmittal/react-native-examples/tree/master/expo-geolocation-example).**

_Originally Published at [Jscrambler's Blog](https://jscrambler.com/blog/how-to-use-react-native-geolocation-to-get-postal-address/)_


How to use React Native Geolocation to get Postal Address

---
title: 'React Native Performance Do and Dont'
slug: 'react-native-performance-do-and-dont'
date: '2021-02-13'

thumbnail: '/thumbnails/react.png'
tag: 'react-native'
canonicalUrl: 'https://medium.com/crowdbotics/react-native-performance-do-and-dont-88424e873bbd'
---

Performance is one of the few topics that change the overall perspective of using a framework like React Native in real-world mobile applications. React Native is fast by default. While working on a React Native app you can experience performance issues and do not assume it can be fixed by testing components. In this post, there is a list of suggestions that can be applied while building a React Native app.

## DO: Use an Image Caching Solution

React Native offers an [Image](https://reactnative.dev/docs/image) component as the part of [a core set of components](https://reactnative.dev/docs/components-and-apis). This component is used to display an image but out of the box does not have the solution for issues like:

- rendering a lot of images on one screen
- low performance in general
- low-performance loading from cache
- flickering

The Image component in React Native handles caching images like web browsers and sometimes the above issues are a result of that. These issues are easily resolved by using a third-party library called [react-native-fast-image](https://github.com/DylanVann/react-native-fast-image). It is available for both iOS and Android and is efficient in caching images.

## DO: Use appropriate image size

Optimizing an image is important for a React Native app's performance if the app relies on using a huge amount of images. Rendering a large number of images could lead to high memory usage on a device if the images are not appropriately optimized in terms of size. This may lead the app to crash.

Somethings that can be done to optimized images in a React Native app are:

- Use PNG format instead of JPG
- Use smaller sized images
- Use WEBP format for images. It can help [reduce the binary size](https://medium.com/@tgpski/react-native-webp-reducing-bundle-binary-sizes-increase-speed-with-webp-image-format-aa9b1aa11405) on iOS and Android by 29%.

## DO: Avoid unnecessary renders

React Native is based on the React library and similarly handles rendering components as React.js does. Here to the optimization techniques that are valid with React do apply to React Native applications. One of the few optimization techniques is to avoid unnecessary renders and in functional components, this can be done by using `React.memo()`.

`React.memo()` is used to handle memoization. The concept of memoization is described as that if a component receives the same set of props more than once, it will use previously cached props and render the JSX returned by the functional component only once.

For example, consider the following of a parent and a child component. The `Parent` component has a state variable called count that is updated when the button press.

Whenever the button is pressed, the `Child` component also gets re-rendered even though its prop `text` does not change on each render. It is not doing anything special to its parent component and is just displaying some text. This can be optimized by wrapping the contents of the `Child` component with `React.memo()`.

```js
// Parent.js

const Parent = () => {
  const [count, setCount] = useState(0);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Press me" onPress={() => setCount(count + 1)} />
      <Child text="Placeholder text" />
    </View>
  );
};

// Child.js
const Child = React.Memo(({ text }) => {
  return <Text>{text}</Text>;
});
```

## DO: Use nativeDriver with Animated library

There are many ways to create Animations in a React Native app. One of the most popular ways to do this is to use [Animated](https://reactnative.dev/docs/animated.html) library.

Animated library uses `nativeDriver` to send animations over the native bridge before animation starts. This helps the animations to execute independently of a blocked JavaScript thread. Thus, resulting in a smoother experience and without dropping many frames.

To use `nativeDriver` with an Animated library, you can set its value to `true`. In the example below, the `useNativeDriver` is used on an `onScroll` Animated event in a `ScrollView` component.

```js
<ScrollView
  showsVerticalScrollIndicator={false}
  scrollEventThrottle={1}
  onScroll={Animated.event(
    [{ nativeEvent: { contentOffset: { y: animatedValue } } }],
    { useNativeDriver: false }
  )}
>
  // Component's content
</ScrollView>
```

## DO: Use a tool to debug issues

React Native version `0.62.0` introduced a new tool called [Flipper](https://fbflipper.com/docs/features/react-native/). It is a debugging platform for iOS, Android, and React Native apps. It integrates directly with the native code and its integrations with a React Native app is enabled out of the box.

Using Flipper to debug apps, does not require remote debugging. It requires a locally connected instance of Metro to interact with the React Native app. It has React DevTools to inspect the component tree and check out the state and props of a React component.

It uses a native plugin ecosystem for debugging both iOS and Android applications. These plugins are used for device logs, crash reports, inspecting network requests, inspecting the local database of an app, inspecting cached images, etc.

## DO: Use Hermes

[Hermes](https://reactnative.dev/docs/hermes) is an open-source JavaScript engine optimized for mobile applications. Since React Native version `0.60.4` Hermes has been available for the Android platform. It helps with reducing the download size of an app (APK for Android), reduces memory consumption, and reduces the time it takes for an app to become usable (TTI - Time to interact).

To enable Hermes engine in an Android app, open `build.gradle` file and modify the following:

```java
def enableHermes = project.ext.react.get("enableHermes", true);
```

Since React Native version `0.64-rc.0` Hermes is also available to be used on iOS platform. To enable it for iOS app, open Podfile and modify the following code:

```c
+  use_react_native!(:path => config[:reactNativePath], :hermes_enabled => true)
```

## DON'T: Leave console statements in the source code

Using `console.log` statements is one of the favorites and common method to debug in JavaScript applications in general, as well as in React Native apps. However, leaving the console statements in the source code when building a React Native app for a platform could cause some big bottleneck in the JavaScript thread.

One way to keep track of console statements and remove them is to use a third-party package called `babel-plugin-transform-remove-console`. To use it, install the package by using the following command in a terminal window:

```shell
yarn add babel-plugin-transform-remove-console
```

Then, modify the `.babelrc` file to remove all console statements:

```json
{
  "env": {
    "production": {
      "plugins": ["transform-remove-console"]
    }
  }
}
```

## DON'T: Use ScrollView to render a huge list of data items

There are few ways to create scrollable lists in React Native. Two of the common ways available in React Native core are `ScrollView` and `FlatList` components.

A `ScrollView` component is simple to implement. It is often used to traverse over a list of finite number of items using a JavaScript's `map()` function. For example:

```js
<ScrollView>
  {items.map(item => {
    return <Item key={item.id.toString()} />;
  })}
</ScrollView>
```

The `ScrollView` component renders all children at once. This is good for use cases where the number of items in a list to render is quite low. Dealing with a large amount of data can directly affect the performance of the app.

To deal with large lists of items, React Native provides a component called `FlatList`. This component ensures that the items are lay loaded such that the app does not consume an inconsistent amount of memory.

For example:

```js
<FlatList
  data={elements}
  keyExtractor={item => `${items.id}`}
  renderItem={({ item }) => <Item key={item.id.toString()} />}
/>
```

## Conclusion

React Native is an open-source framework used to create cross-platform mobile applications. It uses JavaScript at its core and has a primitive API of components to build mobile interfaces and functionalities. It’s a high-performance framework as long as you build with performance in mind from the start.

_[Originally Published at Crowdbotics](https://medium.com/crowdbotics/react-native-performance-do-and-dont-88424e873bbd)_


React Native Performance Do and Dont

How to use shared element transitions in React Native

---
title: 'How to remove bottom tab bar border in React Navigation'
slug: 'react-navigation-remove-tab-bar-border'
date: '2021-01-17'
thumbnail: '/thumbnails/expo.png'
tag: 'expo'
canonicalUrl: 'https://amanhimself.dev/blog/react-navigation-remove-tab-bar-border/'
---

> Updated: May 2, 2022

![cover_image](https://i.imgur.com/Tu5dv1l.png)

Navigation plays an important role in mobile applications and the React Navigation library does an awesome job in providing a completely customizable interface for utilizing different navigation patterns to React Native apps.

Having the liberty to customize tab bars with React Navigation, one customizable option available (depending on the UI design of an app) is to remove the border from the Tab bar.

Here is an example of the border that is the default when the React Navigation Bottom Tabs library is utilized to create a tab bar.

![ss1](https://i.imgur.com/ttIMI5V.png)

For the demonstration purpose, I am using an Expo project created using the `expo-cli` command-line tool. To create a similar new Expo project, you can execute the command and choose the `tabs` option.

```shell
expo init yourProjectName

# when prompted, choose the tabs option
# in managed workflow
```

This expo project comes with a default bottom tab navigator whose configuration can be found in the file `navigation/BottomTabNavigator.tsx`.

## Customize the TabBar

The Bottom Tab Bar React Navigation library gives an object called `screenOptions` to customize a tab bar. This object contains props that can be used to apply custom styles and one of the generic property it has is called `tabBarStyle`. This property is commonly used to change the styles of the tab bar, for example, by applying the `backgroundColor` styles' property.

To remove the border, add the `screenOptions` prop and inside it, add a `tabBarStyle` property called `borderTopWidth` with a value `0`.

```js
<BottomTab.Navigator
  initialRouteName='TabOne'
  screenOptions={{
    // ...
    tabBarStyle: {
       borderTopWidth: 0
    }
  }}
>
```

Here is the output:

![ss2](https://i.imgur.com/WqR3X9I.png)

Do note that this property can also be used to increase the width of the top border.

## Removing shadow on Android Device

After applying this `tabBarStyle` property, the width of the top border is removed from an Android device. However, there is a shadow at the top border of the tab bar that remains.

![ss3](https://i.imgur.com/ofnBBis.jpg)

To remove this shadow, set the `elevation` to `0`:

```js
tabBarStyle: {
  borderTopWidth: 0,
  elevation: 0
}
```

![ss4](https://i.imgur.com/3TEx5ib.jpg)

[Source code available at GitHub](https://github.com/amandeepmittal/react-native-examples/tree/main/remove-tabbar-border)


How to remove bottom tab bar border in React Navigation

How to use redux-persist in React Native with Asyncstorage

---
title: 'How to add an app icon in a React Native Android app'
slug: 'app-icon-react-native-android'
date: '2021-01-06'
thumbnail: '/thumbnails/react.png'
tag: 'react-native'
canonicalUrl: 'https://amanhimself.dev/blog/app-icon-react-native-android'
---

![cover_image](https://i.imgur.com/tZtGF2K.png)

In this post, let's generate an app icon and learn how to add it to an Android app build with React Native.

## Generating an app icon

### Quickly build an app icon

To create an app icon we are going to make use of a free tool called [Expo Icon Builder](https://buildicon.netlify.app/). Thanks to [Evan Bacon](https://twitter.com/baconbrix?lang=en) for making it free and available for us to use. You are free to use any other design tool of your own choice such as Figma.

This tool allows building an app icon quickly using an Emoji icon with a customized background color scheme. For example, in the below image you will find that we have selected the coffee icon emoji since it is going to represent the main app. The Emoji icon is selected from the right-hand panel. The selected item is shown on the left-hand side. You can also add a customized background color.

![04-1](https://i.imgur.com/ulbO2nm.png)

After selecting the icon you have to download it by clicking the download button at the top left corner.

![04-2](https://i.imgur.com/dnvBU00.png)

### Generate different assets for Android

Android requires five separate sizes for different screen pixel densities. Icons for lower resolution are created automatically from the baseline (_mdpi_). Refer to the table below for more information on pixel densities:

|   Resolution    | Density | Pixel units |
| :-------------: | :-----: | :---------: |
| mdpi (Baseline) | 160 dpi |     1×      |
|      hdpi       | 240 dpi |    1.5×     |
|      xhdpi      | 320 dpi |     2×      |
|     xxhdpi      | 480 dpi |     3×      |
|     xxxhdpi     | 640 dpi |     4×      |

Another free service I like to use to generate different assets for the app icon is called [makeappicon.com](https://makeappicon.com/). This service generate different assets for various pixel densities based on the above table.

All you have to do is upload the app icon we created in the previous step and provide an email where the icons will be available to download.

![04-3](https://i.imgur.com/JHjruoR.png)

It creates icons for both platforms iOS and Android. For this demo app, we are only interested in the `android/` directory it generates. A different set of directories are created that are prefixed with `mipmap` and suffixed with different sizes like `hdpi` and `mdpi`.

![04-4](https://i.imgur.com/lKLlS1a.png)

## Where to place the icon?

Within an Android app, the icons live at the following path: `android/app/src/main/res`. Now copy the contents of the `android/` directory generated in the previous step and paste them to that location. Note that there going to be the same directory names. You will have to replace those old directories with the new ones to be pasted.

![04-5](https://i.imgur.com/myCrBZc.png)

## Should the icons be rounded or squared?

Depending on the Android device the system will decide whether to use a square icon or a rounded icon. You may need both types of the icon. For this demo app, we are going to use the icon we generated and exclude the rounded icon from the configuration of the Android app.

To not use the rounded icon, open `android/app/src/main/AndroidManifest.xml` file and remove the modify following line:

```xml
android:roundIcon="@mipmap/ic_launcher_round"
```

To the same icon generated in the previous step:

```xml
android:roundIcon="@mipmap/ic_launcher"
```

In the same file, you will find the code snippet: `android:icon="@mipmap/ic_launcher"` points towards the original icon filename.

You will have to run the build command `npx react-native run-android` to apply these changes to show the app icon.

![04-6](https://i.imgur.com/KYxddTW.jpg)

## Resources

That's it to generate and a new icon for your Android app. Please find the [link here](https://developer.android.com/google-play/resources/icon-design-specifications) to learn more about Google Play's icon design specifications.


How to add an app icon in a React Native Android app

---
title: 'Year Rewind: 2020'
date: '2020-12-23'
slug: 'year-rewind-2020'
thumbnail: '/thumbnails/writing.png'
tag: 'year-review'
canonicalUrl: 'https://amanhimself.dev/blog/year-rewind-2020/'
---

![cover](https://i.imgur.com/Qfd1K4M.png)

The year 2020 is coming to an end. The Earth is completing one more revolution around the Sun.

I am not a big fan of new year's resolutions since I never end up completing or even following one for a long time. However, I do like to introspect on the year passing by 😬.

## How the year was? 🎢

The thing is, just like the Earth’s revolution, this year, I feel like I have also gone around a circle and completed one or two revolutions myself. When the year started I had plans. I wanted to write code (as usual), learn some new things, and travel. The way it turned out to be is quite different from where it started.

I am glad and feel lucky that I did not lose my source of income from my day job and was fortunate enough to get a few opportunities. I am glad I did not lose touch with my network and made new connections.

Things I am not glad about this year include anxiety attacks and getting burned out. I have never felt how or what burning out looks like but only after going through it, I did realize what is happening with me. For me, in life in general, curiosity is one of the most important things in life. Without being curious, I won’t be writing this post, and you won’t be reading it. However, when I lost the ability to be curious about things around me both in the personal and professional world, onwards started a downward spiral.

I did not pursue anything else other than spending my time on a laptop that could help me take my mind off things or be a fruitful distraction. I wanted to do too many things but without planning on how to accomplish them and divide them into doable modular tasks. I lost interest in reading books for a while (an activity that I value most in my life and have been practicing for the last decade) and am still trying to cope or find a way to get back to my usual routine.

After this kind of experience, something did not feel right. And no, it did not get better after that. Not until I started to accept the fact that what I have gone through is the actual burn out. No, the lockdown or the pandemic wasn’t the major cause of it. They sure did contribute but I think if they were not part of the equation, I might still have gone through a similar phase. One thing lockdown or the pandemic brought out for me is to spend time together with my parents.

The safe way I have found is to make small changes and stick to them and then decide whether the things are working out for good or not. The lesson I would like to learn from this is to be organized with one's routine, being consistent while one can is better than anything out there, don’t try to change everything all at once, rather, make small changes and stick to them. Take breaks, mental health is an important aspect of being human, and right now is the perfect time to start talking about it and embrace it and experience the things that are not in my control even though they try to entwine with the stuff that is in my control.

## I wrote 75 articles 📝

I believe to get better at something is to do it regularly and especially, if one enjoys it. I do enjoy writing blog posts and being able to do it consistently helps me learn new things, update my existing spectrum of knowledge, and share what I know. It also keeps my life engaging.

There is also the other side that says “quality over quantity”. For me, it does not work that way. Writing, just like any other thing, is something one has to practice to write a “quality” post. How about practicing it in public?

Most of the posts I wrote are in the long form of tutorials to accomplish one thing by using a multitude of things. I am always surprised by the things that happened after I publish a post. Usually, the post I am expecting a lot from is never read by more than 100 people. The feedback sometimes I get on a post I wrote months ago is absolutely wonderful.

Here are some of the posts that I wrote this year:

- [Styling the React Native Way](https://amanhimself.dev/blog/styling-the-react-native-way/). I revamped this post, which I originally published in 2019. React Native has changed quite a bit since this year started and I thought it was the right time to update one of my most-read posts.
- [React Native and Firebase Chat app series](https://amanhimself.dev/blog/chat-app-with-react-native-part-2/). With an introduction to React Hooks last year, and the react-navigation library being updated to `v5`, I wanted to cover both of them in some detail. Thus, I ended up writing a series of six blog posts.
- Writing and taking steps in the Animation side of React Native is fun. There is a lot to do and a lot is happening when it comes to animations but I did a fair job on the usage of React Native's Animated API from a beginner's point of view in these two posts:
  - [How to create a custom scrollbar with React Native Animated API](https://amanhimself.dev/blog/custom-scroll-bar-indicator-with-react-native-animated-api/)
  - [How to Animate a Header View on Scroll With React Native Animated](https://amanhimself.dev/blog/animate-header-view-on-scroll-with-react-native-animated-api/)
- Serverless databases or tech stacks excite me. Don't get me wrong here. I am not against the idea of writing an API from scratch. In fact, I started my career on the backend side of JavaScript. But seeing the line of serverless architectures getting advance and trying to fulfill most of our needs is exciting. Thus, I was introduced to HarperDB this year. A database service that supports both SQL and NoSQL queries for CRUD operations. I ended up writing two posts, covering [the API part with Node.js](https://amanhimself.dev/blog/build-rest-api-with-nodejs-harperdb/) and using it with a frontend [library like React](https://amanhimself.dev/blog/harperdb-with-react-hooks/).
- I am not using React Hooks that much at work, but I did try to explore hooks from my own perspective. I wrote two posts, one on explaining how [`useState` hook works](https://amanhimself.dev/blog/react-app-with-localstorage-api-and-hooks/) and another on [managing state in React apps with `useReducer` and `useContext` hooks](https://amanhimself.dev/blog/manage-state-with-usecontext-usereducer-in-react-apps/).
- Expo came out with ease of [using fonts as hook](https://github.com/byCedric/use-expo/blob/main/packages/font/docs/use-fonts.md). I shared using it in [Creating "Quarantine Pro" — A Fun Learning Experiment in React Native](https://amanhimself.dev/blog/quarantine-pro-app/).

## I moved my blog from Gatsby to Next.js and back to Gatsby again 🤪

My personal blog has been the most consistent thing over course of these 12 months in my life. It deserves more credit than I give it. Also, I never planned to have a self-hosted blog until a friend of mine, [Valentin](https://twitter.com/RadValentin), casually suggested its importance. I started writing on [Medium](https://medium.com/@amanhimself) when I was getting into web development back in late 2016 and early 2017. At that time, I did not think much about pursuing writing posts or the importance of sharing via creating content. It was all new to me. I was just exploring horizons and wanted to document the good things about it.

![ss4](https://i.imgur.com/Yf8jr0o.png)

Three years forward, in 2020, I did not give much emphasis on Medium this year as my primary blog publishing platform. Even though I did reach an exploding [2 million views](https://twitter.com/amanhimself/status/1285554115464982528), I do not like how some publications (that I think have an impact in terms of audience) are forcing down to have a payment wall associated with a post published under their publication. I am not against getting the original author paid for their work but as a popular publication with a significant audience, it should not force a contributing writer and be open about it. That said, some publications are not forcing down and are still enjoyable to write for.

This gave me an opportunity to continue to build and maintain my own blog which was initially created using [Gatsby](https://www.gatsbyjs.com/). However, in the desire to explore things, I migrated my blog to [Next.js](https://nextjs.org/) in the middle of the year. I wanted to continue using it. As a framework built over React, I think Next.js is more flexible than Gatsby but in the month of November, I decided to migrate back to Gatsby since I feel more comfortable using it since I have been closely following its development for quite some years, and I was able to cut down the 10 minutes of build time that was happening with Next.js by 70% with Gatsby. I am sure that it was my fault that the build time was around 10 minutes with Next.js and I was too lazy and uninterested to actually debug it. Nonetheless, I am glad for the opportunity to try out Next.js for the first time and will try to use it in some other projects next year.

I also realized that Markdown is definitely one of the best things to happen in the dev world. I cannot imagine any other way to write. I did try MDX with Next.js but the maintenance and time spent on converting an MDX post to a normal markdown to cross-post on popular blogging platforms is too much for me.

Not focusing on Medium enough, also gave me the opportunity to explore two awesome blogging platforms that are meant for developers:

- [Dev.to](https://dev.to/amanhimself)
- [Hashnode](https://hashnode.com/@amanhimself)

I started cross-posting on Dev.to [last year](https://dev.to/amanhimself/getting-started-with-react-native-in-2019-build-your-first-app-542d) and in this year I have managed to get around 100k+ views.

![ss1](https://i.imgur.com/3PmkutV.png)

I am excited to publish more on Hashnode. Only in the month of December, I started publishing there. I think it is different from a usual blogging platform and one thing that excites me is how community-driven it is. Developers and the whole at Hashnode are always closely listening to the wants and needs of their users and this is something I have not seen much of. It's like building in public. The ability to have a hosted newsletter and use your own domain is somewhat unusual for a platform. I like where they are going with it and would be love to see how it happens. It's a high time we need a consistent platform that could be the "YouTube" for technical writers and publications (it might sound ambitious but it is not!).

## A Big Thank You to all the editors 🙏

Writing a blog post and publishing is just one aspect. Since the year 2018, I have worked with quite a few awesome editors and content managers at different publications.

Thus, I'd like to thank from the bottom of my heart, these awesome human beings for always listening to my ideas and not taking my mistakes too seriously, and sharing their insight and unique perspective which has helped me not only write but grow as a person.

- [Filipe Lima](https://twitter.com/filipeslima) at Jscrambler
- [Kate Trahan](https://twitter.com/Katerade4) at Logrocket
- [Austin Kodra](https://twitter.com/austin_kodra) at Fritz AI & Heartbeat
- [Nick Selman](https://twitter.com/nickselman) at Draftbit
- [Margo McCabe](https://twitter.com/margo_hdb) at HarperDB

Without their feedback and honest review, their perspective on what works and what doesn't, I would have never been able to improve in the skill of writing. Most blog posts that you get to read on this blog or on their publications would never have been in the readable format and would have never seen the light of getting published.

## I did one presentation 💬

This happened by just a Twitter DM. I never expected that I would be able to speak in front of an audience, even in an online, remote event. This year, I got the opportunity to speak about [How to write consistently](https://www.youtube.com/watch?v=YIRxTUCY0NQ) at [Hashnode's Technical Writing Bootcamp](https://hashnode.com/bootcamp/batch-2), a free virtual Bootcamp to help developers who are getting started in technical writing.

## I made 1541 commits 👨‍💻

Personally, this statistic does not matter but the GitHub's commit graph is fun. It is also great to see that I have less green or empty blocks on weekends which is a good sign.

![ss2](https://i.imgur.com/CYOY8G8.png)

In 2019, I made 939 commits. What changed this year? I started using GitHub at my day job for some projects.

![ss3](https://i.imgur.com/nGRynbX.png)

### Highlights from my GitHub 🙀

I have also started maintaining [one single GitHub repo](https://github.com/amandeepmittal/react-native-examples) for all the demos and examples I write using React Native and Expo blog posts.

Continued to maintain the [expo-community project on integrating Firebase SDK in an Expo app](https://github.com/expo-community/expo-firebase-starter), thanks to my friend [Cedric](https://github.com/byCedric) and awesome people at Expo. I have seen it was helpful to some folks as they were getting started with Expo and Firebase. Will try continue maintaining it over the next and year include more Expo related stuff.

## Newsletter saga continues 💌

I run [a weekly newsletter](https://amanhimself.substack.com/) that is of late, has become a bi-weekly newsletter due to my inconsistency of publishing blog posts. I don't send out newsletters when I don't have anything to share in terms of blog articles or tutorials. I don't like getting spam and I don't want to spam anyone. I started taking sending out newsletters seriously in 2019 and at the end of that year, I had [845 subscribers](https://twitter.com/amanhimself/status/1201933182070874112). This year, it did manage to grow to 1201 subscribers. I did not count how many newsletters in total I send out and now it's too late.

I did move from [Tinyletter](http://tinyletter.com/) to [Substack](https://substack.com/). After using Tinyletter for 22 months, I was missing out on somethings, but importantly, I was not able to provide a good reading experience to my readers who open the email they receive and spend time reading it. Both are free, but I find Substack has a more modern UI and a pleasing to the eye approach. Thanks to my friend [Alex Kallaway](https://twitter.com/ka11away) for making me realize this and convincing me to make the move.

I also took a free seven day email course called [**Blogging for Devs**](https://bloggingfordevs.com/) created [Monica Lent](https://twitter.com/monicalent). Without giving too much away, I learned a great deal from it. She is an inspiration to me because, in 2019, her income from blogging enabled her to quit her day job and pursue her own journey of bootstrapping a SaaS company. Reading her emails made me realize what I was doing wrong and how can I improve on some of the things I do.

## Coffee ☕️

I have received a lifetime of **26** coffee donations on [**Ko-Fi**](https://ko-fi.com/amanhimself). Thank you so much 🙏 .

## Reading 📚

I think that if a book is able to offer at least one new idea from what I already know, is a good book.

I did manage to scrape through some good books this year. Here some of my picks that I enjoyed reading:

### The Unicorn Project by Gene Kim

I like to read about the world of technology whether it is written from a perspective of fiction narrative or non-fiction. The Unicorn Project is one of the first books I read this year and it definitely goes in-depth about the process of what goes into a tech company and the importance of communication. The narrative might not be too true but overall it resonates.

- [Goodreads](https://www.goodreads.com/book/show/45293317-the-unicorn-project)

### The Developer's Guide to Content Creation by Stephanie Morillo

This book resonated with me a lot. It offers good insights and guidance for a developer who is interested in creating content.

- [Goodreads](https://www.goodreads.com/book/show/50996057-the-developer-s-guide-to-content-creation)

### The Company of One by Paul Jarvis

This book is about the mindset of working for oneself and I would add that it's a semi-autobiography of Paul's own journey of what he did when he left the traditional corporate world and how scaling and growth from an individual's perspective or for small-scaled bootstrapped business are not what it seems or the perception I had.

- [Goodreads](https://www.goodreads.com/book/show/38922272-company-of-one)

### Writing for Software Developers by Philip Kiely

This book goes in-depth about being a technical writer from a software developer's point of view. It offers great guidance on how to get started, managing one's workflow and where can one find publications to publish their own piece of posts and articles. It also discusses the business aspect of being a technical writer.

- [Goodreads](https://www.goodreads.com/book/show/53466825-writing-for-software-developers)

### The Practice by Seth Godin

This book by Seth Godin is all about why practice is important and how quantity helps one sustain that quality of work in their own domain.

- [Goodreads](https://www.goodreads.com/book/show/53479927-the-practice)

### The Midnight Library by Matt Haig

My favorite fiction read of the year and why experiencing life matters.

- [Goodreads](https://www.goodreads.com/book/show/53568397-the-midnight-library)

## What I want to learn in 2021 🤔

Learning is one of the few constants in our lives. There are a few things that I've learned this year but I am going to share a list of new things that I want to learn next year:

- GraphQL and Amplify AppSync
- More of TypeScript
- Different UI and animation patterns in React Native apps
- More on React Hooks
- Delve more in [Expo](https://docs.expo.io/guides/) that is always improving and it's always helpful API.

## Conclusion

I am planning to write blog posts that are in short format next year or may be add another way to share content 👀. There is a lot of stuff that I miss out on sharing since I am always thinking of connecting things.

Thank you all for reading this post and reading any other post, opening and reading email newsletters, reading my tweets on Twitter, and listening to me 🙏 .

Have a great 2021!


Year Rewind: 2020

---
title: 'How to create a custom scrollbar with React Native Animated API'
date: '2020-12-10'
slug: 'custom-scroll-bar-indicator-with-react-native-animated-api'
thumbnail: '/thumbnails/react.png'
tag: 'react-native'
canonicalUrl: 'https://amanhimself.dev/blog/custom-scroll-bar-indicator-with-react-native-animated-api/'
---

> Updated on: August 4, 2021

![cover](https://i.imgur.com/ateUlTf.png)

A `ScrollView` is a component that enables to view the content on a device's screen that is not able to be displayed in one screen. Using a scroll view component, the content can either be scrolled vertically or horizontally. This depends a lot on the design of the mobile application.

In React Native, to implement a scroll view, there are two types of components available: `ScrollView` and `FlatList`. The `ScrollView` component renders all children at once. This is useful if the data to display is static or there aren't too many data items in the list. The `FlatList` component is performant and optimal for displaying a huge scrollable list of data items.

For example, this how a `ScrollView` component is implemented in a React Native app:

```js
<ScrollView style={{ backgroundColor: 'white', marginHorizontal: 20 }}>
  <Text>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </Text>
</ScrollView>
```

Both of these scrollable components have at least one thing in common: a scroll bar indicator. By default, the scroll bar indicator is visible whether the content is displayed horizontally or vertically. To disable this vertical scroll bar indicator you would add the prop `showsVerticalScrollIndicator` with a boolean value of false:

```js
<ScrollView style={{ backgroundColor: 'white', marginHorizontal:
20 }} showsVerticalScrollIndicator={false}>
```

However, the implementation of this scroll bar indicator is not directly customizable on cross-platforms in React Native. If you are building an app whose screen design depends on displaying a customized scroll bar indicator, then let's build one in this tutorial. To implement this, we are going to use React Native [Animated](https://reactnative.dev/docs/animated.html) API.

[The source code is available at GitHub.](https://github.com/amandeepmittal/react-native-examples/tree/master/custom-scroll-indicator)

## Prerequisites

To follow this tutorial, please make sure you are familiarized with JavaScript/ES6 and meet the following requirements in your local dev environment:

- [Node.js](https://nodejs.org/) version >= `12.x.x` installed.
- Have access to one package manager such as npm or yarn or npx.
- Have a basic understanding of Redux store, actions, and reducers.
- [expo-cli](https://github.com/expo/expo-cli) installed, or use npx.

Note: All of the code mentioned in this tutorial works with the React Native CLI project as well.

## Create a new React Native project with expo-cli

To create a new React Native project using `expo-cli`, execute the following command from a terminal window:

```shell
npx expo init custom-scroll-indicator

# navigate into that directory
cd custom-scroll-indicator
```

And that's it. We are not using any third party library but the approach discussed in this post is easily integrated with any other libraries that your React Native app depends on.

Before we move onto the next section, let's start creating a mock screen. Open `App.js` file and add the following code snippet:

```js
import React, { useState, useRef } from 'react';
import { ScrollView, Text, View, Animated } from 'react-native';
import { StatusBar } from 'expo-status-bar';

export default function App() {
  return (
    <>
      <StatusBar style="light" />
      <View style={{ flex: 1, backgroundColor: '#892cdc', paddingTop: 50 }}>
        <View style={{ alignItems: 'center' }}>
          <Text style={{ color: 'white', fontSize: 24, fontWeight: '700' }}>
            Custom Scroll Bar
          </Text>
        </View>
      </View>
    </>
  );
}
```

To see the output of this step, please go back to the terminal window execute one of the following commands depending on the OS (_whether iOS or Android_) of the simulator or the real device the Expo Client app is running:

```shell
# trigger expo development server
yarn start

# for iOS
yarn run ios

# for android
yarn run android
```

When the app is up and running, here is the output you are going to get:

![js1](https://i.imgur.com/PO7yY2C.png)

## Add mock data

Inside the scroll view component, we are going to display some mock data. Let's add it to the React Native project. Create a new directory called `constants/` and inside it a new file called `data.js`.

This file is going to contain an object called `booksData` that has two properties:

- `title` of the book item.
- `description` is the long form of the text where the custom scroll bar is going to be used to scroll the text inside the `ScrollView` component.

Add the following code snippet to this file:

```js
export const booksData = {
  title: 'The Hunger Games',
  description:
    'Winning will make you famous. Losing means certain death.
    The nation of Panem, formed from a post-apocalyptic North
    America, is a country that consists of a wealthy Capitol
    region surrounded by 12 poorer districts. Early in its
    history, a rebellion led by a 13th district against the
    Capitol resulted in its destruction and the creation of an
    annual televised event known as the Hunger Games. In
    punishment, and as a reminder of the power and grace of the
    Capitol, each district must yield one boy and one girl
    between the ages of 12 and 18 through a lottery system to
    participate in the games. The tributes are chosen during the
    annual Reaping and are forced to fight to the death, leaving
    only one survivor to claim victory. When 16-year-old Katniss
    young sister, Prim, is selected as District 12 female
    representative, Katniss volunteers to take her place.'
};
```

Make sure to import object inside the `App.js` file after other import statements.

```js
// ...
import { booksData } from './constants/data';
```

## Display mock data using a ScrollView

The mock data we created in the previous section is going to be displayed inside a `ScrollView` component. The content inside this scroll view is displayed with two `Text` components. One to display the title of the book item and another to display the description.

This `ScrollView` component is not going to take the whole screen to display the content. Thus, the default scroll bar indicator is shown when the description is scrolled. We are going to add an empty `View` after the `ScrollView` component with a value of `flex: 4` such that this empty view takes slightly more than half of the screen.

There is also a `View` component that wraps the `ScrollView`. For now, it adds horizontal padding but later will be crucial to display the custom scroll bar indicator next to the `ScrollView` component. Thus, let's add the `flexDirection: 'row'` property to this wrapper `View` component.

Modify the `App.js` file and add the following JSX:

```js
export default function App() {
  return (
    <>
      <StatusBar style="light" />
      <View style={{ flex: 1, backgroundColor: '#892cdc', paddingTop: 50 }}>
        <View style={{ alignItems: 'center' }}>
          <Text style={{ color: 'white', fontSize: 28, fontWeight: '700' }}>
            Custom Scroll Bar
          </Text>
        </View>
        <View style={{ flex: 3, marginVertical: 20 }}>
          <View
            style={{ flex: 1, flexDirection: 'row', paddingHorizontal: 20 }}
          >
            <ScrollView>
              <Text
                style={{
                  fontSize: 22,
                  color: 'white',
                  fontWeight: '600',
                  marginBottom: 12
                }}
              >
                {booksData.title}
              </Text>
              <Text
                style={{
                  fontSize: 18,
                  color: 'white'
                }}
              >
                {booksData.description}
              </Text>
            </ScrollView>
          </View>
        </View>
        <View style={{ flex: 4 }} />
      </View>
    </>
  );
}
```

Output after this step:

![js2](https://i.imgur.com/5Cckr8y.gif)

Hide the default scroll indicator by adding the `showsVerticalScrollIndicator` prop to the `ScrollView` component. Also, add the `contentContainerStyle` prop with a to apply `paddingRight` to its children (_which are the content being displayed and custom scroll bar we have to create_).

```js
<ScrollView
  contentContainerStyle={{ paddingRight: 14 }}
  showsVerticalScrollIndicator={false}
>
```

![js3](https://i.imgur.com/odQD8D4.png)

## Create the custom scroll bar

Next, to the content displayed, let's add a scroll bar. Add a `View` component whose `height` is set to `100%`. This will display the scroll bar with as much height as the height of its parent container.

```js
<View style={{ flex: 1, flexDirection: 'row', paddingHorizontal: 20 }}>
  {/* ScrollView component here */}
  <View
    style={{
      height: '100%',
      width: 6,
      backgroundColor: '#52057b',
      borderRadius: 8
    }}
  ></View>
</View>
```

The `width` in the above code snippet can be customized with the value you can provide.

The output of this step:

![js4](https://i.imgur.com/8zzq2Jw.png)

## Create the custom scroll bar indicator

To display a custom scroll bar indicator, we need to calculate the size of the scroll bar indicator first. This can be done by comparing the complete height of the scroll bar and the visible height of the scroll bar that is the indicator.

In the `App` component, define two state variables using the `useState` hook and a new variable where we store the size of the bar indicator.

```js
const [completeScrollBarHeight, setCompleteScrollBarHeight] = useState(1);
const [visibleScrollBarHeight, setVisibleScrollBarHeight] = useState(0);

const scrollIndicatorSize =
  completeScrollBarHeight > visibleScrollBarHeight
    ? (visibleScrollBarHeight * visibleScrollBarHeight) /
      completeScrollBarHeight
    : visibleScrollBarHeight;
```

Next, create the scroll bar indicator inside the scroll bar. The indicator is going to have its height equivalent to the `scrollIndicatorSize`.

```js
<View style={{ flex: 1, flexDirection: 'row', paddingHorizontal: 20 }}>
  {/* ScrollView component here */}
  <View
    style={{
      height: '100%',
      width: 6,
      backgroundColor: '#52057b',
      borderRadius: 8
    }}
  >
    <View
      style={{
        width: 6,
        borderRadius: 8,
        backgroundColor: '#bc6ff1',
        height: scrollIndicatorSize
      }}
    />
  </View>
</View>
```

The scroll bar indicator is now displayed:

![js5](https://i.imgur.com/k5ak2Yi.gif)

To change the position of this indicator, we have to animate its value.

## Animate the scroll bar indicator

We are going to animate the position of the scroll bar indicator as the content inside the `ScrollView` is scrolled. To create an animation, `Animated.Value` is required. Define the `scrollIndicator` variable with an `Animated.Value` of `0`.

Add the following code snippet after state variables are declared in `App` component:

```js
const scrollIndicator = useRef(new Animated.Value(0)).current;
```

Then define a variable called `difference` that is used to calculate the height of the scroll bar indicator if it is greater than the size of the scroll indicator. This value is used to calculate the range of interpolation to change the position of the scroll bar indicator to move along the y-axis.

To change the position of the scroll bar indicator, we use the `Animated.multiply` method. This method creates a new Animated value that is composed from two values multiplied together. This new value is what the change in the position of the scroll bar indicator is going to be when the content is scrolled in the `ScrollView`. To change the position, we need to multiply the current value of the `scrollIndicator` and the visible height of the scroll bar indicator divided by the complete height of the scroll bar.

After getting the new Animate value, interpolation is applied. This is done by using the `interpolate()` function on the new Animated value and it allows an input range to map to an output range.

The interpolation must specify an `extrapolate` value. There are three different values for `extrapolate` available, but we are going to use `clamp`. It prevents the output value from exceeding the `outputRange`.

Add the following code snippet in the `App` component:

```js
const difference =
  visibleScrollBarHeight > scrollIndicatorSize
    ? visibleScrollBarHeight - scrollIndicatorSize
    : 1;

const scrollIndicatorPosition = Animated.multiply(
  scrollIndicator,
  visibleScrollBarHeight / completeScrollBarHeight
).interpolate({
  inputRange: [0, difference],
  outputRange: [0, difference],
  extrapolate: 'clamp'
});
```

Then, convert the `View` component that displays the scroll bar indicator into an `Animated.View`. We are going to add a prop called `transform`. It is going to change the position of the scroll bar indicator.

The value of this prop is going to be an array and inside it, a transformation object is defined. This object specifies the property that is transformed, as the key and its value is going to be the `scrollIndicatorPosition`.

```js
<Animated.View
  style={{
    width: 6,
    borderRadius: 8,
    backgroundColor: '#bc6ff1',
    height: scrollIndicatorSize,
    transform: [{ translateY: scrollIndicatorHeight }]
  }}
/>
```

Next, we need to set the height of the scroll bar and scroll bar indicator that is visible when the content inside the `ScrollView` changes. For this, there are two props used in combination:

- `onContentSizeChange` whose value is a handler function with the width and the height of the content. For our demo, we are going to use the height of the content to update the height of the complete scroll bar.
- `onLayout` is used to update the height of the visible scroll bar.

To animate the scroll bar indicator's position when the height of the content changes another prop called `onScroll` is used. It accepts an `Animated.event()` as the value which is used to handle gestures like panning and in our case, scrolling. The frequency of the scrolling event is controlled using a prop called `scrollEventThrottle`. It controls how often the scroll event will be fired while scrolling.

Modify the props of `ScrollView` component as shown below:

```js
<ScrollView
  contentContainerStyle={{ paddingRight: 14 }}
  showsVerticalScrollIndicator={false}
  onContentSizeChange={height => {
    setCompleteScrollBarHeight(height);
  }}
  onLayout={({
    nativeEvent: {
      layout: { height }
    }
  }) => {
    setVisibleScrollBarHeight(height);
  }}
  onScroll={Animated.event(
    [{ nativeEvent: { contentOffset: { y: scrollIndicator } } }],
    { useNativeDriver: false }
  )}
  scrollEventThrottle={16}
>
  {/* Rest remains same */}
</ScrollView>
```

Here is the output after this step on an iOS simulator:

![js6](https://i.imgur.com/06Ozy44.gif)

Here is the output after this step on an Android device:

![js7](https://i.imgur.com/D9LnLRs.gif)

## Conclusion

I hope you had fun reading this tutorial. If you are trying the Animated library from React Native for the first time, wrapping your head around it might take a bit of time and practice and that's part of the process.

**Further Reading on React Native Animated**

- [Learn how to Animate a Header View on Scroll With React Native Animated](https://amanhimself.dev/blog/animate-header-view-on-scroll-with-react-native-animated-api/)


How to create a custom scrollbar with React Native Animated API

---
title: 'How to manage state in React apps with useReducer and useContext hooks'
date: '2020-11-06'
slug: 'manage-state-with-usecontext-usereducer-in-react-apps'
thumbnail: '/thumbnails/react.png'
tag: 'reactjs'
canonicalUrl: 'https://amanhimself.dev/blog/manage-state-with-usecontext-usereducer-in-react-apps/'
---

![cover](https://i.imgur.com/Q0W4kzf.jpg)

Choosing a state management library to manage and handle a global state in a React app can be tricky and time-consuming. A lot depends on the scope of the React app and there are many options available.

With the adaption of React Hooks API, one such option is to use a combination of `useReducer` hook and the Context API. In this post, let's take a look at how to manage global state in a React app using both of them.

## Prerequisites

To take full advantage of this tutorial, or run along with the example, please make sure you following installed/access to in your local development environment.

- Node.js version >= `12.x.x `installed
- have access to one package manager such as `npm` or `yarn`
- `create-react-app` cli installed or use `npx`
- basics of React Hooks

If you are not familiar with React Hooks, I recommend you to go through the [in-depth post on React hooks here](https://amanhimself.dev/blog/react-app-with-localstorage-api-and-hooks).

## State management in React apps with useReducer

There are two types of states to deal with in React apps. The first type is the local state that is used only within a React component. The second type is the global state that can be shared among multiple components within a React application.

With the release of Context API as well as Hooks API, implementing a global state is possible without installing any additional state management library. The `useReducer` hook is a great way to manage complex state objects and state transitions. You may have seen or used `useState` to manage [simple or local state](https://amanhimself.dev/blog/react-app-with-localstorage-api-and-hooks) in React apps.

The `useReducer` hook is different from `useState`. The main advantage it has over `useState` is that covers the use case when there is a need of handling complex data structures or a state object that contains multiple values. It updates the state by accepting a reducer function and an initial state. Then, it returns the actual state and a dispatch function. This dispatch function is used to make changes to the state.

## Create a new React app & installing dependencies

To get started, create a new React project by executing the following command in a terminal window:

```shell
npx create-react-app react-expense-tracker

cd react-expense-tracker
```

To focus on the main topic of this tutorial as well as to give the demo app a nice look and feel, let's use pre-defined components from [Reactstrap](https://reactstrap.github.io/). It provides Bootstrap 4 components that are based on Flexbox and useful to handle the layout of a web app. To get started using Bootstrap in a React app, install the following dependencies:

```shell
yarn add bootstrap@4.5.0 reactstrap@8.5.1 uuid@8.2.0
```

After installing these dependencies, open the React project you created and open the file `index.js`. Add an import statement to include the Bootstrap CSS file.

```js
// after other imports
import 'bootstrap/dist/css/bootstrap.min.css';
```

That's it to set up Bootstrap in the current React app.

## Defining a global state

Start by creating a new file called `GlobalState.js` inside the `src/` directory.

Let's use React's context API to create a Context provider that can is going to share the state across multiple components. You can think of this example as mimicking Redux' philosophy. Import the required statements.

```js
import React, { useReducer, createContext } from 'react';
import { v4 as uuid } from 'uuid';
```

Next, create an empty context for Expense and define an initial state object. This initial state is going to have one expense item present. This also helps to define a schema or data model for all other expense items (_but do note that this for demonstration purpose in context to this post_).

```js
export const ExpenseContext = createContext();

const initialState = {
  expenses: [
    {
      id: uuid(),
      name: 'Buy Milk',
      amount: 10
    }
  ]
};
```

Then define a function called `reducer`. It is going to take two arguments, the current state and action. This reducer's job is to modify or update the state object whenever there is an action taken within the app by the user. One example of an action is a user adding an expense.

For the following example, this `reducer` function is going to have one action type, which is to add the expense. If there are no changes or modifications, this `reducer` function is going to return the current state (_which is the default case_).

```js
const reducer = (state, action) => {
  switch (action.type) {
    case 'ADD_EXPENSE':
      return {
        expenses: [...state.expenses, action.payload]
      };
    default:
      return {
        state
      };
  }
};
```

Next, define an `ExpenseContextProvider` that is going to behave like a store (_as a store in [Redux](https://amanhimself.dev/blog/redux-with-react-native-hooks)_).

```js
export const ExpenseContextProvider = props => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <ExpenseContext.Provider value={[state, dispatch]}>
      {props.children}
    </ExpenseContext.Provider>
  );
};
```

The `useReducer` hook allows us to create a reducer using the `reducer` function defined previously. The `initialState` is passed as the second argument.

## Wrap the App with the provider

When the `ExpenseContextProvider` is wrapped around any component in the React app, that component and its children will be able to access the current state as well as modify the state object.

In this section, that's what we are going to do. Open, `App.js` file, and modify it as below.

```js
import React from 'react';
import { Container } from 'reactstrap';

import { ExpenseContextProvider } from './GlobalState';

import Header from './components/Header';
import Form from './components/Form';
import List from './components/List';

export default function App() {
  return (
    <ExpenseContextProvider>
      <Container className="text-center">
        <Header />
        <Form />
        <List />
      </Container>
    </ExpenseContextProvider>
  );
}
```

In the next sections, let us create other components that are children to this `App` component. Create a `components/` directory and then create three new component files:

- `Header.js`
- `Form.js`
- `List.js`

## Add the header of the app

In this section, let us define a presentational component called `Header`. It's going to be a simple jumbotron component from Bootstrap displaying the title of the app and the logo.

Open `Header.js` and add the following snippet:

```js
import React from 'react';
import { Jumbotron } from 'reactstrap';
import Logo from '../logo.svg';

export default function Headers() {
  return (
    <Jumbotron fluid>
      <h3 className="display-6">
        Expense Tracker React App
        <img src={Logo} style={{ width: 50, height: 50 }} alt="react-logo" />
      </h3>
    </Jumbotron>
  );
}
```

## Add a form component

Open `Form.js` file and import the following statements.

```js
import React, { useState, useContext } from 'react';
import {
  Form as BTForm,
  FormGroup,
  Input,
  Label,
  Col,
  Button
} from 'reactstrap';
import { v4 as uuid } from 'uuid';

import { ExpenseContext } from '../GlobalState';
```

The `uuid` module is going to generate a unique id for each expense item in the global state.

Define a `Form` component that is going to access values from `ExpenseContext` using `useContext` hook.

```js
export default function Form() {
  const [state, dispatch] = useContext(ExpenseContext);

  //...
}
```

Using the `useState` reducer, define two state variables that are going to be local to this component. These state variables are going to help us define controlled input fields. A controlled input field accepts its current value as a prop as well as a callback to change that value.

Add the following initial state for `name` and `amount` using `useState`. Both of them are going to have an empty string as their initial value.

```js
const [name, setName] = useState('');
const [amount, setAmount] = useState('');
```

To update their values when a user starts typing, add the following handler methods. Both of these functions are going to retrieve the value from the corresponding field. The console statements are for testing purposes.

```js
const handleName = event => {
  console.log('Name ', event.target.value);
  setName(event.target.value);
};

const handleAmount = event => {
  console.log('Amount ', event.target.value);
  setAmount(event.target.value);
};
```

Lastly, to submit the form, there is going to be another handler method called `handleSubmitForm`. This method when triggered is going to dispatch the action to add the expense (`ADD_EXPENSE`). This is how the `reducer` function in the global state updates the state.

```js
const handleSubmitForm = event => {
  event.preventDefault();
  if (name !== '' && amount > 0) {
    dispatch({
      type: 'ADD_EXPENSE',
      payload: { id: uuid(), name, amount }
    });

    // clean input fields
    setName('');
    setAmount('');
  } else {
    console.log('Invalid expense name or the amount');
  }
};
```

Lastly, add the following JSX to display the component.

```js
return (
  <BTForm style={{ margin: 10 }} onSubmit={handleSubmitForm}>
    <FormGroup className="row">
      <Label for="exampleEmail" sm={2}>
        Name of Expense
      </Label>
      <Col sm={4}>
        <Input
          type="text"
          name="name"
          id="expenseName"
          placeholder="Name of expense?"
          value={name}
          onChange={handleName}
        />
      </Col>
    </FormGroup>
    <FormGroup className="row">
      <Label for="exampleEmail" sm={2}>
        Amount
      </Label>
      <Col sm={4}>
        <Input
          type="number"
          name="amount"
          id="expenseAmount"
          placeholder="$ 0"
          value={amount}
          onChange={handleAmount}
        />
      </Col>
    </FormGroup>
    <Button type="submit" color="primary">
      Add
    </Button>
  </BTForm>
);
```

## Display a list of items

In this section, let's add the `List.js` component to display a list of items from the current state object provided by the `ExpenseContext`. Open the file and add the following import statements:

```js
import React, { useContext } from 'react';
import { ListGroup, ListGroupItem } from 'reactstrap';

import { ExpenseContext } from '../GlobalState';
```

Next, map the `state` value to display the name of the expense and the amount of the expense as a list item.

```js
export default function List() {
  const [state] = useContext(ExpenseContext);
  return (
    <ListGroup>
      {state.expenses.map(item => {
        return (
          <ListGroupItem key={item.id}>
            {item.name} - $ {item.amount}
          </ListGroupItem>
        );
      })}
    </ListGroup>
  );
}
```

## Running the app

All the components of the simple Expense Tracker app are complete. Now, let's run the app and see it as an action. On the initial render, the Rect app is going to look like below.

![ss1](https://i.imgur.com/KrlTYS6.png)

It is going to display one expense item that is defined as the object in the initial state. Try adding a new item in the list and see if the list updates and form gets cleared or not.

![ss2](https://i.imgur.com/92qztPT.gif)

## Conclusion

Using `useReducer` in conjunction with React's Context API is a great way to quickly get started with managing your state. However, some caveats come with React's Context API. Re-rendering of multiple components unnecessarily can become a huge problem and its something you should take care.


How to manage state in React apps with useReducer and useContext hooks

---
title: 'Creating and Validating React Native Forms with Formik'
date: '2020-10-16'
slug: 'creating-and-validating-react-native-form-with-formik'
thumbnail: '/thumbnails/expo.png'
tag: 'react-native'
canonicalUrl: 'https://amanhimself.dev/blog/creating-and-validating-react-native-form-with-formik'
---

![cover](https://i.imgur.com/Qg4x9He.jpg)

Forms are an essential part of a mobile app — specifically, to handle user interactions that are available behind an authorization.

To ensure a seamless user experience, a form component consists of more than the input fields that allow users to enter their credentials. This can vary from handling form state, input field validation, handling errors, form submission, and so on.

[Formik](https://formik.org/) is an open-source React and React Native library that allows us to handle forms by:

- keeping track of a form’s state;
- handling form submission via reusable methods and handlers (such as `handleChange`, `handleBlur`, and `handleSubmit`);
- handling validation and error messages out of the box.

In this post, let's take a look at how to integrate it along with [Yup](https://github.com/jquense/yup) in a React Native app to create forms and validate them. We are also going to cover how to change the focus of one input field to another using a device's keyboard by forwarding the `ref` created using a [useRef hook](https://reactjs.org/docs/hooks-reference.html#useref).

The source code is available at [this GitHub repository](https://github.com/amandeepmittal/react-native-examples/tree/master/forms-with-formik).

## Prerequisites

To follow this tutorial, please make sure you are familiarized with JavaScript/ES6 and meet the following requirements on your local dev environment:

- [Node.js](https://nodejs.org/) version >= 12.x.x installed
- Have access to one package manager such as npm or yarn or npx
- [expo-cli](https://github.com/expo/expo-cli) version installed, or use npx

To learn more about how to set up and run the simulator or the emulator on your local development environment, visit React Native’s official documentation [here](https://reactnative.dev/docs/getting-started).

## Getting Started

Let's start by creating a simple React Native app with a new screen: `Login.js`.

Create a new React Native project using `expo-cli` and then install the dependencies required to build this demo app. Open a terminal window and execute the following commands:

```shell
npx expo-cli init formik-example

cd formik-example

yarn add formik yup
```

## Create reusable components

Create a new directory called `components/`. In this directory, we are going to keep two form components that are reusable for various types of forms such as `Login` or `SignUp`.

Let's start by creating a simple form button component which is a touchable element that allows the user to interact with the device’s screen and perform the next action. It is going to accept two props:

- `label`: the text label on the button component;
- `onPress` that is going to be handled by the parent component.

Create a new file called `Button.js` and add the following snippet:

```js
import React from 'react';
import { TouchableOpacity, Text } from 'react-native';

export default function Button({ label, onPress }) {
  return (
    <TouchableOpacity
      style={{
        borderRadius: 8,
        height: 50,
        width: 245,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#e94832'
      }}
      activeOpacity={0.7}
      onPress={onPress}
    >
      <Text
        style={{ fontSize: 18, color: 'white', textTransform: 'uppercase' }}
      >
        {label}
      </Text>
    </TouchableOpacity>
  );
}
```

Now, let's create the second reusable component to let users enter their credentials. Create a new file called `TextInput.js`. This component is going to be reused for every input field in a form. It is going to have an icon on the left of the input field to indicate the nature of the input field itself. It is also going to have a placeholder text that tells the user what type of form value is expected.

It is going to accept one prop and that is the name of the `icon`. Each input field may have a different icon and other props that are generally used with a `TextInput` component in a React Native app. You will see what different props are used on a `TextInput` in the next section. For now, use a [rest parameter syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters) to pass down the `...otherProps`.

```js
import React from 'react';
import { TextInput as RNTextInput, View, StyleSheet } from 'react-native';
import { Entypo as Icon } from '@expo/vector-icons';

export default function TextInput({ icon, ...otherProps }) {
  const validationColor = '#223e4b';
  return (
    <View
      style={{
        flexDirection: 'row',
        alignItems: 'center',
        height: 48,
        borderRadius: 8,
        borderColor: validationColor,
        borderWidth: StyleSheet.hairlineWidth,
        padding: 8
      }}
    >
      <View style={{ padding: 8 }}>
        <Icon name={icon} color={validationColor} size={16} />
      </View>
      <View style={{ flex: 1 }}>
        <RNTextInput
          underlineColorAndroid="transparent"
          placeholderTextColor="rgba(34, 62, 75, 0.7)"
          {...otherProps}
        />
      </View>
    </View>
  );
}
```

## Create a login screen

After setting up the reusable components, let's use them in a login screen. Start by creating a new directory called `screens/` and then, inside it, create a new file called `Login.js`. This component file is going to consist of all the necessary elements and business logic behind a login form.

The first input field is going to be for an email. It is going to have properties such as:

- the name of the icon as `icon`.
- `autoCapitalize` is going to be unique to this field since we do not want any characters to auto-capitalize by default.
- `autoCompleteType` provides autocomplete hints from the device, so it can provide an autofill for the particular field. It has [different types](https://reactnative.dev/docs/textinput#autocompletetype), but the one we are going to use here is for `email`.
- `keyboardType` is set to `email-address`. It too has [different types](https://reactnative.dev/docs/textinput#keyboardtype).
- `keyboardAppearance` allows you to set the keyboard color either to the system's default or light or dark in the background
- `returnKeyType` and `returnKeyLabel` determines how the return key should look like and the label on it. There are [different values](https://reactnative.dev/docs/textinput#returnkeytype) that you can set for it. Some of them are cross-platform and some are OS-specific. For the email input field, let's set it to “next” since we want the user to enter their email credential and then move on to the next input field by pressing the `next` button. To programmatically move on to the next input field, we are going to handle that later in a different section.

The second input field is going to be for `password`. It is going to use similar properties to the ones we used in the input field for `email` but with different values. It has a unique property such as `secureTextEntry` set to `true` which is often used to enter text values that are sensitive, like a password.

Here is the code snippet for the `Login` component after creating these two input fields:

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

import TextInput from '../components/TextInput';
import Button from '../components/Button';

export default function Login() {
  return (
    <View
      style={{
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center'
      }}
    >
      <Text style={{ color: '#223e4b', fontSize: 20, marginBottom: 16 }}>
        Login
      </Text>
      <View style={{ paddingHorizontal: 32, marginBottom: 16, width: '100%' }}>
        <TextInput
          icon="mail"
          placeholder="Enter your email"
          autoCapitalize="none"
          autoCompleteType="email"
          keyboardType="email-address"
          keyboardAppearance="dark"
          returnKeyType="next"
          returnKeyLabel="next"
        />
      </View>
      <View style={{ paddingHorizontal: 32, marginBottom: 16, width: '100%' }}>
        <TextInput
          icon="key"
          placeholder="Enter your password"
          secureTextEntry
          autoCompleteType="password"
          autoCapitalize="none"
          keyboardAppearance="dark"
          returnKeyType="go"
          returnKeyLabel="go"
        />
      </View>
      <Button label="Login" onPress={() => true} />
    </View>
  );
}
```

To see the login form in action, run `expo start` or `yarn start`.

![js1](https://i.imgur.com/isPvj2w.png)

## Add Formik to a login form using the useFormik hook

`useFormik` is a custom React hook that returns the Formik state and the handler methods to be used in a form component.

To use it, we have to import it from the `formik` library in the `Login.js` file.

```js
import { useFormik } from 'formik';
```

You might have noticed by now that we are not using `useState` to handle the value of each input field in the Login form. The reason behind that is that `formik` comes with a property called `initialValues` whose value is the object containing form fields.

In the case of the current form, these values are going to be `email` and `password`. The `onSubmit` method accepts a function that has these values as the first argument to handle the form submission. We are going to use these values to verify if the user credentials provided in the demo app are correct. You can also add other handler methods such as navigating to another screen on successful form submission.

In the `Login` component, you can add the following.

```js
const { handleChange, handleSubmit, values } = useFormik({
  initialValues: { email: '', password: '' },
  onSubmit: values =>
    alert(`Email: ${values.email}, Password: ${values.password}`)
});
```

Now, add `onChangeText` on both input fields as well as `handleSubmit` as the value of `onPress` on the `Button` component.

```js
// on email input field
onChangeText={handleChange('email')}

// on password input field
onChangeText={handleChange('password')}

// change the value of onPress prop on <Button />
<Button label='Login' onPress={handleSubmit} />
```

Fill the input fields and press the login button to see an alert box returning these values.

![js2](https://i.imgur.com/4XARSpP.gif)

This means the Login form with a custom component is working and Formik has been integrated successfully.

## Add validation schema with Yup

The `yup` library is useful for managing complex validations when using Formik in either React or React Native apps. Formik supports both synchronous and asynchronous form validation. It has support for schema-based, form-level validation from Yup.

Start by importing it.

```js
import * as Yup from 'yup';
```

Since `initialValues` is an object, you have to specify `yup.object()` and define the shape of the object. Make sure that, when you’re defining input fields inside the shape, their names correspond to those described in `initialValues`.

Each field in this object is supported by a chain of validation methods provided by the Yup API. The type of both `email` and `password` is going to be “string” since the `onChangeText` method returns the values as strings.

Add the following code snippet before the `Login` functional component.

```js
const LoginSchema = Yup.object().shape({
  email: Yup.string().email('Invalid email').required('Required'),
  password: Yup.string()
    .min(2, 'Too Short!')
    .max(10, 'Too Long!')
    .required('Required')
});
```

Using a library like Yup for validation saves a lot of time, especially when you don’t have to define custom validation methods to check for an input field. For example, in the above snippet, using `.email()` automatically matches against a regex instead of defining one, to check the validity of an email input field.

To validate input fields based on the schema just defined, let's add another property to `useFormik` called `validationSchema`.

```js
const { handleChange, handleSubmit, values } = useFormik({
  validationSchema: LoginSchema,
  initialValues: { email: '', password: '' },
  onSubmit: values =>
    alert(`Email: ${values.email}, Password: ${values.password}`)
});
```

If you press the login button with blank input fields, the app won’t display an error but it won't submit the form.

## Validating input fields

If the user provides wrong credential values (_since we are not covering the backend API in this post, it is a good practice to check the validity of credentials on the server-side as well_), it's a good UX practice to indicate the error. In this section, let's turn the input field border and the left icon color to red if the defined validation schema object doesn't match.

We will be using `errors`, `touched`, and `handleBlur` to know whether the input field has been touched by the user and, if yes, will pass the prop `errors` to the custom `TextInput` to display UI changes based on that.

In the `Login` component, modify the following:

```js
const { handleChange, handleSubmit, handleBlur, values, errors, touched } =
  useFormik({
    validationSchema: LoginSchema,
    initialValues: { email: '', password: '' },
    onSubmit: values =>
      alert(`Email: ${values.email}, Password: ${values.password}`)
  });
```

Then, for the email input field, add the following properties:

```js
<TextInput
  // ... rest remains same
  onBlur={handleBlur('email')}
  error={errors.email}
  touched={touched.email}
/>
```

Similarly, modify the password field:

```js
<TextInput
  // ... rest remains same
  onBlur={handleBlur('password')}
  error={errors.password}
  touched={touched.password}
/>
```

Now, go the `TextInput` component, and pass new props: `error` and `touched`.

```js
export default function TextInput({ icon, error, ...otherProps }) {...}
```

Next, let's change the value of `validationColor` which we have defined in a previous section, based on whether the input field is touched or not and if there is an error or not by using a nested ternary operator.

```js
const validationColor = !touched ? '#223e4b' : error ? '#FF5A5F' : '#223e4b';
```

Now, go back to the simulator and, without entering the value for any input field, press the Login button. You will find that the border color and the icon color for both input fields turns red.

![js3](https://i.imgur.com/MtoCKJq.png)

Try entering new values that satisfy the `loginSchema`. Also, see what happens if you touch one input field and move on to the next without entering any value — it will be considered as touched and an error will be shown.

![js4](https://i.imgur.com/Xb1RZub.gif)

Try to enter a password with more than 10 characters and verify that and error is also shown.

![js5](https://i.imgur.com/S7kvcxd.png)

## Select the next text input after pressing the "next" button

The last thing we need to do is to add another property on each input field to select the next `TextInput` field when pressing the `next` button.

Since there are only two input fields, the `next` button is shown only in the email input field. This can be done by adding a property `onSubmitEditing` on the input field which accepts a callback as value. By creating a new `ref` for the password field, we can determine whether the input field in focus at any given time is the password or not. If not, that means it is the email field and we can press the next button to change the focus from the email to the password field.

In the `Login.js` file, start by importing the `useRef` hook from the React library and, inside the Login component, define the `ref` with the initial value of `null`.

```js
import React, { useRef } from 'react';

//...

export default function Login() {
  const password = useRef(null);
  // ...
}
```

Next, add the `ref` property to the password input field.

```js
<TextInput
  ref={password}
  // ...
/>
```

Then, add `onSubmitEditing` to the email input field.

```js
onSubmitEditing={() => password.current?.focus()}
```

Back to the simulator, you will encounter the following warning.

![js6](https://i.imgur.com/gElVVOR.png)

This can be solved by using a `forwardRef` on the custom `TextInput` component. Ref forwarding is a technique for automatically passing a `ref` through a component to one of its children. In our case, we need to pass the `ref` from `Login` to the `TextInput` component.

Open `TextInput.js` and import `forwardRef` from the React library.

```js
import React, { forwardRef } from 'react';
```

Then, wrap all contents of the `TextInput` functional component with `forwardRef` as shown below:

```js
const TextInput = forwardRef(({ icon, error, touched, ...otherProps }, ref) => {
  const validationColor = !touched ? '#223e4b' : error ? '#FF5A5F' : '#223e4b';
  return (
    <View
      style={{
        flexDirection: 'row',
        alignItems: 'center',
        height: 48,
        borderRadius: 8,
        borderColor: validationColor,
        borderWidth: StyleSheet.hairlineWidth,
        padding: 8
      }}
    >
      <View style={{ padding: 8 }}>
        <Icon name={icon} color={validationColor} size={16} />
      </View>
      <View style={{ flex: 1 }}>
        <RNTextInput
          underlineColorAndroid="transparent"
          placeholderTextColor="rgba(34, 62, 75, 0.7)"
          ref={ref}
          {...otherProps}
        />
      </View>
    </View>
  );
});

export default TextInput;
```

Now, by pressing the “next” button on the email input field, you can change the focus of the current field to “password”.

![js7](https://i.imgur.com/U505VsB.gif)

The password input field shows a `go` button which indicates that, when users have finished entering their credentials, they are ready to submit the form. By adding `onSubmitEditing` with the value of `handleSubmit`, you submit the form.

Add the following to the password input field in `Login.js`:

```js
onSubmitEditing={() => handleSubmit()}
```

And that’s it! Here is the output you are going to get after completing this step:

![js8](https://i.imgur.com/01WXCni.gif)

## Conclusion

Using a form library like Formik gives us many advantages when building and handling forms to provide a pragmatic user experience.

There are many different methods available in the [Yup API](https://github.com/jquense/yup#yup) to add validation schema to a form component. This post covers the basics of Formik and Yup as well as one way of handling errors and touched fields.

The last section where we used `ref` to change the focus from one input field to the next using a device's keyboard is not a must-have but it may be worth considering if you want to provide seamless user experience.


Creating and Validating React Native Forms with Formik

---
title: 'How to use HarperDB instance with React Hooks'
date: '2020-10-07'
slug: 'harperdb-with-react-hooks'
thumbnail: '/thumbnails/harperdb.png'
tag: 'harperdb'
canonicalUrl: 'https://amanhimself.dev/blog/harperdb-with-react-hooks'
---

![cover](https://i.imgur.com/jN0o3ij.png)

[HarperDB Cloud](https://harperdb.io/developers/get-started/?utm_source=amanmittal) is a database service that supports both SQL and NoSQL queries for CRUD operations. It needs minimal configuration to get started and its realm is not only limited to build REST APIs with a server-side technology such as Node.js.

HarperDB offers a way to access the database cloud instance directly in your client-side application. It has a built-in HTTP API that allows us to query data directly.

In this post, let's take a look at how we configure a HarperDB Cloud database instance and fetch the data by querying the database within a Reactjs app. HarperDB provides a React Hook, known as [useHarperDB](https://github.com/HarperDB/harperdb-sdk-react) to make our jobs easier.

## HarperDB instance glossary

This post is going to use a similar instance of the HarperDB database that we built using the REST API approach with Node.js in our [previous post](https://amanhimself.dev/blog/build-rest-api-with-nodejs-harperdb). Please take a look at the post on how to set up the cloud instance [here](https://amanhimself.dev/blog/build-rest-api-with-nodejs-harperdb#setting-up-an-instance-of-harperdb-cloud). This way you will have a populated table of data fields.

The schema in the above database instance is called `dev`. A schema in HarperDB is necessary. It is equivalent to a collection of tables. Without an existing schema you cannot create a new table and without a table, you cannot add or update data in the HarperDB instance.

Below the schema, there is an option to add one or more tables. In the above instance, there is a table already created and is called `outlets`. This table has a unique identifier `id` for each row of data.

On the right-hand side, you will find the data inside the table. Do notice the two timestamp fields. They are auto inserted by HarperDB whenever a new row adds to the table and is auto-maintained.

- **createdtime**: to record the timestamp when data is inserted.
- **updatedtime**: to record the timestamp when any data field is updated for the last time.

![ss0](https://i.imgur.com/iqb3tFI.png)

Once you have set up the cloud instance, make sure to use a React project with the library's version `16.8.0+`.

## Getting started

Start by creating a new React app. We are going to use this React app for building the example app in this post. Open up a terminal window and execute the following command:

```shell
npx create-react-app harperdb-integration-react

# after the project directory has been created
cd harperdb-integration-react

# install the following dependency
yarn add use-harperdb@0.1.2
```

Now you can start the development server to see the React app in action. Go to the terminal window and execute the command `yarn start`. You are going to get the following output in a browser window at URL: `http://localhost:3000/`.

![ss1](https://i.imgur.com/VTDySVc.png)

## Creating a user with custom roles

By default, the user created in the HarperDB Cloud instance is a superuser. It has admin rights to query and add data and rights to create and drop the table from the existing schema as well as create and drop new schemas. In a client-side application, we do not want to have a superuser. Since most client apps are public, this is never a good approach to use the default user.

The approach to resolve this is to create a new user that has the rights to only perform CRUD operations inside a data table. HarperDB provides a way to define custom user roles as well as create a new user using that role.

Start by opening your cloud instance and go to the tab `roles` [from the menu bar](https://harperdbhelp.zendesk.com/hc/en-us/articles/360051486534-Managing-Role-Permissions).

![ss2](https://i.imgur.com/tnoRgYP.png)

Here you can define a new **standard role** to create a custom one. Let's this new role, `client_user`.

![ss3](https://i.imgur.com/VFtacjy.png)

Once the new role is created, the instance prompts with the permissions we can assign to any user with this role. You are now allowed to configure the access to tables and schemas for this specific role. There is only one schema right now and inside it, there is only one data table. For this example, let's keep the default configuration and proceed by pressing the button **Update Role Permissions**.

![ss4](https://i.imgur.com/L5XyeIP.png)

Once the permissions are updated, go to the tab `users` next to the `roles` in the menu bar. This is used to add a new user with the custom role just created. From the drop-down menu, select the role `client_user`.

![ss5](https://i.imgur.com/D3sXeLD.png)

Click the **Add user** button to add the new user.

![ss6](https://i.imgur.com/nvVVhq6.png)

Now, we can use this custom user in the client React app to query the data from the table `outlets`.

## Integrating HarperDB in a React

The `use-harperdb` hook comes with a `HarperDBProvider` that is used to wrap the instance of the React app or the `App` component in general inside the `index.js` file. This is mandatory to execute a CRUD operation on the database instance.

Add the following import statement inside `src/index.js` file:

```js
// ... other import statements
import { HarperDBProvider } from 'use-harperdb';
```

To execute any CRUD operation on the database instance, the provider requires the db instance URL, the username, and the password associated with that user. We are going to make use of environmental variables to add these values.

Create a new file called `.env` at the root of the React project with the following variables. The values of these variables are mentioned as a description in `[]` but you must replace the square brackets and your own values.

```shell
REACT_APP_DB_URL=[Your Cloud Instance Provider URL]
REACT_APP_USER=[The name of the custom user with client_user role]
REACT_APP_PASSWORD=[The password associated with the custom user]
```

Create React App reads any environmental variables that are prefixed with `REACT_APP`. Instead of using a third-party library, we can directly use these environmental variables to provide necessary attributes to `HarperDBProvider`.

```js
ReactDOM.render(
  <React.StrictMode>
    <HarperDBProvider
      url={process.env.REACT_APP_DB_URL}
      user={process.env.REACT_APP_USER}
      password={process.env.REACT_APP_PASSWORD}
    >
      <App />
    </HarperDBProvider>
  </React.StrictMode>,
  document.getElementById('root')
);
```

That's it. We have successfully configured the React app to use the HarperDB database instance.

## Querying the data from HarperDB

To query the data from the database instance in the React app, the `useHarperDB` hook provides elements to do so.

Open the `App.js` file and import the hook from `use-harperdb`. Let's also set up a basic UI to display data when fetched.

```js
import React from 'react';
import './App.css';
import { useHarperDB } from 'use-harperdb';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h2>Starbucks Outlets</h2>
        <table>
          <thead style={{ marginBottom: '20px' }}>
            <tr>
              <td style={{ textTransform: 'uppercase' }}>City</td>
              <td style={{ textTransform: 'uppercase' }}>Name</td>
              <td style={{ textTransform: 'uppercase' }}>Latitude</td>
              <td style={{ textTransform: 'uppercase' }}>Longitude</td>
            </tr>
          </thead>
          <tbody>
            <tr>{/* TODO: display data from query */}</tr>
          </tbody>
        </table>
      </header>
    </div>
  );
}

export default App;
```

The rule for using any hook is that they can only be consumed inside a functional component. The `useHarperDB` hook gives an array with elements to query the `data` which is returned as an array. It also provides:

- `loading` where you can let the user know if the query is running the data is not yet loaded
- `error` determines if there is an error when querying the data
- `refresh` it is a function that allows fetching the data

To query the data from the database instance, pass the object inside the hook.

Add the following snippet query in the `App.js` file to fetch all the data from the database.

```js
function App() {
  const [data, loading, error, refresh] = useHarperDB({
    query: { operation: 'sql', sql: 'select * from dev.outlets' }
    // interval: 5000
  });

  //...
}
```

In the above snippet, the second property of `interval` passed is optional to use when you don't want to explicitly use the `refresh` function. It accepts a value in milliseconds.

Let's add some JSX for `loading` and `error` by using `if/else` syntax inside the `App` component.

```js
function App() {
  // ...

  if (loading) {
    return <div>Loading ...</div>;
  }

  if (error && data.length === 0) {
    return <div>Error, no data found</div>;
  }

  return (
    <div className="App">
      <header className="App-header">
        <h2>Starbucks Outlets</h2>
        <table>
          <thead style={{ marginBottom: '20px' }}>
            <tr>
              <td style={{ textTransform: 'uppercase' }}>City</td>
              <td style={{ textTransform: 'uppercase' }}>Name</td>
              <td style={{ textTransform: 'uppercase' }}>Latitude</td>
              <td style={{ textTransform: 'uppercase' }}>Longitude</td>
            </tr>
          </thead>
          <tbody>
            <tr>{/* TODO: display data from query */}</tr>
          </tbody>
        </table>
      </header>
    </div>
  );
}
```

For a very brief moment, you may see the loading message being displayed.

![ss7](https://i.imgur.com/D5YDC1J.gif)

Also, if you are passing `interval` as the second property, you may notice that after every 5 seconds, the React app automatically refreshes the web page. To stop this behavior, you can remove the `interval` property.

Now using the JavaScript's `map` function, let's map over the array of `data` and display the contents. If data is fetched that means it exists and we can easily map over the array. Add the following code snippet in place of the comment.

```js
<tbody>
  {data &&
    data.map((item, index) => (
      <tr key={index}>
        <td>{item.title}</td>
        <td>{item.author}</td>
      </tr>
    ))}
</tbody>
```

Go back to the browser window and you will get the following result:

![ss8](https://i.imgur.com/jJFQ9k3.png)

The query can also be made using the `useHarperdb` hook with only the `data` array. Add the following query to fetch the total number of outlets or records from the database.

```js
const [data2] = useHarperDB({
  query: {
    operation: 'sql',
    sql: 'select count(*) as totalOutlets from dev.outlets'
  }
});
```

To display the total count, add the modify the JSX rendered from `App` component:

```js
// ...
<h2>Starbucks Outlets</h2>
<p>Total Outlets: {data2 && data2[0].totalOutlets}</p>
// ...
```

Here is the output after this step:

![ss9](https://i.imgur.com/jUY8J3T.png)

## Conclusion

Hooks are a great addition in the React world and they certainly help us write less code. The objective of this post was to introduce you to the `useHarperDB` hook and how to integrate it into a React app to fetch the data from a database hosted in the cloud.

**Resources & Further Reading:**

- [HarperDB documentation](https://harperdb.io/developers/documentation/overview/?utm_source=amanmittal)
- [HarperDB Developer examples](https://harperdb.io/developers/developer-examples/?utm_source=amanmittal) includes tutorials on React, Websocket, Python, etc.


How to use HarperDB instance with React Hooks

---
title: 'How to Animate a Header View on Scroll With React Native Animated'
slug: 'animate-header-view-on-scroll-with-react-native-animated-api'
date: '2020-10-01'
thumbnail: '/thumbnails/expo.png'
tag: 'expo'
canonicalUrl: 'https://blog.jscrambler.com/how-to-animate-a-header-view-on-scroll-with-react-native-animated/'
---

![cover_image](https://i.imgur.com/qDKlX8L.jpg)

The [Animated](https://reactnative.dev/docs/animated.html) library from React Native provides a great way to add animations and give app users a smooth and friendlier experience.

In this tutorial, let's explore a way to create a header view component that animates on the scroll position of the `ScrollView` component from React Native. We will go through the basics of creating a new Animated value as well as explaining the significance of functions and properties like `interpolation`, `extrapolate`, `contentOffset`, and so on.

[The source code is available at GitHub](https://github.com/MicoDan/react-native-examples/tree/master/animate-header-on-scroll).

## Prerequisites

To follow this tutorial, please make sure you are familiarized with JavaScript/ES6 and meet the following requirements on your local dev environment.

- [Node.js](https://nodejs.org/) version >= 12.x.x installed
- Have access to one package manager such as npm or yarn
- [expo-cli](https://github.com/expo/expo-cli) version installed or use npx

The example in the following tutorial is based on Expo SDK 38.

## Installing dependencies

Start by creating a new React Native app generated with `expo-cli`. Do note that all the code mentioned in this tutorial works with plain React Native apps as well. Open up a terminal window and execute the following command:

```shell
npx expo-cli init animate-header-example

# after the project is created, navigate into the directory
cd animate-header-example
```

To handle devices with notch both on iOS and Android operating systems, let's install some libraries first. These libraries are going to add automatic padding on notch devices such that the main view of the app does not intersect with a safe area on notch-enabled devices. Run:

```shell
expo install react-native-safe-area-view react-native-safe-area-context
```

To use safe area views, wrap the root of the React Native app with `SafeAreaProvider` from the [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context) library. Open `App.js` and modify the it as shown below:

```js
import React from 'react';
import { Text, View } from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context';

export default function App() {
  return (
    <SafeAreaProvider>
      <View style={{ flex: 1, alignItems: 'center' }}>
        <Text>Open up App.js to start working on your app!</Text>
      </View>
    </SafeAreaProvider>
  );
}
```

Next, wrap the contents of the `App` component with `SafeAreaView` from the [react-native-safe-area-view](https://github.com/react-navigation/react-native-safe-area-view) library. It is going to have a `style` prop with a `flex` of value `1` and another prop called `forceInset`. It’s important we add this, especially for some Android devices which might not behave as expected. This prop is going to force the application to add an inset padding on the content view. Setting the value of `top: always` will always imply that padding is forced at the top of the view.

```js
// ... other import statements
import SafeAreaView from 'react-native-safe-area-view';

export default function App() {
  return (
    <SafeAreaProvider>
      <SafeAreaView style={{ flex: 1 }} forceInset={{ top: 'always' }}>
        <View style={{ flex: 1, alignItems: 'center' }}>
          <Text>Open up App.js to start working on your app!</Text>
        </View>
      </SafeAreaView>
    </SafeAreaProvider>
  );
}
```

Here is what happens on an Android device when `forceInset` is not used on `SafeAreaView`:

![ss1](https://i.imgur.com/uBdAKZ4.jpg)

And with the `forceInset` prop applied:

![ss2](https://i.imgur.com/xNZx2rq.jpg)

On iOS, the behavior is as expected:

![ss3](https://i.imgur.com/HXHJRv9.png)

The last step in this section is to create a new component file called `AnimatedHeader.js` inside the `components/` directory. For now, it is going to return nothing.

```js
import React from 'react';
import { Animated, View } from 'react-native';

const AnimatedHeader = () => {
  return null;
};

export default AnimatedHeader;
```

Make sure to import it in the `App.js` file:

```js
// ... after other import statements
import AnimatedHeader from './components/AnimatedHeader';
```

## Creating an animated header component

The animation on the position of the scroll on a `ScrollView` component is going to have an `Animated.Value` of `0`. To create an animation, `Animated.Value` is required. In the `App.js` file, import `useRef` from the React library. Then, define a variable called `offset` with a new `Animated.Value`. To use the Animated library from React Native, import it as well.

```js
import React, { useRef } from 'react';
import { Text, View, Animated } from 'react-native';
// ...other import statements

export default function App() {
  const offset = useRef(new Animated.Value(0)).current;

  // ...
}
```

For this example, it is not required to use the `useRef` hook; however, if you are looking forward to modifying the animated value, it is recommended to use `useRef`. It provides a `current` property that is persisted throughout a component's lifecycle.

The value of the `offset` can now be passed as a prop to the `AnimatedHeader` component.

```js
export default function App() {
  const offset = useRef(new Animated.Value(0)).current;

  return (
    <SafeAreaProvider>
      <SafeAreaView style={{ flex: 1 }} forceInset={{ top: 'always' }}>
        {/* Add the following AnimatedHeader */}
        <AnimatedHeader animatedValue={offset} />
        <View style={{ flex: 1, alignItems: 'center' }}>
          <Text>Open up App.js to start working on your app!</Text>
        </View>
      </SafeAreaView>
    </SafeAreaProvider>
  );
}
```

To access the safe area inset value inside the `AnimatedHeader` component, the library `react-native-safe-area-context` provides a hook called `useSafeAreaInsets()`. This hook returns a safe area insets object with the following values:

```js
{
  top: number,
  right: number,
  bottom: number,
  left: number
}
```

The inset value of `top` is going to be manipulated when defining the animated header.

First, let's import this hook in the `AnimatedHeader.js` file and then define a fixed `HEADER_HEIGHT` constant that is going to be the initial height of the `Animated.View`.

```js
// ... other import statements
import { useSafeAreaInsets } from 'react-native-safe-area-context';

const HEADER_HEIGHT = 200;

const AnimatedHeader = ({ animatedValue }) => {
  const insets = useSafeAreaInsets();

  return null;
};
```

To animate the height of the header view on the scroll, we are going to use interpolation. The `interpolate()` function on `Animated.Value` allows an input range to map to a different output range.

In the current scenario, when the user scrolls, the interpolation on `Animated.Value` is going to change the scale of the header to slide to the top on scroll along the y-axis. This effect is going to minimize the initial value of the height of `Animated.View`.

The interpolation must specify an `extrapolate` value. This determines the scaling of the header’s height to be visible at the last value in `outputRange`. There are three different values for `extrapolate` available, but we are going to use `clamp`.

Begin by declaring a variable called `headerHeight` that is going to have the value of interpolation. The `Animated.Value` is the prop `animatedValue` coming from the parent component.

The `inputRange` is going to be `0` to the `HEADER_HEIGHT` plus the top inset. The `outputRange` is to be the `HEADER_HEIGHT` plus the top inset to the top inset plus `44`.

```js
const AnimatedHeader = ({ animatedValue }) => {
  const insets = useSafeAreaInsets();

  const headerHeight = animValue.interpolate({
    inputRange: [0, HEADER_HEIGHT + insets.top],
    outputRange: [HEADER_HEIGHT + insets.top, insets.top + 44],
    extrapolate: 'clamp'
  });

  // ...
};
```

Now, let's add an `Animated.View` to render from this component. It is going to use `position: absolute` to help cover the background behind the status bar as well as the same color as the whole header.

```js
const AnimatedHeader = ({ animatedValue }) => {
  // ...
  return (
    <Animated.View
      style={{
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        zIndex: 10,
        height: headerHeight,
        backgroundColor: 'lightblue'
      }}
    />
  );
};
```

This section ends with the following output:

![ss4](https://i.imgur.com/kOdpwwL.png)

## Manipulating the ScrollView

In the `App.js` file, a `ScrollView` component is going to be displayed beneath the header component and, in return, it is going to display a list of mocked data.

For this example, I've prepared a bare minimum list of book titles in a separate file called `data.js`.

```js
const DATA = [
  {
    id: 1,
    title: 'The Hunger Games'
  },
  {
    id: 2,
    title: 'Harry Potter and the Order of the Phoenix'
  },
  {
    id: 3,
    title: 'To Kill a Mockingbird'
  },
  {
    id: 4,
    title: 'Pride and Prejudice'
  },
  {
    id: 5,
    title: 'Twilight'
  },
  {
    id: 6,
    title: 'The Book Thief'
  },
  {
    id: 7,
    title: 'The Chronicles of Narnia'
  },
  {
    id: 8,
    title: 'Animal Farm'
  },
  {
    id: 9,
    title: 'Gone with the Wind'
  },
  {
    id: 10,
    title: 'The Shadow of the Wind'
  },
  {
    id: 11,
    title: 'The Fault in Our Stars'
  },
  {
    id: 12,
    title: "The Hitchhiker's Guide to the Galaxy"
  },
  {
    id: 13,
    title: 'The Giving Tree'
  },
  {
    id: 14,
    title: 'Wuthering Heights'
  },
  {
    id: 15,
    title: 'The Da Vinci Code'
  }
];

export default DATA;
```

The next step is to import this file in `App.js`. Also, import the `ScrollView` component from React Native.

```js
//...
import { ScrollView, Text, View, Animated } from 'react-native';

import DATA from './data';
```

Next, modify the contents of the `App` component. The important prop to note below in the `ScrollView` component is the `onScroll` prop. Mapping gestures like scrolling directly to an animated value can be done by using `Animated.Event`. This type of event function is passed as the value to the `onScroll` prop.

`Animated.Event` accepts an array of objects as the first argument which is going to be the `contentOffset`, which tells the current position of the scrolling view. It changes every time the user scrolls up or down. The value of `contentOffset` along the y-axis is going to be the same `Animated.Value` that is used to interpolate the height of the `AnimatedHeader` component.

It is recommended that you pass the second argument of `useNativeDriver` in `Animated.Event` .

```js
export default function App() {
  const offset = useRef(new Animated.Value(0)).current;

  return (
    <SafeAreaProvider>
      <SafeAreaView style={{ flex: 1 }} forceInset={{ top: 'always' }}>
        <AnimatedHeader animatedValue={offset} />
        <ScrollView
          style={{ flex: 1, backgroundColor: 'white' }}
          contentContainerStyle={{
            alignItems: 'center',
            paddingTop: 220,
            paddingHorizontal: 20
          }}
          showsVerticalScrollIndicator={false}
          scrollEventThrottle={16}
          onScroll={Animated.event(
            [{ nativeEvent: { contentOffset: { y: offset } } }],
            { useNativeDriver: false }
          )}
        >
          {DATA.map(item => (
            <View
              key={item.id}
              style={{
                marginBottom: 20
              }}
            >
              <Text style={{ color: '#101010', fontSize: 32 }}>
                {item.title}
              </Text>
            </View>
          ))}
        </ScrollView>
      </SafeAreaView>
    </SafeAreaProvider>
  );
}
```

Here is the output after this step on an iOS device:

![ss5](https://i.imgur.com/QFWrJCN.gif)

On Android:

![ss6](https://i.imgur.com/4HlPFNQ.gif)

## Conclusion

I hope you had fun reading this tutorial. If you are trying the Animated library from React Native for the first time, wrapping your head around it might take a bit of time and that's the part of the process.

Some of the important topics covered in this post are listed as links for further reading below:

- [The onScroll prop](https://reactnative.dev/docs/scrollview#onscroll)
- [Interpolation](https://reactnative.dev/docs/animations#interpolation)
- [Tracking gestures with Animated.Event](https://reactnative.dev/docs/animations#tracking-gestures)

Originally published at [Jscrambler](https://blog.jscrambler.com/how-to-animate-a-header-view-on-scroll-with-react-native-animated/).


How to Animate a Header View on Scroll With React Native Animated

---
title: 'Add Environment Variables in a Netlify Deployment'
date: '2020-09-01'
slug: 'add-environment-variables-in-netlify-deployment'
thumbnail: '/thumbnails/netlify.png'
tag: 'nodejs'
canonicalUrl: 'https://danblogs.vercel.app/blog/add-environment-variables-in-netlify-deployment/'
---

![cover_image](https://i.imgur.com/SX2uERE.png)

Recently I migrated my blog (the one you reading right now) from [Gatsby](https://www.gatsbyjs.com/) to [Next.js](https://nextjs.org/) for some specific reasons. The first reason, me being curious about how Next.js works and how is the developer experience. The second one, I want to have minimal effort and spend less time in managing a blog's UI and spend more time on writing posts. Lately, the vice versa has been the reality.

To not write every CSS element from scratch for responsive design, I am using [Chakra UI](https://blog.logrocket.com/how-to-create-forms-with-chakra-ui-in-react-apps/) for this blog which is a UI component library for React apps. It serves the purpose.

## The idea for the post

The idea of the post came from a problem of my own. Since I am a fan of minimal effort, this blog has been running from a [GitHub repository](https://github.com/MicoDan) deployed with [Vercel](https://vercel.com/).

There are many advantages to this bare infrastructure such as free HTTPS certificate, using a custom domain, and so on. This way, Netlify manages continuous deployment runs the build command from a Gatsby or a Next.js rendered site. It also triggers a deployment whenever there is a new commit pushed in the GitHub repository.

## The problem that leads me to use an environment variable

That said, let's get back to the main topic. After deploying the blog with 90+ posts, I ran into an issue that is known as "Allocation failed - JavaScript heap out of memory" in Node.js world.

The issue occurs when the deployment build runs out of memory. Node.js does not handle this by rolling back and moves forward with the build which eventually concludes in the build to fail.

Regardless of what stack or framework you use to deploy your site, if the deployment instance is using a node server, one day you might run into an issue as shown below.

![ss1](https://i.imgur.com/heymZ2D.png)

## The good "Old space" problem in V8

Diving further I got to learn a new thing even though I've been using Node.js since the starting of my own developer career. This issue occurs when the memory consumption of garbage collection in V8 reaches its max limit. If the limit is exceeded, V8 kills the process.

> More information on this issue can be found on [Stackoverflow here](https://stackoverflow.com/questions/48387040/nodejs-recommended-max-old-space-size/48392705). It also explains, when to increase the memory and when to avoid.

## Increasing the memory limit with Environment Variable

According to Chris McCraw's answer [here](https://community.netlify.com/t/fatal-error-call-and-retry-last-allocation-failed-javascript-heap-out-of-memory/1840/4), a Netlify build (if not using an Enterprise plan) should not exceed the limit of 3GB for reliability. In the same thread, there is a proper solution and that leads to the use of environment variables.

If you face this problem using the same approach with Netlify as I did, or for some other reason you want to use environment variables, here is how to get started. Step one is to go to your deployment on Netlify and click the option **Deploy Settings**.

![ss2](https://i.imgur.com/qjEP2pR.png)

This is where all the deployment-related settings are stored. On the next screen, observe a sidebar and under the tab **Build & deploy** there is a sub-tab called **Environment**. Click on that and then click on the button **Edit variables**. Now, you can add the key and value for each environment variable as shown below.

![ss3](https://i.imgur.com/5NKWri1.png)

## Further reading

Here is a list of all the links I came across when resolving this issue. Might be helpful:

- [The JavaScript heap out of memory thread](https://community.netlify.com/t/fatal-error-call-and-retry-last-allocation-failed-javascript-heap-out-of-memory/1840/4)
- [The Stackoverflow thread that explains shortcomings of V8 in managing memory](https://stackoverflow.com/questions/48387040/nodejs-recommended-max-old-space-size/48392705)
- [Features of Netlify + GitHub app](https://github.com/apps/netlify)


Add Environment Variables in a Netlify Deployment

---
title: 'How to use React Router and real time user monitoring in React apps'
date: '2020-08-14'
slug: 'react-router-real-time-user-monitoring-react-apps'
thumbnail: '/thumbnails/react.png'
tag: 'reactjs'
canonicalUrl: 'https://amanhimself.dev/blog/blog/react-router-real-time-user-monitoring-react-apps/'
---

React is often used for building single-page applications (SPAs). SPAs tend to have multiple page views so when navigating from one-page view to another, reloading the entire page view is tedious and inefficient. To work as it should, a SPA must render different parts of a view when required instead of reloading the entire page.

Routing comes into the picture when navigating from one page to another in a SPA app. Routing can be categorized in two ways: static and dynamic. SPAs follow a dynamic approach. In this tutorial, we will discuss a popular routing library used with React applications known as [React Router](https://reacttraining.com/react-router/web/guides/quick-start). After setting up our routes, we are also going to discuss how to set up performance monitoring with [Sematext](https://sematext.com/) in React apps with React Router library.

## Prerequisites

Before you begin this tutorial, you’re going to need the following:

- [Node.js](https://nodejs.org/) version above 12.x.x installed on your local machine
- Access to a package manager such as npm or yarn or npx
- Basic JavaScript and ES6 knowledge
- Basic knowledge of Reactjs
- Access [Sematext](https://sematext.com/) account (_trial version also acceptable_)

## Getting started

Start by creating a new React project. Run the following command using [npx](https://www.npmjs.com/package/npx). Once the project is generated, navigate inside the newly created directory and install the `react-router-dom` library.

```shell
npx create-react-app react-router-demo

# navigate inside the directory
cd react-router-demo

# install react-router-dom
yarn add react-router-dom
```

React Router library (as per version 5) contains three different npm packages.

- react-router
- react-router-dom
- react-router-native

Each of the packages has a different use case. The first one, `react-router` is the core package and is used with the next two packages listed above. The `react-router-dom` is used when building a web application. This is what we are going to use in this tutorial. The last one `react-router-native` is used in apps using [React Native](https://amanhimself.dev/getting-started-with-react-native-in-2019-build-your-first-app/).

To see the React app generated, currently in action, make sure you are inside the root directory of the React project before you run the following command.

```shell
yarn run start
```

This is going to open the boilerplate React app screen at the URL `http://localhost:3000/` in a browser window.

![ss1](https://i.imgur.com/HtBY0g4.png)

### Create the first route with React Router

To create the first route in the React app, import the `Router` and `Route` from the `react-router-dom` library. Open `src/App.js` file and add the following import statement.

```js
import React from 'react';
import { Router, Route } from 'react-router-dom';
```

Let's also add a `history` object to use with navigation. Unlike `BrowserRouter`, the `Router` component is a low-level interface for all router components. This means that you have to manually pass the `history` object to make it work. Later, this `history` object is going to be used for the monitoring tool. Import `createBrowserHistory` as following:

```js
import { createBrowserHistory as createHistory } from 'history';

const history = createHistory();
```

A `Route` is required to create an actual route. It is where the logic of routing is placed. It renders the UI of a component. It has a prop called `path` that is always matched with the current location of the app. Based on this prop, the desired component gets rendered. When the component is not getting rendered, `Route` returns null. The `component` name is also passed as a prop. All `Routes` are wrapped inside the `Router` component.

```js
function App() {
  return (
    <Router>
      <Route path="/" component={Home} />
    </Router>
  );
}
```

The path is currently pointing towards the Home component which has the following UI logic. Create a `Home` component inside `src/components/Home.js` file.

```js
import React from 'react';

export default function Home() {
  return (
    <div>
      <h1> Home Page</h1>
    </div>
  );
}
```

Now, import this component inside the `App.js` file.

```js
import Home from './components/Home';
```

Visit the web browser and see the Home component being rendered right now.

![ss2](https://i.imgur.com/Q2IwXJ7.png)

This is a bare minimum example. Now let us add another route with the same props as the Home. Call this route About with a similar rendering logic as Home.

## Adding the second route

Start by adding another component file inside `src/components` and name it `About.js`. Add the following code snippet to it.

```js
import React from 'react';

export default function About() {
  return (
    <div>
      <h1>About</h1>
    </div>
  );
}
```

Now add this function component as the second route, below the `Home` route in `App.js` file. Make sure to import it.

```js
// After other import statements
import About from './components/About';

// Add another route
function App() {
  return (
    <Router history={history}>
      <Route path="/" component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
}
```

Visit the URL `http://localhost:3000/about`. You will notice that both the components are being rendered right now on the path /about.

![ss3](https://i.imgur.com/krpy60b.png)

The reason for this is that the regular expression engine that React Router uses internally considers both the routes that are being started with a forward slash `/` equal. To solve this issue, we can use another essential prop on the Home route called `exact`.

```js
<Route path="/" exact component={Home} />
```

This `exact` prop is also known as a qualifier which states that the path must match exactly the `/` and nothing after it, such as `/about`. Now, if you visit the browser window at the URL `http://localhost:3000/about` you will notice that only the about component is getting rendered this time.

![ss4](https://i.imgur.com/rTVSwFM.png)

## Wrapping routes with Switch

The `Switch` component is a unique one since it renders the component at the `path` of the `Route` exclusively. It renders a default component once the app initially renders by matching the first child `Route`. It allows switching between different routes when a path is matched. It is helpful if you are using the `Redirect` component with the `Route` component. Even though in this current demo, we are not going to have any redirects, let's wrap all our routes inside a `Switch`. Modify the `App.js` file as follows:

```js
// import the Switch component
import { Router, Route, Switch } from 'react-router-dom';

// App component
function App() {
  return (
    <Router history={history}>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
}
```

### Adding a navbar

To navigate between to web pages in HTML, there is an `<a href=""></a>` anchor tag available. However, using this traditional approach will lead to a browser refresh. To overcome this, React Router API offers a `NavLink` component that can be used to navigate to a particular URL or a component.

Let us try to create a navigation menu with this new knowledge. Import `NavLink` from `react-router-dom` in App.js file. Here is the modified snippet of App component.

```js
import { Router, Route, Switch, NavLink } from 'react-router-dom';

function App() {
  return (
    <Router history={history}>
      <nav style={{ margin: 10 }}>
        <NavLink exact to="/" style={{ padding: 10 }}>
          Home
        </NavLink>
        <NavLink to="/about" style={{ padding: 10 }}>
          About
        </NavLink>
      </nav>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
}
```

In the above snippet, notice that all the links are being added before all the `Route` components. The styling attributes inside `style` are optional for now. Go to the browser window, you are going to notice a navigation menu pops up at the top. Try clicking links to navigate between different components.

![ss5](https://i.imgur.com/P0xZkiI.gif)

## Adding Parameters to the Routes

In this section, you will learn how to create and manage dynamic routes based on a query parameter such as `:id`. We start by creating a static array that will serve as the mock data.

The idea is to demonstrate a route as `/posts` which displays all the posts that are coming from the array. However, each post in the array will be having an `id` or a unique identifier. Using that unique identifier, you will be approaching the concept of dynamic content rendering by writing the logic for URLs such as `/posts/:id` where `:id` will be represented by the specific id of a post.

To start, let us add a bunch of mock posts in the state inside a new component file called `components/Posts.js`. Import the following statements.

```js
import React, { useState } from 'react';
import { Link, Route } from 'react-router-dom';
```

A `Link` component is similar to `NavLink` with the difference being that it can be used for other purposes rather than a navigation menu where an `anchor` tag is required.

Next, declare a static array of different posts.

```js
const POSTS = [
  {
    id: 1,
    title: 'Hello Blog World!'
  },
  {
    id: 2,
    title: 'My second post'
  },
  {
    id: 3,
    title: 'What is React Router?'
  }
];
```

Next, define a function component called `Child`. It reads anything coming from the URL parameters, such as, in this case, the `id` of each post. This component is going to accept one prop called `match` object. This object contains information about how a `<Route path>` matched the URL. It has four different props, but the prop you are going to use is an object called `params` to read the `id` of the post. A `params` object contains key/value pairs that are parsed from the URL corresponding to the dynamic segments of the `path`.

```js
function Child({ match }) {
  return (
    <div>
      <h3>ID: {match.params.id}</h3>
    </div>
  );
}
```

Then, define the `Posts` function component. It is going to have a state variable called `posts` that are going to have a default value of the mock array `POSTS`. Using the JavaScript's `map` function is going to render the list of Posts and display them as a list whenever the current location in the web browser matches `/posts`. The `Child` component is going to be the value of displaying the content (`id` in this case) of each post.

```js
export default function Posts() {
  const [posts, setPosts] = useState(POSTS);

  return (
    <div className="posts">
      <h1>Posts List</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>
            <Link to={`/posts/${post.id}`}>{post.title}</Link>
          </li>
        ))}
      </ul>
      <Route path="/posts/:id" component={Child} />
    </div>
  );
}
```

Now, import the newly created component inside `App.js` where other routes already exist.

```js
import Posts from './components/Posts';

function App() {
  return (
    <Router history={history}>
      <nav style={{ margin: 10 }}>
        <NavLink exact to="/" style={{ padding: 10 }}>
          Home
        </NavLink>
        <NavLink to="/about" style={{ padding: 10 }}>
          About
        </NavLink>
        <NavLink to="/posts" style={{ padding: 10 }}>
          Posts
        </NavLink>
      </nav>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route path="/posts" component={Posts} />
      </Switch>
    </Router>
  );
}
```

Now, visit the URL `http://localhost:3000/posts` and you are going to see the list of posts.

![ss6](https://i.imgur.com/79STiT7.png)

Clicking one of the posts is going to show the contents of that post.

![ss7](https://i.imgur.com/LmscMwA.png)

![ss8](https://i.imgur.com/a6np7at.png)

## Real user monitoring tool with Sematext

Configuring a monitoring tool can be a good asset for your React application. It is helpful to determine a user's experience in terms of performance. If you're web app is not loading as expected, when in production, you can lose a lot of users and potential customers.

A monitoring tool like Sematext Real user monitoring tool provides a way to test out performance-related issues regarding the user experience in your web app. It allows you to track page loading time, HTTP requests, UI interactions, application crashes, and so on.

This tool can be a critical part of understanding how a user behaves when using your web app. The features provided by their tool are hard to implement otherwise.

This tool can be a critical part of understanding how a user behaves when using your web app. The features provided by their tool are hard to implement otherwise.

## Configure a Sematext monitoring app

To follow further, you do require a [Sematext account](https://sematext.com/experience/) and do note that they have a 30 day trial period that you can leverage. If you are planning to use this in production, you can also leverage their pricing plan that is defined per app.

![ss9](https://i.imgur.com/y8Nekfj.png)

Once you are logged in to your account, you are going to be welcomed by a dashboard screen that might look similar to below.

![ss10](https://i.imgur.com/tuLIO58.png)

To start configuring Sematext Experience in the current demo React app, click on the `New App` button in the top right corner and then select `Experience`.

![ss11](https://i.imgur.com/A40CG1G.png)

Then, enter the name of the app in the modal screen as well as make sure to check the `About Website` option since the current React app is trying to simulate a SPA behavior. Click the button `Continue`.

![ss12](https://i.imgur.com/sRIIczJ.png)

## Installing monitoring scripts in React app

In the Sematext dashboard, you will be redirected to a page where there are steps to install the Experience tool. It contains some installation scripts that are necessary to add. These scripts are the integration point between the monitoring tool and your React app.

Go back to the React app and open the `public/index.html` file. Paste the first installation script as similar to one below, inside the `head` tag of the HTML file. The installation script contains the unique token provided by SemaText.

```html
<script type="text/javascript">
  (function (e, r, n, t, s) {
    var a = [];
    e[s] = function () {
      a.push(arguments);
    };
    e[s].queue = a;
    var o = [];
    var i = [];
    var c = true;
    var p = void 0;
    if (
      window.PerformanceObserver &&
      window.PerformanceObserver.supportedEntryTypes &&
      (PerformanceObserver.supportedEntryTypes.indexOf('longtask') >= 0 ||
        PerformanceObserver.supportedEntryTypes.indexOf('element') >= 0)
    ) {
      p = new PerformanceObserver(function (e) {
        e.getEntries().forEach(function (e) {
          switch (e.entryType) {
            case 'element':
              i.push(e);
              break;
            case 'longtask':
              o.push(e);
              break;
            default:
              break;
          }
        });
      });
      p.observe({ entryTypes: ['longtask', 'element'] });
    }
    e[s + 'lt'] = {
      longTasks: o,
      timingElements: i,
      inPageLoad: c,
      observer: p
    };
    if (t) {
      var u = r.createElement(n);
      u.async = 1;
      u.src = t;
      var f = r.getElementsByTagName(n)[0];
      f.parentNode.insertBefore(u, f);
    }
  })(window, document, 'script', '//cdn.sematext.com/rum.js', 'strum');
</script>
<script type="text/javascript">
  strum('config', {
    token: 'e3451b53-a95f-45c6-ba8e-1368cb4f2407',
    receiverUrl: 'https://rum-receiver.sematext.com'
  });
</script>
```

Follow this by the second step where you have to add an event listener called `routeChange` at the top component in your React app or where the navigation configuration is written.

Open the file `src/App.js` and paste the following after you have defined the `history` object.

```js
history.listen((location, action) => {
  if (action !== 'REPLACE') {
    window.strum('routeChange', window.location.href);
  }
});
```

This event listener is responsible for tracking whenever a route changes. It is essential, as discussed previously, the nature of a Single Page Application is to change the routes dynamically.

That's it. These are the only two steps required to configure and add the Sematext Real-time User Monitoring tool in your React app.

### Testing out the Real-time User Monitoring tool

After integrating the installation scripts, the next step is to build the React app by running the command from a terminal window:

```shell
yarn run build
```

Once this command runs successfully, you can serve it by using the command below:

```shell
npx serve -s build
```

This command serves all the files in the `build` folder as a single page application to simulate the hosted version experience. It is going to give you an URL that you can paste in a browser window.

Once the React app is built and served, you can test it out by playing around with the different routes. It might take a moment, but the Sematext monitoring tool is fast at detecting the user interactions in the React app.

The overview of the dashboard screen as shown below tells as the initial page loading time is excellent.

![ss13](https://i.imgur.com/n7rIiE2.png)

It also goes in detail by determining the exact page load time.

![ss14](https://i.imgur.com/cugGBau.png)

To check out the number of resources that are downloading for a particular URL, navigate to the `Resources` tab from the sidebar.

![ss15](https://i.imgur.com/tnetw9K.png)

From the `Users` tab in the sidebar menu, you can monitor the user data such as the number of active users on the web app at a given time, the top browser being used, the maximum number of users located in which country and so on.

![ss16](https://i.imgur.com/BPimzAR.png)

## Conclusion

Monitoring user experience in Real-time brings an advantage to single-page applications. It not only allows you to figure out how the user experience is going on for the majority of customers but you can use this information to improve the areas of your web app to provide a much better experience. Using the [Sematext Real-time User Monitoring tool](https://sematext.com/) with a React app is helpful in the scenario.


How to use React Router and real time user monitoring in React apps

---
title: 'Build a REST API with Node.js and HarperDB'
slug: 'build-rest-api-with-nodejs-harperdb'
date: '2020-07-23'
thumbnail: '/thumbnails/harperdb.png'
tag: 'harperdb'
canonicalUrl: 'https://amanhimself.dev/blog/build-rest-api-with-nodejs-harperdb/'
---

![cover_image](https://i.imgur.com/9hGD05n.png)

If you are building an application using Node.js, it can get a little overwhelming since there are a variety of databases to choose from and different ways to build APIs. One way to reduce development time and focus on the problem you are trying to solve is to use Database as a service to store the data. The advantage of this approach is to use a cloud database system without purchasing hardware which can be cost and time effective.

One such database service is [HarperDB Cloud](https://harperdb.io/developers/get-started/?utm_source=amanmittal). To build REST APIs rapidly this service allows us to perform all database operations using a single endpoint. It supports a variety of programming languages such as JavaScript, Java, Python, and so on. Some of the features of HarperDB are the following:

- single endpoint API
- allow JSON, CSVs file insertions
- support SQL queries for full CRUD operations
- Supports Math.js and GeoJSON
- limited database configuration required

In this post, let's build a simple REST API using Node.js and HarperDB Cloud to store some data. We are also going to use [Express](https://expressjs.com/) as the framework to build the Node.js server. It is a minimal and quite unopinionated framework.

## Prerequisites

Before you begin this tutorial, you’re going to need the following:

- [Node.js](https://nodejs.org/) version above `12.x.x` installed on your local machine
- Access to a package manager such as npm or yarn
- Basic JavaScript and ES6 knowledge
- Access to a REST API client such as [Postman](https://www.postman.com/) or [Insomnia](https://insomnia.rest/)
- Access to a [HarperDB Cloud](https://harperdb.io/developers/get-started/?utm_source=amanmittal) instance (_free tier_)

To continue with the rest of the tutorial, please make sure you have an account with HarperDB Cloud and are logged in.

## Getting started

Start by creating the project directory on a local development environment. Give this directory a name and navigate into it. Then, initialize this project to manage npm dependencies by creating a `package.json` file.

```bash
mkdir harperdb-cloud-demo

# navigate inside the project directory
cd harperdb-cloud-demo

# create a package.json file
npm init --yes
```

The `--yes` flag uses the default settings when initializing a `package.json` from npm config you might have set up.

After the initializing step, let us add an express package. From the terminal window, run the command:

```bash
yarn add express@4.17.1 body-parser@1.19.0
```

Next, create a new file called `index.js` at the root of the project with the following code to trigger a minimal server:

```js
const express = require('express');

const app = express();
const PORT = 8000;

app.get('/', (req, res) => res.json('Express Server'));

app.listen(PORT, () => {
  console.log(`⚡️[server]: Server is running at https://localhost:${PORT}`);
});
```

In the above code snippet, the `app` is an object provided by Express API for the developer to communicate with the application and bootstrap a server.

Go back to the terminal and trigger the common `node index.js` to start the server. This `node` command is the simplest way to trigger a development server when building APIs with Node.js. Now, open up your favorite REST client to test APIs. For the demonstration purpose, I am going to use [Insomnia](https://insomnia.rest/).

You can test API endpoint by invoking a call to `http://localhost:8000` and it is going to return the result as shown below.

![hdb1](https://i.imgur.com/WKqKyDW.png)

## Watching file changes with nodemon

An essential development-related utility library that saves time when working on Node.js projects is [nodemon](https://www.npmjs.com/package/nodemon). It's a tool that helps the development of Node.js based applications by automatically restarting the Node application when file changes in the directory are detected.

To start using it in the current Express server, install it by using `yarn add -D nodemon` where `-D` flag is used to indicate that the dependency to install is a `devDependency`. After installing this dev dependency, open `package.json` file and add a start script as shown below.

```json
"scripts": {
    "start": "nodemon index.js",
},
```

Now, you can use either `npm run start` or `yarn run start` command to trigger the server. That's it to set up a basic Node.js server using the Express framework.

## Setting up an instance of HarperDB Cloud

In the introductory section of this post, you get the idea of what HarperDB Cloud is and features it supports. In this section, let us create the first database instance to store the data for the REST API using this cloud database service.

Assuming by now you have access main dashboard screen as shown below. To create a new instance, click on the plus button.

![hdb2](https://i.imgur.com/2RXthtd.png)

Then select the HarperDB Cloud instance option.

![hdb3](https://i.imgur.com/TouMF9P.png)

Fill in the details regarding the instance. Make sure to create a strong password and give a better username under Instance Credentials (I am keeping them simple for brevity).

![hdb4](https://i.imgur.com/598zmb4.png)

If you are on the free tier, leave everything in the screen below to default selections and click the button `Confirm Instance Details`.

![hdb5](https://i.imgur.com/xqXQNSL.png)

After entering the details, it is going to ask you to re-confirm all the instance details you have entered and if everything is okay, press the button `Add Instance`.

![hdb6](https://i.imgur.com/UvhsKoq.png)

Make sure to remember the username and the password you have entered here. They will be required to authenticate the Node.js server with the HarperDB Client. Once the instance of the cloud database is created, it is going to appear as shown below.

![hdb7](https://i.imgur.com/Yzyj4Ct.png)

You can click on the instance card from the UI and will be welcomed by the first screen to add a schema.

![hdb8](https://i.imgur.com/UCfOUQT.png)

A schema in HarperDB is necessary. It is equivalent to a collection of tables. Without an existing schema, you cannot create a new table and without a table, you cannot add or update data from HarperDB instance. To proceed, the schema and the table has to be created. Let's do it with the UI interface.

On the left-hand side, under the header where it says `schemas`, write in the name of your first schema.

![hdb9](https://i.imgur.com/ANIPBcC.png)

Once a schema is created, the option to add one or more tables appears. Let's create the first table called `books` as shown below. Besides the name of the table, HarperDB also asks to enter or assign the field for a `hash_attribute`. This attribute is equivalent to the unique identifier for each record that exists in the table `books`. Traditionally, most data tables have `id` as the unique identifier so it is passed as the value.

![hdb10](https://i.imgur.com/ohBkB9H.png)

The schema as well as the table are now successfully created.

![hdb11](https://i.imgur.com/5S1al13.png)

Let's save all the credentials required for the Node.js server to connect to the database. Create a `.env` file at the root of the project with for keys as shown below.

```bash
INSTANCE_URL=https://cloud-1-buildapps.harperdbcloud.com
INSTANCE_USERNAME=admin
INSTANCE_PASSWORD=password
INSTANCE_SCHEMA=dev
```

You are going to add your own HarperDB instance values here. Do not use the same values for each key as shown above, since it won't work. This just to demonstrate that these values are not wrapped inside quotes.

## Connecting HarperDB Cloud with a Nodejs server

To connect the HarperDB Cloud instance created in the previous section, let's install a dependency called [Harperive](https://github.com/chandan-24/Harperive#readme) that is going to let us interact with the database by performing CRUD (_Create, Read, Update, Delete_) operations. Go back to the terminal window and run the command:

```bash
yarn add harperive@1.0.1 dotenv@8.2.0
```

Once the dependency is installed, create a new directory called config and inside it, create a new file called `dbconfig.js`.

To connect to the database instance, you require three things:

- Database instance URL
- Database instance username
- Database instance password

At the end of the previous section, all these values are saved inside a `.env` file as environment variables. Using the `dotenv` package, these environment variables are now accessible throughout the Node.js server app. Inside the `dbconfig.js` file, import `dotenv` package as the first line and then import `harperive`. Create a `DB_CONFIG` object that is going to be passed as the argument to `harperive.client`. The `schema` field in the `DB_CONFIG` object is optional. Since this demo app has only one schema, thus, to avoid mentioning the schema field again and again when sending a query to the database, its name can be passed here.

Add the following code snippet to the `dbconfig.js` file.

```js
require('dotenv').config();
const harperive = require('harperive');

const DB_CONFIG = {
  harperHost: process.env.INSTANCE_URL,
  username: process.env.INSTANCE_USERNAME,
  password: process.env.INSTANCE_PASSWORD,
  schema: process.env.INSTANCE_SCHEMA // optional
};

const Client = harperive.Client;
const db = new Client(DB_CONFIG);

module.exports = db;
```

Exporting the `db` instance of the actual HarperDB client is going to allow us to query the database.

## Setting up body-parser

To set up routes or endpoints of the server application, you need to include `body-parser` in the `index.js`.

BodyParser parses incoming HTTP requests as middleware under `req.body` before routes or API have access to them and perform any further actions on them. A very useful and essential step when using forms in a web application.

```js
const express = require('express');
const bodyParser = require('body-parser');

const app = express();
const PORT = 8000;

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

// routes to be defined here

app.listen(PORT, () => {
  console.log(`⚡️[server]: Server is running at https://localhost:${PORT}`);
});
```

The `urlencoded` method in the above snippet allows the body-parser middleware to extract data from form fields. In the REST client such as Postman or Insomnia, it is possible to send the data as form fields. The `json` method allows the JSON data to be extracted.

## Query to add a new record

Since the database doesn't have any records, let's start by writing the first query to insert new data in the database. Create a new directory called `api/` and inside it create a new file called `index.js`. Open index.js file and import the `db` from `config/dbconfig.js` file.

```js
const db = require('../config/dbconfig');
```

One of the main advantages of HarperDB is in querying the data from a database instance. It allows us to query the data either in the form of SQL queries or NoSQL queries. The advantage here is that the power of complex SQL queries can easily be used here to perform an operation. I am going to define all the queries in NoSQL form, however, do not forget to check official docs for more information on performing SQL queries [here](https://docs.harperdb.io/?version=latest#0b5f3698-60fc-4783-b736-b510d6063996).

The first query is going to be called `addBook`. This query is going to insert the data incoming from an HTTP request.

```js
exports.addBook = (request, response) => {
  db.insert(
    {
      table: 'books',
      records: [
        {
          title: request.body.title,
          author: request.body.author
        }
      ]
    },
    (err, res) => {
      if (err) response.status(500).json(err);

      response.status(res.statusCode).json(res.data);
    }
  );
};
```

Each of the query functions as in the above code snippet is going to have at least two parameters: `request` and `response`.

- `request`: useful when creating or updating a new task and read data from the body (this where BodyParser works like a charm).
- `response`: useful to fulfill that incoming request with a response from the server. Generally, it contains the correct status code of the HTTP status code. This HTTP status code determines whether the incoming request was fulfilled or if there is an error. This the part of the REST paradigm and is considered a best practice.

When inserting data using a NoSQL query, it is mandatory to specify the name of the table in the database. In the current case its `books`. Since you have already specified the Schema when creating a connection using the HarperDB client, there is no need to explicitly define it here. `records` in HarperDB are similar to rows of data with having each field as a column.

You may have noticed in the above query that I am not explicitly adding an `id` attribute to uniquely identify each data record. HarperDB automatically creates a unique `id` for each data record.

The data being inserted here has two fields. The `title` and the `author` for each book. They represent the name of the columns or attributes in each data record. The value of each of these fields is going to be the incoming value from an HTTP request, parsed by the `body-parser` middleware function.

## Running the first query to insert data

To insert the first data record in the database lets create a route. Open `index.js` file in the root directory and import the `api` as `routesController`. A controller is a naming convention in an Express framework app. It is the business logic that binds the endpoints/routes that are going to define below to what action or operation they will perform on an incoming request on that particular route.

```js
// after other import statements
const routesController = require('./api/index');

//after defining middleware functions

app.route('/books').post(routesController.addBook);
```

Go back to the REST client and make sure the Node.js server is running from the terminal window.

Add the endpoint which is `http://localhost:8000/books`, select the type of the request which is `POST`. Select option `Form URL encoded` and the two key-value pairs as shown below:

![hdb12](https://i.imgur.com/BceIJrT.png)

Press the `Send` button it an HTTP request to insert the data to the HarperDB is made. If it's successful, a success message shown below is returned.

![hdb13](https://i.imgur.com/BbTRyru.png)

Go back to the HarperDB studio and you are going to see the same data record being shown.

![hdb14](https://i.imgur.com/Rz6ZRPS.png)

Do notice the two timestamp fields. They are auto inserted by the HarperDB and are auto-maintained.

- `__createdtime__`: to record the timestamp when data is inserted.
- `__updatedtime__`: to record the timestamp when any data field is updated for the last time.

Try to add more values to the database.

## Query to search by value

HarperDB allows to search database records in a table by using a column field name which is also known as an `attribute`. Let's add another query to get a data record when an HTTP request is sent just by searching the name of the author. Open `api/index.js` file and the following:

```js
exports.getByAuthor = (request, response) => {
  db.searchByValue(
    {
      table: 'books',
      searchAttribute: 'author',
      searchValue: request.body.author,
      attributes: ['*']
    },
    (err, res) => {
      if (err) response.status(500).json(err);

      console.log(res);

      response.status(res.statusCode).json(res.data);
    }
  );
};
```

The data returned from the database is going to be in JSON format. Go back to the main `index.js` file and add another route.

```js
app.route('/author').post(routesController.getByAuthor);
```

Open the REST Client and make a request as shown below. The response of this HTTP request is going to be every data record that contains the value of the attribute `author`.

![hdb15](https://i.imgur.com/vd1PtH7.png)

## Query to search by hash

Another important way to search for data in a table is by the unique identifier. HarperDB has a special method to do the same. This method is called `searchByHash` and only allows us to search the database table using the identifier specified as has an attribute. In the `api/index.js` file, add another query called `getById`.

```js
exports.getById = (request, response) => {
  db.searchByHash(
    {
      table: 'books',
      hashValues: [request.body.id],
      attributes: ['title']
    },
    (err, res) => {
      if (err) response.status(500).json(err);

      response.status(res.statusCode).json(res.data);
    }
  );
};
```

When this query successfully runs, the result from the database is only going to show the `title` attribute of the data record. This is done by passing the name of an attribute as the value of the `attributes` property in the above snippet.

Add the endpoint in the main `index.js` file.

```js
app.route('/search').post(routesController.getById);
```

Go to the REST client and run the query.

![hdb16](https://i.imgur.com/jOT7zuw.png)

## Query to delete the data record

To delete a record from the table in HarperDB is simple. All you have to do is pass the `id` or the unique identifier for the record stored in the table. The unique identifier, as you know, is stored as a hash value.

Add the following query to the `api/index.js` file.

```js
exports.deleteBook = (request, response) => {
  db.delete(
    {
      table: 'books',
      hashValues: [request.body.id]
    },
    (err, res) => {
      if (err) response.status(500).json(err);

      response.status(res.statusCode).json(res);
    }
  );
};
```

Next, go to the main `index.js` file and add the endpoint.

```js
app.route('/delete').post(routesController.deleteBook);
```

Lastly, go back to the REST client, pass on the id of the data record to delete. On successful deletion, it gives a response back in the form of a `message` that is directly sent from the HarperDB instance. This is very helpful since this message response can be directly used with any REST client or sent to a frontend framework.

![hdb17](https://i.imgur.com/qYEmPkv.png)

## Conclusion

_Congratulations!_ You have reached the end of the tutorial.

I hope this post does convey you to try the capabilities of HarperDB. I personally like how it support both SQL and NoSQL queries as well as some advanced features like adding timestamps automatically and hashing unique ids in a consistent way across all data tables and schemas.

**Resources & Further Reading:**

- [Are hash attributes case sensitive in HarperDB?](https://harperdbhelp.zendesk.com/hc/en-us/articles/115003081994-Are-Hash-Attributes-Case-Sensitive-)
- [HarperDB SQL Guide](https://harperdbhelp.zendesk.com/hc/en-us/articles/115002146754-HarperDB-SQL-Guide)
- [Harperive](https://github.com/chandan-24/Harperive)
- If you are looking to learn more about creating [REST APIs with Node.js and MySQL, checkout post the here](https://geshan.com.np/blog/2020/11/nodejs-mysql-tutorial/).
- [HarperDB documentation](https://harperdb.io/developers/documentation/overview/?utm_source=amanmittal)
- [HarperDB Developer examples](https://harperdb.io/developers/developer-examples/?utm_source=amanmittal) includes tutorials on React, Websocket, Python, etc.


Build a REST API with Node.js and HarperDB

---
title: 'How to setup a React App with a Firebase project'
slug: 'firebase-config-in-a-react-app'
date: '2020-06-05'
thumbnail: '/thumbnails/firebase.png'
tag: 'firebase'
canonicalUrl: 'https://amanhimself.dev/blog/firebase-config-in-a-react-app/'
---

![cover](https://i.imgur.com/u3tfk7P.png)

To create or setup a new React app, I try to use `npx` from a terminal window. By executing the following command, it generates a new React app using the `create-react-app` utility.

```shell
npx create-react-app reactapp

# after the project has generated

cd reactapp
```

The name of the project `reactapp` mentioned in the command is the project name. To start this newly created React app, run the below command from the terminal window:

```shell
yarn start
```

It will trigger the default React app that is generated by `create-react-app` command-line utility and open the app in a browser window at URL `http://localhost:3000`.

![ss1](https://i.imgur.com/KMW1O19.png)

Now, setup the project as per the need. The following directory basic setup is how I like to setup a new React app (_when using Firebase as the backend service_).

![ss2](https://i.imgur.com/4EXRxj8.png)

Add an initial modification of `src/App.js` file to the file code snippet.

```js
import React from 'react';

function App() {
  return (
    <div>
      <h1>React App</h1>
    </div>
  );
}

export default App;
```

This modification is going to lead to the following change in a web browser window.

![ss3](https://i.imgur.com/fk5pNaU.png)

## Create Firebase project-based components

The basic directory structure is all setup, now let's create the Firebase project-related component folders. Each component folder inside `src/components/` is going to have an `index.js` file that is going to contain the code snippet related to that particular component.

For example, in a Firebase + React app, the sign in, sign out and sign up component is going to be three different components to handle user authentication. Thus, all are going to have separate folders. To create a component folder you can use the command-line interface or the editor or the IDE file explorer.

```shell
cd components/

mkdir SignIn SignOut SignUp
```

![ss4](https://i.imgur.com/Fh4Ha83.png)

The `./src/Pages` directory is optional. I like to separate presentation page components such as `Home` or `Landing` in a different folder but that depends on the project itself.

![ss5](https://i.imgur.com/NOdfdO3.png)

The initial components directory is done. In the next section, let us get the API keys from the Firebase project.

## Generate Firebase API keys

<blockquote display="info">
  Before you generate API keys for Firebase configuration in a React app, please
  make sure you have either set up a new Firebase app or have access to a
  Firebase app using its console.
</blockquote>

If you are new to Firebase apps, please refer to the post here that explains 👉 [how to create a new Firebase project?](https://amanhimself.dev/new-firebase-project/)

Once you have created or opened a Firebase project, from the dashboard screen, click on the _settings_ icon ⚙️ from the side menu.

![ss12](https://i.imgur.com/zkv9SNA.png)

The _Settings_ page opens as shown below.

![ss13](https://i.imgur.com/ZTgOnQk.png)

To create a new app, go to the section that says `Your apps` and click on the third icon or the Web icon. The first two icons shown are for creating keys for native platforms such as iOS and Android.

![ss16](https://i.imgur.com/FGaubt7.png)

Next, there is going to be a prompt about adding the name of the web app. Enter a name.

![ss14](https://i.imgur.com/m2mhbm6.png)

Then the API keys required by the web app are generated as shown below. The blacked-out part is the actual key values and I recommend not sharing with anyone.

![ss15](https://i.imgur.com/NGYOauf.png)

Make sure you save the `firebaseConfig` object. It is the object the contains all the API keys required to use various Firebase services such as authentication, database and so on.

Once you copied the `firebaseConfig` object, you press the button that says `Continue to console`. You are going to be taken back to the `Settings` page.

## Environment variables in a React app

Create a new file inside the React project called `.env`. Make sure to add this file to `.gitignore` and do not commit it to the [GitHub](https://github.com) repo or any other public repository on a version control platform.

This file is going to save all the Firebase API keys as shown below. All the `xxxx`'s represent the keys generated in the Firebase console. Replace them with your own keys.

```shell
DEV_API_KEY=xxxx

DEV_AUTH_DOMAIN=xxxx

DEV_DATABASE_URL=xxxx

DEV_PROJECT_ID=xxxx

DEV_STORAGE_BUCKET=xxxx

DEV_MESSAGING_SENDER_ID=xxxx

DEV_APP_ID=xxxx

DEV_MEASUREMENT_ID=xxxx
```

<blockquote display="info">
  You do not have to name each key with the prefix `DEV_`. You can either use
  their default name such as `API_KEY` or follow your own convention. I like to
  follow `DEV_` and `PROD_` prefixes to separate dev mode and production mode
  Firebase projects.
</blockquote>

## Connect Firebase with a React app

React app needs Firebase SDK installed as an npm dependency. Open terminal window, execute the following command to install the dependency.

```shell
yarn add firebase
```

For Firebase SDK to initialize with the React app and use the Firebase services further in the app, it needs to consume the API keys generated in the previous section as a configuration object. This object is a plain JavaScript object with key and value
pairs.

Create a new file `src/Firebase/firebase.js` import the `firebase` library and create a `firebaseConfig` object with appropriate keys and their values saved in `.env` file.

```js
// firebase.js

import * as firebase from 'firebase/app';

const firebaseConfig = {
  apiKey: process.env.DEV_API_KEY,
  authDomain: process.env.DEV_AUTH_DOMAIN,
  databaseURL: process.env.DEV_DATABASE_URL,
  projectId: process.env.DEV_PROJECT_ID,
  storageBucket: process.env.DEV_STORAGE_BUCKET,
  messagingSenderId: process.env.DEV_MESSAGING_SENDER_ID,
  appId: process.env.DEV_APP_ID,
  measurementId: process.env.DEV_MEASUREMENT_ID
};
```

The `firebase/app` import statement is always required when you add the Firebase SDK to a new Web app or React project. It should also be the import statement line in this file.

The current format of `firebaseConfig` object shows that all the Firebase services from its console are enabled.

<blockquote display="default">
  Side-note: To use a different set of API keys or Firebase projects such as for
  development and production, you can create two `config` objects here. For dev
  mode, create `devConfig` and for production, create `prodConfig`.
</blockquote>

```js
const prodConfig = {
  apiKey: process.env.PROD_API_KEY,
  authDomain: process.env.PROD_AUTH_DOMAIN,
  databaseURL: process.env.PROD_DATABASE_URL,
  projectId: process.env.PROD_PROJECT_ID,
  storageBucket: process.env.PROD_STORAGE_BUCKET,
  messagingSenderId: process.env.PROD_MESSAGING_SENDER_ID,
  appId: process.env.PROD_APP_ID,
  measurementId: process.env.PROD_MEASUREMENT_ID
};

const devConfig = {
  apiKey: process.env.DEV_API_KEY,
  authDomain: process.env.DEV_AUTH_DOMAIN,
  databaseURL: process.env.DEV_DATABASE_URL,
  projectId: process.env.DEV_PROJECT_ID,
  storageBucket: process.env.DEV_STORAGE_BUCKET,
  messagingSenderId: process.env.DEV_MESSAGING_SENDER_ID,
  appId: process.env.DEV_APP_ID,
  measurementId: process.env.DEV_MEASUREMENT_ID
};
```

Then using JavaScript conditional operator, you can condition between the two.

```js
const config = process.env.NODE_ENV === 'production' ? prodConfig : devConfig;
```

This way, you will prevent the mixing of data and other information between development mode app and production or deployed app.

## Initializing the Firebase SDK

Initializing the Firebase SDK with the current React app is the first step. To do this, you have to use a method called `initializeApp()` and pass the `firebaseConfig` as the only argument to this method after defining the config object.

```js
// firebase.js

firebase.initializeApp(firebaseConfig);
```

Lastly, to test that the Firebase SDK is working with the React app, let us export the `firebase` instance from `Firebase/firebase.js` file.

```js
export default firebase;
```

Open `App.js` file, import the `firebase` instance, and using `useEffect` hook let us try to see if it's initialized or not.

```js
import React, { useEffect } from 'react';

// TODO: REMOVE THIS IMPORT STATEMENT BELOW BEFORE PROCEEDING

import firebase from './Firebase/firebase';

function App() {
  // TODO: REMOVE THIS BEFORE PROCEEDING

  useEffect(() => {
    console.log(firebase);
  }, []);

  return (
    <div>
      <h1>React App</h1>
    </div>
  );
}

export default App;
```

To see the output of the console statement from the above code snippet, open Developer Tools -> Console tab in the web browser. On the initial render of `App` component or the React app, the `useEffect` hook is going to trigger.

![ss17](https://i.imgur.com/Nl4Mov8.png)

The object returned from Firebase clearly states that there are no errors with the current Firebase config in a React app.

It is important to notice that Firebase should only be initialized once in the React app. This pattern is called [singleton](https://en.wikipedia.org/wiki/Singleton_pattern). This initialization should be the top level component in the React components tree.

## Conclusion

Here is a summary of what has been done in this tutorial so far.

- Create a React app using `create-react-app`
- Create an opinionated directory structure inside React app to manage different components
- Generate Firebase API keys for configuration
- Used environment variables inside a React app to manage keys
- Install `firebase` SDK npm package
- Connect Firebase SDK to React app
- Initialize the Firebase SDK
- Why initialize a Firebase instance only once per React app?

👉 **Further reading:**

- [What is `firebase.app()` and why it is read-only?](https://firebase.google.com/docs/reference/js/firebase.app.App)
- `firebase` SDK [npm package](https://www.npmjs.com/package/firebase)
- [How to create a new Firebase project?](https://amanhimself.dev/blog/new-firebase-project/)
- [Singleton Pattern](https://en.wikipedia.org/wiki/Singleton_pattern)
- [How to add custom environment variables with `create-react-app`](https://create-react-app.dev/docs/adding-custom-environment-variables)?


How to setup a React App with a Firebase project

---
title: 'Styling The React Native Way'
slug: 'styling-the-react-native-way'
date: '2020-06-04'
thumbnail: '/thumbnails/expo.png'
tag: 'expo'
canonicalUrl: 'https://amanhimself.dev/blog/styling-the-react-native-way/'
---

> [Originally published at Level up coding on January 14, 2019.](https://levelup.gitconnected.com/styling-the-react-native-way-3cc6d3ef52d0)

React Native comes with many in-built components that you can use to style cross-platform applications. Styling a mobile application is essential. I cannot put enough emphasis on how important it is for a mobile app to have a pleasing design and good use of colors can be provide a better user experience. Without a polished user interface, a potential user will be repelled by the lack of design in the mobile app.

React Native uses plain JavaScript to style. In this tutorial, you are going to explore different ways to style a React Native app by getting some hands-on experience and learning tips along the way.

## Introduction

React Native uses JavaScript to style, if you have some experience with the CSS of the web, you know that styling a component is nothing more than writing code by using proper styling syntax. If you do not have any idea what CSS is, stop right here as there would be no advantage for you reading this tutorial. You need to understand a bit of CSS to continue reading the tutorial below. If you understand what `backgroundColor: 'blue’` means, then you are good to go.

React Native comes in with many built-in components. Each having its own specific set of styles. These specific styles may or may not be applicable to other components.

For example, `Text` component supports `fontWeight` whereas a `View` component does not. However, some of the styles are similar but not exactly the same. `View` supports `shadowColor` while `Text` supports `textShadowColor`. Lastly, you have to make note that there are a few platform-specific styles such as `shadowPropTypesIOS`.

## Different Ways to Style a React Native App

There are different ways you can add styles to your React Native component. First one is **inline styling**. See the example below.

```js
// inline example
import React from 'react';
import { View, Text } from 'react-native';

export default function App() {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'blue'
      }}
    >
      <Text style={{ color: 'white', fontSize: 32 }}>Some Text</Text>
    </View>
  );
}
```

The result of the above code of snippet is following.

![ss1](https://i.imgur.com/GHvCHh4.png)

In the post [**Getting Started with React Native in 2019**](https://amanhimself.dev/getting-started-with-react-native-in-2019-build-your-first-app/), I've described about `StyleSheet` object. It is the second way.

Available from React Native API, by importing and using `StyleSheet`, you create an object and refer to each style individually. This brings the separation of styles from the render method and helps you organize the code. Also, it promotes re-using styles across components.

```js
// StyleSheet Example
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.bigText}>Some Text</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'blue'
  },
  bigText: {
    color: 'white',
    fontSize: 32
  }
});
```

This snippet of code will have the same effect on rendering on a mobile device. The only thing changed here is being separation of styles inside the component `App` with `StyleSheet` object. It takes a JavaScript object as it does above, and returns a new `Stylesheet` object from it. There are no classes or ids in React Native like in web development.

**To create a new style object you use** `StyleSheet.create()` **method. Another advantage this way of styling React Native components** hold is that when creating a new style object every time, `StyleSheet` helps to create style objects with an ID which is further used to reference instead of rendering the whole component again.

Another difference comes with **inline** styling is that an inline style property name, if misspelled, does not work and there is no error thrown for the misspelling.

![ss2](https://i.imgur.com/065jq9Y.png)

However there is a valid style property check when styles are defined using `StyleSheet.create()`.

![ss3](https://i.imgur.com/pM0LktI.png)

![ss4](https://i.imgur.com/0iAFAvZ.png)

## Encapsulation of Styles

In React Native, styles are scoped to the component rather than the whole application. You have seen one preferred way of defining styles used commonly by the React Native community.

Another way to define styles is to organize your application code in such a way that it becomes easier to keep track of them when refactoring, or when the application starts to expand. In this second way, you declare all the styles related to a component in a separate file. Then import that styles file inside the component file. Here is an example for you. Create a new file next to the `App.js` called `AppStyles.js`.

```js
// AppStyles.js
import { StyleSheet } from 'react-native';

export default StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'blue'
  },
  bigText: {
    color: 'white',
    fontSize: 32
  }
});
```

Next step is to import this file inside `App.js`.

```js
//App.js
import React from 'react';
import { View, Text } from 'react-native';

import styles from './AppStyles';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.bigText}>Some Text</Text>
    </View>
  );
}
```

The demo runs and produces the same result as before. This separation of styles in a file other than the component file has its own advantages. It increases the reusability of other style objects.

## Using arrays to pass styles

In inline styling, you must have observed that it is nothing but an object that starts with a `style` prop and an object is passed with key-value pairs. Similarly, you can use an array that can contain multiple key-value pairs as the value of the `style` prop.

```js
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={[styles.bigText, styles.textYellow]}>Some Text</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'blue'
  },
  bigText: {
    color: 'white',
    fontSize: 32
  },
  textYellow: {
    color: 'yellow'
  }
});
```

The following is the result for the above snippet.

![ss5](https://i.imgur.com/GHvCHh4.png)

Do notice that, the last style passed in overrides the previous style when there is a duplicate `color` property.

## Building an App: Dark/Light Themes

In this section, you are going to build a simple app called **light/dark mode** toggle. It contains a button with some text with a dark background of its own and a light colored background. When the user clicks the button, the background of the app changes to dark mode and the text on the button changes to light mode.

First, let us define styles for it. Open `AppStyles.js` the external styling file.

```js
import { StyleSheet } from 'react-native';

const Colors = {
  light: 'white',
  dark: 'black'
};

const baseContainer = {
  flex: 1,
  justifyContent: 'center',
  alignItems: 'center'
};

const buttonBorderContainer = {
  justifyContent: 'center',
  alignItems: 'center',
  borderWidth: 3,
  height: 50,
  width: 150
};

const lightStyles = StyleSheet.create({
  container: {
    ...baseContainer,
    backgroundColor: Colors.light
  },
  button: {
    ...buttonBorderContainer,
    backgroundColor: Colors.dark
  }
});

const darkStyles = StyleSheet.create({
  container: {
    ...baseContainer,
    backgroundColor: Colors.dark
  },
  button: {
    ...buttonBorderContainer,
    backgroundColor: Colors.light
  }
});

export default function useTheme(darkTheme) {
  return darkTheme ? darkStyles : lightStyles;
}
```

A lot is going on here. First, the two different color variables are defined inside a single `Colors` object. Then, there are two different container objects, one for the background and one for the button.

Both of these container objects then re-used inside the StyleSheet objects, `lightStyles` and `darkStyles`. Similarly, to define the background color, we make re-use of the color object such that we do not have to write the value of each color twice.

Lastly, there is a function that gets exported that returns theme based upon a boolean value. Dark Theme’s value `darkStyles` is returned if its true otherwise light theme is returned.

The file `AppStyles.js` is a clear representation of structuring styles in a React Native app. This file is then imported inside the `App.js` that has the following content.

```js
import React, { useState } from 'react';
import { View, Button } from 'react-native';

import useTheme from './AppStyles';

export default function App() {
  const [darkTheme, setDarkTheme] = useState(false);
  const styles = useTheme(darkTheme);

  const toggleTheme = () => {
    setDarkTheme(!darkTheme);
  };

  return (
    <View style={styles.container}>
      <View style={styles.button}>
        <Button title={'Click Me'} onPress={toggleTheme} />
      </View>
    </View>
  );
}
```

By defining the state, you can declare the default value of the dark theme to be false such as it allows the light theme to be the default. `toggleTheme` is the method that reverses the boolean value for the dark theme accordingly. Next, inside the `render()` you are passing the current value of dark theme from the state. This function is then used to apply the correct theme or set of styles based on the boolean value.

You can see this in action below.

![ss6](https://i.imgur.com/uEQLG9f.gif)

- You can find the complete code for the example at [this Expo Snack](https://snack.expo.io/@amanhimself/38e20d).
- A big thank you to [Catalin Miron](https://twitter.com/mironcatalin) for proof reading it 🤗

**Resources & Further Reading:**

- If you are looking for some insight on how to hire a React Native dev, Toptal.com has an [awesome guide here](https://www.toptal.com/react-native#hiring-guide).


Styling The React Native Way

---
title: 'How to create custom wavy headers with react-native-svg'
slug: 'create-custom-headers-with-react-native-svg'
date: '2020-05-26'
thumbnail: '/thumbnails/expo.png'
tag: 'expo'
canonicalUrl: 'https://heartbeat.fritz.ai/creating-custom-wavy-headers-using-react-native-svg-639ce0861327'
---

> [Originally Published at Heartbeat.Fritz.ai](https://heartbeat.fritz.ai/creating-custom-wavy-headers-using-react-native-svg-639ce0861327)

In React Native apps, the support for SVG graphics is provided by an open-source module called [`react-native-svg`](https://github.com/react-native-community/react-native-svg) that is maintained by React Native community.

Using SVG can enhance an app’s design when it comes to displaying different patterns. It can make a difference in how the look and feel of the app might appear to the end-user, as well how it is easy to edit the pattern built using SVG. SVG is mainly found on the web, and while they have similar uses to JPEG, PNG, and WebP image types, SVG is not resolution-dependent. Hence, the definition according to [Wikipedia](https://en.wikipedia.org/wiki/Scalable_Vector_Graphics):

<blockquote>
  Scalable Vector Graphics (SVG) is an Extensible Markup Language (XML)-based
  vector image format for two-dimensional graphics with support for
  interactivity and animation.
</blockquote>

This format consists of shapes rather than pixels which can further be concluded that an SVG graphic can be scaled indefinitely in terms of resolution.

In this post, let us learn how to use `react-native-svg` in React Native and Expo apps and create some custom examples such as wavy header shown below.

<img src='https://miro.medium.com/max/598/1*aivsFUf_OF6mYBSfOCGrTQ.gif' />

## Requirements

Ensure your dev environment includes the following required packages:

- [Node.js](https://nodejs.org/) above `12.x.x` installed on your local machine
- JavaScript/ES6 basics
- [`expo-cli`](https://expo.io/tools)

## Installing react-native-svg library

Start by creating a new project using expo-cli. Navigate inside the project directory when the CLI has finished generating the new project. Then install all the required dependencies to integrate the `react-native-svg` library.

```shell
expo init [PROJECT NAME]

cd [PROJECT NAME]

expo install react-native-svg
```

The reason to use `expo install` command when building a React Native app using Expo SDK instead of package managers like `npm` or `yarn` is that it is going to install the most compatible version of the package available to be used with Expo SDK. This avoids unnecessary errors.

That's it for installing this library. The `react-native-svg` library contains common shapes and elements such as `Svg`, `Rect`, `Circle`, `Line`, `Polygon`, `Path`, and so on as components to be used. You are going to see `Svg` and `Path` in action, in this post.

## Create a header component

In the next few sections, let us try to create a custom header background that has a bottom border with the form of a wave as shown below.

<img src='https://miro.medium.com/max/700/1*mf6AmpW-7j4nS1nixMDiVQ.png' />

Start by creating a new screen component inside `src/screens/ScreenOne.js` file that displays a heading on the screen. (_Create the directory if it doesn't exist._)

Add the following code snippet to this file.

```js
import React from 'react';
import { StyleSheet, View, Text, Dimensions } from 'react-native';

export default function ScreenOne() {
  return (
    <View style={styles.container}>
      <View style={styles.headerContainer}>
        <Text style={styles.headerText}>Custom Header</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff'
  },
  headerContainer: {
    marginTop: 50,
    marginHorizontal: 10
  },
  headerText: {
    fontSize: 30,
    fontWeight: 'bold',
    color: '#333',
    textAlign: 'center',
    marginTop: 35
  }
});
```

Next, go to `App.js` file and modify it to render the `ScreenOne` functional component as below.

```js
import React from 'react';
import ScreenOne from './src/screens/ScreenOne';
import { StatusBar } from 'react-native';

export default function App() {
  return (
    <>
      <StatusBar hidden={true} />
      <ScreenOne />
    </>
  );
}
```

Lastly, to see this simple header text on a device's screen, from the terminal window, execute the command `expo start`. You should results similar to the screenshot below:

<img src='https://miro.medium.com/max/700/1*kwennRzVGQSDL0fASGCC5g.png' />

## Create a custom header component with waves

The motive of this section is to add a custom header using the svg component in the background in the `ScreenOne.js` file.

The SVG component that we intend to create is going to wrap the path drawing primitive. This primitive is the outline of a shape that can be filled or stroked. It primitive is represented by the `Path` component from `react-native-svg` library and makes use of different commands such as `elliptical Arc`, `moveto`, `lineto`and so on. You can read more about [Paths here](https://www.w3.org/TR/SVG/paths.html).

To generate the SVG background as you have seen in the previous section, I am going to make use of [getwaves.io](https://getwaves.io/). This web tool allows you to generate custom wave patterns in SVG format. Check out their website, it is simple and fulfils the purpose. You can create different patterns using this tool.

<img src='https://miro.medium.com/max/984/1*NzoVM40QM6VUNSGyCQLZ7g.gif' />

Make sure to copy the values of properties such as `viewbox` and `d` as shown above.

Next, create a file called `WavyHeader.js` inside `src/components/` directory. Import the following statements.

```js
import React from 'react';
import { View } from 'react-native';
import Svg, { Path } from 'react-native-svg';
```

Create a functional component called `WavyHeader` that is going to have a prop passed from the parent (_the screen component_) it is going to be used. Let us call this prop `customStyles`. The main reason to pass this prop here is to define the dimensions of the screen component in its own file and keep the style value dynamic for different screens.

Here is the complete code snippet for this custom component. Notice the properties of the `Path` component are the same as copied from getwaves.io.

```jsx
export default function WavyHeader({ customStyles }) {
  return (
    <View style={customStyles}>
      <View style={{ backgroundColor: '#5000ca', height: 160 }}>
        <Svg
          height="60%"
          width="100%"
          viewBox="0 0 1440 320"
          style={{ position: 'absolute', top: 130 }}
        >
          <Path
            fill="#5000ca"
            d="M0,96L48,112C96,128,192,160,288,186.7C384
            ,213,480,235,576,213.3C672,192,768,128,864,
            128C960,128,1056,192,1152,208C1248,224,1344,192,
            1392,176L1440,160L1440,0L1392,0C1344,0,1248,0,
            1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,
            384,0,288,0C192,0,96,0,48,0L0,0Z"
          />
        </Svg>
      </View>
    </View>
  );
}
```

Now, go back to the `ScreenOne.js` file and import this custom component after the rest of the import statements.

```js
// rest of the import statements
import WavyHeader from '../components/WavyHeader';
```

Add this component before the `<View>` that represents `headerContainer`.

```js
export default function ScreenOne() {
  return (
    <View style={styles.container}>
      <WavyHeader customStyles={styles.svgCurve} />
      <View style={styles.headerContainer}>
        <Text style={styles.headerText}>Custom Header</Text>
      </View>
    </View>
  );
}
```

Lastly, define the style reference `svgCurve` in the `StyleSheet` object as shown in the snippet below.

```js
const styles = StyleSheet.create({
  // rest of the styles
  svgCurve: {
    position: 'absolute',
    width: Dimensions.get('window').width
  },
  headerText: {
    fontSize: 30,
    fontWeight: 'bold',
    // change the color property for better output
    color: '#fff',
    textAlign: 'center',
    marginTop: 35
  }
});
```

From the snippet, you can notice that using the `Dimensions` API from `react-native` we are going to get the width of the current window. The `position` property is set to `absolute` such that the header component that contains the heading is displayed and does not hide behind this wavy background.

The final result is going to be as the following.

<img src='https://miro.medium.com/max/700/1*mf6AmpW-7j4nS1nixMDiVQ.png' />

## Make WavyHeader component reusable

So far, you have completed the task of displaying the wavy header background on a screen component. But what if the scenario changes and you have two screens both require wavy header backgrounds but with some customization such as each having a different height as well as different wave pattern?

In this section, let us customize the `WavyHeader` component to accept more props in order to make it a reusable component.

First, let us customize the `WavyHeader.js` file to accept more props.

```js
export default function WavyHeader({
  customStyles,
  customHeight,
  customTop,
  customBgColor,
  customWavePattern
}) {
  return (
    <View style={customStyles}>
      <View style={{ backgroundColor: customBgColor, height: customHeight }}>
        <Svg
          height="60%"
          width="100%"
          viewBox="0 0 1440 320"
          style={{ position: 'absolute', top: customTop }}
        >
          <Path fill={customBgColor} d={customWavePattern} />
        </Svg>
      </View>
    </View>
  );
}
```

Now the `<Path />` component is going to accept values (such as `backgroundColor`, `height`) in the form of props passed to the `WavyHeader` component.

Next, go to the `ScreenOne.js` file and pass in the values for the props for the `WavyHeader` component.

```jsx
export default function ScreenOne() {
  return (
    <View style={styles.container}>
      <WavyHeader
        customStyles={styles.svgCurve}
        customHeight={160}
        customTop={130}
        customBgColor="#5000ca"
        customWavePattern="M0,96L48,112C96,128,192,160,288,
        186.7C384,213,480,235,576,213.3C672,192,768,128,864,
        128C960,128,1056,192,1152,208C1248,224,1344,192,1392,
        176L1440,160L1440,0L1392,0C1344,0,1248,0,1152,0C1056,
        0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,
        0,96,0,48,0L0,0Z"
      />
      <View style={styles.headerContainer}>
        <Text style={styles.headerText}>Custom Header</Text>
      </View>
    </View>
  );
}
```

You won’t see a difference in the result on the device’s screen unless you change the values of these props.

<img src='https://miro.medium.com/max/700/1*mf6AmpW-7j4nS1nixMDiVQ.png' />

## Conclusion

You can try adding more custom screens to have different wave patterns and try to use the `WavyHeader` component as reusable for different screens. Here is an example below that displays two different screens with different wave patterns as well as background color and height.

<img src='https://miro.medium.com/max/700/1*ZmqxTfYO5jfv24ktveRzxg.png' />

<img src='https://miro.medium.com/max/598/1*aivsFUf_OF6mYBSfOCGrTQ.gif' />

- [Source code](https://github.com/amandeepmittal/wavySVGExample).
- Or try using an Expo client [here](https://expo.io/@amanhimself/rnwavysvg).
- Or check out [Leandro Favre’s](https://twitter.com/FavreLeandro) [Whicecream](https://github.com/AtilaDev/whicecream) example based on this tutorial!

Here is the list of resources used in order to create this post:

- [react-native-svg](https://github.com/react-native-community/react-native-svg)
- [getwaves.io](https://getwaves.io/)
- [What are Paths?](https://www.w3.org/TR/SVG/paths.html)


How to create custom wavy headers with react-native-svg

---
title: 'How to integrate Material UI library in React apps'
date: '2020-05-24'
slug: 'material-ui-integration-with-react'
thumbnail: '/thumbnails/react.png'
tag: 'reactjs'
canonicalUrl: 'https://amanhimself.dev/blog/material-ui-integration-with-react/'
---

Material design was introduced by Google around 2014 as a design language and it still shares some popularity among web and mobile applications. One of the common ways to integrate and use this design system in React apps is through [MaterialUI](https://material-ui.com/getting-started/installation/) library.

![ss1](https://i.imgur.com/l4PZ8tB.png)

In this post, let us take a look at how to integrate a material library that is available as an npm module and consists of built React components that you can use to build apps. You are going to learn from scratch on how to install and configure this library as well as build a small demo app.

![ss8](https://i.imgur.com/QxtWlBz.png)

## Prerequisites

Before you begin this tutorial you are going to need the following:

- a Web browser such as Chrome, Firefox and so on
- Node.js version above `12.x.x` installed on your local machine
- JavaScript/ES6 basics
- React basics
- npm/yarn install
- either `create-react-app` globally installed or access via `npx`

## Create a new React app

To start, you are going to need to setup a React project. Let's use `npx` to do so. Execute the following command in a terminal window.

```shell
npx create-react-app reactmaterial
```

By using the `npx` command (a part of the Node Package Manager (npm)) you execute `create-react-app` without the need to download and install the package globally.

When the new project is done scaffolding with the default dependencies such as React library and React DOM library installed.

Change in the new directory and you are going to be welcomed by the following structure of files and folders.

![ss2](https://i.imgur.com/W9D0ToF.png)

To verify that the React app is working, (_you can totally skip the step at this time_), run `yarn start` from the terminal window and open the default React app running at `http://localhost:3000` in a browser window.

![ss3](https://i.imgur.com/OkkceuE.png)

## Install Material UI library

The next step is to install the Material-UI library and integrate it to work with the current React app. The first is to install the core dependency of this library.

```shell
yarn add @material-ui/core
```

Material-UI was designed with the Roboto font in mind. If you wish to use it, you can follow the instructions. Go back to the terminal window and install the typeface package of the font. Also note that, the following steps to install this font are optional.

```shell
yarn add typeface-roboto
```

Then go to the entry point of your React app (preferably, `./src/index.js` file) and import the font.

```js
// rest of the import statements
import 'typeface-roboto';
```

Alternatively, if you do not wish to install the above npm module for the font, you can also use the CDN version of the font and read about it [here](https://material-ui.com/components/typography/#roboto-font-cdn).

## Using AppBar to create a custom navigation bar

In this section let us build a navigation bar. Create a new file called `./src/components/Navbar.js` and start by importing the components `AppBar`, `ToolBar`, and `Typography` from the MaterialUI library.

The `AppBar` component is used to display branding, screen titles, and navigation of the web app. That is what you are going to use it for. The `ToolBar` component is wrapper where you can place your components horizontally. The `Typography` component applies the Material UI theme that is available by default.

```js
import React from 'react';
import { AppBar, Toolbar, Typography } from '@material-ui/core';
```

Next, export a function component called `Navbar` with the following JSX.

```js
export default function Navbar() {
  return (
    <AppBar>
      <Toolbar>
        <Typography variant="h6">React and Material-UI App</Typography>
      </Toolbar>
    </AppBar>
  );
}
```

In the code snippet above, notice the `variant` prop on the `Typography` component. It uses the variant mapping to properly associate a UI element with an HTML semantic element (_such as h6 in the code snippet_).

Now, to see it in action, import the `Navbar` component in the `App.js` file.

```js
import React from 'react';
import Navbar from './components/Navbar';

function App() {
  return (
    <div>
      <Navbar />
    </div>
  );
}

export default App;
```

You are going to get the following result after this step.

![ss4](https://i.imgur.com/HhDhiP3.png)

## Implementing a Paper component

Two components that are going to be used in this section in order to layout a view for the items of the list are called `Grid` and `Paper`.

Material Design’s responsive UI is based on a 12-column grid layout. The `Grid` component helps you implement this layout system and then provide the values or the number of grids you want to display. A basic grid might look like below:

![ss5](https://i.imgur.com/UqiYt1i.png)

Material UI uses CSS's Flexbox to manage layout alignments and sizing of the grid columns.

The other component `Paper` actually displays the physical properties of a paper on the screen. It resembles a flat, texture of a sheet of paper, and using a prop called `elevation` you can manipulate its default display behavior. Do note that, this component does need an initial width and height.

Create a new component file called `./src/components/List.js` which is going to be used as a reusable component later. This presentational component is going to display a `Paper` component inside `Grid` with custom styles.

```js
import React from 'react';
import { Grid, Paper, makeStyles } from '@material-ui/core';

const useStyles = makeStyles(theme => ({
  root: {
    marginTop: 100,
    flexGrow: 1
  },
  paper: {
    height: 220,
    width: 340,
    backgroundColor: '#ebebeb'
  },
  avatarImage: {
    width: 200,
    height: 200,
    borderRadius: 100
  }
}));

export default function List() {
  const classes = useStyles();

  return (
    <Grid container spacing={2}>
      <Grid item className={classes.root} xs={12}>
        <Grid container justify="center" spacing={2}>
          <Grid key={1} item>
            <Paper className={classes.paper} elevation={2} />
          </Grid>
        </Grid>
      </Grid>
    </Grid>
  );
}
```

The `makeStyles` comes from the Material UI API. It links a style sheet with a function component and returns a hook that you use inside the component.

You can modify the `App.js` file to include the `List` component.

```js
// rest of the import statements
import List from './components/List';

function App() {
  return (
    <div>
      <Navbar />
      <List />
    </div>
  );
}
```

Here is the result you are going to get after this step.

![ss6](https://i.imgur.com/8PL5Xrs.png)

## Fetching random user data

To display data inside `List` component, let us use [https://randomuser.me/](https://randomuser.me/) API. In the `App` component the data is going to be fetched on the initial render using `useEffect` hook. The `useState` hook is used to store the fetched data by defining a state variable whose initial value is an empty array.

To start, first, import the hooks from the `react` library.

```js
import React, { useState, useEffect } from 'react';
```

After that create a state variable called `data` inside the `App` component. Along with the `data` variable, define two other state variables, `isLoading` to track the whether app is in loading mode (that is, the data is being fetched from the API) and `error` to track if there is an error while fetching the data. The loading state of the React app is going to be `true` by default.

```js
function App() {
  const [data, setData] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState('');

  //rest of the code
}
```

The `useEffect` hook is going to have a callback that is going to fetch the data using JavaScript's `fetch` API.

```js
useEffect(() => {
  fetch('https://randomuser.me/api/?results=5')
    .then(res => res.json())
    .then(
      result => {
        setIsLoading(false);
        setData(result.results);
      },
      error => {
        setIsLoading(false);
        setError(error);
      }
    );
}, []);
```

You can conditionally render the JSX based on the state variables.

```js
if (isLoading) {
  return <div>Loading ...</div>;
} else if (error) {
  return <div>There is an error fetching data.</div>;
} else {
  return (
    <div>
      <Navbar />
      <List />
    </div>
  );
}
```

Now, when you refresh the React app, you are going to see the JSX being rendered that is related to the loading state of the app, for split seconds.

![ss7](https://i.imgur.com/hBWfaYc.gif)

## Display a list of users

You can now pass the user information you want to display in the form of the prop at the `List` component. Use JavaScript's `map` function to traverse the array `data`.

```js
{
  data.map(item => (
    <List
      key={item.id.value}
      userAvatar={item.picture.large}
      firstName={item.name.first}
      lastName={item.name.last}
    />
  ));
}
```

These props are then passed as arguments to the `List` component.

```js
xport default function List({ userAvatar, firstName, lastName }) {
  const classes = useStyles();

  return (
    <Grid container spacing={2}>
      <Grid item className={classes.root} xs={12}>
        <Grid container justify="center" spacing={2}>
          <Grid key={1} item>
            <Paper className={classes.paper} elevation={2}>
              <Grid container justify="center">
                <Avatar
                  alt="User"
                  className={classes.avatarImage}
                  src={userAvatar}
                />
                <Typography variant="p">
                  Name: {firstName} {lastName}
                </Typography>
              </Grid>
            </Paper>
          </Grid>
        </Grid>
      </Grid>
    </Grid>
  );
}
```

The above code snippet uses few more core components from Material UI (such as `Avatar`). You can find their reference in the official documentation of this library.

Here is the final result you are going to get when you back to the browser screen.

![ss8](https://i.imgur.com/QxtWlBz.png)

## Conclusion

I hope in this post, you get the idea of how you can leverage the core components of [Material UI library](https://material-ui.com/getting-started/installation/) in your React apps and save a ton of development time.

References:

- [Materia UI official docs](https://material-ui.com/getting-started/installation/)
- [AJAX calls in React](https://reactjs.org/docs/faq-ajax.html)
- [Random User API](https://randomuser.me/documentation#howto) to mock data in your React apps
- To learn more about React Hooks, check out my post on that [here](https://dev.to/amanhimself/build-a-expense-tracker-app-with-react-hooks-and-localstorage-api-4lfj)


How to integrate Material UI library in React apps

---
title: 'Chat app with React Native (Part 6) - Create a custom hook to change status bar styles'
date: '2020-05-18'
slug: 'chat-app-with-react-native-part-6'
thumbnail: '/thumbnails/react.png'
tag: 'react-native'
canonicalUrl: 'https://heartbeat.fritz.ai/chat-app-with-react-native-part-6-create-a-custom-hook-to-change-status-bar-styles-da7073c5fa8d'
---

![cover](https://i.imgur.com/ROYjoYo.jpg)

In [part 5](https://amanhimself.dev/blog/chat-app-with-react-native-part-5), we successfully connected real-time database service Firestore to store chat messages in a collection where each collection would represent a separate chat room. Further, we built sub-collections in each chat room collection to store and identify latest messages from all other messages in a chat room.

This part is going to be a bit different. Instead of writing code to communicate with any real-time service, we are going to fix a bug by creating a custom hook.

Here is a screen shot of the type of bug I am talking about it. Notice how the status bar remains dark in color on both lighter and darker backgrounds.

<img src='https://miro.medium.com/max/714/1*JwA7n-QlUjayTGgb2m1tfw.gif' />

Do notice that the status bar looks fine when the background is light in colour. This happens when the modal screen to create a new chat room is displayed. But on rest of the screens, when chat rooms are displayed or inside a chat room, the status bar does not matches well with the coloured background of header on both of these screens.

React Native has a core component in its API called `StatusBar` that is used to control the app status bar behavior and its styles. However, manually adding `StatusBar` to each screen is not our goal in this tutorial.

The navigation library `react-navigation` is going to help us to solve this. We are going to create a custom hook that is going to track the status bar color and change it accordingly whenever a screen changes. That is, on the lighter background, a dark status bar is displayed and on a darker background of the screen, a light status bar is displayed.

To begin you need `react-navigation` library to be installed. Since we have already done that in [part 1](https://heartbeat.fritz.ai/chat-app-with-react-native-part-1-build-reusable-ui-form-elements-using-react-native-paper-75d82e2ca94f) of this chat app series. If you just came across this tutorial, please have a look at part 1 and instructions mentioned on how to install and configure `react-navigation` library.

Otherwise, you can follow the instructions from `react-navigation` library official docs [here](https://reactnavigation.org/).

## Create a custom Status bar hook

The `react-navigation` library provides a hook called `useFocusEffect` that helps to run side-effects when a specific screen is focused. A side effect can be described as fetching data, updating a title, running an event listener and so on. This hooks is similar to `useEffect` hook from React with the difference being between the two is that side-effects in `useFocusEffect` run only when a screen component is focused.

Let us begin to develop this custom hook. Create a new file called `useStatusBar.js` inside `src/utils/` directory. Import the following statements.

```js
import React, { useCallback } from 'react';
import { StatusBar } from 'react-native';
import { useFocusEffect } from '@react-navigation/native';
```

Export a custom function called `useStatusBar`. This function is going to be act as a custom hook that is going to provide a simple way to change the color of the status bar when applied. Pass the `style` as the only parameter for now. The value of the style is going to be determined on the screen component this hook is used.

```js
export default function useStatusBar(style) {
  useFocusEffect(
    useCallback(() => {
      StatusBar.setBarStyle(style);
    }, [])
  );
}
```

It is important to wrap the `StatusBar` with `React.useCallback` hook to avoid triggering the side-effect after every render when the screen is focused.

## Application of the custom hook

To apply this hook for the first time, open `screen/HomeScreen.js` file, import the custom hook and apply it as shown below.

```js
// rest of the import statements
import useStatsBar from '../utils/useStatusBar';

function HomeScreen({ navigation }) {
  useStatsBar('light-content');
  // rest of the code remains same
}
export default HomeScreen
```

Go back to the simulator and you are going to notice the changes now.

<img src='https://miro.medium.com/max/692/1*jaEgKwnoaiLeMCs2bkmsIg.png' />

It works. If you look closely at the header bar of the `Home` screen, you are going to see that the status bar has the value of light styles applied. However, this style is also applied to all of the other screens, even on those screens such as `AddRoomScreen` where a darker status bar would be preferred.

<img src='https://miro.medium.com/max/714/1*JSa1Ndh9tYt4BzdBUJG4mA.gif' />

To fix this, you have to explicitly mention the styles of the status bar for each component using the custom hook we created in the previous section.

```js
/**
 * screens/AddRoomScreen.js
 */

// rest of the import statements
import useStatsBar from '../utils/useStatusBar';

export default function AddRoomScreen({ navigation }) {
  useStatsBar('dark-content');
  // rest of the code remains same
}

/**
 * screens/RoomScreen.js
 */

// rest of the import statements
import useStatsBar from '../utils/useStatusBar';

export default function RoomScreen({ route }) {
  useStatsBar('light-content');
  // rest of the code remains same
}
```

Now, go back to the simulator and you are going to find everything is in order and works as expected.

<img src='https://miro.medium.com/max/714/1*laUY_xJJwoI079wS0NKI3Q.gif' />

## Animate the value for smoother transitions

For better transitions between different screens in a stack navigator, you can pass the second parameter to the `useStatusBar`. This second parameter is going to be called `animated`. Passing a default value of boolean true is going to help and avoid any explicit mentions. Otherwise you can explicitly pass the value of the parameter as well.

```js
export default function useStatusBar(style, animated = true) {
  useFocusEffect(
    useCallback(() => {
      StatusBar.setBarStyle(style, animated);
    }, [])
  );
}
```

The animation used by the hook itself is going to the default transition of native platform the app is currently being run since the hook `useFocusEffect` is imported from `@react-navigation/native`.

Now you can go back to the simulator (_the below demo is using iOS simulator_) and notice the difference between the previous section and this one.

<img src='https://miro.medium.com/max/714/1*_X5Ye5IJpkOYbUsED8ELYg.gif' />

## A last challenge

The purpose of this series is to make yourself familiar with integration process of Firebase in a React Native app and implementing a navigation flow with `react-navigation` library and how to use components from `react-native-paper` UI library. This purpose is now complete with this part.

Though I leave you with a small challenge. Implement the logout button in the header bar of the Home screen. Just like you have used the `IconButton` component from `react-native-paper` to open a modal screen. Hint, changes are to be done in the `HomeStack.js` file and we have already written the `logout` function in `AuthProvider.js` file.

Here is a little demo showcasing what has to be implement:

<img src='https://miro.medium.com/max/664/1*5XHPu7A9R9s9d_lYKcd1sw.gif' />

Try to do it yourself and try to think other ways you can implement log out functionality in this app. If you feel stuck or want to jump ahead to the the GitHub commit [**here**](https://github.com/amandeepmittal/react-native-examples/commit/b1383ccc9fca20214b6c91bfe5a2a5d72a1f8d16).

Otherwise, you can find the complete code at this [GitHub repo](https://github.com/amandeepmittal/react-native-examples/tree/master/ChatApp).

---

👉 Here is a list of resources used in this tutorial:

- [The complete documentation useFocusEffect hook](https://reactnavigation.org/docs/use-focus-effect/)
- [Do understand the difference between using `focus` event and useFocusEffect](https://reactnavigation.org/docs/use-focus-effect/#how-is-usefocuseffect-different-from-adding-a-listener-for-focus-event)

[Originally Published at Heartbeat.Fritz.ai](https://heartbeat.fritz.ai/chat-app-with-react-native-part-6-create-a-custom-hook-to-change-status-bar-styles-da7073c5fa8d)


Chat app with React Native (Part 6) - Create a custom hook to change status bar styles

Creating "Quarantine Pro" — A Fun Learning Experiment in React Native

---
title: 'Chat app with React Native (Part 5) - Create and Fetch Real-Time Messages with Firestore'
date: '2020-05-11'
slug: 'chat-app-with-react-native-part-5'
thumbnail: '/thumbnails/react.png'
tag: 'react-native'
canonicalUrl: 'https://heartbeat.fritz.ai/chat-app-with-react-native-part-5-create-and-fetch-real-time-messages-with-firestore-86fb012edaf5'
---

![cover](https://i.imgur.com/ROYjoYo.jpg)

In [part 4](https://amanhimself.dev/blog/chat-app-with-react-native-part-4), we built the foundation of creating a chat app by adding UI screens that are focused on sending, receiving and displaying chat messages. We used `react-native-gifted-chat` an amazing open source library and dived deep to use its "out of the box" props to add features to the chat app.

In part 5, we are going to connect every chat functionality that we built so far with a real-time database service from Firebase, called Firestore. You are going to learn

- store chat messages of each thread/chat room in Firestore collection
- how to create sub collections inside a Firestore collection
- add a feature to display most recent message for each chat room on home screen
- fetch data from a Firestore collection

And few other things along the way. Let's get started.

## How to get current user information in the app?

Remember, in [part 2](https://amanhimself.dev/blog/chat-app-with-react-native-part-2), when configuring Email authentication between the chat app and the Firebase service, you set the following `AuthProvider` that gives access to the current user as well other methods that are already being used in components `LoginScreen` and `SignupScreen`. Here is the ode for `src/navigation/AuthProvider.js` for your reference.

```js
import React, { createContext, useState } from 'react';
import auth from '@react-native-firebase/auth';

/**
 * This provider is created
 * to access user in whole app
 */

export const AuthContext = createContext({});

export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);

  return (
    <AuthContext.Provider
      value={{
        user,
        setUser,
        login: async (email, password) => {
          try {
            await auth().signInWithEmailAndPassword(email, password);
          } catch (e) {
            console.log(e);
          }
        },
        register: async (email, password) => {
          try {
            await auth().createUserWithEmailAndPassword(email, password);
          } catch (e) {
            console.log(e);
          }
        },
        logout: async () => {
          try {
            await auth().signOut();
          } catch (e) {
            console.error(e);
          }
        }
      }}
    >
      {children}
    </AuthContext.Provider>
  );
};
```

To fetch the logged in user information (aka the current user), start by importing `AuthContext` in the file `RoomScreen.js`.

```js
// ... rest of the import statements
import React, { useContext, useEffect } from 'react';
import { AuthContext } from '../navigation/AuthProvider';
```

Next, to verify that the you are getting the current user information, inside the `RoomScreen` component, add the following two lines.

```js
export default function RoomScreen({ route }) {
  const { user } = useContext(AuthContext);
  const currentUser = user.toJSON();

  // ...
}
```

You have to convert the user data being fetched in JSON object. To check that the user data is incoming, let us temporarily add a `useEffect` hook after the previous code snippet, as shown below.

```js
useEffect(() => {
  console.log({ user });
}, []);
```

## How to use Chrome Dev tools with a React Native app?

There are two ways to check the output of console statements in a React Native app. First, a console statement triggers, in the terminal window, the will be a `LOG` entry like below with desired result.

<img src='https://miro.medium.com/max/1400/1*vgS3rCFKAkxb6WHHbESkvA.png' />

However, for better complete control over [debugging](https://reactnative.dev/docs/debugging), you can use Chrome dev tools. This can be done by opening the in-app developer menu, either by shaking the device or if you are using an iOS simulator press `command + d`. On Android, you have to press `command + m` on mac (for windows, press `control + m`).

A developer menu like below will popup.

<img src='https://miro.medium.com/max/700/1*eQVIYyJTWubyIp20NSTpiQ.png' />

Select the option `Debug`. In your default Chrome browser, it is going to open like below.

<img src='https://miro.medium.com/max/1066/1*t-56v6dq-N4T955hoj28cw.png' />

Go to **Console** tab. Enter a chat room from the app. If you do not have to created a chat room yet, create one. On the Console tab, you are going to get the following result.

<img src='https://miro.medium.com/max/1400/1*rl94NSCpjYETiy0HAKYk4A.png' />

That's it. Now, from the above image, you can definitely verify that a user is logged in and their email credentials can be verified.

## How to store messages in Firestore?

In this section, you are going to add the business logic as well as the ability to store the chat conversation between multiple users in a chat room. These messages are going to be stored in a sub collection.

The main reason to create a sub collection is that when a new chat room is created, storing every data associated to that chat room in its own collection is a good idea. That said, when a new chat room is created, inside the collection `THREADS` a new document with a unique identifier is generated.

Inside that, you are going to add another collection called `MESSAGES` that is only going to store chat conversation that happens in that chat room. This will get clear as you proceed in this section.

Start by importing the some necessary React Hooks as shown below. Also, import `firestore` to make queries to create new sub-collection, and fetch data.

```js
import React, { useState, useContext, useEffect } from 'react';
import firestore from '@react-native-firebase/firestore';
```

To get the `id` of the current chat room (_this is important_) you have to pass the `route` as a parameter to the `RoomScreen` functional component. Since, from the previous screen, a `thread` object is passed which gives the chat room id (_or thread id_) store in the Firebase collection `THREADS`. Using `route.params` you can get the whole `thread` object. This is possible because of `react-navigation`.

```js
export default function RoomScreen({ route }) {
  // ... rest of the code
  const { thread } = route.params;
}
```

Next, modify the asynchronous helper method `handleSend`. This method is used to send a message as you might have already seen in part 4.

Inside this helper method, get the text of each message send by the user. Then, create the sub collection `MESSAGES` by referencing the correct id of the current thread the user is conversing in. Using `add()` you can add anew document with an auto-generated unique id for each message inside the sub collection.

Pass on an object with fields like `text` that represents the text of each message, the timestamp it is being send or created at, and the user information (such as user's `uid`, and `email`).

```js
async function handleSend(messages) {
  const text = messages[0].text;

  firestore()
    .collection('THREADS')
    .doc(thread._id)
    .collection('MESSAGES')
    .add({
      text,
      createdAt: new Date().getTime(),
      user: {
        _id: currentUser.uid,
        email: currentUser.email
      }
    });
}
```

Go back to the simulator, create a new room, and send a message.

<img src='https://miro.medium.com/max/684/1*Bw1kO21guUat419nn5Gd-A.gif' />

In Firebase console, you are going to notice that the inside the `THREADS` collection, a sub-collection called `MESSAGES` is created as shown below.

<img src='https://miro.medium.com/max/1400/1*88BW7XRZjeFhSrUqvaxA0A.png' />

Ignore the `latestMessage` field, we will cover that in the next section. The image below displays that the messages are being stored with correct information.

<img src='https://miro.medium.com/max/1400/1*t-vcelQcGA_HI9cvutPZ_g.png' />

## Display the latest message for each chat room on home screen

In this section, you are going to update the `THREADS` collection with a new field called `latestMessage` that you have already seen in the previous section, in Firebase console.

The advantage this field is going to give us (which we will complete later) is to show the last or the latest message send in a particular chat room, to be displayed on the home screen where a room's description field already exists. This will save the user time to glance at the last message without opening the room to see if there are any new messages or not.

To begin, all you have to do is refer the current thread using its id, then `set` an object that has field `latestMessage` with `text` and `createdAt` timestamp properties. Then pass on the second object that has a property of `merge`.

```js
async function handleSend(messages) {
  // ...

  await firestore()
    .collection('THREADS')
    .doc(thread._id)
    .set(
      {
        latestMessage: {
          text,
          createdAt: new Date().getTime()
        }
      },
      { merge: true }
    );
}
```

In Firestore, when `set` is used with `merge`, it update fields in a document or create that document if it does not exists. If you use `set` here without `merge`, it will overwrite the whole document.

## How to fetch messages from Firestore to display in chat room?

To display messages in a chat room once they send by a user, these messages have to be fetched from the Firestore sub-collection created previous sections, `MESSAGES`.

To fetch the data, let us use `useEffect` hook. [The effect hook](https://reactjs.org/docs/hooks-effect.html) lets you add side-effects to functional components. In the previous versions of React and React Native, this could be done by using lifecycle methods such as `componentDidMount()` and other different methods in class components. The `useEffect` hook can perform multiple side-effects such as data fetching and more in different ways.

To fetch the messages, first you have to traverse inside the current thread using its id, then the sub-collection `MESSAGES`. When traversing the sub-collection, make sure to order the messages to display them in descending order according to the time they were sent.

Then using a `querySnapshot` you can `map` the messages array from the sub collection. A Query Snapshot in Firestore contains zero objects or more objects inside an array representing the results of a query.

Create a data object that is going to contain the `id` of the document being fetched, the text of the message and its timestamp, and any other data associated with the message or in the document. The last step is required to identify that if the message is send by the user or is system generated.

In part 4 you have seen how a system generated message looks like. This means, if the message is generated when the chat room was created or not.

If the message is not system generated, that means it is send by the user. You will have to add the user's email (or any other details can be added such as user's display name)to the `data` object. Add the following snippet.

```js
async function handleSend(messages) {
  // ...

  useEffect(() => {
    const messagesListener = firestore()
      .collection('THREADS')
      .doc(thread._id)
      .collection('MESSAGES')
      .orderBy('createdAt', 'desc')
      .onSnapshot(querySnapshot => {
        const messages = querySnapshot.docs.map(doc => {
          const firebaseData = doc.data();

          const data = {
            _id: doc.id,
            text: '',
            createdAt: new Date().getTime(),
            ...firebaseData
          };

          if (!firebaseData.system) {
            data.user = {
              ...firebaseData.user,
              name: firebaseData.user.email
            };
          }

          return data;
        });

        setMessages(messages);
      });

    return () => messagesListener();
  }, []);
}
```

The messages in chat room are going to be displayed as the following.

<img src='https://miro.medium.com/max/700/1*WDL3DnVJPQPUNMIpD0NHTg.png' />

In order to make all this work, make sure to modify the following two props in return statement.

```js
<GiftedChat
      messages={messages}
      // Modify the following
      onSend={handleSend}
      user={{ _id: currentUser.uid }}
      // ...rest remains same
    />
  );
```

## How to set a system message as latest message in a chat room?

Right now the `THREADS` collection for each chat room can display the latest message sent by the user but when a thread is created, you might want to display a system, generated message to convey the same message to the user entering the chat room. To do this, open `AddRoomScreen.js` file and modify its its helper method `handleButtonPress` to add the following snippet.

First you are going to add the `latestMessage` object with its text field saying that a room is created. Do not forget to add a timestamp field along with the text field.

Second step is to add a `docRef` or a document reference to the sub-collection `MESSAGES`. Note that, at this point, when the user creates a new room, this sub-collection will be created for each chat room.

A document reference in Firestore is used to write, read or listen to a particular location or a sub-collection inside a Firestore collection.

The document or in the current case, the collection `MESSAGES` might not exist but adding this step will create the collection. This first message in a chat room is also going to be the system generated message.

```js
function handleButtonPress() {
  if (roomName.length > 0) {
    firestore()
      .collection('THREADS')
      .add({
        name: roomName,
        latestMessage: {
          text: `You have joined the room ${roomName}.`,
          createdAt: new Date().getTime()
        }
      })
      .then(docRef => {
        docRef.collection('MESSAGES').add({
          text: `You have joined the room ${roomName}.`,
          createdAt: new Date().getTime(),
          system: true
        });
        navigation.navigate('Home');
      });
  }
}
```

Now, when you create a new room through the app, here is the complete overview of how it gets reflected in Firestore.

<img src='https://miro.medium.com/max/1400/1*-P8qzzB9hQZjHljwfBym6w.png' />

<img src='https://miro.medium.com/max/1400/1*FqFGH5woXMLdH0MnlNLUtg.png' />

And here is the system message displayed in the new chat room.

<img src='https://miro.medium.com/max/700/1*eGiETDWsXMKgnczQ6nAUfA.png' />

## Customizing the system message in react-native-gifted-chat

Right now the system message generated is not as appealing and conveying inside a chat room. In this short section, let us learn how to customize that in `react-native-gifted-chat`.

Start by importing `SystemMessage` component from `react-native-gifted-chat` inside `RoomScreen.js` file.

```js
import {
  GiftedChat,
  Bubble,
  Send,
  // Add this
  SystemMessage
} from 'react-native-gifted-chat';
```

Create a new helper method called `renderSystemMessage` inside the screen component with the following snippet. In the current scenario, you are going to change the background of the system message display as well as the text styles. For that you need to edit the props `wrapperStyle` and `textStyle` of `SystemMessage` component.

Do modify the `StyleSheet` object to add styles as shown below.

```js
function renderSystemMessage(props) {
  return (
    <SystemMessage
      {...props}
      wrapperStyle={styles.systemMessageWrapper}
      textStyle={styles.systemMessageText}
    />
  );
}

// appropriate styles

const styles = StyleSheet.create({
  // ... rest of the styles remain unchanged
  systemMessageText: {
    fontSize: 14,
    color: '#fff',
    fontWeight: 'bold'
  }
});
```

Lastly, add the prop `renderSystemMessage` to `GiftedChat` component.

```js
return (
  <GiftedChat
    // rest of the props remain same
    renderSystemMessage={renderSystemMessage}
  />
);
```

Here is the output you are going to get after this step.

<img src='https://miro.medium.com/max/700/1*k8b2ObpU4FoiMfRVmXwvQw.png' />

## How to display latest message on home screen?

For every chat room on home screen there is description field that says a static message `Item description`. In this section let us change that to dynamically display the real-time latest message fetched from the Firestore collection.

Open `HomeScreen.js` and `orderBy()` when fetching name of chat rooms in the Effect hook. Then, when returning the documentSnapShot data, there is an object that contain fields like `_id` and `name`. Add another object as a field called `latestMessage` as shown below.

```js
useEffect(() => {
  const unsubscribe = firestore()
    .collection('THREADS')
    // add this
    .orderBy('latestMessage.createdAt', 'desc')
    .onSnapshot(querySnapshot => {
      const threads = querySnapshot.docs.map(documentSnapshot => {
        return {
          _id: documentSnapshot.id,
          name: '',
          // add this
          latestMessage: {
            text: ''
          },
          // ---
          ...documentSnapshot.data()
        };
      });

      setThreads(threads);

      if (loading) {
        setLoading(false);
      }
    });

  return () => unsubscribe();
}, []);
```

Next, go to the `List.Item` inside the `FlatList` component and modify the description field as shown below.

```js
description={item.latestMessage.text}
```

Go back to the simulator and you are going to see the latest message displayed.

<img src='https://miro.medium.com/max/940/1*wc1bhW2LavbuiM3dw0QCXA.png' />

Try sending a new message and that is going to be the latest message displayed on the home screen for the chat room.

<img src='https://miro.medium.com/max/684/1*JKTyv7WO-_TOtOcHPmlfBw.gif' />

There is a benefit of ordering the chat rooms according to the latest message for each room. Now the home screen is going to display that chat room on top which received it the most recent message according the timestamp (createdAt)that is associated with the message.

<img src='https://miro.medium.com/max/684/1*nDaN1lXF75iWEWg6X-0sqQ.gif' />

## What's Next?

In the [next part](https://amanhimself.dev/blog/chat-app-with-react-native-part-6) of the series we are going to fix a small bug related of status bar styles for every screen component in the current app. This is going to be done by creating a custom hook and using `react-navigation`.

😺 **You can find the complete code here at this [GitHub repo](https://github.com/amandeepmittal/react-native-examples/tree/master/ChatApp).**

## Further Reading

- [React Native’s New Architecture — Glossary of terms by Gabe Greenberg](https://www.g2i.co/blog/react-natives-new-architecture-glossary-of-terms)
- [The Effect hook in React](https://reactjs.org/docs/hooks-effect.html)
- [Debugging React Native apps](https://reactnative.dev/docs/debugging)

[Originally Published at Heartbeat.Fritz.ai](https://heartbeat.fritz.ai/chat-app-with-react-native-part-5-create-and-fetch-real-time-messages-with-firestore-86fb012edaf5)


Chat app with React Native (Part 5) - Create and Fetch Real-Time Messages with Firestore

How to integrate GraphQL and Apollo Client in React Native app

---
title: 'Chat app with React Native (part 4) - A guide to create Chat UI Screens with react-native-gifted-chat'
date: '2020-04-28'
slug: 'chat-app-with-react-native-part-4'
thumbnail: '/thumbnails/react.png'
tag: 'react-native'
canonicalUrl: 'https://heartbeat.fritz.ai/chat-app-with-react-native-part-4-create-chat-ui-screens-with-react-native-gifted-chat-7ef428a60d30'
---

![cover](https://i.imgur.com/ROYjoYo.jpg)

In [part 3](https://amanhimself.dev/blog/chat-app-with-react-native-part-3), we completed the task of integrating the Firestore to the current React Native app. The database now stores a chat room name. A new chat room can be created using a modal stack, only if the user is authenticated.

In part 4, let us proceed with further and a new screen that allows the user to send and receive messages as well as display those messages inside a chat room.

To fulfill this purpose, let us use an open-source library called [`react-native-gifted-chat`](https://github.com/FaridSafi/react-native-gifted-chat). You are going to learn how to integrate it within the current React Native app and learn how to use its "out of the box" features as props to save saves a ton of development time.

To begin, make sure to install this module by executing the following command from a terminal window.

```shell
yarn add react-native-gifted-chat
```

## Add a new screen to display messages

Start by adding a new screen file called `RoomScreen.js` inside `src/screens/` directory. This file is going to be used to display messages inside each chat room.

Then, let us add a mock chat UI screen elements to this screen. This can be done in the following steps:

- import `GiftedChat` from `react-native-gifted-chat`. This component is going to be essential in adding UI and chat functionalitie

  s

- Create a functional component `RoomScreen`, inside it, define a state variable called `messages`. This variable is going to have an empty array as its default value.
- Add some mock message data objects. Display two types of messages in each object. The first object is going to be a system message which showcases information like "The following chat room was created at X time...". The second object is going to hold a `text` message that is going to have a `user` object associated and contains user information, such as user name. Both of these messages are going to have a unique `_id`.
- Create a helper method called `handleSend` that is going to be used when sending a message in a particular chat room.
- Lastly, return the following code snippet. The `newMessage` is concatenated with previous or the initial messages using `GiftedChat.append()` method.

```js
import React, { useState } from 'react';
import { GiftedChat } from 'react-native-gifted-chat';

export default function RoomScreen() {
  const [messages, setMessages] = useState([
    /**
     * Mock message data
     */
    // example of system message
    {
      _id: 0,
      text: 'New room created.',
      createdAt: new Date().getTime(),
      system: true
    },
    // example of chat message
    {
      _id: 1,
      text: 'Henlo!',
      createdAt: new Date().getTime(),
      user: {
        _id: 2,
        name: 'Test User'
      }
    }
  ]);

  // helper method that is sends a message
  function handleSend(newMessage = []) {
    setMessages(GiftedChat.append(messages, newMessage));
  }

  return (
    <GiftedChat
      messages={messages}
      onSend={newMessage => handleSend(newMessage)}
      user={{ _id: 1 }}
    />
  );
}
```

## Change RoomScreen to stack Navigator

Each message thread is only going to be displayed when the user enters the chat room. Open `src/navigation/HomeStack.js` and add the `RoomScreen` component as the second screen to the `ChatApp` stack as shown below.

```js
import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { IconButton } from 'react-native-paper';
import HomeScreen from '../screens/HomeScreen';
import AddRoomScreen from '../screens/AddRoomScreen';

// Add this
import RoomScreen from '../screens/RoomScreen';

const ChatAppStack = createStackNavigator();
const ModalStack = createStackNavigator();

function ChatApp() {
  return (
    <ChatAppStack.Navigator
      screenOptions={{
        headerStyle: {
          backgroundColor: '#6646ee'
        },
        headerTintColor: '#ffffff',
        headerTitleStyle: {
          fontSize: 22
        }
      }}
    >
      <ChatAppStack.Screen
        name="Home"
        component={HomeScreen}
        options={({ navigation }) => ({
          headerRight: () => (
            <IconButton
              icon="message-plus"
              size={28}
              color="#ffffff"
              onPress={() => navigation.navigate('AddRoom')}
            />
          )
        })}
      />
      {/* Add this */}
      <ChatAppStack.Screen name="Room" component={RoomScreen} />
    </ChatAppStack.Navigator>
  );
}

// rest of the code remains same
```

Then, open `src/screebs/HomeScreen.js` file, and make sure to pass the `navigation` reference as prop to the function component: `export default function HomeScreen({ navigation }) {...}`.

Each chat room is displayed as an item in the FlatList. You will have to make it pressable to allow the user to enter the chat room and display the `RoomScreen` component.

Each list item can be wrapped in the `TouchableOpacity` component such that using `navigation` prop reference as the value of `onPress`, the user is allowed to navigate to the next screen.

Here is the complete code snippet after the modifications.

```js
import React, { useState, useEffect } from 'react';
import { View, StyleSheet, FlatList, TouchableOpacity } from 'react-native';
import { List, Divider } from 'react-native-paper';
import firestore from '@react-native-firebase/firestore';
import Loading from '../components/Loading';

function HomeScreen({ navigation }) {
  const [threads, setThreads] = useState([]);
  const [loading, setLoading] = useState(true);

  /**
   * Fetch threads from Firestore
   */
  useEffect(() => {
    const unsubscribe = firestore()
      .collection('THREADS')
      // .orderBy('latestMessage.createdAt', 'desc')
      .onSnapshot(querySnapshot => {
        const threads = querySnapshot.docs.map(documentSnapshot => {
          return {
            _id: documentSnapshot.id,
            // give defaults
            name: '',
            ...documentSnapshot.data()
          };
        });

        setThreads(threads);

        if (loading) {
          setLoading(false);
        }
      });

    /**
     * unsubscribe listener
     */
    return () => unsubscribe();
  }, []);

  if (loading) {
    return <Loading />;
  }

  return (
    <View style={styles.container}>
      <FlatList
        data={threads}
        keyExtractor={item => item._id}
        ItemSeparatorComponent={() => <Divider />}
        renderItem={({ item }) => (
          <TouchableOpacity
            onPress={() => navigation.navigate('Room', { thread: item })}
          >
            <List.Item
              title={item.name}
              description="Item description"
              titleNumberOfLines={1}
              titleStyle={styles.listTitle}
              descriptionStyle={styles.listDescription}
              descriptionNumberOfLines={1}
            />
          </TouchableOpacity>
        )}
      />
    </View>
  );
}

export default HomeScreen

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#f5f5f5',
    flex: 1
  },
  listTitle: {
    fontSize: 22
  },
  listDescription: {
    fontSize: 16
  }
});

```

Go to the simulator window and you are going to get the following result.

<img src='https://miro.medium.com/max/684/1*us9hK50YmGKMfhLHR62RjQ.gif' />

Great! The chat UI for each room is now accessible. Try to send a message, of course, it won't get saved since there is no database connected yet.

<img src='https://miro.medium.com/max/684/1*Z90LuoopOAmDJ6XEDNMouA.gif' />

Once the user exits the room and comes back later, only the mock message is displayed. Do notice that the system message `New room created` is displayed as well.

## Display title of each room

When you enter the chat room, did you notice that the name of the room is not being displayed correctly? It just says `Room` whereas the complete name of the first room should be `Room 1`. Let us fix this in the current section.

Open `HomeStack.js` file and modify the route for the `RoomScreen` component by adding `options` to it. The value of the title for each chat room is going to be the name of that chat room.

This can be obtained using `route` props as shown below.

```js
<ChatAppStack.Screen
  name="Room"
  component={RoomScreen}
  options={({ route }) => ({
    title: route.params.thread.name
  })}
/>
```

When using the `react-navigation` library for routing, each screen component is provided with the `route` prop automatically. This prop contains various information regarding the current route such as a place in navigation hierarchy the route component lives.

`route.params` allows access to a set of params defined when navigating. These sets of params have the name of the same chat room as stored in Firestore because in the previous section you did pass the object `thread`.

```js
<TouchableOpacity onPress={() => navigation.navigate('Room', { thread: item })}>
```

Here is the output you are going to get on the device.

<img src='https://miro.medium.com/max/684/1*EU5dtN80Hfm9DkVcrptWxw.gif' />

## Modifying the Chat screen UI: Changing the chat bubble

Gifted chat module gives an advantage for creating a Chat UI in a React Native app over building the UI from scratch. This advantage comes in the form of [props available](https://github.com/FaridSafi/react-native-gifted-chat#props) in this package.

Right now the chat bubble appears as shown below.

<img src='https://miro.medium.com/max/222/1*HDpbiswqzzq-7gWbeaUG3Q.png' />

Let us change the background color of this bubble to reflect the same color as in the header bar (which is used at many instances in the app). This is going to be done in the following steps:

- Start by importing the `Bubble` from the gifted chat module.
- Create a helper method `renderBubble` inside function component `RoomScreen`
- Return the `<Bubble/>` component from the helper function with new styles. The style properties are defined in the Gifted chat module so make sure to use the same property names.
- Lastly, on the `GiftedChat` component, enter the prop `renderBuble`.

```js
// Step 1: modify the import statement
import { GiftedChat, Bubble } from 'react-native-gifted-chat';

export default function RoomScreen() {
  // ...

  // Step 2: add a helper method

  function renderBubble(props) {
    return (
      // Step 3: return the component
      <Bubble
        {...props}
        wrapperStyle={{
          right: {
            // Here is the color change
            backgroundColor: '#6646ee'
          }
        }}
        textStyle={{
          right: {
            color: '#fff'
          }
        }}
      />
    );
  }

  return (
    <GiftedChat
      messages={messages}
      onSend={newMessage => handleSend(newMessage)}
      user={{ _id: 1, name: 'User Test' }}
      renderBubble={renderBubble}
    />
  );
}
```

With that done, here is the output you are going to get.

<img src='https://miro.medium.com/max/177/1*k-uFSzdbiXLtwEyg6CCYGw.png' />

## Adding other modifications to Chat UI

You can modify the placeholder text using the prop `placeholder` as shown below.

```js
<GiftedChat
  messages={messages}
  onSend={newMessage => handleSend(newMessage)}
  user={{ _id: 1, name: 'User Test' }}
  renderBubble={renderBubble}
  placeholder="Type your message here..."
/>
```

Previously the placeholder text says:

<img src='https://miro.medium.com/max/636/1*2lsV60N_T2aPPFeRTmEYcA.png' />

After adding the `placeholder` prop, it looks like:

<img src='https://miro.medium.com/max/654/1*JaJ8K1w8W2pbud6i9Tj7qw.png' />

You can add the prop `showUserAvatar` to always display the user avatar of the current user.

```js
<GiftedChat
  messages={messages}
  onSend={newMessage => handleSend(newMessage)}
  user={{ _id: 1, name: 'User Test' }}
  renderBubble={renderBubble}
  placeholder="Type your message here..."
  showUserAvatar
/>
```

<img src='https://miro.medium.com/max/744/1*ZmQvR95wG7tAGdPtbdtNtg.png' />

Right now, the send button only appears when the user is typing a message. Add the prop `alwaysShowSend` to always show the send button to the current user.

```js
<GiftedChat
  messages={messages}
  onSend={newMessage => handleSend(newMessage)}
  user={{ _id: 1, name: 'User Test' }}
  renderBubble={renderBubble}
  placeholder="Type your message here..."
  showUserAvatar
  alwaysShowSend
/>
```

<img src='https://miro.medium.com/max/748/1*390BD7LTZ5G2Ew_h8BYQrw.png' />

## Add a custom send button

You can also modify this send button to show a custom text or icon. Let us do that to show a custom send icon. This is going to be done in the following steps.

- Import the `Send` component form Gifted chat API.
- Import `IconButton` from `react-native-paper`.
- INside the functional component `RoomScreen`, add a helper method `renderSend` that is going to return the `IconButton` component.
- Add the prop `renderSend` to `<GiftedChat/>`.
- Add corresponding styles if any.

```js
// Step 1: import Send
import { GiftedChat, Bubble, Send } from 'react-native-gifted-chat';
// Step 2: import IconButton
import { IconButton } from 'react-native-paper';
import { View, StyleSheet } from 'react-native';

export default function RoomScreen() {
  // ...

  // Step 3: add a helper method

  function renderSend(props) {
    return (
      <Send {...props}>
        <View style={styles.sendingContainer}>
          <IconButton icon="send-circle" size={32} color="#6646ee" />
        </View>
      </Send>
    );
  }

  return (
    <GiftedChat
      messages={messages}
      onSend={newMessage => handleSend(newMessage)}
      user={{ _id: 1, name: 'User Test' }}
      renderBubble={renderBubble}
      placeholder="Type your message here..."
      showUserAvatar
      alwaysShowSend
      // Step 4: add the prop
      renderSend={renderSend}
    />
  );
}

// Step 5: add corresponding styles
const styles = StyleSheet.create({
  sendingContainer: {
    justifyContent: 'center',
    alignItems: 'center'
  }
});
```

Here is the output you are going to get after this step.

<img src='https://miro.medium.com/max/742/1*qol2YSd4FJH13CP_NWep1g.png' />

## Add a scroll to the bottom button

Right now, in the Chat UI, there is no way for the current user to scroll to the latest message. They have to manually scroll down to see the latest message in the thread. Here is a demo of the problem.

<img src='https://miro.medium.com/max/684/1*XSF9AJNiqT08s1mBiJxvDQ.gif' />

This can be solved by adding prop `scrollToBottom`.

```js
<GiftedChat
  messages={messages}
  onSend={newMessage => handleSend(newMessage)}
  user={{ _id: 1, name: 'User Test' }}
  renderBubble={renderBubble}
  placeholder="Type your message here..."
  showUserAvatar
  alwaysShowSend
  renderSend={renderSend}
  scrollToBottom
/>
```

Take a look at the down caret sign at the right side of the app shown below.

<img src='https://miro.medium.com/max/700/1*5wo3Pu65wxWdATlsTxqs3A.png' />

This is not pleasing at all with the current background of the screen. Let us modify this button with a custom background. This can be done in three simple steps.

- Add a helper method inside `RoomScreen` functional component and call this helper method `scrollToBottomComponent()`. Use `IconButton` component from `react-native-paper` to customize this button.
- Add the prop `scrollToBottomComponent` to `<GiftedChat />`.
- Add corresponding styles to the `styles` object.

```js
export default function RoomScreen() {
  // ...

  // Step 1: add helper method

  function scrollToBottomComponent() {
    return (
      <View style={styles.bottomComponentContainer}>
        <IconButton icon="chevron-double-down" size={36} color="#6646ee" />
      </View>
    );
  }

  return (
    <GiftedChat
      messages={messages}
      onSend={newMessage => handleSend(newMessage)}
      user={{ _id: 1, name: 'User Test' }}
      renderBubble={renderBubble}
      placeholder="Type your message here..."
      showUserAvatar
      alwaysShowSend
      renderSend={renderSend}
      // Step 2: add the prop
      scrollToBottomComponent={scrollToBottomComponent}
    />
  );
}

// Step 3: add corresponding styles
const styles = StyleSheet.create({
  // rest remains same
  bottomComponentContainer: {
    justifyContent: 'center',
    alignItems: 'center'
  }
});
```

Here is the output.

<img src='https://miro.medium.com/max/684/1*dDTq0Wpr_aFMyN_RWttPIg.gif' />

## Add a loading spinner when the room screen initializes

Initializing a new screen or in the current case, a chat room may take some time. It is good practice to add a loading indicator to convey the message to the user when they enter the chat room. This can be done by adding a prop called `renderLoading` which returns an `ActivityIndicator` from `react-native` core API.

- Import the `ActivityIndicator` from `react-native` core API.
- Add helper method `renderLoading()` to functional component `RoomScreen`.
- Add the prop `renderLoading` to `<GiftedChat />`.
- Add corresponding styles.

```js
// Step 1: import ActivityIndicator
import { ActivityIndicator, View, StyleSheet } from 'react-native';

export default function RoomScreen() {
  // ...

  // Step 2: add a helper method

  function renderLoading() {
    return (
      <View style={styles.loadingContainer}>
        <ActivityIndicator size="large" color="#6646ee" />
      </View>
    );
  }

  return (
    <GiftedChat
      messages={messages}
      onSend={newMessage => handleSend(newMessage)}
      user={{ _id: 1, name: 'User Test' }}
      renderBubble={renderBubble}
      placeholder="Type your message here..."
      showUserAvatar
      alwaysShowSend
      renderSend={renderSend}
      scrollToBottomComponent={scrollToBottomComponent}
      // Step 3: add the prop
      renderLoading={renderLoading}
    />
  );
}

// Step 4: add corresponding styles
const styles = StyleSheet.create({
  // rest remains same
  loadingContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  }
});
```

On the current screen you might see a loading indicator when you refresh the app for the first time or when the screen initializes for the first time.

<img src='https://miro.medium.com/max/684/1*Ztwt_qL30dreUv_JMvhhwg.gif' />

## What's Next?

In [part 5 of this series](https://amanhimself.dev/blog/chat-app-with-react-native-part-5), we are going to create messages in real-time using the Firestore database. We will be covering how using react-navigation you can get the current room's id. Then, use it with the current user from the `AuthContext` we created earlier, to add real-time message information such as a text field and a timestamp associated with it.

We will then add another real-time feature to display the latest message on the home screen under each room name's description using Firestore queries.

You can find the complete source code for this project at [this Github repo](https://github.com/amandeepmittal/react-native-examples/tree/master/ChatApp).

---

👉 Here is a list of resources used in this tutorial:

- [React Native Gifted Chat module](https://github.com/FaridSafi/react-native-gifted-chat)
- [Props available for `react-native-gifted-chat`](https://github.com/FaridSafi/react-native-gifted-chat#props)

## Further Reading

- [React - Separation of Concerns by Andrei Calazans](https://www.g2i.co/blog/react-separation-of-concerns)

[Originally Published at Heartbeat.Fritz.ai](https://heartbeat.fritz.ai/chat-app-with-react-native-part-4-create-chat-ui-screens-with-react-native-gifted-chat-7ef428a60d30)


Chat app with React Native (part 4) - A guide to create Chat UI Screens with react-native-gifted-chat

An in-depth guide on how to use React Native Image Picker

---
title: 'Chat app with React Native (part 3) - Create Firestore collections to store chat rooms'
date: '2020-04-21'
slug: 'chat-app-with-react-native-part-3'
thumbnail: '/thumbnails/react.png'
tag: 'react-native'
canonicalUrl: 'https://heartbeat.fritz.ai/chat-app-with-react-native-part-3-add-firestore-to-create-and-store-chat-rooms-94f0c7e09e9d'
---

![cover](https://i.imgur.com/ROYjoYo.jpg)

In [part 2](https://amanhimself.dev/blog/chat-app-with-react-native-part-2) of this series, we made progress with the chat app by adding email authentication using the real-time auth service from Firebase. This ensures that we have a system in place to authenticate users.

In part 3, let's extend our progress by creating and storing chat rooms in real-time using Firestore data storage, provided by the Firebase. We'll continue to explore different tips and best practices for using `react-navigation`. For example, we'll create a modal screen and expand the home stack created in the previous post.

## How to share common header options styles using screenOptions

Let us start with a simple yet a very common technique to modify header bar options across various screens in a stack navigator. This technique is a common practice that you will find using yourself with `react-navigation`.

Start by modifying the header in the home stack such that any route that is wrapped by `HomeStack` navigator is going to have a similar background color, header tint color, and font size.

This is a common practice to configure the header bar and share style properties among different routes in the same stack navigator.

Open `src/navigation/HomeStack.js` file and add a `screenOptions` prop to `Stack.Navigator`.

```js
export default function HomeStack() {
  return (
    <Stack.Navigator
      screenOptions={{
        headerStyle: {
          backgroundColor: '#6646ee'
        },
        headerTintColor: '#ffffff',
        headerTitleStyle: {
          fontSize: 22
        }
      }}
    >
      <Stack.Screen name="Home" component={HomeScreen} />
    </Stack.Navigator>
  );
}
```

Go back to the simulator and you are going to get the following result.

<img src='https://miro.medium.com/max/940/1*Jxk6KkKBzhv_rc9kXD6iMA.png' />

## Add a separate stack navigator for modal screen

In this section, you are going to create a modal screen that will allow the user in the app to create a new chat room. Later in this tutorial, the name of the chat room entered from this screen is going to be stored in the Firestore collection.

A _modal screen_ displays the content that temporarily blocks interactions with the main view. It is like a popup and usually has a different transition in terms of opening and closing of the screen. This mode of the screen is generally used to display one specific piece of information.

Here's a flowchart to help visualize the navigation flow we're trying to achieve by the end of this section.

<img src='https://miro.medium.com/max/1400/1*kU6S7zzWSrtwgkNI0eygiQ.jpeg' />

Start by creating a new screen file called `AddRoomScreen.js` inside `src/screens` directory with the following content.

```js
import React from 'react';
import { View, Text } from 'react-native';
import FormButton from '../components/FormButton';

export default function AddRoomScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Create a new chat room</Text>
      <FormButton
        mode="contained"
        title="Close Modal"
        onPress={() => navigation.goBack()}
      />
    </View>
  );
}
```

Right now, focus adding this modal screen to the Home stack navigator rather than its contents.

Also, add a temporary button to open the modal screen in the `HomeScreen.js` file.

```js
import React, { useContext } from 'react';
import { View, StyleSheet } from 'react-native';
import { Title } from 'react-native-paper';
import { AuthContext } from '../navigation/AuthProvider';
import FormButton from '../components/FormButton';

function HomeScreen({ navigation }) {
  const { user, logout } = useContext(AuthContext);

  return (
    <View style={styles.container}>
      <Title>Home Screen</Title>
      <Title>All chat rooms will be listed here</Title>
      <Title>{user.uid}</Title>
      <FormButton
        modeValue="contained"
        title="Logout"
        onPress={() => logout()}
      />
      <FormButton
        modeValue="contained"
        title="Add Room"
        onPress={() => navigation.navigate('AddRoom')}
      />
    </View>
  );
}
export default HomeScreen
```

Now open `src/navigation/HomeStack.js` file. In order to keep the modal as a separate route from other home stack routes (such as `HomeScreen`), let us create two new stack navigators in this file.

Start by importing the modal screen with the rest of the routes and create two new stack navigator instances. You can give a custom name to each instance.

```js
// ... rest of the import statements
import AddRoomScreen from '../screens/AddRoomScreen';

// create two new instances
const ChatAppStack = createStackNavigator();
const ModalStack = createStackNavigator();
```

From the snippet, the `ChatAppStack` is going to contain those screens routes that are do not require the use of a modal screen and focus only on the chat app features.

```js
function ChatApp() {
  return (
    <ChatAppStack.Navigator
      screenOptions={{
        headerStyle: {
          backgroundColor: '#6646ee'
        },
        headerTintColor: '#ffffff',
        headerTitleStyle: {
          fontSize: 22
        }
      }}
    >
      <ChatAppStack.Screen name="Home" component={HomeScreen} />
    </ChatAppStack.Navigator>
  );
}
```

The Modal stack is going to wrap both the `ChatAppStack` and the modal screen as routes. Modify the exported `HomeStack` as below. Make sure to set the mode of `ModalStack.Navigator` to `modal` and `headerMode` to `none`.

```js
export default function HomeStack() {
  return (
    <ModalStack.Navigator mode="modal" headerMode="none">
      <ModalStack.Screen name="ChatApp" component={ChatApp} />
      <ModalStack.Screen name="AddRoom" component={AddRoomScreen} />
    </ModalStack.Navigator>
  );
}
```

Go to the simulator. You are going to find the `Add room` button on the home screen as shown below.

<img src='https://miro.medium.com/max/940/1*pLjnE31zjSqkUwGiRS3ldA.png' />

Click on the button and notice the transition when the modal screen pops up.

<img src='https://miro.medium.com/max/684/1*iwaMYjCAkCv1Gf0UcnEiag.gif' />

## How to add an icon in the header bar

The modal stack is working as per the requirement. But the way the user would navigate from the home screen to modal is not by clicking a button in the center of the home screen. This action is going to be done by clicking an icon button from the header.

<img src='https://miro.medium.com/max/636/1*nA9W978m4sziQwKeepKSow.png' />

Luckily, the `react-navigation` library provides props for us to implement this action without any hassle. Import `IconButton` from `react-native-paper` UI library inside the file `src/navigation/HomeStack.js`.

```js
// rest of the imports
import { IconButton } from 'react-native-paper';
```

Then add an `options` prop with a function such that you are able to pass `navigation` prop reference. Add the following code to the `HomeScreen` route.

```js
<ChatAppStack.Screen
  name="Home"
  component={HomeScreen}
  options={({ navigation }) => ({
    headerRight: () => (
      <IconButton
        icon="message-plus"
        size={28}
        color="#ffffff"
        onPress={() => navigation.navigate('AddRoom')}
      />
    )
  })}
/>
```

Also, remove `FormButton` in `HomeScreen.js` you create in the previous section.

Here is how the home screen in the simulator looks like after this step.

<img src='https://miro.medium.com/max/940/1*x40CeNj7FEFO6Exg8mLa2Q.png' />

## Complete the modal screen

Right now the modal screen just displays a line of text and a close button but the real functionality this screen has to provide is to allow the user to enter the name of the chat room using an input field. Then, using a form button, add the chat room name in a Firestore collection.

Open `AddRoomScreen.js` and start by modifying the import statements.

```js
import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import { IconButton, Title } from 'react-native-paper';
import FormInput from '../components/FormInput';
import FormButton from '../components/FormButton';
```

Then, to add a chat room, define a state variable called `roomName` inside a functional component `AddRoomScreen`.

To modify the JSX returned from this component. Make sure to add a close button at the right corner of the screen and using custom components you can add the input field as well as the submit button.

```js
export default function AddRoomScreen({ navigation }) {
  const [roomName, setRoomName] = useState('');
  // ... Firestore query will come here later

  return (
    <View style={styles.rootContainer}>
      <View style={styles.closeButtonContainer}>
        <IconButton
          icon="close-circle"
          size={36}
          color="#6646ee"
          onPress={() => navigation.goBack()}
        />
      </View>
      <View style={styles.innerContainer}>
        <Title style={styles.title}>Create a new chat room</Title>
        <FormInput
          labelName="Room Name"
          value={roomName}
          onChangeText={text => setRoomName(text)}
          clearButtonMode="while-editing"
        />
        <FormButton
          title="Create"
          modeValue="contained"
          labelStyle={styles.buttonLabel}
          onPress={() => handleButtonPress()}
          disabled={roomName.length === 0}
        />
      </View>
    </View>
  );
}
```

Do not worry about the `handleButtonPress` method on `onPress` prop for `FormButton`. This is going to execute the Firestore query and that is what you are going to do from the next section.

The corresponding styles of the above component are defined as below.

```js
const styles = StyleSheet.create({
  rootContainer: {
    flex: 1
  },
  closeButtonContainer: {
    position: 'absolute',
    top: 30,
    right: 0,
    zIndex: 1
  },
  innerContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  title: {
    fontSize: 24,
    marginBottom: 10
  },
  buttonLabel: {
    fontSize: 22
  }
});
```

If you go to the modal screen, you are going to get the following result.

<img src='https://miro.medium.com/max/940/1*ylHD71PivqxothYaSrypfg.png' />

Here is the complete flow of the `HomeStack` navigator so far.

<img src='https://miro.medium.com/max/684/1*7d5TY6H9ZznNmdJ5QRG1UQ.gif' />

The **Create** button will remain disabled unless the user starts typing.

## Add Firestore to the Chat app

To store messages as well as user information, let us use the Firestore data storage service from Firebase. Firestore has similarities to a NoSQL database (if you are familiar with NoSQL types).

To use the Firestore database, all you have to do is install the `@react-native-firebase/firestore` package and run the command to build the app again. Open up a terminal window and execute the following command.

```shell
yarn add @react-native-firebase/firestore

# do not forget to install pods for ios
cd ios / && pod install

# after pods have been installed
cd ..
```

Do note that, the Firestore package from `react-native-firebase` depends on two other packages:

- `@react-native-firebase/app`
- `@react-native-firebase/auth`

This means that these two packages are required to install to use Firestore. For the current app, you have already installed these packages so you do not have to install them again.

The last step in this section is to rebuild the app for each OS.

```shell
# for iOS
npx react-native run-ios

# for Android

npx react-native run-android
```

That's it to install Firestore.

## Create a collection in firestore to store chat rooms

Each chat room is going to contain `x` number of messages between different users. To store a chat room in the Firestore, let's create a collection called `THREADS`.

Start by importing `firestore` in the `AddRoomScreen.js` file.

```js
// after other import statements
import firestore from '@react-native-firebase/firestore';
```

Inside the functional component `AddHomeScreen` add a handler method called `handleButtonPress`.

This method is going to have the business logic to store the name of the chat room under the collection `THREADS`. The unique id of each chat room is going to be created by the Firestore itself.

```js
function handleButtonPress() {
  if (roomName.length > 0) {
    firestore()
      .collection('THREADS')
      .add({
        name: roomName
        }
      })
      .then(() => {
        navigation.navigate('Home');
      });
  }
}
```

Go back to the simulator and try to create a new chat room.

<img src='https://miro.medium.com/max/684/1*hJ5PwM-DWhfRpunWSX4fYg.gif' />

After that, go to the Firebase database console and verify if the `THREADS` collection has a room called `Room 1` or not.

<img src='https://miro.medium.com/max/1400/1*HHM2H9Y2e2yIsDdBCk-8bg.png' />

## Display a list of chat rooms on the home screen

To display chat rooms from Firestore you are going to make use of `FlatList` form React Native. Start by adding the following the import statements inside the `src/screens/HomeScreen.js` file.

```js
import React, { useState, useEffect } from 'react';
import { View, StyleSheet, FlatList } from 'react-native';
import { List, Divider } from 'react-native-paper';
import firestore from '@react-native-firebase/firestore';

import Loading from '../components/Loading';
```

Inside the functional component `HomeScreen`, define two state variables:

- `threads` that is going to be used as the source of data for the FlatList component after the data has been fetched from the Firestore.
- `loading` variable is going to keep track of whether the data is being fetched or not.

```js
export default function HomeScreen() {
  const [threads, setThreads] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const unsubscribe = firestore()
      .collection('THREADS')
      .onSnapshot(querySnapshot => {
        const threads = querySnapshot.docs.map(documentSnapshot => {
          return {
            _id: documentSnapshot.id,
            // give defaults
            name: '',
            ...documentSnapshot.data()
          };
        });

        setThreads(threads);

        if (loading) {
          setLoading(false);
        }
      });

    /**
     * unsubscribe listener
     */
    return () => unsubscribe();
  }, []);

  if (loading) {
    return <Loading />;
  }

  // ...rest of the component
}
```

Using the hook `useEffect` in the above snippet you can query the Firestore to fetch the name of chat rooms from the collection `THREADS`.

When the component loads, to fetch the existing chat rooms or in other words, to read the data from the Firestore, start by declaring a `unsubscribe` listener to the query. This listener is going to subscribe to any updates. These updates can be new or existing chat rooms. Declaring a listener here is important because when the screen unmounts, it is important to unsubscribe from this listener.

Using the `querySnapShot`, you are going fetch every document or the chat thread is going to be the part of the the state variable threads. At this point, data is returned from the query, as well as a default object that contains the `_id`(required as unique if for each item in the `FlatList` component), and the name of the chat room.

Here is the complete JSX rendered by this component.

```js
<View style={styles.container}>
  <FlatList
    data={threads}
    keyExtractor={item => item._id}
    ItemSeparatorComponent={() => <Divider />}
    renderItem={({ item }) => (
      <List.Item
        title={item.name}
        description="Item description"
        titleNumberOfLines={1}
        titleStyle={styles.listTitle}
        descriptionStyle={styles.listDescription}
        descriptionNumberOfLines={1}
      />
    )}
  />
</View>
```

The [`Divider` component](https://callstack.github.io/react-native-paper/divider.html) is a lightweight separator provided by UI library `react-native-paper`. Here are the styles associated with the above JSX.

```js
const styles = StyleSheet.create({
  container: {
    backgroundColor: '#f5f5f5',
    flex: 1
  },
  listTitle: {
    fontSize: 22
  },
  listDescription: {
    fontSize: 16
  }
});
```

Go back to the simulator device and you are going to get the following result.

<img src='https://miro.medium.com/max/684/1*5owHh4tZ5mmOyVfsn9kOwA.gif' />

## Conclusion

The main objective of this tutorial is to create and store chat room names in a Firestore cloud database collection as well as integrate the configure the Firestore in our current app. This objective has been completed among other tips and techniques to create a modal screen and share header bar modifications among different route screens.

## What's Next?

In the [next part](https://amanhimself.dev/blog/chat-app-with-react-native-part-4) of this series, we are going to explore how to integrate and use [`react-native-gifted-chat`](https://github.com/FaridSafi/react-native-gifted-chat) which is one of the most important, open source, and actively maintained library to use when building a chat app using React Native. The "out of the box" features it provides in terms of mere props are so helpful and saves a ton of development time.

You can find the complete source code for this project at [this Github repo](https://github.com/amandeepmittal/react-native-examples/tree/master/ChatApp).

👉 Here is a list of resources used in this tutorial:

- Reactjs [Context API](https://reactjs.org/docs/context.html#reactcreatecontext)
- [Firebase Authentication reference](https://invertase.io/oss/react-native-firebase/v6/auth/quick-start) from `react-native-firebase`
- Getting started with stack navigator using `react-navigation` v5 [here](https://heartbeat.fritz.ai/getting-started-with-stack-navigator-using-react-navigation-5-in-react-native-and-expo-apps-4c516becaee1)


Chat app with React Native (part 3) - Create Firestore collections to store chat rooms

---
title: 'How to add a Search bar in a FlatList in React Native apps'
date: '2020-04-16'
slug: 'add-search-bar-to-a-flatlist-in-react-native'
thumbnail: '/thumbnails/expo.png'
tag: 'expo'
canonicalUrl: 'https://blog.crowdbotics.com/add-search-bar-flatlist-react-native-apps/'
---

![cover_image](https://i.imgur.com/zeVnUHd.png)

> Originally published at [Crowdbotics.com](https://blog.crowdbotics.com/add-search-bar-flatlist-react-native-apps)

There are few ways to create scrollable lists in React Native. Two of the common ways available in React Native core are `ScrollView` and `FlatList` components. Each has its strength and in this tutorial, let us dive deep to create a search bar with `FlatList` component.

The final result you are going to achieve at the end of this tutorial is shown below.

![ss8](https://i.imgur.com/a5FpiUm.gif)

## Table of contents

- Getting started
- What is FlatList?
- Basic usage of a FlatList component
- Fetching data from Remote API in a FlatList
- Adding a custom Separator to FlatList component
- Adding a Search bar
- Run the app
- Add clear button to input text field
- Conclusion

## Getting started

For the demo we are going to create in this tutorial, I am going to use [Expo](https://expo.io/). You are free to choose and use anything between an Expo CLI or a `react-native-cli`.

To start, let us generate a React Native app using Expo CLI and then install the required dependency to have a charming UI for the app. Open up a terminal window and run the following commands in the order they are mentioned.

```shell
expo init searchbarFlatList

cd searchbarFlatList

yarn install @ui-kitten/components @eva-design/eva lodash.filter

expo install react-native-svg
```

_Note_: The dependency `react-native-svg` is required as a peer dependency for the UI kitten library.

UI Kitten is ready to use now. To check, everything has installed correctly, let us modify `App.js` file as the following snippet:

```js
import React from 'react';
import { ApplicationProvider, Layout, Text } from '@ui-kitten/components';
import { mapping, light as lightTheme } from '@eva-design/eva';

const HomeScreen = () => (
  <Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Text category="h1">HOME</Text>
  </Layout>
);

const App = () => (
  <ApplicationProvider mapping={mapping} theme={lightTheme}>
    <HomeScreen />
  </ApplicationProvider>
);

export default App;
```

The `ApplicationProvider` accepts two props, `mapping` and `theme`.

To run this demo, open up the terminal window and execute the following command.

```shell
expo start
```

I am using an iOS simulator for the demo. Here is the output of the above code snippet.

![ss1](https://i.imgur.com/TZ173Uv.png)

## What is FlatList?

The component `FlatList` is an efficient way to create scrolling data lists in a React Native app. It has a simple API to work with and is more efficient and preferment with a large amount of information to display in comparison to its alternate.

By default, you can just pass in an array of data and this component will do its work. You do not have to take care of formatting the data too often.

## Basic usage of a FlatList component

There are three primary props that a FlatList component requires to display a list of data:

- `data`: an array of data that is used to create a list. Generally, this array is built of multiple objects.
- `renderItem`: is a function that takes an individual element from the `data` array and renders it on the UI.
- `keyExtractor`: it tells the list of data to use the unique identifiers or `id` for an individual element.

To get understand this pragmatically, let us build a mock an array of data and using `FlatList`, let us display it on our demo app. To start, import the following statements in `App.js` file.

```js
import React from 'react';
import { FlatList, View, Text } from 'react-native';
```

Then, create an array of mock data.

```js
const mockData = [
  { id: '1', text: 'Expo 💙' },
  { id: '2', text: 'is' },
  { id: '3', text: 'Awesome!' }
];
```

Now, modify the `HomeScreen` component with the following snippet:

```js
const HomeScreen = () => (
  <View
    style={{
      flex: 1,
      paddingHorizontal: 20,
      paddingVertical: 20,
      marginTop: 40
    }}
  >
    <FlatList
      data={mockData}
      keyExtractor={item => item.id}
      renderItem={({ item }) => (
        <Text style={{ fontSize: 22 }}>
          {item.id} - {item.text}
        </Text>
      )}
    />
  </View>
);
```

If the Expo cli command to run the development server is still running, you are going to get the following result.

![ss2](https://i.imgur.com/penUpT7.png)

## Fetching data from Remote API in a FlatList

You can even play around with it. Try to fetch data from a real-time remote API and display them in the list instead of mock data. For a start, you can use a public API URL such as [Randomuser.me API](https://randomuser.me/api/). The result to obtain at the end of this section is displayed below.

![ss3](https://i.imgur.com/cAwKEaD.png)

Open, `App.js` file and a state object with some properties to keep track of data from the Random User API. Also, do not forget to modify the import statements.

```js
// modify the import statements as below
import React from 'react';
import {
  FlatList,
  View,
  ActivityIndicator,
  TouchableOpacity
} from 'react-native';
import { ApplicationProvider, Text, Avatar } from '@ui-kitten/components';
import { mapping, light as lightTheme } from '@eva-design/eva';

// add a state object to the HomeScreen component
class HomeScreen extends React.Component {
  state = {
    loading: false,
    data: [],
    page: 1,
    seed: 1,
    error: null
  };

  // ... rest of the code
}
```

With the HTTP request to the API URL, let us fetch the first 20 results for now. Create a handler method called `makeRemoteRequest` that uses JavaScript's `fetch(url)` where `url` is the API request. It will fetch the results in JSON format. In case of a successful response from the API, the loading indicator (_which is going to add later_) will be false.

Also, using the lifecycle method `componentDidMount`, you can render the list of random users at the initial render of the `HomeScreen` component.

```js
 componentDidMount() {
 this.makeRemoteRequest()
 }

 makeRemoteRequest = () => {
 const { page, seed } = this.state
 const url = `https://randomuser.me/api/?seed=${seed}&page=${page}&results=20`
 this.setState({ loading: true })

 fetch(url)
 .then(res => res.json())
 .then(res => {
 this.setState({
 data: page === 1 ? res.results : [...this.state.data, ...res.results],
 error: res.error || null,
 loading: false
 })
 })
 .catch(error => {
 this.setState({ error, loading: false })
 })
 }
```

Next, add a `renderFooter` handler method that is going to display a loading indicator based on the value from the state object. This indicator is shown when the list of data in still being fetched. When the value of `this.state.loading` is true, using the `ActivityIndicator` from react-native components, a loading indicator on the UI screen is shown.

```js
renderFooter = () => {
  if (!this.state.loading) return null;

  return (
    <View
      style={{
        paddingVertical: 20,
        borderTopWidth: 1,
        borderColor: '#CED0CE'
      }}
    >
      <ActivityIndicator animating size="large" />
    </View>
  );
};
```

Here is the output you are going to get when the loading indicator is shown.

![ss5](https://i.imgur.com/FYDMKsp.png)

## Adding a custom Separator to FlatList component

Previously, you learned about the three most important props in the FlatList component. It is so flexible that it comes with extra props to render different components to make UI as pleasing to the user. One such prop is called `ItemSeparatorComponent`. You can add your own styling with custom JSX.

To do so, add another handler method called `renderSeparator`. It consists of rendering a `View` with some styling.

```js
renderSeparator = () => {
  return (
    <View
      style={{
        height: 1,
        width: '86%',
        backgroundColor: '#CED0CE',
        marginLeft: '5%'
      }}
    />
  );
};
```

This completes all of the handler method currently required. Now, let us replace the previous `FlatList` component in `App.js` file with the following snippet.

A list of user names is going to be rendered with an individual item as the user. When pressed it shows an alert message for now but in real-time app, it will go on to display the complete user profile or user's contact.

The individual items in the list are going to be separated by the `renderSeparator` method as well as each item is going to display a user image which is composed of `Avatar` component from `react-native-ui-kitten`. The data is coming from the state object.

```js
<FlatList
  data={this.state.data}
  renderItem={({ item }) => (
    <TouchableOpacity onPress={() => alert('Item pressed!')}>
      <View
        style={{
          flexDirection: 'row',
          padding: 16,
          alignItems: 'center'
        }}
      >
        <Avatar
          source={{ uri: item.picture.thumbnail }}
          size="giant"
          style={{ marginRight: 16 }}
        />
        <Text
          category="s1"
          style={{
            color: '#000'
          }}
        >{`${item.name.first} ${item.name.last}`}</Text>
      </View>
    </TouchableOpacity>
  )}
  keyExtractor={item => item.email}
  ItemSeparatorComponent={this.renderSeparator}
  ListFooterComponent={this.renderFooter}
/>
```

From the above snippet, you can also notice that the loading indicator handler method `renderFooter()` is also used as the value of a prop called `ListFooterComponent`.

You can also use this prop to render other information at the bottom of all the items in the list. One example is to fetch more items in the list and show the loading indicator when the request is made.

Here is the output so far.

![ss4](https://i.imgur.com/eszTsxG.gif)

## Adding a Search bar

To create a search bar on top of the FlatList, you need a component that scrolls away when the list is scrolled. One possible solution is to create a custom Search bar component and render it as the value of `ListHeaderComponent` prop in a FlatList.

Open `App.js` file and add the following prop to the list.

```js
<FlatList
  // rest of the props remain same
  ListHeaderComponent={this.renderHeader}
/>
```

The search bar component is going to be an input field that can take the user's name from the end-user. To build one, let us start by modifying the import statements as below.

```js
import filter from 'lodash.filter';
import {
  ApplicationProvider,
  Text,
  Avatar,
  Input
} from '@ui-kitten/components';
```

Next, modify the `state` object and the following variables to it. The `query` is going to hold the search term when the input is provided. The `fullData` is a temporary array that a handler method is going to filter the user's name on the basis of a query.

```js
state = {
  // add the following
  query: '',
  fullData: []
};
```

Since you are already storing the `results` fetched from the remote API, state variable `data`, let us do the same for `fullData` as well. Add the following inside the handler method `makeRemoteRequest()`.

```js
makeRemoteRequest = () => {
  const { page, seed } = this.state;
  const url = `https://randomuser.me/api/?seed=${seed}&page=${page}&results=20`;
  this.setState({ loading: true });

  fetch(url)
    .then(res => res.json())
    .then(res => {
      this.setState({
        data: page === 1 ? res.results : [...this.state.data, ...res.results],
        error: res.error || null,
        loading: false,

        // ---- ADD THIS ----
        fullData: res.results
      });
    })
    .catch(error => {
      this.setState({ error, loading: false });
    });
};
```

Next, add the handler method that is going to handle the search bar. By default, it is going to format the search term provided as a query to lowercase. The user's name is filtered from the state variable `fullData` while the state variable `data` stores the final results after the search to render the correct user.

```js
handleSearch = text => {
  const formattedQuery = text.toLowerCase();
  const data = filter(this.state.fullData, user => {
    return this.contains(user, formattedQuery);
  });
  this.setState({ data, query: text });
};
```

The `contains` handler method is going to look for the query. It accepts two parameters, the first and last name of the user and the formatted query to lowercase from `handleSearch()`.

```js
contains = ({ name, email }, query) => {
  const { first, last } = name;
  if (first.includes(query) || last.includes(query) || email.includes(query)) {
    return true;
  }
  return false;
};
```

Lastly, add `renderHeader` to render the search bar on the UI.

```js
renderHeader = () => (
  <View
    style={{
      backgroundColor: '#fff',
      padding: 10,
      alignItems: 'center',
      justifyContent: 'center'
    }}
  >
    <Input
      autoCapitalize="none"
      autoCorrect={false}
      onChangeText={this.handleSearch}
      status="info"
      placeholder="Search"
      style={{
        borderRadius: 25,
        borderColor: '#333',
        backgroundColor: '#fff'
      }}
      textStyle={{ color: '#000' }}
    />
  </View>
);
```

That's it to add a search bar to the FlatList component.

## Run the app

To run the app, make sure the `expo start` command is running. Next, go to Expo client and you are going to be prompted by the following screen:

![ss6](https://i.imgur.com/nUcoa0G.png)

Next, try to add a user name from the list being rendered.

![ss7](https://i.imgur.com/KCL5zYz.gif)

## Add clear button to input text field

The last thing I want to emphasize is that using a custom UI component from a UI library such as UI Kitten, you can use general `TextInputProps` from React Native core as well. A few examples are props such as `autoCapitalize`, and `autoCorrect`.

Let us add another prop called `clearButtonMode` that allows the input field to have a clear button appear on the right side. Add the prop to the `Input` inside `renderHeader()`.

```js
<Input
  // rest of the props remain same
  clearButtonMode="always"
/>
```

Now go back to the Expo client and see it in action

![ss8](https://i.imgur.com/fQvxr4j.gif)

## Conclusion

This brings an end to this current tutorial. The screen implemented in this demo is from one of the templates from **Crowdbotics' react-native collection**.

We use UI Kitten for our latest template libraries. Find more about how to create custom screens like this from our open source project [here](https://github.com/crowdbotics/blueprint-react-native-contacts-screen).



How to add a Search bar in a FlatList in React Native apps

---
title: 'Chat app with React Native (part 2) - Firebase Email Authentication with react-native-firebase'
date: '2020-04-16'
slug: 'chat-app-with-react-native-part-2'
thumbnail: '/thumbnails/react.png'
tag: 'react-native'
canonicalUrl: 'https://heartbeat.fritz.ai/chat-app-with-react-native-part-2-firebase-user-authentication-with-react-native-firebase-533352870497'
---

![cover](https://i.imgur.com/ROYjoYo.jpg)

In [the first part of this tutorial series](https://amanhimself.dev/blog/chat-app-with-react-native-part-1) to build a chat-based app in React Native, we learned how to create reusable form elements using the react-native-paper UI library. Along with that, we learned how to install the navigation library react-navigation and configure a basic authentication stack navigator using two routes.

In this tutorial, let us start using a backend service to add real-time features to the Chat app. For backend services, I am going to use Firebase. You are going to learn how to install and configure Firebase SDK in a react native app with the help of [`react-native-firebase`](https://rnfirebase.io/) module as well as set up and configure Email authentication. In order to follow this tutorial and future posts, you are required to use a Firebase project.

## Create a new Firebase project from console

To access the Firebase credentials for each mobile OS platform and configure them to use Firebase SDK, create a new Firebase project or use one if you have access already from [Firebase console](http://console.firebase.google.com/), you can skip this step.

Create a new project as shown below.

<img src='https://miro.medium.com/max/1400/1*wYi5SITEofv4nuIAPnQglg.png' />

Complete the details of your Firebase project:

<img src='https://miro.medium.com/max/1090/1*UDDFg0ZBF7w1jwRRIqxcwA.png' />

Click the button **Create project** and you are going to be redirected to the dashboard screen. That's it. You have successfully created a new Firebase project.

Now make sure that the **Email** **Sign-in method** is enabled. From the Firebase console and navigate to **Authentication** section from the side menu.

<img src='https://miro.medium.com/max/257/1*mGwJz9i3SAzboUgZhs21Ng.png' />

Go to the second tab **Sign-in method** and make sure to enable the **Email** sign-in provider.

<img src='https://miro.medium.com/max/1400/1*lYvrmJXPQBRrs8Xpvqn05w.png' />

## Add Firebase SDK to React Native app

If you have used `react-native-firebase` version 5 or below, you must have noticed that it was a monorepo that used to manage all Firebase dependencies from one module.

Version 6 of this library wants you to only install those dependencies based on Firebase features that you want to use. For example, in the current app, to support the email authentication feature you are going to install the auth and core app package.

From the terminal window execute the following command.

```shell
yarn add @react-native-firebase/app @react-native-firebase/auth
```

## Add Firebase credentials to your iOS app

Firebase provides a file called `GoogleService-Info.plist` that contains all the API keys as well as other credentials for iOS devices to authenticate the correct Firebase project.

To get these credentials, go to back to the [Firebase console](http://console.firebase.google.com/) in a browser window. From the dashboard screen of your Firebase project, open **Project settings** from the side menu.

<img src='https://miro.medium.com/max/241/1*Vh9zbrjZEGjKJl0XDCfFQQ.png' />

Go to **Your apps** section and click on the icon iOS to select the platform.

<img src='https://miro.medium.com/max/1396/1*nYRgVjO8DFSOdOJhPU-1DA.png' />

Enter the application details and click on **Register app**.

<img src='https://miro.medium.com/max/1270/1*Z1v4E3vhPGXmwfwrFtaxsA.png' />

Then download the `GoogleService-Info.plist` file as shown below.

<img src='https://miro.medium.com/max/1400/1*mKKqIHaDcv2UQsG-3idn7Q.png' />

Open Xcode, then open the file `/ios/ChatApp.xcodeproj` file. Right-click on the project name and **Add Files** option, then select the file to add to this project.

<img src='https://miro.medium.com/max/273/1*800RInfgPmKJXt_k58xQ4w.png' />

Then open `ios/ChatApp/AppDelegate.m` and add the following header.

```c
#import <Firebase.h>
```

In the same file, within the `didFinishLaunchingWithOptions` method, add the following configure method.

```c
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    if ([FIRApp defaultApp] == nil) {
      [FIRApp configure];
    }
```

Lastly, go back to the terminal window to install pods.

```js
cd ios/ && pod install
# after pods are installed
cd ..
```

Make sure you build the iOS app.

```js
npx react-native run-ios
```

That's it. The configuration to set up a Firebase SDK and credentials in a React Native app is complete.

## Create a home screen

In the previous post, you have successfully configured an Auth stack that displays those screens when the end-user is not authorized or logged in inside the app. There are a set of screens that are only going to be accessible to the user when they are logged in. Let us call the group of screens that are visible after login, home stack.

One such screen is going to be a home screen where all the chat rooms are going to be listed. In this section, let us start by creating a basic home screen such that you can complete navigational flow between the home stack and the auth stack.

Create a new screen component called `HomeScreen.js` inside `src/screens/` directory with the following code snippet.

```js
import React from 'react';
import { View, StyleSheet } from 'react-native';
import { Title } from 'react-native-paper';

function HomeScreen() {
  return (
    <View style={styles.container}>
      <Title>Home Screen</Title>
      <Title>All chat rooms will be listed here</Title>
      <FormButton modeValue="contained" title="Logout" />
    </View>
  );
}

export default HomeScreen

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

## Create home stack navigator

Create a new stack navigator file called `HomeStack.js` inside `src/navigation.js` that is going to have those routes which are only available after logging in. You can think of these routes as protected routes.

Open this file and add the following code snippet. Nothing new is going in terms of creating a stack navigator as shown below.

```js
import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from '../screens/HomeScreen';

const Stack = createStackNavigator();

export default function HomeStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
    </Stack.Navigator>
  );
}
```

## Create an auth provider

In this section, you are going to create an authentication provider to check whether the user is logged in or not and access them if they are logged in.

Create a new file called `AuthProvider.js` inside `src/navigation/`. Start by importing the following statements.

```js
import React, { createContext, useState } from 'react';
import auth from '@react-native-firebase/auth';
```

Then create an `AuthContext` and make sure to export it since you are going to use it on several different screens.

```js
export const AuthContext = createContext({});
```

In Reactjs, the [Context API](https://reactjs.org/docs/context.html#reactcreatecontext) is designed to share data that is considered global for a tree of React components. When you are creating a context (like above), there is a requirement to pass a default value. This value is used when a component does not have a matching Provider.

The Provider allows the React components to subscribe to the context changes. To create an auth provider, export a function called `AuthProvider`. This provider is going to allow the screen components to access the current user in the application. Define a state variable called `user`.

```js
export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);

  return (
    <AuthContext.Provider
      value={{
        user,
        setUser,
        login: async (email, password) => {
          try {
            await auth().signInWithEmailAndPassword(email, password);
          } catch (e) {
            console.log(e);
          }
        },
        register: async (email, password) => {
          try {
            await auth().createUserWithEmailAndPassword(email, password);
          } catch (e) {
            console.log(e);
          }
        },
        logout: async () => {
          try {
            await auth().signOut();
          } catch (e) {
            console.error(e);
          }
        }
      }}
    >
      {children}
    </AuthContext.Provider>
  );
};
```

In the `value` prop above, also define some functions. These functions are now available to be used anywhere in the screens component tree using React Context.

Each of the functions is consuming Firebase methods to interact with real-time Firebase backend service. Both the login and register functions require the user's `email` and `password` to verify/save credentials. The logout method invokes a simple `signOut()` method. All these Firebase methods are available from the `@react-native-firebase/auth` package. Do note that, all these functions are asynchronous actions and thus, using `async await` syntax helps.

## Wrapping routes with auth provider

Now, that the provider is created, but how to use for a set of components in the current app tree? Well, you have to wrap this provider around the `Routes` such as to use the helper functions as well as the value of current `user` (as described above) in the screen components.

Open `navigation/index.js` file and modify it as follows.

```js
import React from 'react';
import { Provider as PaperProvider } from 'react-native-paper';
import { AuthProvider } from './AuthProvider';
import Routes from './Routes';

/**
 * Wrap all providers here
 */

export default function Providers() {
  return (
    <PaperProvider>
      <AuthProvider>
        <Routes />
      </AuthProvider>
    </PaperProvider>
  );
}
```

Remember, from the previous post, we added that comment that to wrap all components using all providers in this file? Well, that's what this file is for.

## Check if the user is logged in or not

To check if the user is logged or not, let us modify the `navigation/Routes.js` file. Using the value of the `user` from the auth provider, you are going to switch between the stack navigators. To start, make sure you imported the following statements.

```js
import React, { useContext, useState, useEffect } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import auth from '@react-native-firebase/auth';
import AuthStack from './AuthStack';
import HomeStack from './HomeStack';
import { AuthContext } from './AuthProvider';
import Loading from '../components/Loading';
```

From the above snippet, ignore the `Loading` component for now. You are going to create it at the end of this section.

Now, inside the `Routes` function, you are two define two state variables `initializing` and `loading` to check whether the user's state is logged in or not. Also, from the context value, fetch `user` and `setUser`.

Then, define a function called `onAuthStateChanged` which is going to handle user state changes. Using `useEffect` hook, you can subscribe to this state change function and make sure you unsubscribe it when the component unmounts. This method allows you to subscribe to real-time events when the user performs an action. The action here can be, logging in, signing out, and so on.

```js
export default function Routes() {
  const { user, setUser } = useContext(AuthContext);
  const [loading, setLoading] = useState(true);
  const [initializing, setInitializing] = useState(true);

  // Handle user state changes
  function onAuthStateChanged(user) {
    setUser(user);
    if (initializing) setInitializing(false);
    setLoading(false);
  }

  useEffect(() => {
    const subscriber = auth().onAuthStateChanged(onAuthStateChanged);
    return subscriber; // unsubscribe on unmount
  }, []);

  if (loading) {
    return <Loading />;
  }

  return (
    <NavigationContainer>
      {user ? <HomeStack /> : <AuthStack />}
    </NavigationContainer>
  );
}
```

Lastly, create a new component file called `Loading.js` inside `src/components/` directory. This component is going to be responsible to display a loading spinner.

```js
import React from 'react';
import { View, ActivityIndicator, StyleSheet } from 'react-native';

export default function Loading() {
  return (
    <View style={styles.loadingContainer}>
      <ActivityIndicator size="large" color="#6646ee" />
    </View>
  );
}

const styles = StyleSheet.create({
  loadingContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  }
});
```

## Completing the app

In order for the user to perform auth actions in the app, you have to use the context in each of the screen components for different actions.

Start by opening `LoginScreen.js`. Import `useContext` from react and `AuthContext` from `AuthProvider`.

```js
import React, { useState, useContext } from 'react';
// rest of the import statements remain same
import { AuthContext } from '../navigation/AuthProvider';

export default function LoginScreen({ navigation }) {
  const { login } = useContext(AuthContext);

  // rest remains statements
}
```

Inside the `LoginScreen` function, make sure to add an `onPress` prop as shown below.

```js
<FormButton
  title="Login"
  modeValue="contained"
  labelStyle={styles.loginButtonLabel}
  onPress={() => login(email, password)}
/>
```

Similarly, you have to modify the `SignupScreen.js` file.

```js
import React, { useState, useContext } from 'react';
// rest of the import statements remain same
import { AuthContext } from '../navigation/AuthProvider';

export default function SignupScreen({ navigation }) {
  const { register } = useContext(AuthContext);
  // rest remains statements
}

// Add the onPress prop to <FormButton />

<FormButton
  title="Signup"
  modeValue="contained"
  labelStyle={styles.loginButtonLabel}
  onPress={() => register(email, password)}
/>;
```

Lastly, modify the `HomeScreen` to add a sign out button and when the user is in the logged-in state, display their user `uid` (_the unique identifier in Firebase to differentiate and store different users_).

```js
import React, { useContext } from 'react';
import { View, StyleSheet } from 'react-native';
import { Title } from 'react-native-paper';
import { AuthContext } from '../navigation/AuthProvider';
import FormButton from '../components/FormButton';

function HomeScreen() {
  const { user, logout } = useContext(AuthContext);

  return (
    <View style={styles.container}>
      <Title>Home Screen</Title>
      <Title>All chat rooms will be listed here</Title>
      <Title>{user.uid}</Title>
      <FormButton
        modeValue="contained"
        title="Logout"
        onPress={() => logout()}
      />
    </View>
  );
}
export default HomeScreen

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

Go to the simulator, and you are going to get similar results as shown below. Perform these steps. Try creating a new user from the sign-up screen, and you are going to get their `uid` on the home screen.

<img src='https://miro.medium.com/max/684/1*2HWlA1jyqJzAIhxgHDB0sg.gif' />

You can verify the `uid` of the current user by going to the dashboard screen from Firebase console.

<img src='https://miro.medium.com/max/1400/1*NVUhPQOP2YjgYF_qmCdXBQ.png' />

## Conclusion

_Congratulations!_ You've completed this tutorial and successfully added an authentication flow between the two stack navigators. In the next part of this series, we'll explore more features such as creating and storing chat rooms in a collection in Firestore, as well as displaying all chat rooms on the home screen. To create a new chat room, we'll create a new modal screen and make changes to the current home stack accordingly.

---

## What's Next?

In the [next post](https://amanhimself.dev/blog/chat-app-with-react-native-part-3) of this series, we are going to explore how to create a modal screen using `react-navigation` stack navigator. This modal screen is going to have separate navigator as well as to be used to create a new chat room.

Then, we are going to add Firebase NoSQL database Firestore and add a query to store the name of a chat room in a collection.

You can find the complete source code for this project at [this Github repo](https://github.com/amandeepmittal/react-native-examples/tree/master/ChatApp).

---

👉 Here is a list of resources used in this tutorial:

- Reactjs [Context API](https://reactjs.org/docs/context.html#reactcreatecontext)
- [Firebase Authentication reference](https://invertase.io/oss/react-native-firebase/v6/auth/quick-start) from `react-native-firebase`
- Getting started with stack navigator using `react-navigation` v5 [here](https://heartbeat.fritz.ai/getting-started-with-stack-navigator-using-react-navigation-5-in-react-native-and-expo-apps-4c516becaee1)

Originally published at [Heartbeat.Fritz.Ai](https://heartbeat.fritz.ai/chat-app-with-react-native-part-2-firebase-user-authentication-with-react-native-firebase-533352870497).


Chat app with React Native (part 2) - Firebase Email Authentication with react-native-firebase

---
title: 'Blogging tips after 3 years and a 100+ posts'
slug: 'blogging-tips-after-3-years'
date: '2020-04-13'
thumbnail: '/thumbnails/writing.png'
tag: 'writing'
canonicalUrl: 'https://amanhimself.dev/blog/blogging-tips-after-3-years/'
---

![cover_image](https://i.imgur.com/XHghbGg.jpg)

> Your time is limited... - Steve Jobs

A blog can be a useful piece for many reasons not only to you but to many others. Such it has been in my journey. Not only I have been able to generate leads (being a contract developer, it helps), it has been one of the most important things I have done in my career of being a dev. Sometimes, I do go back and read my blog posts when seeking information for a specific topic.

I've been [blogging](https://amanhimself.dev) in tech and writing tutorials using various JavaScript frameworks (Node.js, Reactjs, React Native, Gatsby) for three years now. One of the biggest advantages through blogging I have found lies in the previous sentence. I have the freedom to try and play around with many different stacks and frameworks. This helps me understand about the betterment of their use case.

The motivation behind this article is to share my thoughts on blogging since I have been asked too many times to provide some insight from my journey and why I think blogging can help you achieve your goals at a faster rate if you are willing to dip your toes. Or let us just say you want to share what you know and you find blogging as the medium to do so.

## Its about consistency

One of the major lessons I have learned from blogging is that to build an audience or if you are trying to scratch that itch of sharing what you know, you have to be consistent. That said, it doesn't matter how many blog posts you write and publish in a week or a month, achieving the deadlines you set for yourself, you need to be diligent.

When I started blogging on [Medium](https://medium.com/@amanhimself) I wasn't much consistent for the first year. But I was putting content out in form shorter posts or long length tutorials once in a while.

After a while, it made me realize how far I have come and how can I improve managing my time if I want to continue to publish more content. It helps me to create a schedule in my daily routine and dedicate several hours in a week either researching or building app demos and writing tutorials around them.

## Topic consistency is a thing too

Apart from managing one's time and schedule, you have to be focused as to what your blog is going to be about. For example, when I started blogging, for a long time, I was writing posts on Node.js and backend. With time, my focus of work shifted towards front-end development and more precisely, towards the React Native ecosystem.

In recent times, my focus on writing tutorials on what I do and know shifted with that. You have to keep the content you are sharing in some sense, professional for the audience to read. You cannot assume the type of reader you are going to have.

## Draft your posts in advance

Plan ahead. This is the best suggestion I can give it to you if you are interested in pursuing blogging in tech for a longer period of time.

Draft your posts in advance and make sure that it helps you stick to your publishing schedule even when you are taking vacations or having a week off.

I usually write almost all of my blog posts in Markdown format and store each draft on my laptop, inside a directory of [my blog site](https://amanhimself.dev). This way, it saves me time when I publish them since I use Gatsby and Markdown format for each blog post.

When I publish on sites like [Medium](https://medium.com/@amanhimself) that do not support Markdown format completely, I use a tool called [Markdown to Medium](https://markdowntomedium.com/) which allows you to publish markdown formatted posts on Medium with correct syntax highlighting **( this is important if your post contain code snippets)** using editable GitHub gists. It is fast and it works like a charm. (_Shoutout to [Jake Bennett](https://twitter.com/jacobbennett) for creating it and making it free to use_). However, at the same time, publishing on sites like [Dev.to](https://dev.to/amanhimself), Markdown can be your friend.

## List your ideas

Having a list of ideas is beneficial. Not every day you are going to feel like brainstorming about new topics or micro-managing a bigger topic in its subparts.

This helps you follow the previous step too, and help you plan with a clearer vision of what you might be writing or publishing in upcoming weeks or months.

Use tools that are favorable to you to manage a list of ideas. I use Notion to track each blog post. From the idea to the date, it gets published.

You can decide on what topics you want to write about. Not everything has to be too technical or walk through about building "X" with a specific framework or a stack or have to belong. It can be something work-related you are passionate about, something that you might find super simple (like writing Redux sagas) but it helps someone less experienced or who are just starting in their career.

## Publish on your platform

This is a lesson I have learned late and in a hard way. Even though I have been professionally blogging for about two years now, I only did create and hosted my blog in the middle of last year.

I don't want you to make this mistake. Since day one, make sure you have a blog hosted on under your domain and it is linked with your portfolio website. It doesn't have to be pretty. Even though you are writing on other platforms or for publications, make sure to ask about their policy of re-publishing the post on your platform. Most publications do allow and generally have time span after which you can publish it under your domain provided the post links back to the original link/website.

Having one's platform with blog posts (regardless of their number) is much better than having no personal blogging platform at all. It is the core. When someone comes knocking on your down for a role or an offer, at first, they are going to see your website/platform and rather than publication.

## Study not other bloggers but content creators too

One advantage we have these days is there is no shortage of the amount of content and platforms that you can host. To keep up to date with topics you want to write about, surely, at a certain point in time, you can never know everything about it.

Apart from other blogs I regularly follow, I exhaustively use Twitter, Medium, Dev.to, tech podcasts, official documentation and sometimes books to keep myself up to date and research whats going on. I can never be an expert on everything but I do love to share my perspective and I believe everyone has a unique perspective. Also researching and learning go hand-in-hand. I learn new things every day and at a faster rate when I share them.

## You learn how to take criticism

Blogging taught me how to separate constructive criticism (which I consider actual feedback) from the criticism we find every day on the internet and that doesn't help anyone.

Some places on the internet exist where people are too harsh in their opinions but that's a good thing. You get a sense of feeling whom to hear and whom to shut out completely. In other words, you grow.

## Share everything, everywhere

If you are writing on your blog but not sharing on every available platform that costs nothing, you are not helping much. Your blog post tends to help someone you might even don't know them.

It helps to drive the community forward and help someone when they are actually seeking useful information to their problem that you have already faced or shared.

Platforms I regularly share my content on:

- Medium
- Dev.to
- Twitter
- Reddit
- Hacker News
- LinkedIn
- Instagram
- Major publications like [freeCodeCamp](https://www.freecodecamp.org/news/)

Getting on the first page of the search engine is amazing but that doesn't happen in every scenario or overnight. Use these platforms. Cross-post and use canonical URLs and get on the wagon.

## Summary

I hope this post serves its purpose and I urge you to go ahead and write your blog post if you haven't started already. There is no worst-case scenario here. Have a starting point, and stick to it. Also, I do consider writing is a skill in life worth learning and practicing, and blogging helps me do that.

Happy Writing!


Blogging tips after 3 years and a 100+ posts

Chat app with React Native (part 1) - Build reusable UI form elements using react-native-paper

---
title: 'How to create a custom hook to change status bar styles for every screen using React Navigation'
slug: 'create-custom-status-bar-hook-react-navigation'
date: '2020-03-13'
thumbnail: '/thumbnails/expo.png'
tag: 'react-native'
canonicalUrl: 'https://heartbeat.fritz.ai/creating-custom-wavy-headers-using-react-native-svg-639ce0861327'
---

React Native has a component called `StatusBar` that is used to control the app status bar. Using the `react-navigation` library you might have a scenario where you don't have a header bar and on different screens, you would like to ensure the color of the status bar is correctly rendered. Such as on the light background, a dark status bar is displayed and on a darker background of the screen, a light status bar is displayed.

In this tutorial, let us create a custom hook that is going to keep track of the status bar color change whenever a screen changes. For this, you are also going to create mock screens with different background colors and integrate a tab bar.

I am going to use Expo to create a new React Native app but you can use React Native cli to generate a new project too.

## Requirements

Ensure your dev environment includes the following required packages:

- Node.js above `10.x.x` installed on your local machine
- JavaScript/ES6 basics
- `expo-cli`

## Installing and configuring react-navigation

Start by creating a new project using `expo-cli`. Navigate inside the project directory when the CLI has finished generating the new project. Then install all the required dependencies to integrate `react-navigation` library and bottom tabs.

```shell
expo init customStatusBarHook

cd customStatusBarHook

yarn add @react-navigation/native @react-navigation/bottom-tabs

expo install react-native-gesture-handler
react-native-reanimated react-native-screens
react-native-safe-area-context
@react-native-community/masked-view
```

That's it to configure the `react-navigation` library.

## Create bottom Tabs

Create a new file called `AppTabs.js` inside `src/navigation/` directory. This file is going to be the sole routes file for this demo. Inside it, you are going to create two tab components called `HomeScreen` and `SettingsScreen.

Start by importing all the necessary components.

```js
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { View, Text } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
```

I am using `@expo/vector-icons` to display icons for each tab but if you are using react-native cli to generate this project, you will have to install `react-native-vector-icons` library.

Create the functional component `HomeScreen` with a `View` and a `Text` as shown in the snippet below. This is going to be the first tab screen in the tab navigator.

```js
function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontSize: 20, color: '#333333' }}>Home Screen</Text>
    </View>
  );
}
```

Also, add the following code snippet for the tab screen, `SettingsScreen`.

```js
function SettingsScreen() {
  useStatusBar('light-content');
  return (
    <View
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#be79df'
      }}
    >
      <Text style={{ fontSize: 20, color: 'white' }}>Settings Screen</Text>
    </View>
  );
}
```

Next, add the following snippet to create the tab navigator with the previous two screens. The following tab navigator is also going to use have tab icons that are going to have different tint colors based on whether being active or not. This can be done by using `screenOptions`.

```js
const Tabs = createBottomTabNavigator();

export default function AppTabs() {
  return (
    <NavigationContainer>
      <Tabs.Navigator
        screenOptions={({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => {
            let iconName;

            if (route.name === 'Home') {
              iconName = focused
                ? 'ios-information-circle'
                : 'ios-information-circle-outline';
            } else if (route.name === 'Settings') {
              iconName = focused ? 'ios-list-box' : 'ios-list';
            }
            return <Ionicons name={iconName} size={size} color={color} />;
          }
        })}
        tabBarOptions={{
          activeTintColor: 'tomato',
          inactiveTintColor: 'gray'
        }}
      >
        <Tabs.Screen name="Home" component={HomeScreen} />
        <Tabs.Screen name="Settings" component={SettingsScreen} />
      </Tabs.Navigator>
    </NavigationContainer>
  );
}
```

Go to the terminal window and trigger the command `expo start`. You are going to get the following output in a simulator.

![ss3](https://i.imgur.com/h4ZpdMF.gif)

As you can notice from the above demo that on each the tab screen the color of the status bar is dark. On the second tab, since it has a darker background than the first tab, there should be a way to change the status bar for each screen component as it is mounted.

## Create a custom Status bar hook

The `react-navigation` library provides a hook called `useFocusEffect` that helps to run side-effects when a specific screen is focused.

It is similar to `useEffect` hook from React with the difference being between the two is that side-effects in `useFocusEffect` run only when a screen component is focused.

Also, it is important to wrap the side-effect in `React.useCallback` hook to avoid triggering the effect after every render when the screen is focused.

Create a new file called `Hooks.js` inside `src/utils/` directory. Import the following statements.

```js
import React, { useCallback } from 'react';
import { StatusBar } from 'react-native';
import { useFocusEffect } from '@react-navigation/native';
```

Then export a custom function called `useStatusBar` that is going to provide a simple way to change the color of the status bar when applied. Pass the `style` as the only parameter.

```js
export const useStatusBar = style => {
  useFocusEffect(
    useCallback(() => {
      StatusBar.setBarStyle(style);
    }, [])
  );
};
```

## Apply custom hook to change the status bar color

Open `src/navigation/AppTabs.js` file and import `useStatusBar`. Also, inside both function components, add the following statements with appropriate bar style value.

```js
// after other import statements
import { useStatusBar } from '../utils/Hooks';

function HomeScreen() {
  useStatusBar('dark-content');
  // rest of the code remains same
}

function SettingsScreen() {
  useStatusBar('light-content');
  // rest of the code remains same
}
```

Go back to the simulator or Expo client and you are going to notice the changes now.

![ss4](https://i.imgur.com/EuVkbSG.gif)

For a better transition between two tabs, you can pass on another parameter called `animate` with a default value of boolean `true` in the `useStatusBar` custom hook.

Open `src/utils/Hooks.js` and add the following.

```js
export const useStatusBar = (style, animated = true) => {
  useFocusEffect(
    useCallback(() => {
      StatusBar.setBarStyle(style, animated);
    }, [])
  );
};
```

Now, go back to the Expo client to see the changes.

![ss5](https://i.imgur.com/sS9ASUg.gif)

## Conclusion

To read more about the `useFocusEffect` hook provided by the `react-navigation` library take a look at this [link](https://reactnavigation.org/docs/use-focus-effect/).

You can also set a status bar configuration based on different routes when using `react-navigation`. Take a look at this [link](https://reactnavigation.org/docs/status-bar/) to read more.

I hope this short tutorial was useful to you. Thanks for reading it!


How to create a custom hook to change status bar styles for every screen using React Navigation

Build an Expense Tracker app with React Hooks and LocalStorage API

---
title: 'Nesting Tab and Stack navigators in React Native and Expo apps'
date: '2020-02-26'
slug: 'nested-navigators-in-react-native'
thumbnail: '/thumbnails/expo.png'
tag: 'expo'
canonicalUrl: 'https://heartbeat.fritz.ai/nesting-tab-and-stack-navigators-in-react-native-and-expo-apps-cc118a141e70'
---

Using [`react-navigation`](https://reactnavigation.org/docs/en/getting-started.html) you can definitely nest different types of navigators. The term nesting navigators mean that rendering one navigator inside a screen of another navigator.

The possible scenarios of nesting navigators are:

- Stack navigator nested inside drawer navigator
- Tab navigator nested inside stack navigator
- Stack navigator nested inside a tab navigator

In this tutorial, let us examine one of the above scenarios by nesting Tab inside a stack navigator. Whether you are following from the previous tutorial on building a stack navigator using a component-based configuration with the latest version of the react-navigation library, or not, here is the source code of the Expo demo app that is going to be leveraged. This demo app, already has a stack navigator running. You can download the source code from the Github rep [here](https://github.com/amandeepmittal/react-native-examples/tree/master/reactnav5-stack-navigator).

## Table of contents

- Install dependencies
- Create a mock screen
- Create a tab navigator
- Adding icon and changing active tint color
- Passing `screenOptions` in a Tab Navigator
- Updating the header title for the nested child navigator
- Conclusion

## Requirements

Requirements for this tutorial is simple. Have the following installed on your local dev environment.

- Node.js version >= `10.x.x` installed
- Have access to one package manager such as npm or yarn
- Latest `expo-cli` version installed or use npx

Do note that, without dwelling much into the configuration of native binaries with the `react-navigation` library, I am going to use a project that is already generated using `expo-cli`. If you wish to start afresh, choose the blank template.

## Install dependencies

Install the following dependency to setup a Tab Navigator. Run the following command from a terminal window.

```shell
yarn add @react-navigation/bottom-tabs
```

This package is going to allow the app to have a simple tab bar appear at the bottom of the screen and switch between different routes. The demo app we are going to build is going to consist of two tabs. We are going to nest the stack navigator inside the first tab and create a mock screen for the second tab.

## Create a mock screen

Even though the current app structure has three different screen components (_open `src/screens` to view them_), let us create another screen component called `Profile` that will act as the second tab. Create a new file called `src/screens/Profile.js` with the following code snippet:

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

function Profile(props) {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Profile Tab</Text>
    </View>
  );
}

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

export default Profile;
```

## Create a tab navigator

In this section, let us set up a basic Tab navigator. Start by renaming the file `MainStackNavigator` to `AppNavigator.js` in the directory `src/navigation`.

After the renaming, the routes config file, after other import statements, import the `createBottomTabNavigator` from `@react-navigation/bottom-tabs` as well as the `Profile` screen component.

```js
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
// add this after other import statements
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import Home from '../screens/Home';
import Detail from '../screens/Detail';
import Settings from '../screens/Settings';
// add this after other import statements
import Profile from '../screens/Profile';
```

Then create an instance of the `createBottomTabNavigator` called `Tab` as below:

```js
// after other instances
const Tab = createBottomTabNavigator();
```

Next, create a function called `MainTabNavigator()`. Using `Tab.Navigator` you can define the structure of the routes and use `Tab.Screen` you can define each of the routes.

Let us define tab routes for now: `Home` and `Profile`.

```js
function MainTabNavigator() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={Home} />
      <Tab.Screen name="Profile" component={Profile} />
    </Tab.Navigator>
  );
}
```

Now, in the `MainStackNavigator()` instead of passing the `Home` screen, let us pass the `MainTabNavigator`.

```js
<Stack.Screen name="Home" component={MainTabNavigator} />
```

Lastly, to make all of this work, open `App.js` file in the root of the project and modify the statement that imports the `MainStackNavigator` with the correct file name.

```js
import React from 'react';

// make sure this matches the file name of navigator config
import MainStackNavigator from './src/navigation/AppNavigator';

export default function App() {
  return <MainStackNavigator />;
}
```

Go back to the terminal window, execute `expo start` and open up an Expo client inside a simulator or a real device. You are going to get the following result.

<img src='https://miro.medium.com/max/369/1*_noQNKBA1wUf8EkgNyCsQA.gif' />

## Adding icon and changing active tint color

From the last image, you notice that the active tab is highlighted by a tint color of blue and the non-active tab is of gray. Let us change this tint color.

Open `AppNavigator.js` file at `Tab.Navigator` add a prop called `tabBarOptions`. This prop allows you to customize the tab bar shared between different routes.

Add the following:

```js
<Tab.Navigator
  tabBarOptions={{
    activeTintColor: '#101010'
  }}
>
  {/* rest remains same */}
</Tab.Navigator>
```

Go to the simulator device, you are going to notice that the active tab bar label has a color of black from the previous blue.

<img src='https://miro.medium.com/max/350/1*y3hy861GwUm_mj1HCvr3Ew.png' />

Let us add some icons to the tab bar. Start by importing the `Ionicons` from `@expo/vector-icons`.

```js
import { Ionicons } from '@expo/vector-icons';
```

Then, in each `Tab.Screen`, add an options prop that is going to have a property of `tabBarIcon`. This function returns the component `Ionicons`. Pass the arguments `color` and `size` you can maintain the active tint color.

```js
<Tab.Navigator
  tabBarOptions={{
    activeTintColor: '#101010'
  }}
>
  <Tab.Screen
    name="Home"
    component={Home}
    options={{
      tabBarIcon: ({ color, size }) => (
        <Ionicons name="ios-home" color={color} size={size} />
      )
    }}
  />
  <Tab.Screen
    name="Profile"
    component={Profile}
    options={{
      tabBarIcon: ({ color, size }) => (
        <Ionicons name="ios-person" size={size} color={color} />
      )
    }}
  />
</Tab.Navigator>
```

Here is the output:

<img src='https://miro.medium.com/max/350/1*3G4fINzTR9vNIGQzujkegQ.png' />

You can even change the background of the tab bar by adding a `style` property to `tabBarOptions`.

```js
<Tab.Navigator
  tabBarOptions={{
    activeTintColor: '#101010',
    style: {
      backgroundColor: '#ffd700'
    }
  }}
>
  {/* rest remains same */}
</Tab.Navigator>
```

Here is the output for the above snippet:

<img src='https://miro.medium.com/max/350/1*Gxk9p_0XQ2z-y-sYHH7Epw.png' />

## Passing screenOptions in a Tab Navigator

The previous section is one way to add icons to each route or screen in the tab bar. There is another way you can do it by passing `screenOptions` in the wrapper `Tab.Navigator`. This prop is used to modify or add common styles to a navigator.

```js
function MainTabNavigator() {
  return (
    <Tab.Navigator
      tabBarOptions={{
        activeTintColor: '#101010',
        style: {
          backgroundColor: '#ffd700'
        }
      }}
      screenOptions={({ route }) => ({
        tabBarIcon: ({ color, size }) => {
          let iconName;
          if (route.name == 'Home') {
            iconName = 'ios-home';
          } else if (route.name == 'Profile') {
            iconName = 'ios-person';
          }
          return <Ionicons name={iconName} color={color} size={size} />;
        }
      })}
    >
      <Tab.Screen name="Home" component={Home} />
      <Tab.Screen name="Profile" component={Profile} />
    </Tab.Navigator>
  );
}
```

There is no change in the functioning of the tab navigator from the previous section, as you can notice below:

<img src='https://miro.medium.com/max/369/1*X06mUqbYfHKYEDdPAVBJjA.gif' />

## Updating the header title for the nested child navigator

Right now the title for each tab screen is going to be the same. This is because the root navigator (which, here is the Stack Navigator) structure is going to look at its immediate children, which are Home, Detail and Settings screen. In the current scenario, if you are to set the title for the `Profile` screen passing the prop `options`, it is not going to work.

This is because the `Profile` screen is a child of the Tab Navigator and not Stack Navigator. The tab navigator is nested inside the Stack navigator and thus, Profile is not the immediate child to Stack Navigator.

For each tab to have its own title (since the tab navigator is nested inside the stack navigator), you have to determine the title for a specific tab screen based on the navigation state from the property `route.state`.

This can be done by defining a helper function called `getHeaderTitle` that has `route` as its parameter. Why pass `route`? Because it contains the `state` property which refers to the child's navigator state and the value of the currently active route name can be obtained from this state.

Add a function called `getHeaderTitle` in `AppNavigator.js` file.

```js
function getHeaderTitle(route) {
  const routeName = route.state
    ? route.state.routes[route.state.index].name
    : route.params?.screen || 'Home';

  switch (routeName) {
    case 'Home':
      return 'Home';
    case 'Profile':
      return 'Profile';
  }
}
```

Then, [as per the recommended way](https://reactnavigation.org/docs/en/screen-options-resolution.html#__docusaurus), add the options prop to the `Stack.Screen` route whose value is `Home`.

```js
<Stack.Screen
  name="Home"
  component={MainTabNavigator}
  options={({ route }) => ({
    headerTitle: getHeaderTitle(route)
  })}
/>
```

Now, when visiting the `Profile` tab, you are going to get the desired title in the header.

<img src='https://miro.medium.com/max/369/1*gCs24QDMEQ_D6DcDxjiALw.gif' />

## Conclusion

_Congratulations! You’ve completed this tutorial._

In this tutorial, we discuss only one scenario of nesting navigators. The main objective here is to get familiar with the component-based configuration of the Tab Navigator in the latest version of the `react-navigation` library.

Here is the link to the complete Tab Navigator API [here](https://reactnavigation.org/docs/en/bottom-tab-navigator.html) I'd recommend you to check.

You can find the complete code for this tutorial at this [GitHub repo](https://github.com/amandeepmittal/react-native-examples/tree/master/reactnav5-tab-navigator).

Originally published at [Heartbeat.fritz.ai](https://heartbeat.fritz.ai/nesting-tab-and-stack-navigators-in-react-native-and-expo-apps-cc118a141e70)


Nesting Tab and Stack navigators in React Native and Expo apps

Getting Started with Stack Navigator using react-navigation 5 in React Native and Expo apps

---
title: 'How to handle navigation in WebViews in a React Native app'
date: '2020-02-07'
slug: 'handle-navigation-in-webviews-react-native'
thumbnail: '/thumbnails/react.png'
tag: 'react-native'
canonicalUrl: 'https://heartbeat.fritz.ai/how-to-handle-navigation-with-webviews-in-a-react-native-app-1ed51ab3342f'
---

As a React Native developer, you are going to come across use cases that will require you to embed or redirect a web application or a web page inside a React Native app. [WebViews](https://facebook.github.io/react-native/docs/webview.html) are often used for such use cases.

A community-maintained module, WebViews in React Native are the only way to let the user visit external links within an iOS or Android application. The WebView component in React Native core first became available in React Native version `0.57.x`.

In this tutorial, you are going to learn how to create a simple WebView component using `react-native-webview` npm module, and stretch it further to add custom navigation to handle URL history (just like in a web browser) using props provided y this module.

You can find the complete code for this tutorial at this [Github repo](https://github.com/amandeepmittal/react-native-examples/tree/master/rnWebViewCustomNav).

## Table of Contents

- Requirements
- Installing WebView package
- Implement a simple WebView
- Add a loading spinner
- Handle navigation when using WebViews
- Conclusion

## Requirements

- Nodejs version `<= 10.x.x` installed
- watchman installed
- Have access to one package manager such as npm or yarn
- use react native version `0.60.x` or above

## Installing WebView package

To generate a new React Native project you can use the react-native cli tool. open a terminal window and enter the following command.

```shell
npx react-native init [Project Name]
```

You can name your project anything you want. Make sure to navigate inside the project directory after it has been created. Then, install the `react-native-webview` dependency using a package manager.

```shell
yarn add react-native-webview
```

After the dependency has installed, you are going to config it to work on iOS and Android devices. For iOS devices make sure you install pods by navigating inside the `ios/` directory and execute the command `pod install`.

For Android users, if you are using the latest `react-native-webview` version (_which you are_) open the file `android/gradle.properties` and make sure the following two lines exist. If not, add them.

```groovy
android.useAndroidX=true
android.enableJetifier=true
```

Once the dependency installation is done, let us run the application. We are going to use an iOS simulator for this tutorial. If you are on Windows or Linux based operating systems, you can use Android Studio.

Run the command as stated below to open the boilerplate application that comes with `react-native-cli`.

```shell
# for Mac users
react-native run-ios

# for Windows/Linux users
react-native run-android
```

If the app opens without any error, that means the configuration we have done so far is good to go.

<img src='https://miro.medium.com/max/350/1*eYqHih1QsrZsxfiHsYnfPQ.png' />

## Implementing a simple WebView

In this section, let us create a simple webview component and understand how it works. Start by importing the `WebView` component from `react-native-webview` to render web content in a native view. Open the `App.js` file.

```js
import React from 'react';
import { SafeAreaView, StyleSheet, StatusBar } from 'react-native';
import WebView from 'react-native-webview';
```

The `WebView` component requires a `source` prop. This prop loads the static HTML or a URI (which is the current case if you look closely at the above snippet). A URI is a remote location for a web page to exist.

Inside the `App` function component let us render this simple webview component.

```js
const App = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView style={styles.flexContainer}>
        <WebView source={{ uri: 'https://heartbeat.fritz.ai/' }} />
      </SafeAreaView>
    </>
  );
};

const styles = StyleSheet.create({
  flexContainer: {
    flex: 1
  }
});

export default App;
```

To view this in action, make sure you build the React Native app for the first time using either of the command specified below from a terminal window. For Android users, if you are using a real device or a simulator, make sure it is running first. You are going to see a similar output as below:

<img src='https://miro.medium.com/max/350/1*l6ZpJ0_d8j58uJRMC-XLSQ.png' />

## Add a loading spinner

Did you notice that when the screen or the component loads for the first time, it just shows a blank white screen for a few seconds? This indicates that the web page is loading from the remote source. However, in a real-time application, you have to provide some type of loading indicator to the user to imply that the web page is being currently loaded.

This can be done by adding an `ActivityIndicator` component from the `react-native` core. It is going to display a spinner on the device's screen when the web page is in the loading state.

In the `App.js` file, among other imported components from `react-native`, import `ActivityIndicator`.

```js
// ... rest of the import statements
import {
  SafeAreaView,
  StyleSheet,
  StatusBar,
  ActivityIndicator
} from 'react-native';
```

To add a loading indicator that starts when the web page starts loading. Also, the indicator should stop when the web page has done loading.

The first requirement is that the prop `startInLoadingState` from `react-native-webview` module must be set to a value of true. Another prop, `renderLoading` is responsible for triggering the activity indicator. It always accepts a function as its value. The value of the function is going to be the `ActivityIndicator` component.

Add both of these props to `WebView` in `App.js`:

```js
<WebView
  source={{ uri: 'https://heartbeat.fritz.ai/' }}
  startInLoadingState={true}
  renderLoading={() => (
    <ActivityIndicator
      color="black"
      size="large"
      style={styles.flexContainer}
    />
  )}
/>
```

Take a look at how it works on the below screen.

<img src='https://miro.medium.com/max/377/1*m3pKSlirL8gqEXUHmlZc-A.gif' />

## Handle navigation when using WebViews

The [`WebView`](https://facebook.github.io/react-native/docs/webview) has a vast API and out of the box provides the most common functionalities that you can add to support different features in the app.

The `WebView` API provides some methods like `goBack` and `goForward` to handle navigation state and transitions. Such as the `goBack` method allows the user to go back one page at a time in the web view's history. Similarly, using the method `goForward`, you can move forward.

This navigation between web pages is done when there is a way to store or listen to the URL change. Using the prop called `onNavigationStateChange` that represents the navigation state of the component, you just need to pass the current URL and keep track of the previous and forward buttons.

The current is passed by creating a `ref` object which is the approach you are going to use in this demo app. It holds a mutable `.current` property that can be used to uniquely identify the URL.

I am going to use the latest Hooks syntax. If you are using the counterpart of the functional components, please make sure to check how to use `ref` property on the `WebView` instance inside the class component.

For those who have been following along this tutorial so far, please make sure that you import hooks such as `useRef`, and `useState` from React.

Also, import some more components from the react-native core that is going to help us add a footer to the app screen. This footer is going to have two buttons: one to go to the previous URL and one to go to the forward URL (if exists).

```js
import React, { useState, useRef } from 'react';
import {
  SafeAreaView,
  StyleSheet,
  StatusBar,
  ActivityIndicator,
  View,
  TouchableOpacity,
  Text
} from 'react-native';
import WebView from 'react-native-webview';
```

Inside the functional component `App`, let us create three state variables for the following purposes:

- `canGoBack`: to go the previous web page from the navigational state. Its initial value is going to be a boolean false.
- `canGoForward`: to go to the next web page in the navigational state. Its initial value is going to be a boolean false.
- `currentUrl` to keep a reference of the current URL. Its initial value is going to be an empty string.

Let us create these state variables inside the `App` component.

```js
const App = () => {
  const [canGoBack, setCanGoBack] = useState(false);
  const [canGoForward, setCanGoForward] = useState(false);
  const [currentUrl, setCurrentUrl] = useState('');

  //...
};
```

Use the `useRef` hook to create a `webviewRef` and define it after the state variables.

```js
const webviewRef = useRef(null);
```

Now, create two handler methods that are going to handle the navigational state transition of the current URL in real-time using the mutable property `current` on a button press.

```js
backButtonHandler = () => {
  if (webviewRef.current) webviewRef.current.goBack();
};

frontButtonHandler = () => {
  if (webviewRef.current) webviewRef.current.goForward();
};
```

Add the props `ref` and `onNavigationStateChange` to the `WebView` component. The `navState` is going to track the state changes and update it as well as fetch and set the current URL as shown below in the code snippet.

```js
<WebView
  source={{ uri: 'https://heartbeat.fritz.ai/' }}
  startInLoadingState={true}
  renderLoading={() => (
    <ActivityIndicator
      color="black"
      size="large"
      style={styles.flexContainer}
    />
  )}
  ref={webviewRef}
  onNavigationStateChange={navState => {
    setCanGoBack(navState.canGoBack);
    setCanGoForward(navState.canGoForward);
    setCurrentUrl(navState.url);
  }}
/>
```

After the `WebView` component, create a `View` component that holds two buttons. Each of the buttons is defined from `TouchableOpacity` that has an `onPress` prop. This prop is going to make use of the handler methods you defined earlier.

```jsx
<View style={styles.tabBarContainer}>
  <TouchableOpacity onPress={backButtonHandler}>
    <Text style={styles.button}>Back</Text>
  </TouchableOpacity>
  <TouchableOpacity onPress={frontButtonHandler}>
    <Text style={styles.button}>Forward</Text>
  </TouchableOpacity>
</View>
```

Here are the corresponding styles used in the above code snippet:

```js
const styles = StyleSheet.create({
  flexContainer: {
    flex: 1
  },
  tabBarContainer: {
    padding: 20,
    flexDirection: 'row',
    justifyContent: 'space-around',
    backgroundColor: '#b43757'
  },
  button: {
    color: 'white',
    fontSize: 24
  }
});
```

To see it in action, go back to the simulator/device of your choice and the first thing you are going to notice is the bottom tab bar on the screen.

<img src='https://miro.medium.com/max/350/1*5g5rXbyg4k1_J02DKL3QIA.png' />

Here is the complete demo in action with back and forward buttons working.

<img src='https://miro.medium.com/max/377/1*r2li3qWatN2JM_Pl9nhGBA.gif' />

## Conclusion

_Congratulations! You have completed this tutorial._

WebViews might not be the prominent way to create mobile apps but it does add an important feature to handle specific use cases where there is a requirement to connect web interfaces and native code.

The `WebView` component has a great API that you can refer [here](https://facebook.github.io/react-native/docs/webview).

You can find the complete code for this tutorial at this [Github repo](https://github.com/amandeepmittal/react-native-examples/tree/master/rnWebViewCustomNav).

Originally published at [Heartbeat.fritz.ai](https://heartbeat.fritz.ai/how-to-handle-navigation-with-webviews-in-a-react-native-app-1ed51ab3342f)


How to handle navigation in WebViews in a React Native app

Getting Started with React Native and Expo using Hooks in 2020

---
title: 'How to add Dark mode functionality with React Hooks'
date: '2020-01-09'
slug: 'dark-mode-with-react-hooks'
thumbnail: '/thumbnails/react.png'
tag: 'reactjs'
canonicalUrl: 'https://blog.crowdbotics.com/how-to-add-dark-mode-functionality-with-react-hooks/'
---

![cover](https://i.imgur.com/WDIlL4i.png)

Developers seems to love dark mode. A lot of popular websites like Twitter, Reddit, and YouTube are now supporting this dark mode on their websites and applications as well. It is more than a trend. It's easy on user's eyes and decreasing the problem of eye fatigue.

In this post, I am going to show you how you can add this functionality in your React apps whether it is an admin dashboard that is consuming some third party API hosted elsewhere or a web blog using static site generators like [Gatsby](https://www.gatsbyjs.org/). The steps discussed below are going to be same whether you decide to use `create-react-app` utility to generate a React app or using any static site generator.

This tutorial is going to use React hooks. If you are not familiar with them at all, it is recommended that you get familiar with them from the [official React docs](https://reactjs.org/docs/hooks-reference.html). Otherwise, whenever hooks are used, a brief overview is provided.

## Table of Contents

- Requirements
- Setting up a base theme
- Add a toggle button to change the theme
- Adding theme persistence using local storage
- Connecting Crowdbotics support to Your Github Repo
- Conclusion

## Requirements

Note: These requirements are needed if you are looking to follow this post from a technical point of view, which means, if you are looking to try out Crowdbotics for the first using a custom template from the marketplace or are actually interested in building a custom dating app using Crowdbotics template, React Native, and Expo. If later is your scenario, this post can act as a guide and an entry point to the template.

- [Node.js](https://nodejs.org/en/) (>=`10.x.x`) with npm/yarn installed.
- [create-react-app](https://www.npmjs.com/package/create-react-app) to generate a new React app
- [Crowdbotics App builder platform](http://app.crowdbotics.com/) account (preferably log in with your valid Github ID)

## Setting up a base theme

In this section, let us start by adding a base React app that uses light mode by default. To start, using `create-react-app` create a new directory. After you have created a new directory, navigate inside the project directory. You can copy and paste the following steps in your terminal window.

```shell
create-react-app react-darkmode-app

cd react-darkmode-app
```

Once inside the project directory, open `App.css` file and the following styles for the base light theme.

```css
body {
  margin: 0;
  text-align: center;
}

.light-theme {
  background-color: #fff;
  color: #444444;
}

nav {
  display: flex;
  text-align: center;
  background-color: #503d81;
  width: 100%;
  padding: 20px;
  color: #f8f8f8;
}

.content {
  padding: 0.5em;
  margin: 0 auto;
  max-width: 600px;
  font-size: 1.2rem;
  line-height: 1.1;
  height: 90vh;
}
```

To apply these styles, open `App.js` component file and replace the default code with the below snippet.

```js
import React from 'react';
import './App.css';

function App() {
  return (
    <div className="light-theme">
      <nav>Toggle button will go here</nav>
      <div className="content">
        <h1>Light Mode</h1>
      </div>
    </div>
  );
}

export default App;
```

Now, try to run the app using the command `yarn start` from a terminal window. Visit the URL `http://localhost:3000` in a browser window and you will get the following result.

![ss1](https://crowdbotics.ghost.io/content/images/2019/08/ss1-1.png)

Head back to the `App.css` file and create base styles for the dark theme.

```css
.dark-theme {
  background-color: #1f1b24;
  color: #f8f8f8;
}

.dark-theme nav {
  background-color: #332940;
}

.dark-theme code {
  color: red;
}
```

Notice that using CSS selector property, you are changing the background color of the navbar and the rest of the styles remain the same as before. For example, the text `color` property is going to be the same as in light theme. To test out the dark theme, change the `className` of the first `div` element inside the `App.js` file to `dark-theme`.

```js
function App() {
  return (
    <div className="dark-theme">
      <nav>Toggle button will go here</nav>
      <div className="content">
        <h1>Dark Mode</h1>
        <p>
          Do take a note of the <code>color</code> property in the nav bar.
        </p>
      </div>
    </div>
  );
}
```

Looking back at the browser window, you get the following result.

![ss2](https://crowdbotics.ghost.io/content/images/2019/08/ss2-1.png)

At this point, you have a very simplified version of the app, but it doesn't fulfill the purpose. It has to keep track of which theme the user selects and show the styles accordingly.

## Add a toggle button to change the theme

To let the end-user decide which theme they want to the view, your React app would be done by adding a toggle button. To change the theme between the light or dark, there is a need for a variable to keep track of what theme the user has selected. For this purpose, let us add the new concepts of _React Hooks_ rather than converting the current `App` component into a class component.

To give a brief overview of React Hooks, one can say they are available to React since the version `16.8.x`. They are functions that allow you to initialize and use React state and a component's life-cycle methods in a functional component. Hooks do not work with classes. If you are familiar with React, you know that the functional component has been called as a functional stateless component. Not any more.

React provides a few built-in Hooks such as `useState` to initialize a default state of a component similarly as in a class component with the keyword `state`. Open `App.js` file and initialize the state as below.

```js
function App() {
  const [darkTheme, setDarkTheme] = React.useState(false);
  // rest remains same
}
```

In the above snippet, the default value of `darkTheme` variable is `false`. This means that it is not the default set of styles that the app will use. Using conditional operator, update the `return` function inside `App()`.

```js
return (
  43 -
  (
    <div className={darkTheme ? 'dark-theme' : 'light-theme'}>
      <nav>
        <div className="button-container">
          <button onClick={() => setDarkTheme(prevTheme => !prevTheme)}>
            Toggle Theme
          </button>
        </div>
      </nav>
      <div className="content">
        <h1>{darkTheme ? 'Dark Mode' : 'Light Mode'}</h1>
        <p>
          Do take a note of the <code>color</code> property in the nav bar.
        </p>
      </div>
    </div>
  )
);
```

Starting from the first `div` element, it uses the conditional operator to check whether the value of the state variable `darkTheme` is true or false. If it is true, the styles related to the dark theme are going to be applicable. Otherwise, the default light theme is activated. The same conditional operator goes on the `h1` element to display the text of which theme is being currently used.

The `button` uses an `onClick` event to toggle the behavior of light and a dark theme. The `prevTheme` is used to apply functional updates. It computes the value of the previous state and then returns an updated value. In the current case, the value here represented is the theme itself.

Here is the output in the browser window. Click the `Toggle Theme` button to change the theme and the heading in the content.

![ss3](https://crowdbotics.ghost.io/content/images/2019/08/ss3.gif)

Here are the corresponding styles for the `button-container`.

```css
.button-container {
  display: flex;
  margin: 0 auto;
}
```

## Adding theme persistence using local storage

Right now, the user can easily switch between the two themes your app is running on. However, whenever the web page reloads, the default theme shown is light even though the last theme you selected was dark. To provide the pragmatic solution, in this section, you are going to store the value of dark theme in the browser's local storage.

As compared to lifecycle methods in class components, in modern-day React functional components, you can easily add the same working functionality using `useEffect`. It accepts a function in the form of an argument. This function can be written with the keyword `function` or use an arrow function. Also, this function passed to `useEffect` as the argument will run after every render is completed.

To avoid this, you can conditionally render the `useEffect` method. This is done by passing an empty array as the second argument. The value this array will contain is going to be the value of the `darkTheme`. After you have defined the state in the `App` component, add this effect method.

```js
React.useEffect(() => {
  localStorage.setItem('dark', JSON.stringify(darkTheme));
}, [darkTheme]);
```

Using an arrow function as the first argument, it is setting the value of `darkTheme` in the browser's `localStorage`. To add a theme value to the local storage, there are two things required in combination. An identifier or a key has to be passed as the first argument to `setItem()` along with boolean value of `darkTheme` as the second argument.

Now, go back to the browser window and open dev tools. In the tab, `Application` look for the **Storage > Local Storage** as described in the image below. You will find a key `dark` that has the value of `false`.

![ss4](https://crowdbotics.ghost.io/content/images/2019/08/ss4.png)

On clicking the button `Toggle Theme` the value of the key `dark` in the local storage changes to `true`.

![ss5](https://crowdbotics.ghost.io/content/images/2019/08/ss5-1.png)

It works but on reloading the React app, switches back to the light theme. This is because the default value provided to the dark theme is always false. Let us change that.

Go back to the `App` component and create a new function, `getDefaultTheme`. It will keep track of getting the value of the `dark` from the local storage. Also, the default value of the `darkTheme` in the state is going to be read from this function (_in other words, from the local storage_) rather than a boolean `false`.

```js
const [darkTheme, setDarkTheme] = React.useState(getDefaultTheme());

React.useEffect(() => {
  localStorage.setItem('dark', JSON.stringify(darkTheme));
}, [darkTheme]);

function getDefaultTheme() {
  const selectedTheme = JSON.parse(localStorage.getItem('dark'));
  return selectedTheme || false;
}
```

Notice in below demo of how the value of the dark is saved in the local storage even when the React app reloads.

![ss6](https://crowdbotics.ghost.io/content/images/2019/08/ss6-1.gif)

## Connecting Crowdbotics support to your Github Repo

Once everything is working, now let us add git version to this React project and then, further add the support for Crowdbotics app building platform. Open a terminal window and execute:

```shell
git init

# add all files
git add .

# commit
git commit -m "update"
```

Once all the files are committed, add this repository to your Github account. Crowdbotics app building platform now gives you an option to connect a Github repository directly using GitHub OAuth integration ( which means you need to have a Crowdbotics account or login into one using your Github account).

![ss7](https://crowdbotics.ghost.io/content/images/2019/08/ss7.png)

More and in-detail information about this process could be found [here](https://medium.com/crowdbotics/connect-your-github-repo-to-crowdbotics-36008d35e681).

## Conclusion

_Congratulations!_ You have made to the end. I hope you learned something useful here. React Hooks is a powerful concept, and getting more commonly used as the time progress. Here are some resources related to this post:

- [Hooks official docs](https://reactjs.org/docs/hooks-intro.html)
- [Using Hooks in a React Native app](https://crowdbotics.ghost.io/react-hooks-basics-building-a-react-native-app-with-react-hooks/)

Originally published at [Crowdbotics.com](https://crowdbotics.ghost.io/how-to-add-dark-mode-functionality-with-react-hooks/)


How to add Dark mode functionality with React Hooks

---
title: 'How to use React Native Localize in React Native apps'
date: '2020-01-01'
slug: 'how-to-use-react-native-localize'
thumbnail: '/thumbnails/react.png'
tag: 'react-native'
canonicalUrl: 'https://heartbeat.fritz.ai/how-to-use-react-native-localize-in-react-native-apps-3bb3d510f801'
---

Not every app require global customers but if you have plans to have, you would need internationalization in your React Native app. Using [`react-native-localize`](https://github.com/react-native-community/react-native-localize) your app can detect the operating system or the device language and support the multi-languages.

In this tutorial, let us build a small demo that uses `react-native-localize` along with a popular internationalization library [`i18n-js`](https://github.com/fnando/i18n-js). The app will display some mock locales based on the device's language and region settings.

## Table of contents

- Requirements
- Installing react-native-localize
- Add locales
- Add i18n Functionality
- Completing the App component
- Run the app
- Conclusion

## Requirements

- Node.js >= `10.x.x` version installed
- watchman
- react-native-cli

Do note that I’m going to use an iOS simulator for this tutorial.

## Installing react-native-localize

To get started, open a terminal window and generate a new React Native app. Also, install the following dependencies after navigating inside the app directory.

```shell
react-native init rni18nDemo

cd rni18nDemo

yarn add react-native-localize i18n-js lodash.memoize

# for ios only
cd ios/
pod install
```

If you are using `react-native` version greater than `0.60.x` you won't have to link the library `react-native-localize` manually. If you are below the specified version, please refer to the module's official documentation [here](https://github.com/react-native-community/react-native-localize).

This library gives you access to localization constants related to a particular device. These constants are not included in `i18n-js` library.

The `lodash.memoize` package is going to be used since `i18n-js` does not have a concept of caching.

## Add locales

Create two new files `en.json` and `nl.json` inside the directory `src/translations/`. Both of these files are for separate languages: English, and Dutch. Inside these files are JSON objects that have key-value pairs. The key for both files or the languages is going to be the same. The value for each key is going to differ as it contains the actual translation.

Following are the contents of each file:

```json
// en.json
{
 "hello": "Hello!",
 "Good morning": "Good morning",
 "Currency": "USD"
}

// nl.json
{
 "hello": "Hallo!",
 "Good morning": "Goedemorgen",
 "Currency": "EUR"
}
```

## Add i18n Functionality

Open `App.js` file and import the following statements.

```js
import React from 'react';
import * as RNLocalize from 'react-native-localize';
import i18n from 'i18n-js';
import memoize from 'lodash.memoize';
import { SafeAreaView, StyleSheet, Text } from 'react-native';
```

Next, require the translation files from the directory created in the previous step, using an object `translationGetters`.

```js
const translationGetters = {
  en: () => require('./src/translations/en.json'),
  nl: () => require('./src/translations/nl.json')
};
```

Add the helper function `translate` that is going to translate the keywords on the language selection.

```js
const translate = memoize(
  (key, config) => i18n.t(key, config),
  (key, config) => (config ? key + JSON.stringify(config) : key)
);
```

Next, add another helper method that is going to detect the fallback language when there is no proper translation available for a particular word or phrase.

Also, using `RNLocalize.findBestAvailableLanguage()` method, you can let the app detect the possible language tag (_value for each tag is coming from the language getters object_) and if not tag is available, it is going to use the fallback language tag. This method can also be used with some languages to detect their reading direction (_such as RTL_).

```js
const setI18nConfig = () => {
  const fallback = { languageTag: 'en' };
  const { languageTag } =
    RNLocalize.findBestAvailableLanguage(Object.keys(translationGetters)) ||
    fallback;

  translate.cache.clear();

  i18n.translations = { [languageTag]: translationGetters[languageTag]() };
  i18n.locale = languageTag;
};
```

## Completing the App component

Lastly, let us create the `App` component. In the `App.js` file, start by adding a `constructor` method that is going to be used to set the i18n config helper method.

```js
class App extends React.Component {
  constructor(props) {
    super(props);
    setI18nConfig();
  }

  // ...
}

export default App;
```

Then, using the lifecycle methods `componentDidMount` and `componentWillUnmount`, you are going to add and remove event listeners to listen for any localization change.

```js
componentDidMount() {
 RNLocalize.addEventListener('change', this.handleLocalizationChange)
 }

 componentWillUnmount() {
 RNLocalize.removeEventListener('change', this.handleLocalizationChange)
 }

 handleLocalizationChange = () => {
 setI18nConfig()
 .then(() => this.forceUpdate())
 .catch(error => {
 console.error(error)
 })
 }
```

Here is the rest of the component file with the `render` method and the styles used in it. Apart from translation locales, `react-native-localize` provide ready to use helper methods such as `getCountry()`. This particular method returns a value in the form of a country code based on the device's locale.

```js
render() {
 return (
 <SafeAreaView style={styles.safeArea}>
 <Text style={styles.value}>{translate('hello')}</Text>
 <Text style={styles.value}>{translate('Good morning')}</Text>
 <Text style={styles.value}>Currency: {translate('Currency')}</Text>
 <Text style={styles.value}>Country: {RNLocalize.getCountry()}</Text>
 </SafeAreaView>
 )
}

// styles
const styles = StyleSheet.create({
 safeArea: {
 backgroundColor: 'white',
 flex: 1,
 alignItems: 'center',
 justifyContent: 'center'
 },
 value: {
 fontSize: 24
 }
})
```

## Run the app

Make sure you build the app before running it on the platform of your choice. Here are the commands you need to run depending on the device.

```shell
# ios
react-native run-ios

# android
react-native run-android
```

When the app's build process is complete, it is going to run the English locales by default.

<img src='https://miro.medium.com/max/350/1*3KLq-CScY5yMp1pPnf1qjg.png' />

On changing the locale, the correct result is reflected in the app.

<img src='https://miro.medium.com/max/377/1*cURVMx8splW7SgIaLd6y_g.gif' />

## Conclusion

This completes the tutorial on how to use `react-native-localize` to add and use language translations in a React Native app.

Here is the complete code for this demo in a **[Github repo](https://github.com/amandeepmittal/rni18nDemo)**.

Checkout [Jonathan Palma's](https://twitter.com/jonathanpalma__) who wrote [a small i18n library](https://github.com/jonathanpalma/react-native-simple-i18n#readme) after being inspired from this post. Check the library here on [GitHub](https://github.com/jonathanpalma/react-native-simple-i18n#readme).

Originally published at [Heartbeat.fritz.ai](https://heartbeat.fritz.ai/how-to-use-react-native-localize-in-react-native-apps-3bb3d510f801)


How to use React Native Localize in React Native apps

---
title: 'Implement Push notifications for Android apps with React Native'
date: '2019-11-19'
slug: 'push-notifications-android-apps-react-native'
thumbnail: '/thumbnails/react.png'
tag: 'react-native'
canonicalUrl: 'https://blog.jscrambler.com/implementing-react-native-push-notifications-in-android-apps/'
---

Relevant Push notifications are a great way to boost a user's engagement towards an application. According to some [analysis](http://info.localytics.com/blog/6-stats-that-prove-how-important-push-notifications-in-app-messaging-are-to-your-apps-success), push notifications increase app engagement by 88%. It’s also curious to see that the [click-through rate](https://clevertap.com/blog/mobile-marketing-stats-2019/) for push notifications in Android (4.06%) is much higher than in iOS (1.7%).

In this tutorial, you are going to learn how to implement push notifications as an app feature using React Native and Firebase. I will be testing out the notification feature on an Android device, but you can go ahead and try it out on iOS yourself.

There are two main ways you can send push notifications to your app users: local and remote. Local notifications are sent from a React Native application, while remote push notifications are sent from the server or a push notification service such as Google's Cloud Messaging Service (GCM). We will explore both approaches.

## Requirements

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

- Nodejs (>=`10.x.x`) with npm/yarn installed.
- react-native-cli
- Windows/Linux users must be running an Android emulator or a real device via USB
- Active [Firebase](https://firebase.google.com/) project

To know more about how to set up a development environment for React Native using react-native-cli, please refer to the [official documentation](https://facebook.github.io/react-native/docs/getting-started).

You can find the complete code for this tutorial at [this GitHub repository](https://github.com/amandeepmittal/RNnotifications-demo).

## Install and Set Up react-native-push-notifications

The [react-native-push-notifications](https://github.com/zo0r/react-native-push-notification#readme) library helps you set up controllers to consume local or remote notifications for iOS and Android devices. To begin, follow the instructions from the terminal window. Create a new React Native project and then install this library.

```shell
react-native int RNnotifications

cd RNnotifications

yarn add react-native-push-notification
```

For iOS devices, this library depends on the manual installation instructions mentioned at [PushNotificationIOS](https://github.com/react-native-community/react-native-push-notification-ios) - an API that is maintained by react-native-community.

For Android devices, you are going to make the following edits in the appropriate files mentioned below. First, open the file `android/build.gradle` and add the following:

```groovy
buildscript {
    ext {
        // add the following two lines
        googlePlayServicesVersion = "16.1.0" // default: "+"
        firebaseVersion = "17.3.4" // default: "+"
    }
    repositories {
        google()
        jcenter()
    }
    dependencies {
        // add the following dependency
        classpath 'com.google.gms:google-services:4.3.2'
    }
}
```

Next, open `android/settings.gradle` and add the following before `include ':app'`.

```groovy
include ':react-native-push-notification'
project(':react-native-push-notification').projectDir = file('../node_modules/react-native-push-notification/android')
```

Do note that, if you are not looking forward to using remote notifications, you can ignore the above step. However, the following step is important for both types of notifications to work. Open the `android/app/src/main/AndroidManifest.xml` file. Before the `<application>` tag, add the following.

```xml
  <uses-permission android:name="android.permission.WAKE_LOCK" />
    <permission
        android:name="${applicationId}.permission.C2D_MESSAGE"
        android:protectionLevel="signature" />
    <uses-permission android:name="${applicationId}.permission.C2D_MESSAGE" />
    

    <uses-permission android:name="android.permission.VIBRATE" />
    <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>
```

Then, inside the `<application>` tag (and without deleting any existing tags) add:

```xml
 <meta-data  android:name="com.dieam.reactnativepushnotification.notification_channel_name"
                android:value="YOUR NOTIFICATION CHANNEL NAME"/>
        <meta-data  android:name="com.dieam.reactnativepushnotification.notification_channel_description"
                    android:value="YOUR NOTIFICATION CHANNEL DESCRIPTION"/>
        
        <meta-data  android:name="com.dieam.reactnativepushnotification.notification_color"
                    android:resource="@android:color/white"/>

        
        <receiver
            android:name="com.google.android.gms.gcm.GcmReceiver"
            android:exported="true"
            android:permission="com.google.android.c2dm.permission.SEND" >
            <intent-filter>
                <action android:name="com.google.android.c2dm.intent.RECEIVE" />
                <category android:name="${applicationId}" />
            </intent-filter>
        </receiver>
        

        <receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationPublisher" />
        <receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationBootEventReceiver">
            <intent-filter>
                <action android:name="android.intent.action.BOOT_COMPLETED" />
            </intent-filter>
        </receiver>
        <service android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationRegistrationService"/>

        
        <service
            android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationListenerServiceGcm"
            android:exported="false" >
            <intent-filter>
                <action android:name="com.google.android.c2dm.intent.RECEIVE" />
            </intent-filter>
        </service>
        

        
        <service
            android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationListenerService"
            android:exported="false" >
            <intent-filter>
                <action android:name="com.google.firebase.MESSAGING_EVENT" />
            </intent-filter>
        </service>
```

Lastly, go to `android/app/src/res/values/colors.xml`. If the file does not exist, create it. This file determines the color of the notification on an Android device. For example, the notification can be white:

```xml
<resources>
    <color name="white">#FFF</color>
</resources>
```

_Note:_ To use this library with Expo, you have to eject the Expo SDK app.

## Configure Local Push Notifications

In this section, you are going to write a configure function such that, when a button is pressed, a local notification is triggered. Create a new file inside `src/services/LocalPushController.js`. Start by importing `PushNotification` from the library you initialized in the previous step.

```js
import PushNotification from 'react-native-push-notification';
```

Add `PushNotification.configure()` to the file. This accepts an object with a required method `onNotification`. This method handles what happens after the notification is opened or received. Since it is a required method, it has to be invoked whether the notification is local or remote. The demo application only invokes a `console` statement stating the properties of the local notification object used in the current demo app.

```js
PushNotification.configure({
  // (required) Called when a remote or local notification is opened or received
  onNotification: function (notification) {
    console.log('LOCAL NOTIFICATION ==>', notification);
  },

  popInitialNotification: true,
  requestPermissions: true
});
```

Next, export `LocalNotification` in the snippet below which gets invoked when a button pressed by the user _or as the value of the `onPress` attribute_.

```js
export const LocalNotification = () => {
  PushNotification.localNotification({
    autoCancel: true,
    bigText:
      'This is local notification demo in React Native app. Only shown, when expanded.',
    subText: 'Local Notification Demo',
    title: 'Local Notification Title',
    message: 'Expand me to see more',
    vibrate: true,
    vibration: 300,
    playSound: true,
    soundName: 'default',
    actions: '["Yes", "No"]'
  });
};
```

`PushNotification.localNotification` has plenty of properties for each mobile platform (such as iOS or Android). From the above snippet, properties like `vibrate`, `vibration`, `bigText`, `subText` are Android only. However, properties like `actions`, `title`, `message`, `playSound` & `soundName` are cross-platform.

Import this method in the `App.js` file. Import `LocalNotification` from the `src/services/LocalPushController.js` file. Then, inside the functional `App` component, add a handler method `handleButtonPress` to invoke only when the user presses the button.

```js
import React from 'react';
import { Text, View, Button, StyleSheet } from 'react-native';
import { LocalNotification } from './src/services/LocalPushController';

const App = () => {
  const handleButtonPress = () => {
    LocalNotification();
  };

  return (
    <View style={styles.container}>
      <Text>Press a button to trigger the notification</Text>
      <View style={{ marginTop: 20 }}>
        <Button title={'Local Push Notification'} onPress={handleButtonPress} />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  buttonContainer: {
    marginTop: 20
  }
});

export default App;
```

Now, from a terminal window, run `react-native run-android`. Make sure you have a device connected via USB and have USB debugging enabled, or you can test on an Android Emulator.

The output of the above code snippet should look like this:

![ss1](https://i.imgur.com/Pq3hR5P.png)

When the button is pressed, it displays the notification, vibrates the device, and plays a default notification sound.

![ss2](https://i.imgur.com/KKhYuLE.gif)

Expanding the notification displays the message from `bigText`. Pressing the notification results in triggering the console statement from `onNotification` method.

![ss3](https://i.imgur.com/JSHRAXh.png)

You can add scheduled notifications by using the `PushNotification.localNotificationSchedule(details: Object)` method or you can repeat notifications after a particular time too. Read how to do this or add more customizations in the [module's official docs](https://github.com/zo0r/react-native-push-notification#readme).

## Configure Remote Notifications

To test out how remote notifications work, let us integrate the Cloud Messaging Service using Firebase. To follow the steps below, make sure you have an active Firebase project.

From the main **Dashboard** page, go to **Project Settings**. In the **Your apps** section, click on **Add app** and set up a new Android app.

Next, it will ask you to register the application.

![ss4](https://i.imgur.com/gcW6Giq.png)

Download the file `google-services.json` and save it at the location `android/app/` inside your React Nativ project.

![ss5](https://i.imgur.com/mTEX4G9.png)

Then, open the `android/app/build.gradle` file and add the following.

```groovy
dependencies {
    implementation project(':react-native-push-notification')
    // ... rest remains same
}

// at the end of the file, add
apply plugin: 'com.google.gms.google-services'
```

Next, create a new service file called `RemotePushController.js` inside the `src/services/` directory. This file contains all the configuration to handle a remote push notification. Inside the mandatory `onNotification` method, let us again display the result of the remote notification in the console.

It also requires a mandatory Android property called `senderID`. This can be fetched form **Project Settings** > **Cloud Messaging**.

![ss7](https://i.imgur.com/CbXvImG.png)

```js
import React, { useEffect } from 'react';
import PushNotification from 'react-native-push-notification';

const RemotePushController = () => {
  useEffect(() => {
    PushNotification.configure({
      // (optional) Called when Token is generated (iOS and Android)
      onRegister: function (token) {
        console.log('TOKEN:', token);
      },

      // (required) Called when a remote or local notification is opened or received
      onNotification: function (notification) {
        console.log('REMOTE NOTIFICATION ==>', notification);

        // process the notification here
      },
      // Android only: GCM or FCM Sender ID
      senderID: '256218572662',
      popInitialNotification: true,
      requestPermissions: true
    });
  }, []);

  return null;
};

export default RemotePushController;
```

Also, the Cloud Messaging service works based on using a `Token` between the app and the notification service. The `onRegister` method registers the remote server and obtains this token. You can view this by adding a console statement.

![ss6](https://i.imgur.com/EjCkPNd.png)

The controller component returns `null` to avoid having any effects on the final layout. Add this method inside the `App.js` file as shown below:

```js
// after other import statements
import RemotePushController from './src/services/RemotePushController'

// before the ending <View>
  <RemotePushController />
</View>
```

To test it out, go to **Cloud Messaging** section and compose a notification.

![ss8](https://i.imgur.com/VlclUtb.png)

Click the button **Send test message**. You will have the following output.

![ss9](https://i.imgur.com/uq1KGhW.gif)

The Log in the terminal is shown for the same notification.

![ss10](https://i.imgur.com/1wZOjG7.png)

You can customize the title, message and another behavior of the Firebase Cloud Messaging service to send notifications at a particular time or date by composing the notification.

## Conclusion

Congratulations! You have successfully implemented both ways to send a push notification in a React Native app. Go ahead and try to implement a scheduled notification as a challenge.

Originally published at [Jscrambler](https://blog.jscrambler.com/implementing-react-native-push-notifications-in-android-apps/)

Implement Push notifications for Android apps with React Native

---
title: 'Handle different field types in React Native forms with formik and yup'
date: '2019-10-26'
slug: 'handle-different-field-types-in-react-native-forms'
thumbnail: '/thumbnails/expo.png'
tag: 'expo'
canonicalUrl: 'https://heartbeat.fritz.ai/handling-different-field-types-in-react-native-forms-with-formik-and-yup-fa9ea89d867e'
---

In the [previous post](https://amanhimself.dev/build-validate-forms-with-react-native-formik-yup), you did a lot of things. From creating Login and Signup forms from scratch and using powerful libraries like Formik and yup to validate those forms.

In this tutorial, let us extend our knowledge of building and validating forms by handling different input field types other than strings. You are also going to take a look at my share of the solution on how to gracefully create a Confirm Password field and validate it using the reference of already setup `password` field.

Lastly, there is a small bonus section that will allow you to complete the UI of the form. You are going to add a toggle icon to show or hide the password for the user to re-check.

This tutorial is going to use an already setup source code from [**this Github repo**](https://github.com/amandeepmittal/expo-firebase/releases/tag/0.2.0) release.

After installing the source code, please navigate inside the project directory and install dependencies by running the following command:

```shell
npm install

# or

yarn install
```

## Table of Contents

- Requirements
- Adding Confirm Password Field to Signup Screen
- Handling a CheckBox with Formik and Yup
- Bonus: Hide/Show Password fields
- Conclusion

## Requirements

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

- Nodejs (>= `10.x.x`) with npm/yarn installed
- expo-cli (>= `3.x.x`), (previously known as create-react-native-app)

## Adding Confirm Password Field to Signup Screen

In the [**last post**](LINK HERE), I left you with a challenge to figure out how to add validation for confirm password field in the signup screen using `yup`. If you succeeded, please skip this section and move on the next one. If you are still curious about it, open `Signup.js` file and a new input field for the confirm password as well as a new property with the same name in the `initialValues` object of `Formik` element.

```js
<Formik
  initialValues={{
    name: '',
    email: '',
    password: '',
    // add this
    confirmPassword: ''
  }}
  onSubmit={values => {
    this.handleSubmit(values);
  }}
  validationSchema={validationSchema}
>
  {({
    handleChange,
    values,
    handleSubmit,
    errors,
    isValid,
    touched,
    handleBlur,
    isSubmitting
  }) => (
    <Fragment>
      {/* Rest of the code remains same */}
      <FormInput
        name="password"
        value={values.confirmPassword}
        onChangeText={handleChange('confirmPassword')}
        placeholder="Confirm password"
        secureTextEntry
        iconName="ios-lock"
        iconColor="#2C384A"
        onBlur={handleBlur('confirmPassword')}
      />
      <ErrorMessage
        errorValue={touched.confirmPassword && errors.confirmPassword}
      />
      <View style={styles.buttonContainer}>
        <FormButton
          buttonType="outline"
          onPress={handleSubmit}
          title="SIGNUP"
          buttonColor="#F57C00"
          disabled={!isValid || isSubmitting}
          loading={isSubmitting}
        />
      </View>
    </Fragment>
  )}
</Formik>
```

In the `validationSchema` object add a new property called `confirmPassword` that is going to be a string. Next, using `oneOf` the method from Yup's API. Inside its array parameter, it accepts a `Yup.ref()` which creates a reference to another sibling from the `intialValues` object.

```js
const validationSchema = Yup.object().shape({
  name: Yup.string()
    .label('Name')
    .required()
    .min(2, 'Must have at least 2 characters'),
  email: Yup.string()
    .label('Email')
    .email('Enter a valid email')
    .required('Please enter a registered email'),
  password: Yup.string()
    .label('Password')
    .required()
    .min(4, 'Password must have more than 4 characters '),

  // add this
  confirmPassword: Yup.string()
    .oneOf([Yup.ref('password')], 'Confirm Password must matched Password')
    .required('Confirm Password is required')
});
```

The `Yup.ref('password')` here refers to the actual `password` field. Let us try to add a different password to both of these fields and see what happens.

I am going to add `pass` to the `password` field (_since it accepts four minimum characters_) and `passo` to the `confirmPassword` field.

![1](https://i.imgur.com/p9CEa5H.gif)

See the error message being displayed when both input fields do not match.

## Handling a CheckBox with Formik and Yup

You can create and validate other field types using Formik and Yup. In this section, you are going to achieve that by creating a checkbox field that is quite common when signing up into new applications where they make you agree to all of their terms and app policies.

Open `Signup.js` file and the following [checkbox element](https://react-native-training.github.io/react-native-elements/docs/checkbox.html#docsNav) from `react-native-elements` library. It is going to contain a boolean value. In the `initialValues` object, please add that.

```js
// import checkbox element
import { Button, CheckBox } from 'react-native-elements'

initialValues={{
  name: '',
  email: '',
  password: '',
  confirmPassword: '',
  // add "check" to initial values
  check: false
}}
```

At the checkbox, there is a prop called `checked` that is required. It holds the current value of the element whether it checked or not. After you have defined the `confirmPassword` input field, please state the following.

```js
<CheckBox
  containerStyle={styles.checkBoxContainer}
  checkedIcon="check-box"
  iconType="material"
  uncheckedIcon="check-box-outline-blank"
  title="Agree to terms and conditions"
  checkedTitle="You agreed to our terms and conditions"
  checked={values.check}
  onPress={() => setFieldValue('check', !values.check)}
/>
```

The required prop `checked` that changes the icon to check or uncheck. By default, it will be marked uncheck. The `uncheckedIcon` prop takes the value of an icon. The `title` prop's value of the checkbox when marked check, changes to the value of `checkedTitle`. These are fair advantages of using a component library like `react-native-elements`.

Using `setFieldValue` from Formik props, you can set the value of the `check` to true or false. It accepts the reference of the key `check` itself as the first parameter. `!values.check` states the opposite of the current value of the key `check`.

Lastly, edit the `validationSchema` by adding the key `check`. It is going to use boolean schema type.

```js
check: Yup.boolean().oneOf([true], 'Please check the agreement');
```

See the below demonstration on how it works.

![2](https://i.imgur.com/pj1wjhS.gif)

## Bonus: Hide/Show Password fields

In this section, you are going to add the ability to hide or show the password on the corresponding field. By the end of this section, the password input field is going to look like this.

<img src='https://cdn-images-1.medium.com/max/800/1*1-32GyAIseC81jkInsRxSg.png' />

To start, open `Login.js` file and import `TouchableOpacity` from `react-native` and `Ionicons` from expo's vector icons library which comes with Expo SDK.

```js
import { StyleSheet, SafeAreaView, View, TouchableOpacity } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
```

Next step is to define an initial state inside the `Login` component. This will help track of the current icon being shown and the visibility of the password.

```js
state = {
  passwordVisibility: true,
  rightIcon: 'ios-eye'
};
```

The define a handler method that will trigger on the `onPress` prop of `TouchableOpacity`. It checks the previous state of the icon and the password's visibility field.

```js
handlePasswordVisibility = () => {
  this.setState(prevState => ({
    rightIcon: prevState.rightIcon === 'ios-eye' ? 'ios-eye-off' : 'ios-eye',
    passwordVisibility: !prevState.passwordVisibility
  }));
};
```

Then go to the password input field and add the prop `rightIcon` from `react-native-elements`, you are going to pass the `TouchableOpacty` for the icon to be touchable and trigger some function (_in this case, handlePasswordVisibility_).

Also, tame the prop `secureEntryText`. It accepts a boolean as its value, and that is what `passwordVisibility` is. If its value is true, which is the initial state, it will secure the password field entry. When clicked on the icon, the visibility is going to change to false, and then the password will be shown.

```js
secureTextEntry={passwordVisibility}
rightIcon={
  <TouchableOpacity onPress={this.handlePasswordVisibility}>
    <Ionicons name={rightIcon} size={28} color='grey' />
  </TouchableOpacity>
}
```

This is the output you are going to get.

<img src='https://cdn-images-1.medium.com/max/800/1*m5e8YiiykjcR2h9-PuqwqA.gif' />

## Conclusion

That's it. This post and the [previous one](https://amanhimself.dev/build-validate-forms-with-react-native-formik-yup) covers enough to get you started and create forms in advance forms in React Native apps using formik and yup.

You can go ahead and add the toggle password visibility to the `Signup` form screen as well. You will find the source code from [**this Github repo**](https://github.com/amandeepmittal/expo-firebase/releases/tag/0.5.0) release.

[Originally published at Heartbeat](https://heartbeat.fritz.ai/handling-different-field-types-in-react-native-forms-with-formik-and-yup-fa9ea89d867e)


Handle different field types in React Native forms with formik and yup

---
title: 'How to implement Forgot Password feature in React Native with Firebase'
date: '2019-10-25'
slug: 'implement-forgot-password-firebase-react-native'
thumbnail: '/thumbnails/expo.png'
tag: 'expo'
canonicalUrl: 'https://amanhimself.dev/blog/implement-forgot-password-firebase-react-native/'
---

> Originally published at [Heartbeat.Fritz.ai](https://heartbeat.fritz.ai/how-to-implement-forgot-password-feature-in-react-native-and-firebase-app-890b572d9759)

In some of the previous posts, you built a React Native app using Firebase as the backend service provider for Email authentication and storing user's data upon successful sign-up.

Let's add another common yet useful and necessary feature in the current app structure: **Forgot Password**. This feature will require another screen in the current React Native app. To follow this tutorial, you can either go through the previous posts if you are a beginner to React Native world:

- [How authenitcation works using react-navigation 4.x.x](https://heartbeat.fritz.ai/how-authentication-flow-works-in-react-native-apps-using-react-navigation-4-x-a30bb4d9e5d6)
- [How to build and validate forms in React Native apps using Formik and Yup](https://heartbeat.fritz.ai/build-and-validate-forms-in-react-native-using-formik-and-yup-6489e2dff6a2)
- [Handle different field types in React Native forms](https://heartbeat.fritz.ai/handling-different-field-types-in-react-native-forms-with-formik-and-yup-fa9ea89d867e)
- [Use React Context API to build React Native, Expo and Firebase apps](https://amanhimself.dev/context-api-react-native-firebase)

**Or** you if you are comfortable in understanding React Native code, dive deep in source code or download it from the Github repo release [here](https://github.com/amandeepmittal/expo-firebase/releases/tag/0.6.0).

After downloading the source code, please navigate inside the project directory and install dependencies by running the command `npm install` or `yarn install`.

## Table of Contents

- Requirements
- Add Forgot Password Screen
- Add a method to send a password reset email
- Create a Form
- Handle Password Reset

## Requirements

To follow this tutorial, please make sure you the following libraries are installed on your local development environment and access to the services mentioned below.

- Nodejs (`>= 12.x.x`) with npm/yarn installed
- Expo SDK (`>= 40.x.x`)
- Firebase account, free tier will do

## Add Forgot Password Screen

Let’s start with a basic screen and hook it up with current navigation flow such that an app user will be able to navigate to this new screen from the `Login` screen.

Create a new file `screens/ForgotPassword.js` with some dummy text.

```js
import React, { Component } from 'react';
import { Text, View } from 'react-native';

class ForgotPassword extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Forgot Password Screen</Text>
      </View>
    );
  }
}

export default ForgotPassword;
```

Open the `AuthNavigation.js` file and this new class component as below.

```js
import { createStackNavigator } from 'react-navigation-stack';
import Login from '../screens/Login';
import Signup from '../screens/Signup';
import ForgotPassword from '../screens/ForgotPassword';

const AuthNavigation = createStackNavigator(
  {
    Login: { screen: Login },
    Signup: { screen: Signup },
    ForgotPassword: { screen: ForgotPassword }
  },
  {
    initialRouteName: 'Login',
    headerMode: 'none'
  }
);

export default AuthNavigation;
```

Lastly, open `Login.js` file. Logically, this where a button to navigate to this new `ForgotPassword` component should exist. First, add the handler method `goToForgotPassword` inside the `Login` class component with other handler methods.

```js
goToForgotPassword = () => this.props.navigation.navigate('ForgotPassword');
```

Passing the name of the route as the first parameter to `navigation.navigate()` is how you navigate from one screen to the other screen using `react-navigation` library. In this case, the name of the route is going to be `ForgotPassword`.

Next, add the a `Button` component after the `Signup` button. The value of the `onPress` prop of this button is going to be the handler method.

```js
<Button
  title="Forgot Password?"
  onPress={this.goToForgotPassword}
  titleStyle={{
    color: '#039BE5'
  }}
  type="clear"
/>
```

Now, open a simulator or a real device with an Expo client installed and run the command `expo start` from a terminal window. You will be welcomed by the following screen.

![ss1](https://i.imgur.com/U7hRwYl.png)

Clicking on the button `Forgot Password ?` will lead you to the new screen.

![ss2](https://i.imgur.com/UrH4dJY.png)

## Add a method to send a password reset email

The Firebase authentication module provides a method that you can use in React Native apps to send a link to the user's registered email id with the app. Users can click the link to reset the password. Firebase does this on its own. You do not have to write the server code to add this functionality to your app.

To start, open `config/Firebase/firebase.js` file and add the following method. You will use this method inside the `ForgotPassword` component by providing the user's email as input.

```js
passwordReset: email => {
  return firebase.auth().sendPasswordResetEmail(email)
},
```

That's all you need to configure the Firebase app to make sure it sends the email on the registered email id.

To extend this further, you can try and customize the Email template that Firebase uses to send the reset password link [here](https://support.google.com/firebase/answer/7000714).

## Create a Form

Using the previously obtained knowledge of Formik ad yup let us add an input field and a button. The input field will take in the email and the button will be responsible to perform the action of submitting the form. In other words, it will trigger the network to reset the user's email in a handler method.

Open `ForgotPassword.js` file and add the following import statements.

```js
import React, { Component, Fragment } from 'react';
import { Text, SafeAreaView, View, StyleSheet } from 'react-native';
import { Formik } from 'formik';
import * as Yup from 'yup';
import FormInput from '../components/FormInput';
import FormButton from '../components/FormButton';
import ErrorMessage from '../components/ErrorMessage';
import { withFirebaseHOC } from '../config/Firebase';
```

After the import statements, add `validationSchema` object. This object is similar to that used in `Login` component and will help to determine whether the input provided already exists as the registered email or not.

```js
const validationSchema = Yup.object().shape({
  email: Yup.string()
    .label('Email')
    .email('Enter a valid email')
    .required('Please enter a registered email')
});
```

Go the `render` function, and replace its existing content to the form below.

```js
render() {
    return (
      <SafeAreaView style={styles.container}>
        <Text style={styles.text}>Forgot Password?</Text>
        <Formik
          initialValues={{ email: '' }}
          onSubmit={(values, actions) => {
            this.handlePasswordReset(values, actions)
          }}
          validationSchema={validationSchema}>
          {({
            handleChange,
            values,
            handleSubmit,
            errors,
            isValid,
            touched,
            handleBlur,
            isSubmitting
          }) => (
            <Fragment>
              <FormInput
                name='email'
                value={values.email}
                onChangeText={handleChange('email')}
                placeholder='Enter email'
                autoCapitalize='none'
                iconName='ios-mail'
                iconColor='#2C384A'
                onBlur={handleBlur('email')}
              />
              <ErrorMessage errorValue={touched.email && errors.email} />
              <View style={styles.buttonContainer}>
                <FormButton
                  buttonType='outline'
                  onPress={handleSubmit}
                  title='Send Email'
                  buttonColor='#039BE5'
                  disabled={!isValid || isSubmitting}
                />
              </View>
              <ErrorMessage errorValue={errors.general} />
            </Fragment>
          )}
        </Formik>
      </SafeAreaView>
    )
  }
```

In the above code snippet, the elements such as `FormInput`, `FormButton` and `ErrorMessage` are some re-usable custom presentational components that you can find inside `components/` directory. `this.handlePasswordReset(values, actions)` is the handler method that accepts two parameters. You will write the logic behind this method in the next section.

The corresponding styles to the component are:

```js
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    marginTop: 150
  },
  text: {
    color: '#333',
    fontSize: 24,
    marginLeft: 25
  },
  buttonContainer: {
    margin: 25
  }
});
```

Lastly, do not forget to wrap the `ForgotPassword` with the Firebase High Order Component `withFirebaseHOC` to use `passwordReset` method as props.

```js
export default withFirebaseHOC(ForgotPassword);
```

Now go back to the simulator and you will get the following screen.

![ss3](https://i.imgur.com/2ry1EAn.png)

## Handle Password Reset

Inside the `ForgotPassword` component create a new handler method called `handlePasswordReset`. This is going to be an asynchronous function that will accept the user's email as the parameter from the Formik's values.

Also, pass the `actions` from Formik as the second parameter. Instead of just console logging the error values, to display the error on the screen, Formik provides `setFieldError`.

```js
handlePasswordReset = async (values, actions) => {
  const { email } = values;

  try {
    await this.props.firebase.passwordReset(email);
    console.log('Password reset email sent successfully');
    this.props.navigation.navigate('Login');
  } catch (error) {
    actions.setFieldError('general', error.message);
  }
};
```

The above snippet signifies that if the email provided as the input is valid, it will send the request to reset the password. On success, a message on Expo's console will be displayed as shown below.

![ss4](https://i.imgur.com/zDL0Pfg.png)

Also, on success, it will navigate the user back to the login screen. On errors, the code inside the `catch` block will be triggered.

To try it out, register a user with a valid email address such that you can receive an email. On registering a new user, right now, the app will log you in. Sign out from the app which will take you back to the login screen. Next, go the `Forgot Password` screen and enter the valid email.

![ss8](https://i.imgur.com/YwJ191G.png)

You will receive an email like the below. It uses the default Firebase template. To demonstrate, I am using my personal Gmail address.

![ss5](https://i.imgur.com/kmgey8U.png)

Click on the link and it will redirect you to a webpage like below.

![ss6](https://i.imgur.com/vhuApsk.png)

Upon successful password change, it will prompt with the following message to the user.

![ss7](https://i.imgur.com/rLPkUeE.png)

## Conclusion

That's it! It is that simple. With a new password, you can try to login to the app now and it will work. If you have come this far, I am hope enjoyed reading this post. These are some of the strategies I try to follow with any Firebase + React Native projects.

I hope any of the codebase used in this tutorial helps you. To find the complete code, you will have to visit this [Github repo release](https://github.com/amandeepmittal/expo-firebase/releases/tag/0.7.0).

## Further reading

- [Hiring a React Native Developer: What Should You Look For? by Jess Marranco](https://www.g2i.co/blog/hiring-a-react-native-developer)


How to implement Forgot Password feature in React Native with Firebase

---
title: 'Image Classification on React Native with TensorFlow.js and MobileNet'
date: '2019-10-17'
slug: 'tensorflow-image-classification-expo'
thumbnail: '/thumbnails/expo.png'
tag: 'expo'
canonicalUrl: 'https://heartbeat.fritz.ai/image-classification-on-react-native-with-tensorflow-js-and-mobilenet-48a39185717c'
---

Recently, the alpha version [Tensorflow.js](https://www.tensorflow.org/js/) for React Native and Expo applications was released. It currently provides the capabilities of loading pre-trained models and training. Here is the announcement tweet:

> [Tweet](https://twitter.com/tensorflow/status/1169309153715732480?lang=en)

TensorFlow.js provides many [pre-trained models](https://github.com/tensorflow/tfjs-models) that simplify the time-consuming task of training a machine learning model from scratch. In this tutorial, we are going to explore [Tensorflow.js](https://www.tensorflow.org/js/) and the MobileNet pre-trained model to classify image based on the input image provided in a React Native mobile application.

Here is the link to the complete code in a [Github repo](https://github.com/amandeepmittal/mobilenet-tfjs-expo) for your reference.

## Requirements

- Nodejs >= 10.x.x install on your local dev environment
- `expo-cli`
- Expo Client app for Android or iOS, used for testing the app

## Integrating TFJS in an Expo app

To start and use the Tensorflow library in a React Native application, the initial step is to integrate the platform adapter. The module `tfjs-react-native` is the platform adapter that supports loading all major tfjs models from the web. It also provides GPU support using `expo-gl`.

Open the terminal window, and create a new Expo app by executing the command below.

```shell
expo init mobilenet-tfjs-expo
```

Next, make sure to generate Expo managed app. Then navigate inside the app directory and install the following dependencies.

```shell
yarn add @react-native-community/async-storage
@tensorflow/tfjs @tensorflow/tfjs-react-native
expo-gl @tensorflow-models/mobilenet jpeg-js
```

> _Note:_ If you are looking forward to using `react-native-cli` to generate an app, you can follow the clear instructions to modify `metro.config.js` file and other necessary steps, mentioned [here](https://github.com/tensorflow/tfjs/tree/master/tfjs-react-native).

Even though you are using Expo, it is necessary to install [async-storage](https://github.com/react-native-community/async-storage) as tfjs module depends on that.

## Testing TFJS that it is working

Before we move on, let us test out that the tfjs is getting loaded into the app before the app is rendered. There is an asynchronous function to do so, called `tf.ready()`. Open `App.js` file, import the necessary dependencies, and define an initial state `isTfReady` with a boolean false.

```js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import * as tf from '@tensorflow/tfjs';
import { fetch } from '@tensorflow/tfjs-react-native';

class App extends React.Component {
  state = {
    isTfReady: false
  };

  async componentDidMount() {
    await tf.ready();
    this.setState({
      isTfReady: true
    });

    //Output in Expo console
    console.log(this.state.isTfReady);
  }

  render() {
    return (
      <View style={styles.container}>
        <Text>TFJS ready? {this.state.isTfReady ? <Text>Yes</Text> : ''}</Text>
      </View>
    );
  }
}

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

export default App;
```

Since the lifecycle method is asynchronous, it will only update the value of `isTfReady` to true when tfjs is actually loaded.

You can see the output in the simulator device as shown below.

<img src='https://miro.medium.com/max/300/1*Qc2DyJWJztezFuQ8JltDlw.png' />

Or in the console, if using the `console` statement as the above snippet.

<img src='https://miro.medium.com/max/319/1*0rmnFTDv6wAHCBdggIk8TA.png' />

## Loading Tensorflow model

Similar to the previous section, you can load the model being used in this app (_mobilenet_) is integrating or not. Loading a tfjs pre-trained model from the web is an expensive network call and will take a good amount of time. Modify the `App.js` file to load the MobileNet model. Start by importing the model.

```js
import * as mobilenet from '@tensorflow-models/mobilenet';
```

Next, add another property to the initial state.

```js
state = {
  isTfReady: false,
  isModelReady: false
};
```

Then, modify the lifecycle method.

```js
async componentDidMount() {
    await tf.ready()
    this.setState({
      isTfReady: true
    })
    this.model = await mobilenet.load()
    this.setState({ isModelReady: true })
}
```

Lastly, the display on the screen when the loading of the model is complete.

```js
<Text>
  Model ready?{' '}
  {this.state.isModelReady ? <Text>Yes</Text> : <Text>Loading Model...</Text>}
</Text>
```

When the model is being loaded, it will display the following message.

<img src='https://miro.medium.com/max/300/1*DIZZk1CMDLwnmq7XUq9TOA.png' />

When the loading of the MobileNet model is complete, you will get the following output.

<img src='https://miro.medium.com/max/300/1*hS5fFnGr4R_5Zuj9nHvtCg.png' />

## Asking user permissions

Now that both the platform adapter and the model are currently integrated with the React Native app, add an asynchronous function to ask for the user's permission to allow access to the camera roll. This is a mandatory step when building iOS applications using the image picker component from Expo.

Before, you proceed, run the following command to install all the packages provided by Expo SDK.

```shell
expo install expo-permissions expo-constants expo-image-picker
```

Next, add the following import statements in the `App.js` file.

```js
import Constants from 'expo-constants';
import * as Permissions from 'expo-permissions';
```

In the `App` class component, add the following method.

```js
getPermissionAsync = async () => {
  if (Constants.platform.ios) {
    const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
    if (status !== 'granted') {
      alert('Sorry, we need camera roll permissions to make this work!');
    }
  }
};
```

Lastly, call this asynchronous method inside `componentDidMount()`.

```js
async componentDidMount() {
    await tf.ready()
    this.setState({
      isTfReady: true
    })
    this.model = await mobilenet.load()
    this.setState({ isModelReady: true })

    // add this
    this.getPermissionAsync()
  }
```

## Convert a raw image into a Tensor

The application will require the user to upload an image from their phone's camera roll or gallery. You have to add a handler method that is going to load the image and allow the Tensorflow to decode the data from the image. Tensorflow supports JPEG and PNG formats.

In the `App.js` file, start by importing [`jpeg-js` package](https://www.npmjs.com/package/jpeg-js) that will be used to decode the data from the image.

```js
import * as jpeg from 'jpeg-js';
```

It decodes the width, height and the binary data from the image inside the handler method `imageToTensor` that accepts a parameter of the raw image data.

```js
imageToTensor(rawImageData) {
    const TO_UINT8ARRAY = true
    const { width, height, data } = jpeg.decode(rawImageData, TO_UINT8ARRAY)
    // Drop the alpha channel info for mobilenet
    const buffer = new Uint8Array(width * height * 3)
    let offset = 0 // offset into original data
    for (let i = 0; i < buffer.length; i += 3) {
      buffer[i] = data[offset]
      buffer[i + 1] = data[offset + 1]
      buffer[i + 2] = data[offset + 2]

      offset += 4
    }

    return tf.tensor3d(buffer, [height, width, 3])
  }
```

The `TO_UINT8ARRAY` array represents an array of 8-bit unsigned integers. the constructor method `Uint8Array()` is the [new ES2017 syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray). There are different types of typed arrays, each having its own byte range in the memory.

## Load and Classify the image

Next, we add another handler method `classifyImage` that will read the raw data from an image and yield results upon classification in the form of `predictions`.

The image is going to be read from a source and the path to that image source has to be saved in the `state` of the app component. Similarly, the results yield by this asynchronous method have to be saved too. Modify the existing state in the `App.js` file for the final time.

```js
state = {
  isTfReady: false,
  isModelReady: false,
  predictions: null,
  image: null
};
```

Next, add the asynchronous method.

```js
classifyImage = async () => {
  try {
    const imageAssetPath = Image.resolveAssetSource(this.state.image);
    const response = await fetch(imageAssetPath.uri, {}, { isBinary: true });
    const rawImageData = await response.arrayBuffer();
    const imageTensor = this.imageToTensor(rawImageData);
    const predictions = await this.model.classify(imageTensor);
    this.setState({ predictions });
    console.log(predictions);
  } catch (error) {
    console.log(error);
  }
};
```

The results from the pre-trained model are yield in an array. An example is shown below.

<img src='https://miro.medium.com/max/376/1*MIDSYfqejEkwyLO6SKkY9Q.png' />

## Allow user to pick the image

To select an image from the device's camera roll using the system's UI, you are going to use the asynchronous method `ImagePicker.launchImageLibraryAsync` provided the package `expo-image-picker`. Import the package itself.

```js
import * as Permissions from 'expo-permissions';
```

Next, add a handler method `selectImage` that will be responsible for

- let the image to be selected by the user
- if the image selection process is not canceled, populate the source URI object in the `state.image`
- lastly, invoke `classifyImage()` method to make predictions from the given input

```js
selectImage = async () => {
  try {
    let response = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      aspect: [4, 3]
    });

    if (!response.cancelled) {
      const source = { uri: response.uri };
      this.setState({ image: source });
      this.classifyImage();
    }
  } catch (error) {
    console.log(error);
  }
};
```

The package `expo-image-picker` returns an object. In case the user cancels the process of picking an image, the image picker module will return a single property: `canceled: true`. f successful, the image picker module returns properties such as the `uri` of the image itself. That’s why the `if` statement in the above snippet holds so much significance.

## Run the app

To complete this demonstration app, you need to add a touchable opacity where the user will click to add the image.

Here is the complete snippet of the `render` method in the `App.js` file.

```js
render() {
    const { isTfReady, isModelReady, predictions, image } = this.state

    return (
      <View style={styles.container}>
        <StatusBar barStyle='light-content' />
        <View style={styles.loadingContainer}>
          <Text style={styles.commonTextStyles}>
            TFJS ready? {isTfReady ? <Text>✅</Text> : ''}
          </Text>

          <View style={styles.loadingModelContainer}>
            <Text style={styles.text}>Model ready? </Text>
            {isModelReady ? (
              <Text style={styles.text}>✅</Text>
            ) : (
              <ActivityIndicator size='small' />
            )}
          </View>
        </View>
        <TouchableOpacity
          style={styles.imageWrapper}
          onPress={isModelReady ? this.selectImage : undefined}>
          {image && <Image source={image} style={styles.imageContainer} />}

          {isModelReady && !image && (
            <Text style={styles.transparentText}>Tap to choose image</Text>
          )}
        </TouchableOpacity>
        <View style={styles.predictionWrapper}>
          {isModelReady && image && (
            <Text style={styles.text}>
              Predictions: {predictions ? '' : 'Predicting...'}
            </Text>
          )}
          {isModelReady &&
            predictions &&
            predictions.map(p => this.renderPrediction(p))}
        </View>
        <View style={styles.footer}>
          <Text style={styles.poweredBy}>Powered by:</Text>
          <Image source={require('./assets/tfjs.jpg')} style={styles.tfLogo} />
        </View>
      </View>
    )
  }
}
```

Here is the list of the complete `styles` object.

```js
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#171f24',
    alignItems: 'center'
  },
  loadingContainer: {
    marginTop: 80,
    justifyContent: 'center'
  },
  text: {
    color: '#ffffff',
    fontSize: 16
  },
  loadingModelContainer: {
    flexDirection: 'row',
    marginTop: 10
  },
  imageWrapper: {
    width: 280,
    height: 280,
    padding: 10,
    borderColor: '#cf667f',
    borderWidth: 5,
    borderStyle: 'dashed',
    marginTop: 40,
    marginBottom: 10,
    position: 'relative',
    justifyContent: 'center',
    alignItems: 'center'
  },
  imageContainer: {
    width: 250,
    height: 250,
    position: 'absolute',
    top: 10,
    left: 10,
    bottom: 10,
    right: 10
  },
  predictionWrapper: {
    height: 100,
    width: '100%',
    flexDirection: 'column',
    alignItems: 'center'
  },
  transparentText: {
    color: '#ffffff',
    opacity: 0.7
  },
  poweredBy: {
    fontSize: 20,
    color: '#e69e34',
    marginBottom: 6
  },
  tfLogo: {
    width: 125,
    height: 70
  }
});
```

Run the application by executing the `expo start` command from a terminal window. The first thing you’ll notice is that upon bootstrapping the app in the Expo client, it will ask for permissions.

<img src='https://miro.medium.com/max/300/1*yI8SE6c25GMpfSoqgethYg.png' />

Then, once the model is ready, it will display the text **"Tap to choose image"** inside the box. Select an image to see the results.

<img src='https://miro.medium.com/max/358/1*qxXtE5tU7yuuFKVKjQbIFg.gif' />

Predicting results can take some time. Here are the results of the previously selected image.

<img src='https://miro.medium.com/max/300/1*7yGIbTerLleJeSDUN5LW2A.png' />

## Conclusion

I hope this post serves the purpose of giving you a head start in understanding how to implement a TesnorFlow.js model in a React Native app, as well as a better understanding of image classification, a core use case in computer vision-based machine learning.

Since the TF.js for React Native is in alpha at the time of writing this post, we can hope to see many more advanced examples in the future to build real-time applications.
Here are some resources that I find extremely useful.

Here are some resources that I find extremely useful.

- [tfjs-react-native](https://github.com/tensorflow/tfjs/tree/master/tfjs-react-native) Github repo contain more examples using different pre-trained models
- Infinite Red's [NSFW JS and React Native example](https://shift.infinite.red/nsfw-js-for-react-native-a37c9ba45fe9)
- [Introduction to Tensorflow.js](https://medium.com/tensorflow/introducing-tensorflow-js-machine-learning-in-javascript-bf3eab376db)

You can find the complete code at this [Github repo](https://github.com/amandeepmittal/mobilenet-tfjs-expo).

Originally published at [Heartbeat.Fritz.ai](https://heartbeat.fritz.ai/image-classification-on-react-native-with-tensorflow-js-and-mobilenet-48a39185717c)


Image Classification on React Native with TensorFlow.js and MobileNet

Build and validate forms in React Native using Formik and Yup

---
title: 'Changing app themes using React Native, Styled Components and Redux'
date: '2019-10-02'
slug: 'create-app-themes-styled-components-redux'
thumbnail: '/thumbnails/react.png'
tag: 'react-native'
canonicalUrl: 'https://blog.jscrambler.com/changing-app-themes-using-react-native-styled-components-and-redux/'
---

![cover](https://i.imgur.com/RSo1BSr.jpg)

> [Originally published at Jscrambler](https://blog.jscrambler.com/changing-app-themes-using-react-native-styled-components-and-redux/)

If you are getting into React Native or have already dipped your toes, you know that there are different ways you can style a React Native app. React Native uses JavaScript objects to style by default. If you have some experience with the CSS of the web, you know that styling a component is nothing more than writing code by using proper styling syntax.

This tutorial is going to be about styling your React Native apps using 💅 [Styled Components](https://www.styled-components.com/) and switching between two themes using Redux as state management library with it. It is a third-party open-source library. Using it is a matter of choice, but also another way to add styling to your app, and many might find it easy to use, especially if you have used this library before with other frameworks.

## Requirements

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

- Nodejs (>=`10.x.x`) with npm/yarn installed.
- `react-native-cli`
- Mac users must be running an iOS simulator.
- Windows/Linux users must be running an Android emulator.

To know more about how to setup a development environment for React Native using `react-native-cli` please refer to the [official documentation here](https://facebook.github.io/react-native/docs/getting-started).

You can find the complete code for this tutorial at [this Github repository](https://github.com/amandeepmittal/StyledThemeApp).

## Installing styled-components

Assuming that you have created a new React Native project using the command `react-native init StyledThemeApp` from a terminal window, please navigate inside the newly generated directory. When inside it, please execute the following command to install `styled-components` library.

```shell
npm install styled-components
```

_That's all you need to do to use it in your React Native app!_

Styled Components is a CSS-in-JS library that enables developers to write each component with their styles and allows the code to be in a single location. By coupling your styles with the components, it results in optimizing developer experience and output.

Let us create a simple component that will act as a primary screen of the app. Create a new file inside `screens/HomeScreen.js`. It is a class component that displays a text inside a box. The visual components are created using `styled-components`. To consume this library, you start by writing an import statement from `styled-components/native`.

```js
import React from 'react';
import styled from 'styled-components/native';

const Container = styled.SafeAreaView`
  flex: 1;
  background-color: papayawhip;
  justify-content: center;
  align-items: center;
`;

const TextContainer = styled.View`
  padding: 15px;
  border-radius: 5px;
  border: 1px solid palevioletred;
`;

const Title = styled.Text`
  padding: 20px;
  font-size: 24px;
  font-weight: 500;
  color: palevioletred;
`;

class HomeScreen extends React.Component {
  render() {
    return (
      <Container>
        <TextContainer>
          <Title>Themed App with React Native & Styled Components</Title>
        </TextContainer>
      </Container>
    );
  }
}

export default HomeScreen;
```

`styled-components` utilizes tagged template literals to style your components using backtick. The `Container` and the `TextContainer` are React Native `View` and have styling attached to them. The `Title` uses `Text` from React Native. The `styled-components` library uses the same `flexbox` model that React Native Layouts. The advantage here is that you get to write styles in the same understandable syntax that you have been using in web development and standard CSS.

Import the `HomeScreen` component inside the entry point file, `App.js`. Replace its existing content with the following.

```js
import React from 'react';

import HomeScreen from './screens/HomeScreen';

const App = () => {
  return <HomeScreen />;
};

export default App;
```

Open the app in a simulator. You can execute either of the commands from the terminal window depending on the mobile platform you are using.

```shell
# for ios
react-native run-ios

# for android
react-native run-android
```

You will get the following result.

![ss1](https://i.imgur.com/4IsQKiW.png)

## Define Themes

In the current React Native app, you have are going to make use of the classic example of a dark and a light mode.

Create a new file called `/styles/theme.js`. It is going to contain the style attributes that are going to be changed when setting a theme at the run time.

These attributes are nothing but colors for different React Native components. In a later section, using `props` from `styled-components` you learn how to extend the current styles of `HomeScreen` component.

```js
export const darkTheme = {
  mode: 'dark',
  PRIMARY_BACKGROUND_COLOR: '#353c51',
  PRIMARY_TEXT_COLOR: '#767d92',
  SECONDARY_TEXT_COLOR: '#ffffff',
  PRIMARY_BUTTON_COLOR: '#152642',
  SECONDARY_BUTTON_COLOR: '#506680'
};
export const lightTheme = {
  mode: 'light',
  PRIMARY_BACKGROUND_COLOR: '#ffefd5',
  PRIMARY_TEXT_COLOR: '#DB7093',
  SECONDARY_TEXT_COLOR: '#333333',
  PRIMARY_BUTTON_COLOR: '#b9d6f3',
  SECONDARY_BUTTON_COLOR: '#a1c9f1'
};
```

## Adding Redux

To manage to switch between two themes, let us use Redux. With the help of this state management library, you are going to create a store that will keep an initial value of a theme. Redux will help to change switch between two themes (_defined in the previous section_) at the run time. This means you do not have to hard code these values every time you want to add a new theme. Every time a theme is changed, the component or the screen will be re-rendered to display the new style attributes.

First, you will have to install the following libraries to create a store.

```shell
yarn add redux react-redux redux-thunk
```

Apart from `redux`, the other two packages have important uses. `react-redux` lets your React Native components connect with the Redux store. `redux-thunk` is a middleware that enables you to make Redux actions return asynchronous operations. A `thunk` is a function that wraps an expression to delay its evaluation.

## Creating actions and reducer

In Redux, the state of the whole application is represented by one JavaScript object. Think of this object as read-only, since you cannot make changes to this state (which is represented in the form of a tree) directly. That is what `actions` are for.

Actions are like events in Redux. They can be triggered in the form of a user's touch on a button, key presses, timers, or network requests. The nature of each event mentioned is mutable. An action is a JavaScript object. To define an action, there’s one requirement. Each action has its type property. Every action needs a type property for describing how the state should change.

Create a new folder called `redux` in the root of your project. This directory is going to contain all the files related to Redux. To define an action, create a new file called `action.js` inside this folder.

There is the only action required right now called `switchTheme`. It will accept one parameter, the value of the theme.

```js
// define type
export const SWITCH_THEME = 'SWITCH_THEME';

// dispatch actions
export const switchTheme = BaseTheme => {
  return dispatch => {
    dispatch({
      type: SWITCH_THEME,
      baseTheme: BaseTheme
    });
  };
};
```

To change the state of the app when using Redux, or in our case, to change the state of the value of the theme, dispatching the theme from the action `switchTheme` is the only way.

Next, let us define `themeReducer` that will take the initial state of the application's theme and action to change that theme.

```js
import { lightTheme } from '../styles/theme';
import { SWITCH_THEME } from './actions';

const initialState = {
  theme: { ...lightTheme }
};

const themeReducer = (state = initialState, action) => {
  switch (action.type) {
    case SWITCH_THEME:
      let newState = {
        ...state,
        theme: { ...state.theme, ...action.baseTheme }
      };
      return newState;
    default:
      return state;
  }
};

export default themeReducer;
```

A reducer is a pure function that calculates the next state based on the initial or previous state. It always produces the same output if the state is unchanged. In the above snippet, the current state of this application is the light theme. This theme will change whenever the user is going to press the button to switch it to the dark theme.

## Creating Store

To create the store, you will have to modify the `App.js` file. Start by adding the following import statements.

```js
import React from 'react';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, combineReducers } from 'redux';
import thunk from 'redux-thunk';

import themeReducer from './redux/themeReducer';
import HomeScreen from './screens/HomeScreen';
```

A store is an object that brings actions and reducers together. It provides and holds state at the application level instead of individual components. Redux is not an opinionated library in terms of which framework or library should use it or not.

Next, create the following store.

```js
const store = createStore(
  combineReducers({ themeReducer }),
  applyMiddleware(thunk)
);
```

To bind a React Native application with Redux, you do it with `react-redux` module. This is done by using the high ordered component `Provider`. It basically passes the store down to the rest of the React Native application.

```js
const App = () => {
  return (
    <Provider store={store}>
      <HomeScreen />
    </Provider>
  );
};
```

## Updating HomeScreen Component

In this section, you are going write the logic to consume the state from redux's store as well as make use of `ThemeProvider`.

`styled-components` has gives React Native components theming support by a `ThemeProvider` wrapper component. In the render tree all `styled-components` such as `Container`, `Title` and so on, will have access to the provided theme. Open `HomeScreen.js` file adds the following import statements.

```js
import styled, { ThemeProvider } from 'styled-components/native';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { switchTheme } from '../redux/actions';
import { darkTheme, lightTheme } from '../styles/theme';
```

In the above code snippet, do note that you are also importing both the theme objects from `styles/theme.js` file. This is necessary because, initially, you will have to pass a theme value for `ThemeProvider` to know and display the components accordingly. Then, the redux action `switchTheme` that is responsible for the change theme, expects a parameter of the current theme value.

Next, modify the render function inside the `HomeScreen` component. Wrap all of its previous contents inside `ThemeProvider` wrapper and then add a new component called `Button` which will be display the contents to change the current theme.

```js
class HomeScreen extends React.Component {
  render() {
    return (
      <ThemeProvider theme={this.props.theme}>
        <Container>
          <TextContainer>
            <Title>Themed App with React Native & Styled Components</Title>
          </TextContainer>
          {this.props.theme.mode === 'light' ? (
            <Button onPress={() => this.props.switchTheme(darkTheme)}>
              <ButtonText>Switch to Dark Theme</ButtonText>
            </Button>
          ) : (
            <Button onPress={() => this.props.switchTheme(lightTheme)}>
              <ButtonText>Switch to Light Theme</ButtonText>
            </Button>
          )}
        </Container>
      </ThemeProvider>
    );
  }
}
```

Now, a question you may ask, how come `this.props.theme` & `this.props.switchTheme` are available to the above component. In `App.js`, which is the parent component for `HomeScreen`, is not passing any props down the component tree.

Well, from the previous import statements, you are importing two important Redux methods: `bindActionCreators` and `connect`. The bindActionCreators maps actions to an object using the names of the action functions. These functions automatically dispatch the action to the store when the function is invoked. As we learned earlier, to change the data, we need to dispatch an action.

To enable this, you further need two things: `mapStateToProps` and `mapDispatchToProps`. You have to connect both of them with `HomeScreen` component. This connection is done by using the `connect()` method from the `react-redux` package which connects the current React Native component to the Redux store.

Add the following at the end of component file:

```js
const mapStateToProps = state => ({
  theme: state.themeReducer.theme
});

const mapDispatchToProps = dispatch => ({
  switchTheme: bindActionCreators(switchTheme, dispatch)
});

export default connect(mapStateToProps, mapDispatchToProps)(HomeScreen);
```

## Using Props in styled-components

By passing an interpolated function `${props => props...}` to a styled component's template literal you can extend that component's styles. Take a look at the following code snippet, and modify the styles wherever necessary.

```js
const Container = styled.SafeAreaView`
  flex: 1;
  background-color: ${props => props.theme.PRIMARY_BACKGROUND_COLOR};
  justify-content: center;
  align-items: center;
`;

const TextContainer = styled.View`
  padding: 15px;
  border-radius: 5px;
  border: 1px solid ${props => props.theme.PRIMARY_TEXT_COLOR};
`;

const Title = styled.Text`
  padding: 20px;
  font-size: 24px;
  font-weight: 500;
  color: ${props => props.theme.PRIMARY_TEXT_COLOR};
`;

const Button = styled.TouchableOpacity`
  margin-top: 20px;
  background-color: ${props => props.theme.SECONDARY_BUTTON_COLOR};
  border-radius: 5px;
  padding: 10px;
`;

const ButtonText = styled.Text`
  font-size: 20px;
  color: ${props => props.theme.SECONDARY_TEXT_COLOR};
`;
```

Now, go to the simulator running and you will notice a new button with a text that says `Switch to ...` name of the next theme. If you have been following this tutorial, you will notice that the initial or current theme is the light mode. By pressing the button, you can switch to the dark mode.

![ss2](https://i.imgur.com/W6offhJ.gif)

## Conclusion

_Congratulations!_ You have successfully integrated redux and styled-components in a React Native app to create style attributes for React Native and manage themes. Using `props` in styled-components you learned how to manage and write composable components. This is just one of the way to create a themeable React Native app.

To dwell more into styled-components, please refer to the official documentation [**here**](https://www.styled-components.com/docs/basics#react-native).


Changing app themes using React Native, Styled Components and Redux

Using Context API with React Native

---
title: 'How Authentication Flow works in React Native apps using React Navigation 4.x'
date: '2019-09-10'
slug: 'authentication-navigation-flow-in-react-native-apps'
thumbnail: '/thumbnails/react.png'
tag: 'react-native'
canonicalUrl: 'https://heartbeat.fritz.ai/how-authentication-flow-works-in-react-native-apps-using-react-navigation-4-x-a30bb4d9e5d6'
---

![cover_image](https://i.imgur.com/0xwhr2a.png)

Mobile apps are made of screens that in number can vary depending on the app you are developing. Handling user navigation can be tricky to learn and do in mobile apps, but with dedicated open-source libraries like [`react-navigation`](https://reactnavigation.org) do make the process a lot easier.

React Navigation library is common among React Native developers. It is built with JavaScript, and you can create React components and apply any navigation pattern. On the device, it will give the natural look and feel.

It is up to the developer now, on how to make the best use of navigation between different screens in a React Native app. There are more than one navigation patterns available. If you are starting in the React Native ecosystem, this post will guide you through to use different the patterns of navigation such as Stack and Switch navigation using `react-navigation` library's latest `4.x.x` version.

## Table of Contents

- Requirements
- Installing navigation library
- Create app screens
- Setup navigation
- Navigating between two screens
- Managing authentication flow
- Conclusion

## Requirements

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

- [Nodejs](https://nodejs.org) (>=`10.x.x`) with npm/yarn installed.
- [expo-cli](https://docs.expo.io/versions/latest/workflow/expo-cli/) (>= `3.x.x`), previously known as `create-react-native-app`.
- Mac users must be running an iOS simulator.
- Windows/Linux users must be running an Android emulator.

To know more about how to setup and run the simulator or the emulator on your local development environment visit React Native’s [official documentation here](https://facebook.github.io/react-native/docs/getting-started).

## Installing navigation library

To get started, create a new Expo app using `expo-cli` with the following command from a terminal window. When asked, choose the `blank` template.

```shell
expo init expo-example

# navigate inside the project directory
cd expo-example
```

Once inside the project directory, install the following dependencies.

```shell
yarn add react-navigation react-navigation-stack

expo install react-native-gesture-handler
react-native-screens
```

As compared to previous versions of `react-navigation`, all three navigation patterns have been modularised in their own dependencies. If you are using:

- stack navigation, then install `react-navigation-stack`
- for tabs install `react-navigation-tabs`
- for drawer install `react-navigation-drawer`
- switch navigation pattern is still under `react-navigation` and is only used for specific use cases such as authentication flow

More appropriate information about each dependency related to its own navigation pattern can be found in the [official docs here](https://reactnavigation.org/docs/en/stack-navigator.html).

After installing these dependencies, you can verify that they have been installed by opening the `package.json` file.

```json
"dependencies": {
    "expo": "^34.0.1",
    "react": "16.8.3",
    "react-dom": "^16.8.6",
    "react-native": "https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz",
    "react-native-gesture-handler": "~1.3.0",
    "react-native-reanimated": "~1.1.0",
    "react-native-screens": "1.0.0-alpha.22",
    "react-native-web": "^0.11.4",
    "react-navigation": "4.0.0",
    "react-navigation-stack": "1.5.1"
  },
```

## Create App Screens

I like to arrange different setups and related files under the folder structure. Here is how it is going to look like at the end of this tutorial. It is also a good practice to organize or give structure to your project.

![1](https://i.imgur.com/lkVcW5L.png)

The three files inside the `screens` folder are going to be functional components for now, with some dummy text to display. Create these files with the following code snippets.

For `Home.js`:

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

export default function Home() {
  return (
    <View style={styles.container}>
      <Text>Home</Text>
    </View>
  );
}

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

For `Login.js`:

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

export default function Login() {
  return (
    <View style={styles.container}>
      <Text>Login</Text>
    </View>
  );
}

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

For `Signup.js`:

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

export default function Signup() {
  return (
    <View style={styles.container}>
      <Text>Signup</Text>
    </View>
  );
}

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

The idea here is to create a foundation of three different screens and mock a login/signup and main (_in the current case, the home screen_) screen navigation pattern. This is a common pattern in most mobile apps where the user has to either signup or login before accessing the rest of the application.

## Setup Navigation

After creating these three screens, create a new directory called `navigation`. Inside this, create three new files:

- `index.js`
- `AppNavigation.js`
- `AuthNavigation.js`

Let us setup the `AppNavigation` first since it will contain only one screen. Open up the file and add the following code.

```js
//AppNavigation.js
import { createStackNavigator } from 'react-navigation-stack';
import Home from '../screens/Home';

const AppNavigation = createStackNavigator(
  {
    Home: { screen: Home }
  },
  {
    initialRouteName: 'Home'
  }
);

export default AppNavigation;
```

Stack Navigation provides your app to navigate between screens, where each new screen is placed on the top of the previous one. It is literally like a stack and hence the name. This is done by `createStackNavigator` function. A route configuration object is passed to this function. The `Home` route corresponds to the `Home.js` component.

On an iOS device, a new screen slides from the right, and on Android, it fades from the bottom.

Next, edit `AuthNavigation.js` file.

```js
//AuthNavigation.js
import { createStackNavigator } from 'react-navigation-stack';
import Login from '../screens/Login';
import Signup from '../screens/Signup';

const AuthNavigation = createStackNavigator(
  {
    Login: { screen: Login },
    Signup: { screen: Signup }
  },
  {
    initialRouteName: 'Login'
  }
);

export default AuthNavigation;
```

Similarly, in `AuthNavigation` two screens, login and signup are passed. In the second object that is passed to `createStackNavigator` function, the `initialRouteName` indicates that when this navigation file runs, the first screen that will be shown is going to be `Login`. In other words, it is used to set a default screen to whatever the value `initialRouteName` is set to.

In `AppNavigation` since there is only one screen, so it will always show `Home` screen whether to pass the `initialRouteName` in that file or not. Next, open `index.js` file in the same directory and add the following code.

```js
//index.js
import { createAppContainer } from 'react-navigation';
import AuthNavigation from './AuthNavigation';

const AppContainer = createAppContainer(AuthNavigation);

export default AppContainer;
```

The `createAppContainer` function is responsible for managing the navigation state of the app and links the app to the top-level navigator. The navigation state comes in handy when you are passing data between two screens.

Lastly, open the `App.js` file and use `AppContainer` to be the top-level component.

```js
//App.js
import React from 'react';
import AppContainer from './navigation';

export default function App() {
  return <AppContainer />;
}
```

Now open your app in a simulator device by executing the command `expo start` from a terminal window. You will see that it shows only the `Login` screen.

<img src='https://cdn-images-1.medium.com/max/800/1*AjWvmQ72BYHLrqCtmBsbiw.png' />

_Notice the empty space at the top of the screen?_ That is the header section. When using Stack Navigation pattern, each screen is assigned a header automatically. If you do not require to use it, you can set the `headerMode` property to the value of `none` to `createStackNavigator` function. Open `AuthNavigation.js` to edit.

```js
// AuthNavigation.js
const AuthNavigation = createStackNavigator(
  {
    Login: { screen: Login },
    Signup: { screen: Signup }
  },
  {
    initialRouteName: 'Login',
    headerMode: 'none'
  }
);
```

You can read more about app containers [here](https://reactnavigation.org/docs/en/app-containers.html#props-of-createappcontainer-on-react-native).

## Navigating between two screens

Right now, there is no way you can navigate from the `Login` to the `Signup` screen. To do so, let us use `this.props.navigation`. Each screen component in the app using `react-navigation` library is automatically provided with the `navigation` prop. It further has [different reference values](https://reactnavigation.org/docs/en/navigation-prop.html) to navigate between different screens directly from a screen.

To transit between login to signup, create a button like below and pass an `onPress` prop to it in `Login.js` file. The value of this prop is going to hold the `navigation` prop reference.

```js
//Login.js

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

export default class Login extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Login</Text>
        <Button
          title="Go to Signup"
          onPress={() => this.props.navigation.navigate('Signup')}
        />
      </View>
    );
  }
}
```

Passing the name of the route as the first parameter to `navigation.navigate()` is necessary. Now go back to the simulator, and you will find a new button. Press the button, and it will take you to the `Signup` screen component.

<img src='https://cdn-images-1.medium.com/max/800/1*1SAUNjPgkuXtC-QU8tioSg.gif' />

Similarly, you can add a way to navigate back to the login screen component from the signup.

```js
//Signup.js

export default class Signup extends React.Component {
  goToLogin = () => this.props.navigation.navigate('Login');
  render() {
    return (
      <View style={styles.container}>
        <Text>Signup</Text>
        <Button title="Go to Login" onPress={this.goToLogin} />
      </View>
    );
  }
}
```

Here is the output.

<img src='https://cdn-images-1.medium.com/max/800/1*dO_4EKaKWrv8HlNo3WPPJA.gif' />

## Managing Authentication Flow

In React Navigation, to manage authentication flow, Switch Navigator is used. This navigation pattern only loads one screen at a time, and there is no back functionality by default. It resets the initial route when switching between the screens. To get started open `index.js` file, import `createSwitchNavigator` from `react-navigation` and add the following code.

```js
//index.js
import { createSwitchNavigator, createAppContainer } from 'react-navigation';
import AuthNavigation from './AuthNavigation';
import AppNavigation from './AppNavigation';

const SwitchNavigator = createSwitchNavigator(
  {
    Auth: AuthNavigation,
    App: AppNavigation
  },
  {
    initialRouteName: 'Auth'
  }
);

const AppContainer = createAppContainer(SwitchNavigator);

export default AppContainer;
```

Note that, the `AppContainer` is still being exported from the file, but it now accepts `SwitchNavigator` as the parameter. Like the `createStackNavigator`, `createSwitchNavigator` also accepts route config as the first parameter and the configuration values as the second. The route config is going to be done between the authentication navigation screens and the other screens related to the app.

Import both `AuthNavigation` and `AppNavigation` and set the `Auth` as the initial route. This means that the login screen is going to be shown for the when apps load for the first time.

Let us mock the behavior of logging into the app and see what happens when the user successfully logs in. Open `Login.js` file, define an initial state with two properties: `email` and `password`.

```js
//Login.js
import React from 'react';
import { StyleSheet, View, Button, TextInput } from 'react-native';

export default class Login extends React.Component {
  state = {
    email: '',
    password: ''
  };

  handleEmailChange = email => {
    this.setState({ email });
  };

  handlePasswordChange = password => {
    this.setState({ password });
  };

  onLogin = async () => {
    const { email, password } = this.state;
    try {
      if (email.length > 0 && password.length > 0) {
        this.props.navigation.navigate('App');
      }
    } catch (error) {
      alert(error);
    }
  };

  goToSignup = () => this.props.navigation.navigate('Signup');
  render() {
    const { email, password } = this.state;

    return (
      <View style={styles.container}>
        <View style={{ margin: 10 }}>
          <TextInput
            name="email"
            value={email}
            placeholder="Enter email"
            autoCapitalize="none"
            onChangeText={this.handleEmailChange}
          />
        </View>
        <View style={{ margin: 10 }}>
          <TextInput
            name="password"
            value={password}
            placeholder="Enter password"
            secureTextEntry
            onChangeText={this.handlePasswordChange}
          />
        </View>
        <Button title="Login" onPress={this.onLogin} />
        <Button title="Go to Signup" onPress={this.goToSignup} />
      </View>
    );
  }
}

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

The `onLogin` handler function allows the user to navigate to the `Home` screen only if the email and the password fields are not empty. It is used on the `onPress` prop for the following button.

```js
<Button title="Login" onPress={this.onLogin} />
```

Look at the complete demo below.

<img src='https://cdn-images-1.medium.com/max/800/1*mPCEThKI-qoYL6y1TgWzHw.gif' />

## Conclusion

_The authentication flow works!_ By following this tutorial, you have learned how to use the latest `react-navigation` library to manage and mimic an authentication flow in a React Native app. Using the current knowledge, in the next post, you are going to build some actual forms in React Native apps with proper styling and validation using awesome libraries like Formik and Yup. I hope this post works as fundamental for the next one.

_You can find the complete code used in this tutorial at the Github repo [here](https://github.com/amandeepmittal/expo-firebase/releases/tag/0.1.0)._

**Important resources from this post:**

- [`react-navigation`](https://reactnavigation.org) library docs
- [Stack Navigator](https://reactnavigation.org/docs/en/stack-navigator.html)
- [Switch Navigator](https://reactnavigation.org/docs/en/switch-navigator.html)
- [`navigation` props](https://reactnavigation.org/docs/en/navigation-prop.html)

[Originally published at Heartbeat](https://heartbeat.fritz.ai/how-authentication-flow-works-in-react-native-apps-using-react-navigation-4-x-a30bb4d9e5d6)


How Authentication Flow works in React Native apps using React Navigation 4.x

How to Build an Audio Player in React Native

Build a Not Hotdog clone with React Native

Building offline React Native apps with AsyncStorage

How to use the Geolocation API in a React Native app

---
title: 'How to build a xylophone app with Audio API, React Native, and Expo'
date: '2019-07-22'
slug: 'how-to-use-emotion-js-with-react-native'
thumbnail: '/thumbnails/expo.png'
tag: 'expo'
canonicalUrl: 'https://heartbeat.fritz.ai/how-to-build-a-xylophone-app-with-audio-api-react-native-and-expo-7d6754a0603c'
---

React Native when used with Expo as a toolchain eases out the common pain to manage ios and android applications. After saying that, I realized that there is a delight to use this ever-growing open source mobile application framework. Expo has gained a lot of credibility as a framework to provide collective solutions to build React Native applications by lowering the time and effort of the developer using it. They are continuing to enhance it from time to time and keeping up with the latest changes in React Native community. That said, Expo SDK33 is a blast.

That being said, let us dive into one of the Expo's API. In this tutorial, you are going to build an application using Expo's Audio API. You are going to develop the following app (_a toy xylophone app_) step-by-step.

<img src='https://miro.medium.com/max/350/1*YE5sb3gX_ValSM48QGT1eQ.png' />

**Table of Contents**

## Requirements

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

- [Nodejs](https://nodejs.org/en/) (>=`8.x.x`) with npm/yarn installed.
- [`expo-cli`](https://docs.expo.io/versions/latest/workflow/expo-cli/) (>= `2.19.4)`, previously known as create-react-native-app.
- [`watchman`](https://facebook.github.io/watchman/) is the file change watcher for React Native projects.

## Getting Started

To create a new Expo project, the only requirement is to have `expo-cli` installed. Then, execute the following command to create a new project directory.

```shell
expo init rn-xylophone-app

# navigate inside the app folder
cd rn-xylophone-app

# install the following dependency
yarn add expo-av
```

Once the project directory is generated, navigate inside it as shown in the above command. Then install the required dependency to add the functionality of playing an Audio file inside the React Native app. The dependency `expo-av` will help you use Audio API and its promise based asynchronous methods to play the audio files. You are going to implement this functionality later.

The last step needed is to have some sound files saved in your `assets` folder. You can, of course, use your audio files but if you want to use the same audio files used in this tutorial, you can download them at the link given below.

[add assets folder download link]

You might have got the idea of what the user interface is going to look while having a glimpse at the demo in the previous section. For each button, you are going to need a different color. Hence, create a new file called `contants/Colors.js` and add the following code.

```js
export const NoteOne = 'red';
export const NoteTwo = 'orange';
export const NoteThree = 'yellow';
export const NoteFour = 'green';
export const NoteFive = '#00FFFF    ';
export const NoteSix = '#000080';
export const NoteSeven = '#B266FF';
```

Require this file and all the Color codes inside `App.js` file after other imports.

```js
// ...after other imports

import {
  NoteOne,
  NoteTwo,
  NoteThree,
  NoteFour,
  NoteFive,
  NoteSix,
  NoteSeven
} from './constants/Colors';
```

The color names are specified to mark each audio file which is named and numbered similarly. To import all the sounds file needed to build the application from the `assets` folder. Add the below object before the `App` component as shown.

```js
const xyloSounds = {
  one: require('./assets/note1.wav'),
  two: require('./assets/note2.wav'),
  three: require('./assets/note3.wav'),
  four: require('./assets/note4.wav'),
  five: require('./assets/note5.wav'),
  six: require('./assets/note6.wav'),
  seven: require('./assets/note7.wav')
};
```

The above object `xyloSounds` consist of the path to each sound file. This will be helpful when you are writing business logic to play these audio files and have to detect which audio file to play for the specific note.

## Building the first UI button

In this section, you are going to create a button using `TouchableOpacity` that is going to play the sound for the note when pressed. To start, make sure in the file `App.js` you have imported the following APIs from the react-native core.

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

Then, you have to modify the contents of the `render` function from the default, boilerplate text that any Expo application comes with. This is going to be done by creating a `View` container for each button, which will have a fixed height and margin of value `5` to add some spacing between the buttons.

```js
<View style={styles.container}>
  <View style={styles.buttonContainer}>
    <TouchableOpacity
      style={[styles.button, { backgroundColor: NoteOne }]}
      onPress={() => this.handlePlaySound('one')}
    >
      <Text style={styles.buttonText}>Note 1</Text>
    </TouchableOpacity>
  </View>
</View>
```

Notice that each button will have its background color specified in the file `constants/Colors.js`. This is done by inline styling method. To combine multiple styles in React Native, you can use an array notation like above. The button has one `onPress` method that is going to be responsible for playing the correct sound associated with the note. You will be creating the method `handlePlaySound` in the next section. However, do note that the value `one` being passed to this method is coming from the path you specified earlier for each audio file. Lastly, the button is going to have a text to display the correct audio file number.

The above snippet is followed by the styles that are created using `StyleSheet.create()` method.

```js
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    marginTop: 50
  },
  buttonContainer: {
    height: 40,
    margin: 5
  },
  button: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  buttonText: {
    color: '#fff',
    fontSize: 18
  }
});
```

To see the current state of the application in action, go back to the terminal window and run the command `yarn start` or `expo start` if you do not have yarn installed. In the simulator screen, you are going to be welcomed, as shown in the below image.

<img src='https://miro.medium.com/max/350/1*jzwOoqsEJkTUSMMEKCwOPg.png' />

## Adding the Audio functionality

To play a sound in an Expo application, you are required to first the API for the `Audio` from `expo-av`. So at the top of the `App.js` file and after other imports, you can add the following line.

```js
import { Audio } from 'expo-av';
```

Next, you have to add the method `handlePlaySound` inside the `App` function and before the `render()` method. Inside this function, create a new sound object. Whenever you are required to play sound using `expo-av` library, you have to create a new object. This object is going to represent the instance of the class `Audio.sound`.

```js
handlePlaySound = async note => {
  const soundObject = new Audio.Sound();

  try {
    let source = require('./assets/note1.wav');
    await soundObject.loadAsync(source);
    await soundObject
      .playAsync()
      .then(async playbackStatus => {
        setTimeout(() => {
          soundObject.unloadAsync();
        }, playbackStatus.playableDurationMillis);
      })
      .catch(error => {
        console.log(error);
      });
  } catch (error) {
    console.log(error);
  }
};
```

In the above snippet, you can notice that the method `handlePlaySound` is going to accept one parameter. This parameter is going to be the note's number, hence the name of the parameter being passed in the above snippet is called `note`. Inside that, the first line creates the instance of the class `Audio.Sound()`.

Since JavaScript syntax of `async/await` is being used, it is better to create a `try/catch` block such that this Expo app does not give us any error when running the application. Inside this block, the first method `loadAsync` is used to create and load the sound from the source. Hence, the variable `source` defined explicitly is passed and contains the path of the first audio file from the `assets` folder.

To play the sound, `playAsync()` method is used. This method is, however, further extends using a promise that takes one object called `playbackStatus` object. This object uses `playableDurationMillis` to identify the position until the audio file should run from the memory. Once the audio file is played, the `soundObject` calls the method `unloadAsync()` which unloads the media file from memory. This allows the media file to be played again and again. The `setTimeout` function's value depends on the duration of the media file being played from memory.

Go back to the simulator or the device the current app is running and try to press the first button. You will hear the sound of the first note.

## Finishing the App

To complete building the application, you have to read the path of each file from the object `xyloSounds.` Edit the the value of `source` inside the method `handlePlaySound()`.
Also, add the button for each note and do not forget to pass the correct source value inside the `onPress()` method. For your reference, here is the complete code of the file `App.js`.

```js
import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { Audio } from 'expo-av';

import {
  NoteOne,
  NoteTwo,
  NoteThree,
  NoteFour,
  NoteFive,
  NoteSix,
  NoteSeven
} from './constants/Colors';

const xyloSounds = {
  one: require('./assets/note1.wav'),
  two: require('./assets/note2.wav'),
  three: require('./assets/note3.wav'),
  four: require('./assets/note4.wav'),
  five: require('./assets/note5.wav'),
  six: require('./assets/note6.wav'),
  seven: require('./assets/note7.wav')
};

export default function App() {
  handlePlaySound = async note => {
    const soundObject = new Audio.Sound();

    try {
      let source = xyloSounds[note];
      // let source = require('./assets/note1.wav')
      await soundObject.loadAsync(source);
      await soundObject
        .playAsync()
        .then(async playbackStatus => {
          setTimeout(() => {
            soundObject.unloadAsync();
          }, playbackStatus.playableDurationMillis);
        })
        .catch(error => {
          console.log(error);
        });
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <View style={styles.container}>
      <View style={styles.buttonContainer}>
        <TouchableOpacity
          style={[styles.button, { backgroundColor: NoteOne }]}
          onPress={() => this.handlePlaySound('one')}
        >
          <Text style={styles.buttonText}>Note 1</Text>
        </TouchableOpacity>
      </View>
      <View style={styles.buttonContainer}>
        <TouchableOpacity
          style={[styles.button, { backgroundColor: NoteTwo }]}
          onPress={() => this.handlePlaySound('two')}
        >
          <Text style={styles.buttonText}>Note 2</Text>
        </TouchableOpacity>
      </View>
      <View style={styles.buttonContainer}>
        <TouchableOpacity
          style={[styles.button, { backgroundColor: NoteThree }]}
          onPress={() => this.handlePlaySound('three')}
        >
          <Text style={styles.buttonText}>Note 3</Text>
        </TouchableOpacity>
      </View>
      <View style={styles.buttonContainer}>
        <TouchableOpacity
          style={[styles.button, { backgroundColor: NoteFour }]}
          onPress={() => this.handlePlaySound('four')}
        >
          <Text style={styles.buttonText}>Note 4</Text>
        </TouchableOpacity>
      </View>
      <View style={styles.buttonContainer}>
        <TouchableOpacity
          style={[styles.button, { backgroundColor: NoteFive }]}
          onPress={() => this.handlePlaySound('five')}
        >
          <Text style={styles.buttonText}>Note 5</Text>
        </TouchableOpacity>
      </View>
      <View style={styles.buttonContainer}>
        <TouchableOpacity
          style={[styles.button, { backgroundColor: NoteSix }]}
          onPress={() => this.handlePlaySound('six')}
        >
          <Text style={styles.buttonText}>Note 6</Text>
        </TouchableOpacity>
      </View>
      <View style={styles.buttonContainer}>
        <TouchableOpacity
          style={[styles.button, { backgroundColor: NoteSeven }]}
          onPress={() => this.handlePlaySound('seven')}
        >
          <Text style={styles.buttonText}>Note 7</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    marginTop: 50
  },
  buttonContainer: {
    height: 40,
    margin: 5
  },
  button: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  buttonText: {
    color: '#fff',
    fontSize: 18
  }
});
```

Now run the application in the simulator, and you will get the following screen.

<img src='https://miro.medium.com/max/350/1*YE5sb3gX_ValSM48QGT1eQ.png' />

## Conlusion

You have reached the end of this tutorial. I hope you have learned how to integrate the `expo-av` library to use `Audio` class to create functionality in your cross-platform applications and play audio media files. Important things to notice in this demo application is how to use available methods like `loadAsync()`, `unloadAsync()` and leverage the duration of the playing media using the object `playplaybackStatus`.

[Originally published at Heartbeat](https://heartbeat.fritz.ai/how-to-build-a-xylophone-app-with-audio-api-react-native-and-expo-7d6754a0603c)


How to build a xylophone app with Audio API, React Native, and Expo

---
title: 'How to Create a Chatbot with Dialogflow, NodeJS, and Webhooks'
date: '2019-07-19'
slug: 'build-chatbot-dialogflow-nodejs-webhooks'
thumbnail: '/thumbnails/node.png'
tag: 'nodejs'
canonicalUrl: 'https://crowdbotics.ghost.io/build-chatbot-dialogflow-nodejs-webhooks/'
---

![cover_image](https://i.imgur.com/cOAePoA.jpg)

> [Originally published at Crowdbotics](https://crowdbotics.ghost.io/build-chatbot-dialogflow-nodejs-webhooks/)

Chatbots are the hottest things in the modern digital world. Every day, organizations and individuals are powering their digital products such as websites or messenger apps to provide conversational experiences for their users. Each conversational experience depends on the implementation of the chatbot to either be a good or poor experience for the user. The modern day world is living in the technology wave of Artificial Intelligence, and chatbots are a massive part of it.

In this tutorial, you are going to be introduced to an easy to use tool for such uses cases known as [Dialogflow](https://dialogflow.com/). Formerly known as API.AI, it can be customized to provide information such as weather in your user's city or information about a movie they like to see. This customization, however, can only be applied using a third party API that is consistent in delivering results for the specific search term.

By providing a step by step on setting up and running the chatbot and how to use a third party API with Dialogflow. You are going to create a custom webhook using Nodejs, deploy it as a service, and then use it with your Dialogflow setups to develop agents and intents. _What are webhooks, you ask?_

A Webhook is a simple HTTP callback that gets triggered based on some event. These events are defined by the user, for example, publishing a comment to blog post, or publishing a new tweet on your Twitter app.

You are going to build a movie chatbot that provides information about a movie using [The Open Movie Database API](http://www.omdbapi.com). The webhooks will be used to fetch the details of a film.

**Table of Contents**

- Requirements
- Create a Node Server
- Fetching the Movie
- Deploy the Webhook on Heroku
- Setup Dialogflow
- Create Training Phrases
- Enable the Webhook
- Conclusion

## Requirements

To follow this tutorial, you need the following:

- Nodejs v8.x.x or higher installed along with npm/yarn as the package manager
- Github Account
- Crowdbotics App builder Platform account (preferably log in with your valid Github ID)
- Dialogflow account (_you can use your Google ID_)
- [OMDb API API Key](https://developers.themoviedb.org/3/getting-started/introduction): make sure when you register the account, you request for an API key. It is very to get one, register an account.
- Heroku or some similar service to deploy the webhook

## Create a Node Server

The following steps have to perform inside the project directory you have set up to create the Nodejs server. Once you are inside the server folder, make sure you run the following commands sequentially using a terminal window. The first command will initialize the server directory as a node server and generate a package.json file. The second command will let you install all the required dependencies.

```shell
# to initialize
npm init --yes

# to install dependencies
npm install -save express dotenv
```

Once all the dependencies are installed, let us bootstrap a small server and see if everything is working or not. Create a new file `index.js` and add the following snippet to it.

```js
const express = require('express');
// will use this later to send requests
const http = require('http');
// import env variables
require('dotenv').config();

const app = express();
const port = process.env.PORT || 3000;

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

app.get('/', (req, res) => {
  res.status(200).send('Server is working.');
});

app.listen(port, () => {
  console.log(`🌏 Server is running at http://localhost:${port}`);
});
```

The above server is simple as it can be with only one `/` home route for now. This route is created now only to test whether the server being bootstrapped in this section is going to work or not. Sometimes small errors are time wasters, so it is better to check out. The module `dotenv` enable the file to read environment variables and their values from the file `.env`. Here is how the `.env` the file looks like.

```shell
API_KEY=XXXX
```

The Xs are going to be the value of the API key that you have got from registering an account at OMDB API. Replace the value of these Xs with that key. Now, go to the terminal window and execute the command `node index.js`. This will prompt with the message you have defined in the above snippet. Visit the URL `http://localhost:3000` from the browser window, and you will get the following result.

<img src='https://crowdbotics.ghost.io/content/images/2019/07/ss3-1.png' />

## Fetching the Movie

In this section, you are going to create a route called `/getmovie`. It is going to be a post request. This request is going to search for the movie specified on the user's input. If that movie exists, it will return the user with the details of the movie such as the name itself, the year it was released, a summarised plot, and so on.

Open `index.js` file and the following after you have defined middleware functions.

```js
app.post('/getmovie', (req, res) => {
  const movieToSearch =
    req.body.queryResult &&
    req.body.queryResult.parameters &&
    req.body.queryResult.parameters.movie
      ? req.body.result.parameters.movie
      : '';

  const reqUrl = encodeURI(
    `http://www.omdbapi.com/?t=${movieToSearch}&apikey=${process.env.API_KEY}`
  );
  http.get(
    reqUrl,
    responseFromAPI => {
      let completeResponse = '';
      responseFromAPI.on('data', chunk => {
        completeResponse += chunk;
      });
      responseFromAPI.on('end', () => {
        const movie = JSON.parse(completeResponse);

        let dataToSend = movieToSearch;
        dataToSend = `${movie.Title} was released 
        in the year ${movie.Year}. It is directed 
        by ${movie.Director} and stars ${movie.Actors}.\n Here some glimpse of the plot: $
        {movie.Plot}.
                }`;

        return res.json({
          fulfillmentText: dataToSend,
          source: 'getmovie'
        });
      });
    },
    error => {
      return res.json({
        fulfillmentText: 'Could not get results at this time',
        source: 'getmovie'
      });
    }
  );
});
```

The `http` module is from Nodejs core. It is going to send the request which is the variable `reqUrl` and a callback function `responseFromAPI`. This function is going to trigger two events: `data` and `end`. The event `data` is going to return the information about the movie from API in chunks.

The `completeResponse` holds the data is parsed into JSON when the response from the API is ended. The customized response that is being returned in the above route's snippet should contain the field `fulfillmentText` and `error` response for cases that might now work at all.

On a side note, here is how an object for a specific movie data in JSON looks like from the OMDB API.

```json
{
  "Title": "Flashbacks of a Fool",
  "Year": "2008",
  "Rated": "R",
  "Released": "17 Oct 2008",
  "Runtime": "109 min",
  "Genre": "Drama",
  "Director": "Baillie Walsh",
  "Writer": "Baillie Walsh",
  "Actors": "Emile Robert, Scoutt Lowe, Daniel Craig, Julie Ordon",
  "Plot": "A fading Hollywood star looks back at
  the days of his youth as he returns home from his
  best friend's funeral.",
  "Language": "English",
  "Country": "UK",
  "Awards": "N/A",
  "Poster": "https://m.media-amazon.com/images/M/
  MV5BMTIzMDk0MDc3OV5BMl5BanBnXkFtZTcwODMwODY5MQ@@.
  _V1_SX300.jpg",
  "Ratings": [
    { "Source": "Internet Movie Database", "Value": "6.8/10" },
    { "Source": "Rotten Tomatoes", "Value": "38%" }
  ],
  "Metascore": "N/A",
  "imdbRating": "6.8",
  "imdbVotes": "11,348",
  "imdbID": "tt1037218",
  "Type": "movie",
  "DVD": "22 Sep 2008",
  "BoxOffice": "N/A",
  "Production": "Anchor Bay Entertainment",
  "Website": "http://www.thefilmfactory.co.uk/flashbacks/",
  "Response": "True"
}
```

From this considerable object, you are only using some amount of information described in the previous snippet. To test that the result is being fetched from the OMDB API, start the server by going to the terminal window. Execute command `node index.js`.

Open your favorite rest clients such as Postman or Insomnia. Enter the URL `http://localhost:3000/getmovie` and even though it is POST request, and you will have to enter the `parameters` as shown below. Let us test out if the API is returning the details of the movie name entered or not. In the below image, you can verify that the information related to the data is being replaced.

<img src='https://crowdbotics.ghost.io/content/images/2019/07/SS4.png' />

## Deploy the Webhook on Heroku

Since the route `/getmovie` is working, it is time to deploy the webhook you successfully build in the previous step. [Login](https://id.heroku.com/login) to your Heroku account or if you do not have one, create an account. You can upload up to five web applications that can run for free to some number of hours (_called as dynos_).

Before you proceed with any of the steps below, in the `package.json` file, make sure the `start` script exists as specified below.

```json
"scripts": {
        "start": "node index.js",
        "test": "echo \"Error: no test specified\" && exit 1"
}
```

Once you log in, you will be welcomed by the screen known as Dashboard. Create on the button **New** on the top right corner and then create choose **Create new app**.

<img src='https://crowdbotics.ghost.io/content/images/2019/07/ss5-1.png' />

Fill in the name of the application. Once you have entered the details, click the button **Create app**.

<img src='https://crowdbotics.ghost.io/content/images/2019/07/ss6-1.png' />

Now, you will be welcomed by the following page that has instructions to deploy your current Node app. If you are using Github, go ahead and choose the **Connect to Github** deployment method. I am going to use [heroku-cli](https://devcenter.heroku.com/articles/heroku-cli).

<img src='https://crowdbotics.ghost.io/content/images/2019/07/ss7-1.png' />

To proceed with the following set of instructions, also as mentioned in the above screen under the section **Deploy using Heroku Git**. What this means is that the instance of your complete Node application is going to be deployed from the local development environment where the application is currently located. Once you have installed the Heroku CLI, enter the following command to proceed. Also, if you are using the Crowdbotics platform to generate the current demo app or have initialized the directory, you are working using the command `git init`, ignore the section **Clone the repository** in the above image.

```shell
# login
heroku login

# to deploy
$ git add .
$ git commit -am "deploy"
$ git push heroku master
```

The only thing to notice here is that you are not going to `git push` to the `origin` but `heroku`. Once the deployment is done, you will get a message like below in the terminal window.

```shell
remote:        https://getmoviehook.herokuapp.com/ deployed to Heroku
remote:
remote: Verifying deploy... done.
To https://git.heroku.com/getmoviehook.git
 * [new branch]      master -> master
```

You will get the URL `https://getmoviehook.herokuapp.com/` from the above deployment procedure. To test it out, you cannot merely send a GET request by visiting the URL `https://getmoviehook.herokuapp.com/getmovie` from a browser window. You can again use a REST client like Postman. Just replace the `localhost` URL with deployed one that is previously mentioned.

You will get successful results.

<img src='https://crowdbotics.ghost.io/content/images/2019/07/ss8-1.png' />

## Setup Dialogflow

Dialogflow is a Natural Language Processing (NLP) service from Google. It has many integrations, SDKs for programming languages and some prebuilt agents. It works very straightforward with Google Assistant. Visit the [Dialogflow website](https://dialogflow.com/) and create a new account or log-in with your existing Google ID.

<img src='https://crowdbotics.ghost.io/content/images/2019/07/ss9-2.png' />

Once you are logged in, you will be welcomed by a screen that consists of different **Agents**.

<img src='https://crowdbotics.ghost.io/content/images/2019/07/ss10.png' />

Click on the Create Agent button to make one for yourself. Name it something similar to `OMDBbot`. Fill in the details like below.

<img src='https://crowdbotics.ghost.io/content/images/2019/07/ss11.png' />

After filling out the details, click on the button **Create**.

Generally, for small applications, you will have one agent. In Dialogflow, the basic flow of conversation involves these steps:

- The user giving input in the form of a query
- Your Dialogflow agent parses the input from the training phrases
- Your agent returns a response back to the user

These agents understand the varied nuances of human language. They can translate that to standard and structured meaning that chatbot applications and services can understand. Each agent contains different **intents**. The intent is the action taken based on the user's input. It can be the response sent back to the user in a chatbot application. It can contain different types of responses or actions. The next step in the process is to create your first intent.

<img src='https://crowdbotics.ghost.io/content/images/2019/07/ss12.png' />

Click on the button **Create intent** and fill in the name `getmovie`. You can name your intent anything.

Intent can be a simple text response that is displayed back to the user or a set of trained phrases. There are also actions and parameters that extract information from user queries. Examples of this kind of information include dates, times, names, places, and more.

## Create Training Phrases

Let us create new training phrases in this section. To create a new phrase, go to the section **Training phrases** and a unique user expression as shows below.

<img src='https://crowdbotics.ghost.io/content/images/2019/07/ss13.png' />

For the movie chatbot, each user expression is going to contain the name of the movie. The Dialogflow agent is not smart enough to extract the name of the movie out of the user's expression. You have to provide an entity that can highlight the name of the movie every time a new training phrase is introduced to the bot.

From the sidebar menu, go to the entity section and click on the button **Create Entity**. Fill in the name of your entity as `movie` because this is what is being passed inside the webhook's request body. From the server, remember the following line:

```js
req.body.queryResult.parameters.movie;
```

Once you have saved your entity, go back to the intent.

<img src='https://crowdbotics.ghost.io/content/images/2019/07/ss14.png' />

## Enable the Webhook

To test out that everything is working, let us use the default response provided by the Dialogflow intent. As shown below, on the right-hand side of the screen, you can test out by entering a user expression. The movie chatbot will return the default response.

<img src='https://crowdbotics.ghost.io/content/images/2019/07/ss15.png' />

This is okay and verifies that the intent has been created successfully. Now, to use the real-time data from the OMDB API, you are going to enable the webhook. From the sidebar menu, go to the **Fulfillment** section. You will be welcomed by the following screen.

<img src='https://crowdbotics.ghost.io/content/images/2019/07/ss16.png' />

Enable the **Webhook** and then enter the **URL** of the deployed endpoint.

<img src='https://crowdbotics.ghost.io/content/images/2019/07/ss17.png' />

Once that is done, go back to the **Intents** section, and scroll down to the bottom of the web page. There is a **Fulfillment** section. Toggle the button to **Enable webhook call for this intent**.

<img src='https://crowdbotics.ghost.io/content/images/2019/07/ss18.png' />

Once that is done, go to the right side of the screen to test it out. Fill in the user expression similar to a training phrase you have provided earlier. The agent will get a response back with the details of the movie.

<img src='https://crowdbotics.ghost.io/content/images/2019/07/ss19.png' />

## Conclusion

You have successfully created, deployed, and tested a Nodejs Webhook for Dialogflow chatbot application. By the end of this tutorial, we are sure you have learned how easy it is to create a new chatbot agent using Dialogflow. The possibilities of using a powerful API such as Dialogflow are endless. In no time, you can build up your own chatbot interface for front-end clients using Reactjs, Angular, and even mobile cross-platform framework like React Native. We hope this tutorial provided you an easy walkthrough to grab the concepts and build something of your own.


How to Create a Chatbot with Dialogflow, NodeJS, and Webhooks

---
title: 'Using React Router to Optimize Single Page Applications (SPAs)'
date: '2019-07-11'
slug: 'introduction-to-react-router-v4-with-reactjs'
thumbnail: '/thumbnails/react.png'
tag: 'reactjs'
canonicalUrl: 'https://blog.crowdbotics.com/introduction-to-react-router-v4-with-reactjs/'
---

React is often used for building single page applications (SPAs). SPAs tend to have multiple page views. When navigating from one-page view to another, reloading the entire page view is a tedious and not so efficient task. In fact, it diminishes the benefits of a SPA. To work as it should, a SPA must render parts of views when required instead of reloading the entire page.

Routing comes into the picture when navigating from one page to another in a SPA app. Routing can be categorized in two ways. Static and dynamic. SPAs follow a dynamic approach. In this tutorial, we will discuss a popular routing library used with React applications known as [React Router](https://reacttraining.com/react-router/web/guides/quick-start).

**Table of Contents**

- Requirements
- Getting Started
- First Route with React Router
- What is BrowserRouter?
- The Link Component
- Active Links with NavLink
- Adding Parameters to the Routes
- Conclusion

**Requirements**

- NodeJS `v8.x.x` or higher installed along with npm/yarn
- `create-react-app` installed globally to on your local dev machine generates a new React project

_Bonus_: You can also, use `npx` to generate a new React project without installing `create-react-app`.

## Getting Started

To create a new React project run the following command at the desired location on your local machine.

```shell
create-react-app react-router-v4-demo
```

Once the project is generated, traverse inside the newly created directory. This strategy is the default way to generate a new React app.

[React Router](https://reacttraining.com/react-router/web/guides/quick-start) as a library contains three different npm packages.

- react-router
- react-router-dom
- react-router-native

Each of the packages has a different use case. The first one, `react-router` is the core package and is used with the next two packages listed above. The `react-router-dom` has to be used when building a web application. This is what we are going to use in this tutorial. The last one, `react-router-native` tends to be used in a [React Native](https://hackernoon.com/getting-started-with-react-native-in-2019-build-your-first-app-a41ebc0617e2) application.

To add React Router in the React app, execute the following command from a terminal window.

```shell
yarn add react-router-dom
```

Please note that, for the rest of the tutorial, we will be using `yarn` as the JavaScript package manager to add or remove dependencies. If you wish to use `npm`, there is no one stopping you.

To run the React app, go to the terminal window and execute the command npm start. This will start the development server. You will be welcomed by the default boilerplate project screen in a web browser window on URL `http://localhost:3000/`.

![ss1](https://crowdbotics.ghost.io/content/images/2019/05/ss1-1.png)

## First Route with React Router

To create the first route in the React app, let us import `BrowserRouter` from `react-router-dom` library.

```js
import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
```

To create a route, we use `<Route>` from the `react-router-dom`. This is where the logic of routing is placed. It renders the UI of a component. A `<Route>` has a prop called `path` which is always matched with the current location of the app. On the basis of this prop, the desired component gets rendered. When the component is not getting rendered, `Route` returns null. The component name is also passed as a prop `component`. Look at the below snippet.

```js
function App() {
  return (
    <Router>
      <Route path="/" component={Home} />
    </Router>
  );
}
```

There is the functional `App` component that returns a `BrowserRouter` which holds the very first `Route` component. The `path` is currently pointing towards the `Home` component which has the following UI logic.

```js
function Home() {
  return (
    <div>
      <h1>Home Component</h1>
    </div>
  );
}
```

Now, visit the URL on port `3000` and you will see the `Home` component being rendered right now.

![ss2](https://crowdbotics.ghost.io/content/images/2019/05/ss2.png)

This is a bare minimum example. Now let us add another route with the same props as the `Home`. Call this route `About` with a similar rendering logic as `Home`.

```js
function About() {
  return (
    <div>
      <h1>About Component</h1>
    </div>
  );
}
```

Now add this functional component as the second route, below the `Home` route. Also, add both routes inside a `div` element. A router component can hold a single child element and adding a `div` solves this problem and allows the router component to have as many children as we want.

```js
function App() {
  return (
    <Router>
      <div>
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />
      </div>
    </Router>
  );
}
```

Try visiting the URL `http://localhost:3000/about`. You will notice that both the components are being rendered right now on the path `/about`.

![ss3](https://crowdbotics.ghost.io/content/images/2019/05/ss3-1.png)

The reason for this is that regular expression engine that React Router uses internally considers both the routes that are being started with a forward slash `/` equal. To solve this issue, we can use another essential prop on the Home route called `exact`.

```js
<Router>
  <div>
    <Route path="/" exact component={Home} />
    <Route path="/about" component={About} />
  </div>
</Router>
```

This exact is also known as a qualifier which states that the path must match the exactly the `/` and nothing after it, such as `/about`. Now, if you visit the browser window at the URL `http://localhost:3000/about` you will notice that only the about component is getting rendered this time.

![ss4](https://crowdbotics.ghost.io/content/images/2019/05/ss4.png)

## What is BrowserRouter?

Do you remember reading earlier about that `react-router-dom` is used only in case of web applications? Well, `react-router-dom` library holds two types of routers API for a React application to use. One is called `BrowserRouter` that you have seen in action in the previous section. The other one is called `HashRouter`.

A `BrowserRouter` will always listen to URLs like `http://localhost:3000/about` whereas a `HashRouter` will have `http://localhost:3000/#/about`, as the name suggests, uses a hash `#` in between. So why did we use the `BrowserRouter`?

`BrowserRouter` is a popular choice among modern day web applications. The main reason behind is that it uses HTML5 History API to keep track of the router history of your React app. The `HashRouter` has a use case for legacy browsers where `window.location.hash` is still being used to keep a track of routes in a SPA.

## DIY Exercise 👇

Here is a small task for you. Modify directory structure like below screenshot and separate the two functional components `Home` and `about` in their own component files such that, in future, if they grow with more JSX to render.

![ss5](https://crowdbotics.ghost.io/content/images/2019/05/ss5.png)

You can totally skip this if you want and move on to the next section. But performing this small task will benefit you to have an understanding of the above concepts.

## The Link Component

To navigate between to web pages in HTML, there is an `<a href=""></a>` anchor tag available. However, using this traditional approach will lead to a browser refresh. In order to overcome this, React Router API offers a `Link` component that can be used to navigate to a particular URL or a component.

Let us try to create a navigation menu with this new knowledge. Import Link from `react-router-dom` in `App.js` file. Here is the modified snippet of App component.

```js
// App.js

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

import Home from './components/Home';
import About from './components/About';

function App() {
  return (
    <Router>
      <div>
        <nav style={{ margin: 10 }}>
          <Link to="/" style={{ padding: 10 }}>
            Home
          </Link>

          <Link to="/about" style={{ padding: 10 }}>
            About
          </Link>
        </nav>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </div>
    </Router>
  );
}

export default App;
```

In the above snippet, notice that all the Links are being added before all the Route components. The styling attributes inside `style` are optional for now. Start the development server and visit the browser window and you will notice a navigation menu pops up at the top. Try clicking links to navigate between different components.

![ss5](https://crowdbotics.ghost.io/content/images/2019/05/ss6-1.gif)

Wherever a `Link` is rendered in a React project, an anchor `<a>` will be rendered in the application’s HTML.

## Active Links with NavLink

In React Router API, `NavLink` is the extended version of the `Link` component. You can say that is a special type of the `Link` that can style itself as to represent the active state when matches the current route.

To demonstrate this, first, let us replace all the `Link` tags with `NavLink` in `App.js` file.

```js
// App.js
import React from 'react';
import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom';

import Home from './components/Home';
import About from './components/About';

function App() {
  return (
    <Router>
      <div>
        <nav style={{ margin: 10 }}>
          <NavLink to="/" style={{ padding: 10 }}>
            Home
          </NavLink>

          <NavLink to="/about" style={{ padding: 10 }}>
            About
          </NavLink>
        </nav>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </div>
    </Router>
  );
}

export default App;
```

At this point, each `NavLink` link is going to behave like an ordinary `Link` component which means there is no change so far. To make a link active, add an `activeClassName` prop to that. Such as below.

```js
<NavLink to='/' style={{ padding: 10 }} activeClassName='active'>
```

To set up the corresponding CSS for this to work, open `App.css` file and add the below.

```css
a {
  padding: 10px;
}

a,
a:visited {
  color: blue;
}

a.active {
  color: red;
}
```

Do not forget to import this file inside `App.js`. Also, modify the `about` route to have an `activeClassName`.

```js
import "./App.css"

// ...

return (
  {/* */}
  <nav style={{ margin: 10 }}>
      <NavLink to='/' activeClassName='active'>
          Home
      </NavLink>

      <NavLink to='/about' activeClassName='active'>
          About
      </NavLink>
  </nav>

 {/* */}
)
```

Go back to the browser, open develop tools like below and you will notice, at first, the `Home` route has a class name `active`.

![ss7](https://crowdbotics.ghost.io/content/images/2019/05/ss7.png)

Try navigating to the `About` route and see what happens.

![ss8](https://crowdbotics.ghost.io/content/images/2019/05/ss8.gif)

On navigating to `About` route did you notice that the active class name is also added to the corresponding route? However, the `Home` route still has the active class even though the URL matches the `/about`. Why?

The way `NavLink` works is almost similar to Route component in React Router API. To make sure that only one route has the class active state, try modifying the home route in the navigation menu, as below.

```js
// App.js

<NavLink to="/" exact activeClassName="active">
  Home
</NavLink>
```

You will get the desired output this time.

![ss9](https://crowdbotics.ghost.io/content/images/2019/05/ss9.gif)

## Adding Parameters to the Routes

In this section, you will learn how to create and manage dynamic routes based on a query parameter such as `:id`. We start by creating a static array in the `App.js` file that will serve as the mock data.

The idea is to demonstrate a route as `/posts` which displays all the posts that are coming from the array. However, each post in the array will be having an id or a unique identifier. Using that unique identifier, you will be approaching the concept of dynamic content rendering by writing the logic for URLs such as `/posts/:id` where `:id` will be represented by the specific id of a post.

To start, let us add a bunch of mock posts in the state inside a new component file called `components/posts.js`.

```js
// Posts.js
import React from 'react';
import '../App.css';

class Posts extends React.Component {
  state = {
    posts: [
      { id: 1, title: 'Hello Blog World!' },
      { id: 2, title: 'My second post' },
      { id: 3, title: 'What is React Router?' }
    ]
  };

  render() {
    return (
      <div className="posts">
        <h1>Posts List</h1>
      </div>
    );
  }
}

export default Posts;
```

The corresponding styles to the above are added in `App.css` file for brevity.

```css
.posts ul {
  list-style: none;
  margin: 0;
  margin-bottom: 20px;
  padding: 0;
}

.posts ul li {
  padding: 10px;
}

.posts a {
  text-decoration: none;
}
```

Now, import the newly created component inside `App.js` where other routes already exist.

```js
//App.js
// ...
import Posts from './components/Posts';

function App() {
  return (
    <Router>
      <div>
        <nav style={{ margin: 10 }}>
          <NavLink to="/" exact activeClassName="active">
            Home
          </NavLink>
          <NavLink to="/about" activeClassName="active">
            About
          </NavLink>
          <NavLink to="/posts" activeClassName="active">
            Posts
          </NavLink>
        </nav>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route path="/posts" component={Posts} />
      </div>
    </Router>
  );
}

export default App;
```

The existing navigation menu has a new route and its called Posts.

![ss10](https://crowdbotics.ghost.io/content/images/2019/05/ss10.png)

Open `Posts.js` to render the list of Posts and display them as a list whenever the current location in the web browser matches `/posts`.

```js
import React from 'react';
import { Link, Route } from 'react-router-dom';
import '../App.css';

function Child({ match }) {
  return (
    <div>
      <h3>ID: {match.params.id}</h3>
    </div>
  );
}

class Posts extends React.Component {
  state = {
    posts: [
      {
        id: 1,
        title: 'Hello Blog World!'
      },
      {
        id: 2,
        title: 'My second post'
      },
      {
        id: 3,
        title: 'What is React Router?'
      }
    ]
  };

  render() {
    const { posts } = this.state;
    return (
      <div className="posts">
        <h1>Posts List</h1>
        <ul>
          {posts.map(post => (
            <li key={post.id}>
              <Link to={`/posts/${post.id}`}>{post.title}</Link>
            </li>
          ))}
        </ul>
        <Route path="/posts/:id" component={Child} />
      </div>
    );
  }
}

export default Posts;
```

Also, the `Child` component reads anything coming from the URL parameters, such as, in the above case, the `id` of each post. A `match` object contains information about how a `<Route path>` matched the URL, thus, in our case, the id of each post.

![ss11](https://crowdbotics.ghost.io/content/images/2019/05/ss11.png)

## Conclusion

Hopefully, by now, you are familiar with the basic concepts of how React Router library works. It is a powerful library that helps you build better React apps. If you want to learn more about React Router visit its official documentation [here](https://reacttraining.com/react-router/).

[Originally published at Crowdbotics](https://crowdbotics.ghost.io/introduction-to-react-router-v4-with-reactjs/)


Using React Router to Optimize Single Page Applications (SPAs)

---
title: 'To Travel, A Tech Conference and One Million views - a Recap'
date: '2019-07-02'
slug: 'to-travel-a-tech-conference-and-one-million-views-a-recap'
thumbnail: '/thumbnails/writing.png'
tag: 'writing'
canonicalUrl: 'https://medium.com/hackernoon/to-travel-a-tech-conference-and-one-million-views-a-recap-22e135a598c3'
---

The year 2019 started for me a bit unusual than the previous ones. I never expected to get so much attraction on my blog posts that are mostly published here. Had only one trip planned, ended up doing two. Did end up attending a tech conference too. Something when I started my career as a developer I hadn’t thought of.

Six months are already gone, hence, if you are on Twitter, you might be seeing the following tweet at least once a day.

This year so far has been a roller coaster ride. Similar to one I had in [January](https://www.instagram.com/p/BtK7sa3BOG3/) but a bit slow.

### Achievements 🎉

This year, I set out some personal goals to achieve. Some came along the way unexpectedly or surprises. For some, I did sweat a lot. Some took more than the usual amount of coffee cups.

Here is a list of goals that I had mind when 2019 came along that I have achieved so far while some of them are still a work in progress and few of them are literally surprises.

✅ Reach 500 subs on the weekly newsletter

🚧 Reach 5k followers on Twitter

✅ Revamp Personal Website

✅ Receive a Patron on [Patreon.com](https://patreon.com/amanhimself) _(surprise)_

✅ 1 Million blog post views

✅ Under 30 days, receive more than 100k views on blog posts*(surprise)*

✅ Reach 1k followers on Instagram

✅ Travel abroad to at least one country, ended up traveling to 5

🚧 Write 50 articles/tutorials on React Native _(published 19 so far)_

Most of these goals were to be achieved over the span of 6 months and few of them are still work in progress. For me, having personal goals as such, help to move forward in the direction I am ambitious for, that is, to spend a healthy amount of time creating content on development, teaching fellow developers when in need, using the set of technologies or frameworks that I am familiar and work with.

I have made some bad decisions along the way. Some good ones too. Accepting opportunities that I wasn’t ready for did make me see things from a different perspective and helped me grow as a human being.

### Attend a Tech conference 👩‍💻

If your world revolves around software development in general, my suggestion is to attend at least one tech conference in your lifetime. Heck, attend 10 if you want!

The reason I am stating that is again come from a recent and dear personal experience. In the month of April 2019, I attended [**App.js Conf**](https://appjs.co/)**.** A one of its kind. A tech conference for Expo and React Native developers held for the first time in Krakow, Poland. It was my first time.

Twitter is quite famous in the dev world. Many thrive to make connections, many achieve that too. You can get to know almost any new framework being released, and learn it as well through Twitter. You might also be able to make good connections. Get to know people from an unconditional point of view for a long period of time. Open a new website or business. All that is good in my honest opinion.

<img src='https://cdn-images-1.medium.com/max/800/1*7SYuZvH2pZnM0H79V4ttPg.jpeg' />

But attending a tech conference in person is a bit intentional. It will help you reach people on a personal level. I would say, if you are lucky enough to have awesome meetups or a conference happening in your area or city you live in, try attending a few. You never know what lies behind that door.

As I was telling about the conference I attended. I personally met some awesome human beings, who made me realize that there are good and modest human beings on this planet who are willing to help a total stranger or give them company and share moments. I met those whom I admire in the dev world and learned a great number of new things. Also, I never expected someone to recognize me from my Twitter handle. I still don’t believe that, but it happened.

😱

_That was my reaction._

I am planning to attend one more either the latter half of this year or early next year.

### Writing ✍️

For the majority of the last year, I had stopped writing. I did run a blog for five years writing book reviews, interviewing some well-known authors and manage to be awarded twice as the [Best Book Blogs in India](http://readingbooks.blog). But in the end, I lost much of my interest as I felt there wasn’t much left to do. I slowly moved my passion for writing in the tech world and boy did it open doors for me that I never know existed.

Along the way, I did learn a thing or two on how to promote content without hurting anyone’s feelings, using the internet. I never expected to reach 1 million views on a platform that I have for a little over two years.

I have written for various blogs, magazines, Medium publications. To manage and keep them in one place, I started maintaining a Github repository. You will find all the links 👇

[**amandeepmittal/tech-writing**](https://github.com/amandeepmittal/tech-writing)

The lesson I learned from this is that if you are passionate about something, can’t stay away from it for a while, and are consistently taking action in that area, you will achieve _heights_. Passion does help you drive through that prolonged path.

### Travel ✈️

_Why? Why not save all the 💲for your future self? Why travel at all?_

Many of my acquaintances did not know this but since my teenage days, I had been eager to travel. I have been shut until I had to force myself a little to make it happen.

_Now, I am in love with it._

We all have our own reasons related to the word “Travel”. Mine is to learn new things, meet new people, have brief moments with a few, or make some connections, visit places that I think are astonishing, manage everything from planning to expenses, food, accommodation and so on, and be myself. Finally, I did manage to travel to five countries including one of the most lavish cities in the middle east and four beautiful European countries that I am still amazed by their beauty and the calmness they possess.

Traveling to different places do have a deep impact on me. There are some important things I learned about myself and especially how I want to take the approach in my career and life in general. And other things that are essential to the places I visited or the people I met along the way.

I do have some future plans for traveling. I want to experiment with it this time, and not just take a vacation, but try to stay longer in one place. It might end up being a fulfilled personal goal that you get to hear about at the end of this year.

[Originally published at Hackernoon](https://medium.com/hackernoon/to-travel-a-tech-conference-and-one-million-views-a-recap-22e135a598c3)


To Travel, A Tech Conference and One Million views - a Recap

---
title: 'How to integrate Firebase and Firestore cloud database with a React application'
date: '2019-06-20'
slug: 'how-to-integrate-firebase-firestore-react-and-crowdbotics-platform'
thumbnail: '/thumbnails/firebase.png'
tag: 'firebase'
canonicalUrl: 'https://blog.crowdbotics.com//how-to-integrate-firebase-firestore-react-and-crowdbotics-platform/'
---

Firebase is a Backend as a Service (BaaS) that gives an advantage to web developers who use ReactJS for developing web applications. It is a platform that got acquired by Google and has a healthy and active community. Most users in this community are web and mobile developers. It includes services like mobile analytics, push notification, crash reporting and out of the box provides email as well as social authentication. As a web developer, by using Firebase you can start building an MVP (minimum viable product) by keeping the costs low and utilizing your time and effort in building the application quite faster than adopting a traditional approach by building your own custom backend solution.

**In this tutorial, we will be learning how to get started by integrating the Firebase and Firestore cloud database with a React application.** We will also create a bare minimum demo application from scratch with the help of Firebase & React Native to see how they work together.

**TLDR;**

- Requirements
- Getting started: New Firebase Project
- Connecting Firebase with React App
- Creating a Firestore Database

## Requirements

In order to gain everything by reading this tutorial, make sure you have:

- a Firebase account (_free tier_)
- NodeJS `v8.x.x` or higher installed along with `npm/yarn`
- `create-react-app` global module to scaffold a React project

## Getting Started: New Firebase Project

To get started you need a Firebase account. To sign-up or log-in for one, visit [console.firebase.com](https://console.firebase.google.com). Once you are logged in, you will be welcomed by a screen below.

<img src='https://crowdbotics.ghost.io/content/images/2019/05/ss1-2.png' />

Click on the button **Add Project**. This leads to another screen which contains a form to be fulfilled in order to create a new Firebase project.

<img src='https://crowdbotics.ghost.io/content/images/2019/05/ss2-1.png' />

Fill the name of the project, check both the boxes for now and click on the button `Create project`. This will take some moments. Once the Firebase project is created, you will be welcomed by the home screen like below.

<img src='https://crowdbotics.ghost.io/content/images/2019/05/ss3-2.png' />

Take a look at the side menu bar on the left. This is the main navigation in any Firebase project. That's it for now. It is that simple to create a new Firebase project via the official console.

## Create React App

To create a new react app, first, we need to install `create-react-app` by running the below command in a terminal window.

```shell
npm install -g create-react-app

# Check for the current version

create-react-app --version

# Output: 3.0.0
```

The second execution is to check the semantic version of `create-react-app` module. Make sure you are on the same version (_which is latest at the time of writing this post_) or higher than this.

To generate a new project run `create-react-app react-firebase-demo`. This will take some time to generate a new project and install dependencies that required to kick-start the default React app. Do note that, React by default uses `yarn` instead of `npm` as the JavaScript package manager to install dependencies.

## Connecting Firebase with React App

To connect Firebase with a React app, you need API key and store in the client side app somewhere (_probably as environmental variables when deploying the app_). Click on the settings ⚙️ in the sidebar menu and go to **Project settings**. There you will see under **Your apps** section all the platforms available such as iOS, and web. Click on the **Web** as shown below.

<img src='https://crowdbotics.ghost.io/content/images/2019/05/ss4-1.png' />

Next, copy only the `config` variable in a new file called `firebase.js` inside the `src` directory of the React project. Initially, the file might look like below snippet.

```js
//firebase.js
const config = {
  apiKey: 'XXXX',
  authDomain: 'XXXX',
  databaseURL: 'XXXX',
  projectId: 'XXXX',
  storageBucket: 'XXXX',
  messagingSenderId: 'XXXX'
};

firebase.initializeApp(config);
```

Where all the `XXXX`s are the key values. In order to continue, React app needs FirebaseSDK installed as an npm dependency. Open terminal window, make sure you are traversed inside the project directory and execute the following command.

```shell
yarn add firebase
```

Once the dependency is installed go back to `firebase.js` file and import firebase like below and it to the top of the file.

```js
//firebase.js
import firebase from 'firebase/app';

// ...

export default firebase;
```

You could have imported firebase from just `firebase`. The reason in the above file we are using `firebase/app` is that `/app` only adds the core of the firebase services. Right now, to integrate Firebase with our React app, we only need `initializeApp()` method to pass all the keys required to configure from the firebase.

While importing, if you use just `firebase`, it will include the whole bunch of services like auth, database, storage, functions, messaging, firestore, and so on. Most of them, we might not even need this demo application. This also increases the size of your bundle when deploying the application. Lastly, do not forget to export the instance configured firebase object that you will be using in the React app later.

## Creating a Firestore Database

There are two types of cloud-based database services provided by Firebase. One is called Cloud Firestore and the other one is a Real-time Database. This does not mean that Cloud Firestore cannot be used for real-time applications. Also, note that both of them are NoSQL databases.

<img src='https://crowdbotics.ghost.io/content/images/2019/05/ss5-2.png' />

Real-time database stores data as one large JSON tree. Complex and scalable data is hard to organize in it. Firestore follows proper NoSQL terminology when it comes to storing data. It stores data in documents and each document can have sub-collections thus making it suitable for scalable and complex data scenarios.

Also, Realtime database only offers offline support for the mobile development using iOS and Android whereas Firestore supports both mobile platforms as well as web clients too. To read more about their differences you can visit the official documentation [here](https://firebase.google.com/docs/database/rtdb-vs-firestore).

In the Database section, choose the cloud Firestore and go to the second tab called **Rules**. If you are enabling Firestore for the first time, chances are you need to set the database security rules to test mode. This is where the firebase SDK will allow anyone (_one who has access to the config keys_) to read and write to the database. That said, this section should look like below.

```js
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write;
    }
  }
}
```

Open `firebase.js` and import firestore instance.

```js
// firebase.js
// ... after other imports
import 'firebase/firestore';

// ... before export default statement
export const firestore = firebase.firestore();
```

Also, exporting the firestore instance will let you use it to query the database.

Now, go back to the Firebase console and go to the **Data** tab under Firestore.

<img src='https://crowdbotics.ghost.io/content/images/2019/05/ss6.png' />

You will notice that there is currently no data inside the database. The **Add Collection** button represents the column that will contain the name of each collection that you might have in the database. Let us add some data using Firebase console interface such that we can query and display it in the next section. Click on the button **Add Collection** and enter the name of the collection as shown below.

<img src='https://crowdbotics.ghost.io/content/images/2019/05/ss7-1.png' />

Click **Next** and enter two fields. One for the title of the book and the other one for the author's name. By default, the ID for each document will be auto-generated if the above option `Auto-id` is selected or remained untouched. Note that both of these fields represent one document as a whole.

<img src='https://crowdbotics.ghost.io/content/images/2019/05/ss8.png' />

Notice that, we have not defined value for both the fields. Also, both the fields are of data type `string`. Of course, there are [other data types available and supported by Firestore](https://firebase.google.com/docs/firestore/manage-data/data-types). At last, click on the **Save** button to save the first, though the empty, entry in the Firestore database.

<img src='https://crowdbotics.ghost.io/content/images/2019/05/ss9.png' />

_Did you notice how the ID for the document is generated on its own in the above image?_

## Creating the UI form

In this section, let us wire the React app to have a simple form that can be further used to send data and store it in the cloud. Currently, the React app is bare-minimum or default that is generated by the scaffolding tool `create-react-app`. To run it in its current state, from the terminal window execute `npm start`. This will start the development server, and open a new browser window in your default browser at the URL: `http://localhost:3000/`. If you do not have any errors (_which you won't_) you will see the following screen.

<img src='https://crowdbotics.ghost.io/content/images/2019/05/ss10-1.png' />

The code that is being rendered in the above screen comes from the only component we have so far in our React app, inside `App.js` file. Open this file and then define the following state. Right now, the `App` component is a functional component.

```js
// App.js
class App extends React.Component {
  state = {
    title: '',
    author: ''
  };

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}
```

Notice that, for the `App` component to have stated, we converted it to a class component. Next, inside the render function, add the following form that contains two input fields.

```js
// App.js
render() {
        const { title, author } = this.state

        return (
            <div className='App'>
                <form onSubmit={this.addBook}>
                    <input
                        type='text'
                        placeholder='Title of the Book?'
                        name='title'
                        onChange={this.updateInput}
                        value={title}
          />
          <br />
                    <input
                        type='text'
                        placeholder='Author of the Book?'
                        name='author'
                        onChange={this.updateInput}
                        value={author}
          />
          <br />
                    <button type='submit'>Submit</button>
                </form>
            </div>
        )
  }
```

This creates a not so awesome looking form but does serve the purpose of learning about Firestore.

<img src='https://crowdbotics.ghost.io/content/images/2019/05/ss11-1.png' />

Both the input fields have a `value` attribute to specify which field is a target from the state object. Also, both the fields call a custom method `updateInput` to update the component's the state corresponding to the book's data from the input field. Let us right the business logic behind it before the render function in the above snippet.

```js
// App.js
updateInput = event => {
  this.setState({ [event.target.name]: event.target.value });
};
```

## Add data to the Firestore

In this section, you are going to write the logic behind how to add data from the React form to the Firestore. In the previous section, did you notice that the form has submitted button and an `onSubmit` event that leads to the function `addBook`. Define this function just before the `render()` method as below.

```js
// import this at the top of your file
import { firestore } from './firebase';

// App.js
addBook = event => {
  event.preventDefault();

  firestore.collection('books').add({
    title: this.state.title,
    author: this.state.author
  });

  this.setState({ title: '', author: '' });
};
```

In the above snippet, let us start by import an instance of the firestore from `firebase.js` that we previously defined. The `addBook` function takes an event as an argument. The first line inside the function stops the web page from refreshing after submitting the form. Refreshing a web page after clicking the submit button is the default behavior and we need to avoid.

Next, using the `firestore.collection("books")` points to the correct database collection where the data will be added on submitting the form. The collection name here is `books`. The `.add()` method submits the data from the updated to the firestore. Try adding one. Make sure `npm start` is running.

<img src='https://crowdbotics.ghost.io/content/images/2019/05/ss12.png' />

After adding filling up the form as above, click on the submit button. After you add a book's title and its author, both the input field is set to the empty string, which is the default state and is a necessary step to add more data. Now, go back to the firebase console, to the books' collection and you will notice, as shown below, a new object with a random but unique ID and corresponding data in it.

<img src='https://crowdbotics.ghost.io/content/images/2019/05/ss13.png' />

## Conclusion

You have now successfully integrated and added data to the Firebase store. The method discussed in this tutorial to access Firestore is not the only way, but yet a simple one. For more information or to dive deep, take a look at the Firestore documentation **[here](https://cloud.google.com/firestore/docs/)**.

[Originally published at Crowdbotics](https://crowdbotics.ghost.io/how-to-integrate-firebase-firestore-react-and-crowdbotics-platform/)


How to integrate Firebase and Firestore cloud database with a React application

---
title: 'How to Setup a React App with TypeScript, Storybook'
slug: 'setup-a-react-app-with-typescript-storybook'
date: '2019-06-14'
thumbnail: '/thumbnails/react.png'
tag: 'reactjs'
canonicalUrl: 'https://blog.crowdbotics.com/setup-a-react-app-with-typescript-storybook-and-crowdbotics/'
---

If you are building web applications with ReactJS, you might have heard or used TypeScript. They say TypeScript is the missing part from JavaScript's ecosystem. I must say, I did not enjoy writing React apps in TypeScript at first. But over time, I have learned this valuable lesson that if you want to continue a project that has a focused development process, TypeScript should be the way to go. Including types and structures like interfaces as an extension of JavaScript help to make the development process more predictable and safer. TypeScript offers other benefits in the form of code suggestions in a workspace and highlights errors as early as possible too.

**In this tutorial, we are going to take a look at how to setup a React app that uses TypeScript along with Storybook.** It is targeted towards
developers who are want to learn these two important tools of ReactJS development. It can be a bit of a hassle to setup a TypeScript and Storybook together in one project but this tutorial will walk you through a smooth process and will showcase you that it is not a hassle at all.

**Tld;**

- Requirements
- Creating a new React app
- Adding Storybook
- Adding Storybook configuration
- First Storybook Component
- Connecting Crowdbotics support to Your Github Repo
- Conclusion

## Requirements

In order to follow this tutorial, you must have:

- NodeJS `v8.x.x` or higher installed along with npm/yarn
- `create-react-app` installed globally to on your local dev machine generate a new React project

Bonus: You can also, use `npx` to generate a new React project without installing `create-react-app`.

## Creating a new React app

To get started with a React project, generate one by running the below command in a terminal window

```shell
create-react-app hello-tsx-storybook
--scripts-version=react-scripts-ts
```

This command will take a few moments to execute completely. Once the React + TypeScript project is generated you will get the following file structure. Notice how there some of the files in the root directory are TypeScript's configuration files and in `src` directory, where the magic happens, has component files (such as `App.tsx`) with an extension of `tsx` at the end of file name rather a `.js`. This indicates that the component file now supports TypeScript.

![](https://crowdbotics.ghost.io/content/images/2019/05/ss1-3.png)

To run the app in the current state, open command line interface, traverse inside the project root and run `npm start`. Once the webpack dev server starts, you will be directed to the URL `http://localhost:3000/` in a default web browser window with the following screen like below.

![](https://crowdbotics.ghost.io/content/images/2019/05/ss2-2.png)

## Adding Storybook

**[Storybook](https://storybook.js.org/docs/basics/introduction/)** is a user interface development environment for UI components. If you are building a UI and you want to showcase all or some of the functionalities of the individual components but totally isolated from the current app's lifecycle and dependencies.

Storybook is available for many front-end frameworks and libraries such as [ReactJS](https://medium.com/crowdbotics/building-a-mern-stack-app-with-material-ui-33ff8ca4da01), [Angular](https://medium.com/crowdbotics/learn-to-build-a-simple-progressive-web-app-pwa-with-angular-and-lighthouse-hacker-news-clone-51aca763032f), and [React Native](https://medium.com/crowdbotics/how-to-build-a-real-time-logo-detection-app-with-react-native-google-vision-api-and-crowdbotics-9ed65fbcd15).

To install Storybook as dev dependency for React, run the following command.

```shell
yarn add --dev @storybook/react @types/storybook__react
```

Why install it as `devDependency`? We won't require storybook and its use in the production build, ever. So it is better to stick with it in the development environment only. One this dependency is installed, you have to install some of the peer dependencies that are required. Two of them are `react` and `react-dom` which we already have installed. The rest of them can be installed using the below command.

```shell
yarn add --dev babel-loader @babel/core
```

Lastly, there three more dependencies that are required just to compile TypeScript.

```shell
yarn add --dev awesome-typescript-loader react-docgen-typescript-loader react-docgen-typescript-webpack-plugin
```

## Adding Storybook configuration

Before we can make Storybook work, we need to add a few more things. Let us start by creating a new directory `.storybook` in the root directory.

```shell
mkdir .storybook
```

Inside this folder, there are several files that are required to be created.

```shell
cd .storybook

touch addons.js config.js tsconfig.json webpack.config.js
```

The output of the above command is going to be:

![](https://crowdbotics.ghost.io/content/images/2019/05/ss3-3.png)

For a basic Storybook configuration, the only thing you need to do is tell Storybook where to find stories and include the path inside `.storybook/config.js`. In our current scenario, we are going to stories inside the `src/components` directory (_just a personal preference_).

```js
import { configure } from '@storybook/react';

const req = require.context('../src/components', true, /.stories.tsx$/);
function loadStories() {
  req.keys().forEach(req);
}

configure(loadStories, module);
```

Note, that, prior to this step, `components` directory inside `src` did not exist. You will have to create that manually. The above snippet of code is to create a pattern such that all the stories match a particular glob. code is Next file that needs to be configured is `tsconfig.json` inside the storybook directory. This file is going to be responsible to compile stories from TypeScript to JavaScript. Add the following to this file.

```json
{
  "compilerOptions": {
    "baseUrl": "./",
    "allowSyntheticDefaultImports": true,
    "module": "es2015",
    "target": "es5",
    "lib": ["es6", "dom"],
    "sourceMap": true,
    "allowJs": false,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDir": "../",
    "outDir": "dist",
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "declaration": true
  },
  "include": ["src/**/*"],
  "exclude": [
    "node_modules",
    "build",
    "dist",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts",
    "**/*/*.test.ts",
    "examples"
  ]
}
```

Lastly, add the following code inside the file `.storybook/webpack.config.js`.

```js
module.exports = ({ config }) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    use: [
      {
        loader: require.resolve('awesome-typescript-loader'),
        options: {
          presets: [['react-app', { flow: false, typescript: true }]],
          configFileName: './.storybook/tsconfig.json'
        }
      },
      {
        loader: require.resolve('react-docgen-typescript-loader')
      }
    ]
  });
  config.resolve.extensions.push('.ts', '.tsx');
  return config;
};
```

To complete the setup, open `package.json` file and add the script to run the storybook interface.

```json
"storybook": "start-storybook -p 4000 -c .storybook"
```

## First Storybook Component

In order to proceed and test our current setup to work as expected, let us write a new component and its story. Create a new file called `Button.tsx` inside `components` directory with the following code for the component itself.

```tsx
import * as React from 'react';

export interface IButtonProps {
  children?: React.ReactNode;
  onClick?: (e: any) => void;
}

const styles = {
  border: '1px solid #eee',
  borderRadius: 3,
  backgroundColor: '#FFFFFF',
  cursor: 'pointer',
  fontSize: 15,
  padding: '3px 10px',
  margin: 10
};

const Button: React.SFC<IButtonProps> = props => (
  <button onClick={props.onClick} style={styles} type="button">
    {props.children}
  </button>
);

Button.defaultProps = {
  children: null,
  onClick: () => {}
};
export default Button;
```

The above component is a stateless component (_aka functional component_). Now, while being inside the same directory, create another file `button.stories.tsx` with the following snippet of code.

```tsx
import * as React from 'react';
import { storiesOf } from '@storybook/react';
import Button from './Button';

storiesOf('Button', module)
  .add('with text', () => <Button>Hello Button</Button>)
  .add('with some emoji', () => <Button>😀 😎 👍 💯</Button>);
```

Go to the terminal window and run the script `yarn run storybook`. This will open a new window in your default web browser at URL: `http://localhost:4000/?path=/story/button--with-text` with the following result.

![](https://crowdbotics.ghost.io/content/images/2019/05/ss4-2.png)

![](https://crowdbotics.ghost.io/content/images/2019/05/ss5-3.png)

## Conclusion

Kudos to you if have reached so far. You have configured Storybook work with TypeScript and wrote a story for a custom `Button` component using the TypeScript. This tutorial was just an introduction. To dive deep inside the world of storybooks, I would recommend you to go through their official docs [here](https://storybook.js.org/docs/guides/guide-react/).

[Originally published at Crowdbotics](https://crowdbotics.ghost.io/setup-a-react-app-with-typescript-storybook-and-crowdbotics/)


Bypass CORS to fetch files when working with localhost

More Posts

⬅️ Previous: How to clear global npx cache

Next: Setup Macbook M1 for Web and React Native development ➡️