How to resolve an issue with cookies-based authentication in a React Native application.

Before we start, a shout-out to @Locastic is required. This post is mostly based on React Native cookie-based authentication but contains more detailed code examples.

Introduction

Authenticating a user is single-handedly the most required feature when building a modern web or mobile app. It allows verifying users, user sessions, and most importantly it provides the base for implementing user authorization (roles and permissions).

So what is this used for? As frontend developers, we usually just develop a sign-in form and send a request to the server. If the server responds positively, the user is logged in. Sounds easy right? …


In this post I will describe my styling workflow in a React Native project. I use Typescript in the code samples but you can still use JavaScript if you like it better 😉

Atomic CSS

So a little introduction. If you are coming from a web-based React background, you should be familiar with the concept of Atomic classes. This concept isn’t a new thing and it is with us since about 2016.

For those who do now know what that concept is - in short, it’s a bunch of classes where you can place them all together to create your own styling,


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

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…


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


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…


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…


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)
) {…

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