---
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://amanhimself.dev/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 (iOS and Android).

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

At times, one thing I like to do is to add opacity feedback when the touch is active. It doesn't provide in the form of a prop directly. Something similar to what [activeOpacity](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://amanhimself.dev/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:

```shell
open https://www.google.com
```

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

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

It also be used with other flags to override a browser's default behavior. For example, I recently learned that when testing locally, the CORS can be bypassed to fetch files from the localhost.

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


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 works

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 apps
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: '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
```


Hey, I'm Aman

I'm a software developer and a technical writer. I love working with open source technologies and writing about what I learn.

I've been writing online since 2017, mostly cross-platform mobile development and sometimes on web. I've written over 150 articles and tutorials for more than 30 publications and organizations across the internet. Hence, I started this blog to share my software development journey.

Currently, working on documentation at Expo. Previously, I've worked as Developer Advocate, and Senior Content Developer with companies like Draftbit and Vercel.

Latest Posts

Open Source Projects I've Worked on

Countries I've Visited