Book Image

Mastering React Native

Book Image

Mastering React Native

Overview of this book

React Native has completely revolutionized mobile development by empowering JavaScript developers to build world-class mobile apps that run natively on mobile platforms. This book will show you how to apply JavaScript and other front-end skills to build cross-platform React Native applications for iOS and Android using a single codebase. This book will provide you with all the React Native building blocks necessary to become an expert. We’ll give you a brief explanation of the numerous native components and APIs that come bundled with React Native including Images, Views, ListViews, WebViews, and much more. You will learn to utilize form inputs in React Native. You’ll get an overview of Facebook’s Flux data architecture and then apply Redux to manage data with a remote API. You will also learn to animate different parts of your application, as well as routing using React Native’s navigation APIs. By the end of the book, you will be able to build cutting-edge applications using the React Native framework.

Related Content you might be interested in

Current Title:

Small book image
Mastering React Native
Jan, 2017 | 496 pages
Small book image
React Native - Building Mobile Apps with JavaScript
Vladimir Novick
Aug, 2017 | 434 pages
Small book image
Getting Started with React Native
Ethan Holmes | Tom Bray
Dec, 2015 | 172 pages
Small book image
React Native Cookbook
Crysfel Villa | Stan Bershadskiy
Dec, 2016 | 536 pages
Table of Contents (20 chapters)
Mastering React Native
Mastering React Native
Credits
Credits
Disclaimer
Disclaimer
About the Authors
About the Authors
About the Reviewer
About the Reviewer
www.PacktPub.com
www.PacktPub.com
Customer Feedback
Customer Feedback
Preface
Preface
Free Chapter
1
Building a Foundation in React
Building a Foundation in React
Library versus framework
Motivation for React
Getting started in React
Describing components in JSX
The component
Component composition
Props and PropTypes
Event handlers
State
The component lifecycle
Alternate component forms
Summary
2
Saying HelloWorld in React Native
Saying HelloWorld in React Native
Understanding the mobile app development ecosystem
Understanding all the React Native tools
Watchman
Installing our tools
Installing Watchman and Flow
Creating our first React Native app
Understanding our HelloWorld app
Debugging a React Native app
Summary
3
Styling and Layout in React Native
Styling and Layout in React Native
Constructing and applying styles
Styling without inheritance
Understanding React Native's take on the box model and flexbox
Understanding Flexbox
Styling text with React Native
Styling images
Inspecting and debugging styles
Adding media query behavior to React Native
Summary
4
Starting our Project with React Native Components
Starting our Project with React Native Components
Native components
Native APIs
Summary
5
Flux and Redux
Flux and Redux
The Flux architecture
Getting started with Redux
Summary
6
Integrating with the NYT API and Redux
Integrating with the NYT API and Redux
Understanding the NYT API data
Wiring up our Redux data flow
Wiring up the NYT API with asynchronous requests
Summary
7
Navigation and Advanced APIs
Navigation and Advanced APIs
Navigation landscape
Using Navigator
Advanced navigation with NavigationExperimental
Other advanced APIs
Summary
8
Animation and Gestures in React Native
Animation and Gestures in React Native
Introducing LayoutAnimation and Animated
Building the basic Onboarding experience
Adding LayoutAnimation
Understanding Animated
Using PanResponder with the Animated API
Summary
9
Refactoring for Android
Refactoring for Android
Installing the necessary tools
Adding Android support to RNNYT
Summary
10
Using and Writing Native Modules
Using and Writing Native Modules
Using native modules
Writing native modules
Summary
11
Preparing for Production
Preparing for Production
Testing
Performance
Running on physical devices
Deploying our application
Summary
12
React Native Tools and Resources
React Native Tools and Resources
Evaluating React Native Editors, Plugins, and IDEs
Taking React Native beyond iOS and Android
Summary
References

Native components

Most React Native components are cross-platform; they work on both iOS and Android operating systems. However, there are a few components that are restricted to one platform or the other. The convention is to suffix platform-specific component names with the name of the platform. For example, TabBarIOS is an iOS-only navigational component. The dominant reason that this component and other platform-specific components are limited to one platform has to do with the accepted user interface conventions on that platform. In this case, a tabbed navigational interface is very common on iOS applications, but is not considered a best practice on Android.

Before we dive in, let's set up our new project. We'll follow the same procedure outlined in Chapter 2, Saying Hello World in React Native. In the terminal, we will run the following command:

react-native init RNNYT

Since our application is becoming more complex than the one discussed in Chapter 2, Saying Hello World in React Native...

Previous Section
End of Section 2
Next Section