Animated Circular tab bar (react-native)

Recently i stumbled upon this problem of adding a custom Tabbar on a react-native application based on MobX and react-navigation(v5). I tried to search online a lot for any information, regarding the MobX’s way of handling routing in a react-native app, but couldn’t find much, so i decided to write a small tutorial that will enable several other problem solvers to not struggle as much as i did.

This will be a 3 part series which will use the latest concepts of ReactJs (Hooks and functional Components) and will use the latest MobX and React-Nav…

Being a Developer, I always wanted to learn how to design a world class product from scratch (on my own 😅). Recently i have been learning how to design an app using the right tools and process, primarily using the already well established tool, Figma. As Figma supports almost every popular image-type out of the box, and with its brilliant collections of available plugins (for free 😁) we can drag and drop a design for any app or website quite easily.

Figma Logo
Figma Logo

The most recurring problem that i encountered was dealing with images, especially Icons and the need to change to…

Animated Circular tab bar (react-native)

This is the Part-II of the 3 part series on how to make a Custom Animated tab bar using ‘react-navigation’ and ‘MobX’.

Here is the link to -

Part-I :

GitHub Repo:

Part-II: Router Setup and some code.

Let’s get started.

In the previous post we had setup the environment for our project and were able to run our app, with the basic required list of packages.

This part will cover most of the code required to setup the Router for our React-native app and Stores using MobX for the same.

Before we can begin actual coding there is something that…

Ullas Gupta

Software Developer @ Beat81, Berlin.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store