I’ve recently faced an issue at work where I needed to create a custom tab navigator. I would like to give a shout out to William Candillon. He has a great YouTube series called “Can It Be Done In React Native” where he demonstrates complex application animation using React Native.

Last year, he did a live challenge in which he had some parts of what I needed. I needed to create some similar things but without any animation for starters.

Introduction

I am going to showcase the following custom tab bar. I’d like to point out that I use D3 & React Navigation. …

In this article, we will be looking at an outstanding library called React Spring which makes it super easy to control component based animations. And yes, before you ask, it does support hooks which can turn any data into animated data, with a single line.

What is React Spring?

The whole point of using React Spring is to give you the upper hand in animations by providing you with a better experience as well as faster delivery with incredible performance.

Quotes from the introduction section on the official website:

react-spring is a spring-physics based animation library that should cover most of your UI related animation needs. …

Before we start, I recommend watching Shirley Wu, an experienced developer in the field of data visualization, explains the basics of SVG & D3 (link).

The final code example for this article can be found on this repository.

The Different Ways

There are several ways to figure out how React and D3 can work together.

One method is referred to as “hand off” which basically means we tell React to render the DOM elements and from that point we use D3’s methods to handle all the manipulations required.

Another method is to have D3 do the calculations needed based on the data and use React to handle the DOM manipulation. …

The setup

The first thing we would like to implement is a custom hook called useOutside, which handles the binding of the mouse click event. In this hook we would implement the logic to find out if the click has occurred outside the required reference or within the requested area thus opening the menu.

import { useEffect } from 'react';

function useOutside(containerRef, contextMenuRef, callback = () => {}) {
  /**
   * if clicked on outside of element
   */
  function handleClickOutside(event) {
    if (containerRef?.current?.contains(event.target) &&
     !contextMenuRef?.current?.contains(event.target)
    ) {
      callback();
    }
  }

  useEffect(() => {
    // Bind the event listener
    document.addEventListener('mousedown', handleClickOutside);

    return () => {
      // Unbind the event listener on clean up
      document.removeEventListener('mousedown', …