Preface

The React Native framework offers a range of powerful features that makes it possible to efficiently build high-quality, easy-to-maintain frontend applications across multiple platforms, such as iOS, Android, Linux, macOS X, Windows, and the web, helping you save both time and money.

In Professional React Native, you’ll find the ultimate coverage of essential concepts, best practices, advanced processes, and easy-to-use tips for everyday developer problems. With step-by-step explanations, practical examples, and expert guidance, you’ll understand how React Native works under the hood and then use this knowledge to develop highly performant apps. As you follow along, you’ll learn the difference between React and React Native, navigate the React Native ecosystem, and revisit the basics of JavaScript and TypeScript that are needed to create a React Native application. You’ll also work with animations and control your app with gestures. Finally, you’ll be able to structure larger apps and improve developer efficiency through automated processes, testing, and continuous integration.

By the end of this React native app development book, you’ll have gained the confidence to build high-performance apps for multiple platforms, even on a bigger scale.

Who this book is for

This book is for developers working with React Native interested in building professional cross-platform applications. Familiarity with the basics of JavaScript (including its syntax) and general software engineering concepts, including data types, control flows, and server/client structures, is required.

What this book covers

Chapter 1, What Is React Native?, will include a short introduction to React Native, how it is related to React and Expo, and how it is driven by the community.

Chapter 2, Understanding the Essentials of JavaScript and TypeScript, shows important underlying concepts to avoid the most common mistakes and bad patterns. You will get useful tips, learn best practices, and repeat the most important basics to use JavaScript in your apps.

Chapter 3, Hello React Native, will give you a deeper understanding of React Native. It contains core concepts, explained on an example app, as well as theoretical information about the architecture of React Native and how to connect different platforms to the React Native JavaScript bundle.

Chapter 4, Styling, Storage, and Navigation in React Native, covers different areas, which are all important to create a high-quality product with React Native. You have to focus on good user experience, which includes a good design and clear navigation. Also, your users should be able to use as much of your app as possible without a network connection, which means working with locally stored data.

Chapter 5, Managing States and Connecting Backends, focuses a lot on data. First, you will learn how to handle more complex data in your app. Then, we’ll look at different options on how to make your app communicate with the rest of the world by connecting it to remote backends.

Chapter 6, Working with Animations, focuses on onscreen animations. There are multiple ways to achieve smooth animations in React Native. Depending on the type of project and animation you want to build, you can choose from a wide range of solutions, each with its own advantages and disadvantages. We will discuss the best and most widely used solutions in this chapter.

Chapter 7, Handling Gestures in React Native, teaches you how to work with gestures, how to combine gestures and animations, and what the best practices are to give user feedback.

Chapter 8, JavaScript Engines and Hermes, is mainly a theoretical chapter, where you will learn how different JavaScript Engines in React Native work and why Hermes is the preferred solution in production apps (when it is possible to use it). It includes some theoretical background as well as tests of key metrics in different environments.

Chapter 9, Essential Tools for Improving React Native Development, teaches you about useful tools that make development easier, especially when working on bigger projects. You will understand how Storybook works and why this is a great tool for React Native development. You will also learn about styled components for React Native, recommendations for different UI libraries, ESLint/TSLint, and boilerplate CLIs such as Ignite.

Chapter 10, Structuring Large-Scale, Multi-Platform Projects, teaches you how to structure a large-scale project. This includes the app architecture, processes for the successful collaboration of multiple developers, and processes to ensure good code quality.

Chapter 11, Creating and Automating Workflows, focuses exclusively on workflow automation. You will learn how to set up multiple CI pipelines for code quality checks, automated PR checks, automated communication via mail, Slack, or board issues, as well as automated deployment to the app stores. We will have a look at GitHub Actions, fastlane, Bitrise, and other CI/CD solutions.

Chapter 12, Automated Testing of React Native Apps, teaches you how to use Jest and the react-native-testing-library for unit and snapshot tests, how to ensure a certain test coverage, how to do E2E testing with Detox, and even how to test on real devices using AWS Device Farm and Appium.

Chapter 13, Tips and Outlook, is divided into two parts. In the first part, you can read my most useful tips on how to make your React Native project a success. The second part focuses on the outlook of the framework and how I think React Native, its community, and its ecosystem will develop in the future. This is based on technical development as well as commitment from different big players in the community.

To get the most out of this book

You should have a working React Native environment to be able to run the examples in this book. All examples are tested with React Native 0.68, but they should also work with future versions.

Software covered in the book	Operating system requirements
React Native 0.68	Windows, macOS, or Linux, preferably macOS
TypeScript 4.4
ECMAScript 12

If you are using the digital version of this book, we advise you to type the code yourself or access the code from the book’s GitHub repository (a link is available in the next section). Doing so will help you avoid any potential errors related to the copying and pasting of code.

Download the example code files

You can download the example code files for this book from GitHub at https://github.com/alexkuttig/prn-videoexample. If there’s an update to the code, it will be updated in the GitHub repository.

We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!

Download the color images

We also provide a PDF file that has color images of the screenshots and diagrams used in this book. You can download it here: https://packt.link/xPgoW.

Conventions used

There are a number of text conventions used throughout this book.

Code in text: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: “This is the <Header /> component from our example project of the previous chapter but using inline styles to style the Text component.”

A block of code is set as follows:

import React from 'react'; 
import {ScrollView, Text, View} from 'react-native'; 
const App = () => { 
  return ( 
    <ScrollView contentInsetAdjustmentBehavior="automatic"> 
      <View> 
        <Text>Hello World!</Text> 
      </View> 
    </ScrollView> 
  ); 
};

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

<Pressable 
  key={genre.name} 
  onPress={() => props.onGenrePress(genre)} 
  testID={'test' + genre.name}> 
  <Text style={styles.genreTitle}>{genre.name}</Text> 
</Pressable>

Any command-line input or output is written as follows:

npx react-native init videoexample  
    --template react-native-template-typescript

Bold: Indicates a new term, an important word, or words that you see onscreen. For instance, words in menus or dialog boxes appear in bold. Here is an example: “Go to Settings, scroll to the bottom, and choose Developer.”

Tips or Important Notes

Appear like this.

Get in touch

Feedback from our readers is always welcome.

General feedback: If you have questions about any aspect of this book, email us at [e-mail] and mention the book title in the subject of your message.

Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packtpub.com/support/errata and fill in the form.

Piracy: If you come across any illegal copies of our works in any form on the internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [e-mail] with a link to the material.

If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.

Share Your Thoughts

Once you’ve read Professional React Native, we’d love to hear your thoughts! Please select https://www.amazon.in/review/create-review/error?asin=180056368X for this book and share your feedback.

Your review is important to us and the tech community and will help us make sure we’re delivering excellent quality content.