How to design, animate and theme Lottie files in React Native

Image for post
Image for post

Take your UX to the next level with Lottie animations

Lottie is a library originally created by AirBnB to allow After Effects animations be exported as JSON objects, and played natively on mobile platforms and the web. Lottie for React Native is particularly popular right now with over 100,000 weekly downloads at the time of writing, and this is for good reason — the library allows developers to use industry standard tools that create complex animations that can look extremely impressive running natively on a mobile device.

High performance vector animations offer fluid transitions and shape deformations on the vertex level, as well as other benefits like scaling and theming support out of the box. …


Breaking down components fuelling yield farming and the rapidly growing DeFi space

Image for post
Image for post

DeFi: Ethereum’s emerging flagship use case

The terms decentralised finance and yield farming have been aggressively thrown around social media and the Cryptocurrency press as of late in an attempt to capitalise on the buzz and interest of the community. These terms encompass a range of protocols that have launched on the Ethereum mainnet, in the form of smart contracts, that allow token holders to take part in various activities in an attempt to generate more tokens and increase their holdings. One can think of these smart contracts as financial instruments that token holders can take part in, and generate rewards in return.

These financial instruments have become quite sophisticated — they provide a level of automation and ability to move assets around protocols based on which protocol can offer the best returns. The most popular suite of tools to do this currently is with Yearn Finance, a relatively new library of smart contracts that aim to maximise the profit of token holders by automatically moving their tokens around protocols to generate the most revenue possible. …


An introduction to customising your React apps with Material UI themes

Image for post
Image for post

Material UI: The winning React UX library in 2020

Material UI is currently the most popular UI framework for React, with the library providing a range of ready-to-use components out of the box. The library consists of components for layout, navigation, input, feedback and more. Material UI is based on Material Design, a design language that Google fore-fronted originally but is now widely adopted throughout the front-end developer community.

Material Design was originally announced in 2014 and built upon the previous card-based design of Google Now. …


Exploring TypeScript based NPM development and publishing in the context of React Native

Image for post
Image for post

Introduction

This piece explores the development and management of TypeScript-based NPM packages for React Native. It will cover how to configure TypeScript linting and tsconfig for a package to ensure code integrity with useful VS Code extensions and settings to aid in TypeScript development.

An entire section will be dedicated to TypeScript specific development of a package, in addition to visiting a demo packages project that is available on GitHub. But there are other important aspects of developing NPM packages worth considering. …


How to progressively load more list items as you scroll in React Native

Image for post
Image for post

This piece demonstrates how to load more items in a FlatList component as you scroll down, as well as how to persist lists on device storage, and keep those lists in sync as more items are loaded.

The demo accompanying this piece (available here on GitHub) demonstrates what we’ll achieve, with more items loading from an external data source as the list is being scrolled down. Not only this, the list is persisted on device and in state as more items are loaded.

The following screencast summarises the process. Note that when we start scrolling more results begin to load immediately. In addition, more results are continuously loaded if the end of the list has been reached. This is due to the onEndReachedThreshold prop of FlatList, that triggers an event to load more items if the scroll position is within this threshold. …


A comprehensive look at Ethereum’s Uniswap V2 Protocol

Image for post
Image for post

Uniswap V2 is the next iteration of the on-chain exchange

Uniswap is an on-chain liquidity protocol on the Ethereum blockchain that enables trustless token swaps, meaning all transactions are executed from smart contracts without the need for an intermediary or trusted party. This decentralised approach to swapping tokens has proven popular with ERC20 token holders to exchange their tokens and provide liquidity to token pairs.

Uniswap launched its second iteration on the Ethereum Mainnet on the 19th May 2020 to coincide with the core contract v1.0.1 release, after testing on the Rinkeby testnet for some time prior to this. …


An introduction to building command line interfaces in Node.js

Image for post
Image for post

Node.js CLIs are now an integral part of the IT ecosystem

Command Line Interfaces (CLIs) are widely used by developers to facilitate the app development process. In the JavaScript ecosystem alone, that could be a compiling process (TypeScript to JavaScript, Webpack, Babel, etc), a package utility (creating a new NPM project, managing Git) or connecting to remote hosts. This almost endless list goes on for millions of utilities that have been developed for JavaScript based projects alone.

It is not uncommon for a popular CLI based tool on NPM to have millions of weekly downloads, that illustrates just how integral Node.js (and JavaScript in general) has become for development processes. JavaScript undoubtedly plays a huge role for CLIs at various stages of the development pipeline, in the form of Node.js …


How to integrate Sign in with Apple for React Native apps

Image for post
Image for post

Cut out your registration forms with Sign in with Apple integration

Sign in with Apple was released alongside iOS 13 and provides a simple and private way for users to authenticate with their apps and websites that support the service. With Sign in with Apple, users can essentially use their Apple ID as the trusted identifier for apps and websites, removing the need to create a new account with the app in question.

This article walks through the process of integrating Sign in with Apple in the context of React Native, and will unravel the code behind this seamless authentication mechanism. A couple of key packages will be used to facilitate integrating Sign in with Apple, namely react-native-apple-authentication for the React Native side and apple-signin-auth for the Node.js …


Automatically send Markdown formatted messages in bulk to app users

Image for post
Image for post

This article covers how to deliver messages to app users automatically and in bulk with a Node.js runtime service. These messages will be formatted with Markdown, a popular lightweight markup language that is ideal for formatting bulks of text.

A GitHub repository coinciding with this article has been set up here that outlines the project structure and acts as boilerplate for the reader to build their own runtime service.

The message delivery terminology used throughout this piece can be interchanged with message generation, as this service will essentially be generating messages from templates that are personalised with parameters that we’ll define. The generated messages are then stored in a database, ready for the user to read. …


How to integrate and test error boundaries to gracefully contain errors in React Native apps

Image for post
Image for post

Error boundaries act as fallback UI when errors occur

When used with React Native, error boundaries allow you to implement fallback screens at certain points in your app that will be displayed when a JavaScript error occurs at runtime as a means to notify the user something went wrong. These fallback screens can then give the user a friendly explanation that something indeed went wrong, as well as an opportunity to restart the app or reset the UX to a previous state.

The following screencast demonstrates an error boundary in action simulated from a development build of an app I personally develop. This error boundary wraps the entire app and therefore responds to errors originating from any component in the hierarchy. An exception is thrown when I switch from the Settings tab to the Plans tab. This results in the fallback UI — defined in an ErrorBoundary component — being displayed. …

About

Ross Bulat

Programmer and Author. Director @ JKRBInvestments.com. Creator of ChineseGrammarReview.app for iOS.

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