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


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


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


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


Managing renewals and cancellations with transaction receipts in a Node.js runtime

Image for post
Image for post

Automatic iOS Subscription renewal and cancellation in Node.js

Managing subscriptions for iOS apps is critical infrastructure to ensure users have access to the correct content, and equally as important, to ensure access to app content is closed off if that subscription expires or is cancelled. This can be achieved in an automated manner in the form of a Node.js runtime service that will automatically update a subscription status, whether renew or cancellation, from your app database upon every subscription period, whether that be on a monthly, bi-yearly or annual basis.

This issue will be solved in the context of JavaScript utilising a Node.js runtime in this article. A Gist containing the full service logic is included at the end of this article, or alternatively can be viewed here on Github. …


Managing transaction receipts and persisting them with user identifiers

Image for post
Image for post

Transaction receipts: the key element of subscription management

Transaction receipts are a key element in managing subscriptions through in-app purchases, as well as for automatically renewing and cancelling subscriptions based on the receipt status and validity. They should be handled with care at the initial purchase stage, ensuring that they are persisted in your backend database and stored in a secure manner.

This article walks through the process of generating a transaction receipt in React Native, before sending it to your server with user identifiers in order to persist a transaction to a user account. …


How to invoke and dismiss iOS notification badges in React Native and server-side

Image for post
Image for post

Effectively get user attention with notification badges

App badges are tied into Apple’s push notification service. They can be displayed beside the app icon on the home screen and within the app itself. Not only this, app badges can also be set within the app, bypassing the need to rely on notifications to set the badge.

By setting up an event handler for when notifications are delivered, badges setting can be handled in-app as soon as a remote notification is delivered (this is particularly useful when a user is in the app as a notification is delivered, since notifications are not displayed in Notification Center if the app is actively in the foreground). …


How to create an inbox and message list components for iOS apps

Image for post
Image for post

Effectively communicate to your users with an in-app inbox

The ability to reach your users is a powerful tool that enables you to make announcements, ask for feedback, create a more human connection, and send other notifications of interest. With these vital pieces of information distilled into messages, comes a balance that you as the app developer need to judge as to not spam the user.

It is both yours and the user’s interest for an app to communicate up-to-date information that is relevant to the user’s app usage, but it needs to be done in a way that is not disruptive, does not feel like spam, and does not feel like an evasion of privacy. …


Exploring various ways objects are used within React libraries

Image for post
Image for post

Modern apps rely heavily on objects and their properties

This article aims to break down a range of scenarios where objects are used in React and React Native.

The concepts discussed here can also be applied to React JS (React for the web), as the features of the two versions are identical at the component level. Where React for the DOM and React Native differ is their handling of components (pertaining to DOM elements or native mobile components), not in the framework’s defining features like components, props, state, refs, context, and others.

Mobile apps of today rely on complex objects to represent a range of data types and values, that range from component props to server responses, objects to arrays (and converting between the two), functions and classes. …


Getting started with Apollo Server and Graph Manager to serve and manage your Data Graph

Image for post
Image for post

Apollo Server: The community driven JavaScript GraphQL Server

Apollo Server is a spec-compliant GraphQL server implementation written in JavaScript. It is today the industry standard GraphQL solution, and therefore the recommended option if you are considering a Data Graph solution for production apps.

This article focusses on two of the packages in the Apollo ecosystem: Apollo Server and Apollo Graph Manager. Apollo Server is an open source package used to build and run your GraphQL API, whereas Apollo Graph Manager is a dashboard hosted by Apollo you can use to manage, monitor and test your graphs. …


Introduction to React Navigation 5 and the differences from previous versions

Image for post
Image for post

React Navigation — the standard routing solution for native apps

This article aims to help the reader get started with React Navigation that, covering the differences from previous versions of the package and some of the implications on your codebase. We’ll be discussing concepts and integration based on iOS, but the same concepts can also be applied to Android based projects too.

React Navigation 5 has now had its public release, that has come with a large amount of changes to the package, including component based rather than declarative navigator configuration, the compartmentalisation of the framework into various package using the @react-navigation/ group prefix, an expansion of the navigation prop with the introduction of the route prop, new hooks, and more. …


Covering installation, basic usage, props and TypeScript support

Image for post
Image for post

Styled Components compliment React Native’s Stylesheet

Styled Components has been the most widely adopted solution for component-based CSS for a while now, with the package complimenting Javascript frameworks in general, in-particularly so for web-based applications.

But how effective is using Styled Components for React Native projects, that take a departure from styling DOM elements and instead require styling for JSX-Wrapped native mobile components? This article tackles this question by firstly looking at the differences between the two solutions, before exploring some implementations:

  • The differences between Styled Components and React Native’s styling solution in accordance with Stylesheet will firstly be discussed, along with their benefits and shortcomings.
  • Implementation will then be explored, covering how to install and start using Styled Components within React Native, with useful use cases to start using it effectively with props. …


How to implement deep linking technologies for iOS React Native apps

Image for post
Image for post

Universal Links and URL Schemes are two iOS features that allow developers to configure links that jump straight into an app at a particular screen, no matter how deep into the app. This article outlines the differences between these two features, and how to integrate them within Xcode and React Native projects, including ejected Expo projects, covering use cases between the two deep linking methods. Useful React Native packages to facilitate the integrations will also be documented.

A Brief History of Deep Linking in iOS

Deep linking is quite a generic term that encompasses the idea of navigating to a specific indexed piece of material, whether that be a webpage or a particular place in an application. The concept has been practiced since the inception of HTTP and the hyperlink, and has proved to be an integral part of navigating websites in the browser. …


A comprehensive guide to managing permissions in React Native

Image for post
Image for post

