This book is a collection of tutorials covering useful tools that will help with React Native development. It contains chapters on tools for debugging, tools and services for storing data, and a tutorial on using the React Native Navigation library

React Native: Tools

Learn Android app development and discover coding tutorials for Google's leading mobile platform

Android

iOS is operating system for Apple mobile devices iPhone and iPad. Learn Objective-C and iOS app development

JavaScript makes your pages dance, move and interact. For a front-end developer, it’s a fundamental skill.

JavaScript

React

App Development

Smithfield

All rights reserved. No part of this book may be reproduced, stored in a retrieval system or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embodied in critical articles or reviews.

Notice of Rights

The author and publisher have made every effort to ensure the accuracy of the information herein. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors and SitePoint Pty. Ltd., nor its dealers or distributors will be held liable for any damages to be caused either directly or indirectly by the instructions contained in this book, or by the software or hardware products described herein.

Notice of Liability

Rather than indicating every occurrence of a trademarked name as such, this book uses the names only in an editorial fashion and to the benefit of the trademark owner with no intention of infringement of the trademark.

Trademark Notice

SitePoint specializes in publishing fun, practical, and easy-to-understand content for web professionals. Visit sitepoint.com to access our blogs, books, newsletters, articles, and community forums. You’ll find a stack of information on JavaScript, PHP, Ruby, mobile development, design, and more.

About SitePoint

Preface

React Native as a mobile app development platform is fairly new. Having only been released in 2015, it still hasn’t reached version one yet. But even so, companies are already using it to build their apps. Most apps usually need a database to store their user data, be it locally or in a server. Due to React Native’s popularity, there are already lots of database solutions to choose from—which makes the task of choosing the right database a bit challenging.

AsyncStorage is the React Native counterpart of the localStorage API that we use in the web environment. It’s a simple key-value store with no encryption and can only persist data locally.

AsyncStorage

Realm is a mobile database with a back-end component . It’s offline-first, so the data is saved locally first and then syncs to the back-end component if the user is online. It has an SDK for the most popular mobile app development platforms including Java, Swift, Objective-C, JavaScript, and Xamarin. This makes it a good choice for an app which you may want to transition away from React Native in the future.

Realm

If you need a database with real-time capabilities, Firebase is the first choice. Firebase’s official JavaScript SDK works on React Native as well. This allows you to use its real-time database using the same API that you get when working on a web app’s client side. The only downside is that Firebase doesn’t have an official React Native SDK. So if you’re looking into using some of Google’s other services (Cloud Messaging, Google Analytics) then you’re out of luck. The only alternative solution is React Native Firebase .

Firebase

If your app only needs local storage with only a little data to work with, then SQLite is for you. It’s an ACID-compliant database, and it uses SQL for performing CRUD operations. You can use the React Native SQLite 2 library to use SQLite in React Native.

SQLite

PouchDB is the mobile counterpart of CouchDB , a NoSQL database that’s built for syncing. It supports syncing multiple replicas of the same database all over the world. It also has a replication feature that allows local storage to be disconnected from the server while both copies are concurrently updated.

PouchDB

If your app needs to work with tens of thousands of records and still remain fast, WatermelonDB is for you. It implements lazy loading so that it only loads specific data when it’s requested. Built on top of SQLite, it runs on a separate native thread, which makes it fast because it doesn’t need to go through the “ bridge ”. Data in WatermelonDB is stored locally, but you have to bring your own back end if you want to implement the sync feature.

WatermelonDB

Amazon DynamoDB is a fully managed NoSQL database service that provides fast and predictable performance with seamless scalability. Since it’s all managed by Amazon, you don’t need to worry about scaling, replication, and closely managing it. All you have to do is scale it up via their admin interface when the need arises.

Amazon DynamoDB

Before we wrap up this guide, let’s compare the solutions side by side. Each database solution is rated from 1 to 5 (1 being the lowest and 5 being the highest) based on the following metrics:

Comparing the Solutions

In this guide, we covered some of the most popular choices for storing and managing the data for your React Native app—AsyncStorage, Realm, SQLite, Firebase, PouchDB, WatermelonDB, and Amazon DynamoDB.

Conclusion

Tools and Services for Storing Data in React Native

https://learnable-static.s3.amazonaws.com/premium/reeedr/books/react-native-tools/images/featured-image.png

The Developer Menu

YellowBoxes and RedBoxes

Chrome is possibly the first tool you’d think of for debugging React Native. It’s common to use Chrome’s DevTools to debug web apps, but we can also use them to debug React Native since it’s powered by JavaScript.

Chrome’s DevTools

To debug React Native using React’s Developer Tools, you need to use the desktop app. You can install it globally or locally in your project by just running this following command:

React Developer Tools

React Native Debugger

You can use the React Native CLI to do some debugging as well. You can use it for showing the logs of the app. Hitting react-native log-android will show you the logs of db logcat on Android, and to view the logs in iOS you can run react-native log-ios , and with console.log you can dispatch logs to the terminal:

React Native CLI

There are lots of tools for debugging React Native in addition to the ones we’ve looked at here. It really depends on the specific needs of your project. I mostly use React Native Debugger Desktop because I often work with Redux, and it combines an array of tools in one app which is great and a time saving.

Summary

Tools for Debugging React Native

One of the most important aspects of React Native app development is the navigation. It’s what allows users to get to the pages they’re looking for. That’s why it’s important to choose the best navigation library to suit your needs.

In order to demonstrate how to use the library, we’ll be creating a simple app that uses it. The app will have five screens in total:

App Overview

Let’s start by generating a new React Native project:

Bootstrapping the App

First, we’ll set up the React Native Navigation library. The instructions that we’ll be covering here are also in the official documentation . Unfortunately, it’s not written in a very friendly way for beginners, so we’ll be covering it in more detail.

Setting up React Native Navigation

Now we’re ready to finally start building the app.

Building the App

At this point, you should be able to run the app:

Running the App

In this tutorial, you learned how to use the React Native Navigation library. Specifically, you learned how to set up React Native Navigation and use the stack and tab navigation. You also learned how to load icons from React Native Vector Icons instead of using image icons.

React Native: Tools

Details

Description

Creator

Wern Ancheta

Content

Reviews

Frequently Asked Questions

React Native: Tools