React Native in Action
Developing iOS and Android apps with JavaScript
Nader Dabit
  • MEAP began July 2016
  • Publication in June 2018 (estimated)
  • ISBN 9781617294051
  • 300 pages (estimated)
  • printed in black & white

React Native just may be the holy grail of cross-platform app development that many developers and companies have been hoping for. Using React Native, developers can build performant cross-platform native apps much easier than ever before, all with a single programming language: JavaScript. With the growing demand for apps and the increasing complexity that app development entails, React Native comes along at a perfect time. If you're serious about app development or want to stay ahead of the curve on emerging and disruptive technologies, take a look at React Native.

"Great introduction to the rapidly changing world of React and React Native!"

~ Joseph Tingsanchali

"A valuable reference once you start dealing with more sophisticated scenarios."

~ Jose San Leandro

"A gentle introduction to React Native."

~ Zhuo Hong Wei

Table of Contents detailed table of contents

Part 1: Getting Started With React Native

1. Getting started with React Native

1.1. Introducing React and React Native

1.1.1. A Basic React Native Class

1.1.2. React Lifecycle

1.2. What You Will Learn

1.3. What You Should Know

1.4. Understanding how React Native works

1.4.1. JSX

1.4.2. Threading

1.4.3. React

1.4.4. Unidirectional data flow

1.4.5. Diffing

1.4.6. Thinking in components

1.5. Acknowledging the strengths

1.5.1. Developer availability

1.5.2. Developer productivity

1.5.3. Performance

1.5.4. One-way data flow

1.5.5. Developer experience

1.5.6. Transpilation

1.5.7. Productivity and efficiency

1.5.8. Community

1.5.9. Open source

1.5.10. Immediate updates

1.5.11. Drawbacks

1.5.12. Conclusion

1.6. Creating and using basic components

1.6.1. Components

1.6.2. Native components

1.6.3. Component composition

1.6.4. Exportable components

1.6.5. Combining components

1.7. Creating a starter project

1.8. Summary

2. Understanding React

2.1. State

2.1.1. STATE

2.2. Props

2.3. React Component Specifications

2.3.1. render

2.3.2. getInitialState and constructor

2.3.3. Default Props

2.3.4. propTypes

2.3.5. statics

2.4. React Lifecycle Methods

2.4.1. ComponentWillMount

2.4.2. componentDidMount

2.4.3. componentWillReceiveProps

2.4.4. shouldComponentUpdate

2.4.5. componentWillUpdate

2.4.6. componentDidUpdate

2.4.7. componentWillUnmount

2.5. Summary

3. Building Your First React Native App

3.1. Building a Todo app

3.1.1. Layout out the Todo app

3.1.2. Coding the Todo app

3.1.3. Opening Developer Menu in iOS Simulator

3.1.4. Opening the developer menu in Android Emulator

3.1.5. Using the Developer Menu

3.1.6. Continuing building the Todo app

3.2. Summary

Part 2: React Native Application Development

4. Introduction to styling

4.1. Styling Overview

4.1.1. Applying styles to elements

4.1.2. Creating a StyleSheet

4.2. Styling View Components

4.3. Styling Text Components

4.4. Summary

5. Styling in depth

5.1. Flexbox

5.1.1. Flexbox Properties

5.1.2. flex Property

5.1.3. flexDirection Property

5.1.4. alignItems Property

5.1.5. justifyContent Property

5.1.6. alignSelf Property

5.1.7. flexWrap Property

5.2. Dynamic Styles

5.2.1. Dynamic Styles Using State and Props

5.2.2. Dynamic Styles Using Functions and Class Methods

5.3. Organizing Styles

5.3.1. Declaring styles in component

5.3.2. Creating reusable stylesheets

6. Building a Star Wars app using cross-platform components

6.1. Creating a new React Native app and installing dependencies

6.2. Importing the People component and creating the Container component

6.3. Creating the Navigation component and registering routes

6.4. Creating the main class for the initial view

6.5. Creating the People component using FlatList, Modal, and Picker

