Before I start, a shoutout to William Candillon is required. If you are a React Native developer, and you haven’t seen it by now, go and check out his YouTube series “Can it be done in React Native”, with a new season 4 released the past month.

This post is based on a video he posted “The Heart of React Native Transform”.

Image for post
Image for post

Introduction

Let’s start with some basics - mathematics. We have two axes, X and Y, describing the direction an object can move on a 2 dimensional (2D) canvas. What we want to do in the following example is to rotate a card. Since the transform prop of a <view/> component in React Native is an array, that probably means the order matters right? …


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.

Image for post
Image for post

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.

Image for post
Image for post

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


Image for post
Image for post

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', …

About

Matan Kastel

A fullstack web developer at Devalore. https://devalore.com/

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