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. …
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. …
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. …
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. …
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 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. …
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 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.
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. …
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). …
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. …
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. …
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. …
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. …
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:
Stylesheetwill firstly be discussed, along with their benefits and shortcomings.
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.
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. …
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. …
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. …
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. …
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.
express-graphql, throughout this piece. …
matchAll function — a function this article explores in detail.
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. …
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. …
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
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. …