This article covers permission management in React Native, an important consideration to ensure a seamless experience for the end user. What React Native apps need to do is listen to permission changes as they are made outside the app, and update the UX accordingly when the app is summoned back into the foreground. This is due to the fact that permissions are changed from within the Settings app, and not in the app itself.

What apps can do is request a permission via a one-time dialogue prompt, that the user can either accept or decline. It is after this initial decision that the user must jump into Settings to adjust these permissions. …


How to manage app state with event listeners and React hooks

Image for post
Image for post

This article introduces the concept of App State, and explores common scenarios where App State is used in React Native — that is accessed via the AppState object supplied by the framework.

We’ll cover how event listeners can access a component’s most up to date state via refs and the useRef hook, that can in turn prepare your app for the background or foreground. AppState changes will also be demonstrated in conjunction with React context and a Timer class, that will measure how long an app is in the background or foreground.

Although the subjects talked about can be applied to both iOS and Android, the demos in this article have been tested solely on iOS. These useful tools and concepts that will undoubtedly be useful as you develop React Native apps. …


How to implement background tasks in React Native apps

Image for post
Image for post

React Native background tasks can be useful in a number of ways, from aiding in the user experience to managing authentication mechanisms and analytics data. Background tasks are triggered behind the scenes even if the app is not running. What is impressive, and extremely useful, is the ability to tie these tasks into React Native code, giving the developer the ability to do things like contact remote servers through fetch requests, and update AsyncStorage values (or other database solutions you may have such as SQLLite or Realm).

Background tasks are also a useful way to tackle syncing issues, by allowing an app to do housekeeping while the app is not running in the foreground. In an ideal world, an app should display the most up to date app state from the moment it is opened. This problem is magnified when apps go multi-platform, whereby users may be using a web or desktop version of a service before jumping back into the native app — expecting those updates to have taken effect. …


A fundamental intro to GraphQL and how to use it with Express to serve your APIs

Image for post
Image for post

This article acts as an introductory to GraphQL, an API query language and runtime, that assumes no prior knowledge from the reader. It breaks down what GraphQL is — and why now is the time to take notice. The benefits it has over traditional REST APIs will be covered, along with the fundamental concepts and tools to get started.

The official GraphQL documentation does a great job at introducing the GraphQL schema and query language syntax, so rather than duplicating the idea of a coding tutorial, this piece will build the reader’s understanding and comprehension of GraphQL.

GraphQL clients are commonly used with Express, where Express provides a single endpoint to access your GraphQL service (with middleware also being supported out of the box). We’ll be using the JavaScript implementation of GraphQL, GraphQL.js, alongside express-graphql, throughout this piece. …


Demonstrating matchAll by reformatting Markdown with named capture groups

Image for post
Image for post

Regex Iteration is the key tool for reformatting content for modern apps. The ability to re-format content via the combination of regular expressions and iteration is a powerful concept that provides a range of benefits for application builders, and ultimately the end user experience. So much so, that is is now built into JavaScript with the relatively newly introduced matchAll function — a function this article explores in detail.

This article builds upon a previous introductory piece to regular expressions in JavaScript. If you’re new to exploring Regex and would like to follow the concepts of this piece that build upon the foundations, check out this article first: Regular Expressions in JavaScript: An Introduction. …


How to use Regex in JavaScript to validate and format strings

Image for post
Image for post

Regex in JavaScript: Your strings won’t know what hit them

JavaScript’s implementation of Regex is useful for a range of string validation, formatting and iteration techniques. This article acts as an introduction to using regular expressions in JavaScript, touching on useful ways to use them, in addition to exploring some of the cryptic-like syntax that regular expressions entail. Rather than attempting to be a comprehensive guide for all Regex features, this piece instead focuses on super-useful concepts and real-world examples to get you started using Regex in your JavaScript apps.

Regular expressions are notably hard to read as they gain in complexity, where it is necessary for the developer to have some knowledge of Regex syntax to know what is being tested. …


How to integrate iOS in-app purchasing into React Native projects

Image for post
Image for post

Monetizing React Native apps with in-app purchases

This article focuses on implementing in-app purchases (IAPs) within a React Native project. The react-native-iap package we’ll be utilising supports both iOS and Android, but this piece will only focus solely on iOS integration.

Depending on what your app requires, either one-time purchases or subscription tiers (or both) are set up in your Apple Developer portal. Once configured, react-native-iap can interact with these items with its range of APIs, that include fetching IAPs with localised prices, making transactions and fetching your past transactions — everything you need to monetize your apps.

Localised pricing can be enabled within App Store Connect simply by toggling the feature, that will enable localised prices to be fetched to your app via react-native-iap. This is a great time-saver — and there are other localisation features Apple supports from the portal too. We’ll explore the portal for setting up subscription tiers in a dedicated section further down. …


How to create fluid and responsive carousels with native components

Image for post
Image for post

ScrollView: One component to rule them all?

ScrollView is one of the most fundamental components of a React Native app, that can act as a standalone component as well as a dependency for a range of other more complex components.

It is impressive thinking about its wide-ranging use-cases. It can be used as a standalone vertical scrolling solution, automatically making your content suitable for any screen height. Other more complex components, like SectionList and FlatList, rely on ScrollView and its props, whereas community driven components like KeyboardAwareScrollView expand upon ScrollView’s functionality to solve complicated UX problems with the virtual keyboard.

And these use cases just entail vertical scrolling. ScrollView also supports horizontal scrolling and pinch to zoom — that tracks the current magnification with the zoomScale prop, along with others to limit its minimum, maximum and zoom behaviour. This makes ScrollView ideal for panning around maps-based applications, or apps with large canvases like boardgames. …

About

Ross Bulat

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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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