Book Image

React Native Cookbook - Second Edition

By : Daniel Ward
4 (1)
Book Image

React Native Cookbook - Second Edition

4 (1)
By: Daniel Ward

Overview of this book

If you are a developer looking to create mobile applications with maximized code reusability and minimized cost, React Native is what you need. With this practical guide, you’ll be able to build attractive UIs, tackle common problems in mobile development, and achieve improved performance in mobile environments. This book starts by covering the common techniques for React Native customization and helps you set up your development platforms. Over the course of the book, you’ll work through a wide variety of recipes that help you create, style, and animate your apps with built-in React Native and custom third-party components. You’ll also develop real-world browser-based authentication, build a fully functional audio player, and integrate Google Maps in your apps. This book will help you explore different strategies for working with data, including leveraging the popular Redux library and optimizing your app’s dataflow. You’ll also learn how to write native device functionality for new and existing React Native projects and how app deployment works. By the end of this book, you'll be equipped with tips and tricks to write efficient code and have the skills to build full iOS and Android applications using React Native.
Table of Contents (17 chapters)

There's more...

Once you have launched an app in the simulator, you'll be able to press the Run on iOS Simulator button without opening Simulator from Xcode. It should also remember your device choice. Opening Simulator from Xcode provides an easy way to choose your preferred iOS device to simulate.

If you followed the steps in the Expo guide, which can be found in the Installing Android Studio section, you would have also seen that it covered installing a virtual device that we can run as our emulator. To start your app on the emulator, just open the Android Virtual Device you installed in Android Studio, run the expo start command in your Terminal, and select Run on Android device/emulator.

Installing Node.js

Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine, and is designed to build scalable network applications. Node allows JavaScript to be executed in a Terminal, and is an indispensable tool for any web developer. For more information on what Node.js is, you can read the project's About Node.js page at https://nodejs.org/en/about/.

According to the Expo installation documentation, Node.js is not technically required, but as soon as you start actually building something, you'll want to have it. Node.js itself is outside the scope of this book, but you can check out the Further reading section at the end of this chapter for more resources on working with Node.js.

There are numerous methods to install Node.js, and it is therefore difficult to recommend a particular installation method. On macOS, you can install Node.js in one of the following ways:

Installing Expo

The Expo project used to have a GUI-based development environment called the Expo XDE, which has been replaced with a browser-based GUI called the Expo Developer Tools. Since the Expo XDE has been deprecated, creating new Expo apps is now always done using the Expo CLI. This can be installed using npm (Node Package Manager, which comes as part of Node.js) via the Terminal with the following command:

 npm install expo-cli -g

We'll be using Expo quite a bit throughout this book to create and build out React Native applications, particularly those apps that do not need access to native iOS or Android code. Applications built with Expo have some very nice advantages for development, helping obfuscate native code, streamlining app publishing and push notifications, and providing a lot of useful functionality built into the Expo SDK. For more information on how Expo works, and how it fits into the bigger picture of React Native development, see Chapter 10, App Workflow and Third-Party Plugins.

Installing Watchman

Watchman is a tool used internally by React Native. Its purpose is to watch files for updates, and trigger responses (such as live reloading) when changes occur. The Expo documentation recommends installing Watchman, since it has been reported that some macOS users have run into issues without it. The recommended method for installing Watchman is via Homebrew. The missing package manager for macOS, Homebrew allows you to install a wide array of useful programs straight from your Terminal. It's an indispensable tool that should be in every developer's tool bag:

  1. If you don't have Homebrew installed already, run the following command in the Terminal to install it (you can read more about it and view the official documentation at https://brew.sh/):
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
  1. Once Homebrew has been installed, run the following two commands in Terminal to install watchman:
brew update
brew install watchman