Book Image

React Native Cookbook

By : Crysfel Villa, Stan Bershadskiy
Book Image

React Native Cookbook

By: Crysfel Villa, Stan Bershadskiy

Overview of this book

<p>React has taken the web development world by storm, and it is only natural that the unique architecture and its ecosystem of third-party support be applied to native application development. This book will take you through the basics of React Native development all the way through to some more advanced components.</p> <p>This book covers topics in React Native ranging from adding basic UI components to successfully deploying for multiple target platforms. The book follows a top-down approach beginning with building rich user interfaces. These UIs will be created with both built-in and custom components that you will create, style, and animate.</p> <p>You will then learn about different strategies for working with data, including leveraging the popular Redux library and optimizing the performance of the application. Then, you will step further into exposing native device functionality. Finally, we will discuss how to put your application into production and maintain its reliability.</p>
Table of Contents (19 chapters)
React Native Cookbook
Credits
Foreword
About the Authors
About the Reviewer
www.PacktPub.com
Customer Feedback
Preface

Dealing with universal apps


One of the benefits of using React Native is its ability to easily create universal apps. We can share a lot of code for phone and tablet apps. The layouts might be different at some point, but we can reuse the small pieces for both devices.

In this recipe, we will build an app that runs on phones and tablets. The tablet version will include a different layout, but we will reuse the same internal components.

Getting ready

For this recipe, we will show a list of contacts. For now, we will load the data from a .json file; later on, in the book, we will explore how to load remote data from a REST API.

Let's open the following URL and copy the generated JSON to a file called src/data.json. We will use this data to render the list of contacts http://api.randomuser.me/?results=20:

You might want to register to this service and get a key; otherwise, they will only allow you to make a few requests to the assets and API, and since we are going to load the images from there...