6.6. Creating the state and setting up a fetch call to retrieve data

6.7. Adding the remaining class methods

6.8. Render method of People.js

6.9. Creating the HomeWorld component

6.10. Creating the HomeWorld class and initializing state

6.11. Fetching data from the API using the url prop

6.12. Wrapping up the HomeWorld component

6.13. Summary

7. Navigation

7.1. NavigatorIOS

7.2. Using Navigator to create cross platform navigation

7.3. Using NavigationExperimental to create cross platform navigation

7.4. Summary

8. Implementing Cross—platform APIs

8.1. Implementing Cross Platform APIs

8.1.1. Alert

8.1.2. AppState

8.1.3. AsyncStorage

8.1.4. ClipBoard

8.1.5. Dimensions

8.1.6. Geolocation

8.1.7. Keyboard

8.1.8. NetInfo

8.1.9. PanResponder

9. iOS-specific Components and APIs

9.1. Implementing iOS-specific APIs and Components

9.2. Targeting platform-specific code

9.2.1. iOS and Android file extension

9.2.2. Detecting platform using the Platform API

9.3. DatePickerIOS

9.4. PickerIOS

9.5. ProgressViewIOS

9.6. SegmentedControlIOS

9.7. TabBarIOS

9.8. ActionSheetIOS

9.9. Summary

10. Android-specific components and APIs

10.1. Creating the menu using DrawerLayoutAndroid

10.2. ToolbarAndroid

10.3. ViewPagerAndroid

10.4. DatePickerAndroid

10.5. TimePickerAndroid

10.6. ToastAndroid

10.7. Summary

11. Animations

11.1. Introducing the Animated API

11.2. Animating a form input to expand on focus

11.3. Creating a custom loading animation using interpolation

11.4. Creating multiple parallel animations

11.5. Other useful tips for using the Animated library

11.5.1. Resetting an Animated value

11.5.2. Invoking a callback

11.5.3. Offloading animations to the native thread

11.5.4. Creating a custom animatable component using createAnimatedComponent

11.6. Summary

12. Data architecture

12.1. What is Redux?

12.2. Context

12.3. Implementing Redux into a React Native app

12.4. Reducers

12.5. Adding the Provider and creating the store

12.6. Accessing data using the connect function

12.7. Adding actions

12.8. Deleting items from a redux store in a reducer

12.9. Summary


Appendix A: Installing and running React Native

A.1. Developing for iOS Devices

A.1.1. Getting Started

A.2. Developing for Android devices

A.2.1. Mac and Android

A.2.2. Windows and Android

A.2.3. Linux and Android

A.3. Creating a new project

A.4. Running the project

Appendix B: Resources

About the book

React Native in Action gives iOS, Android, and web developers the knowledge and confidence to begin building high quality iOS and Android apps using the React Native framework. You'll start by getting a clear understanding of what React Native is and how it works. Then you'll follow step-by-step instructions to build your first functional app while you learn the fundamentals. This clearly-written book dives into more complex application development topics like styling, cross-platform and OS specific components, APIs, network requests, and animations. In the last part of the book, you'll learn to develop data architectures and thoroughly test your apps. By the end, you'll know to build high quality, cross-platform mobile apps with React Native.

What's inside

  • Installing and running React Native
  • In-depth coverage of routing, Redux, and animations
  • Implementing React Native components and APIs
  • Requesting and sending data over the network
  • Storing and retrieving data locally
  • Managing data and state
  • Testing React Native code

About the reader

This book is for beginner to intermediate web, JavaScript, or iOS (Swift/Objective C) developers.

About the author

Nader Dabit has been developing with React Native since the framework's release and is active in the React Native community.

Manning Early Access Program (MEAP) Read chapters as they are written, get the finished eBook as soon as it’s ready, and receive the pBook long before it's in bookstores.
MEAP combo $49.99 pBook + eBook + liveBook
MEAP eBook $39.99 pdf + ePub + kindle + liveBook

FREE domestic shipping on three or more pBooks