Mastering React Native

Mastering React Native

by Eric Masiello, Jacob Friedmann
Released January 2017
Publisher(s): Packt Publishing
ISBN: 9781785885785

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Leverage frontend development skills to build impressive iOS and Android applications with React Native

About This Book

  • Apply flexbox to get layout and build rich animations that bring your React Native application to life
  • Integrate third-party libraries and develop customized components that run natively on iOS and Android platforms
  • Combine React Native with Redux, Redux middleware, and a remote API to build scalable data-driven applications

Who This Book Is For

This book is for anyone who wants to build cross-platform native mobile applications using only JavaScript and the React Native framework. In particular, this book is especially useful for front-end developers who want to use their current skillset to build mobile applications. An existing working knowledge of JavaScript will help you get the most out of this book.

What You Will Learn

  • Implement native React Native components and APIs
  • Explore React's JSX syntax
  • Manage data using Redux and Redux middleware
  • Build applications with React Native on both iOS and Android platforms
  • Perform animations in your applications using the animation APIs
  • Understand routing and Navigator comparison
  • Create your own Native module

In Detail

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.

Style and approach

This comprehensive guide will take your React Native skills to the next level. It shows you how to develop a clear workflow to build scalable applications, and how to implement the architectural concepts covered to build applications that shine in the real world.

Table of contents

  1. Mastering React Native
    1. Mastering React Native
    2. Credits
    3. Disclaimer
    4. About the Authors
    5. About the Reviewer
    6. www.PacktPub.com
      1. Why subscribe?
    7. Customer Feedback
    8. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    9. 1. Building a Foundation in React
      1. Library versus framework
      2. Motivation for React
      3. Getting started in React
      4. Describing components in JSX
      5. The component
      6. Component composition
      7. Props and PropTypes
        1. Accepting props
        2. PropTypes
        3. Passing props
        4. Default props
        5. Props.children
      8. Event handlers
      9. State
      10. The component lifecycle
        1. The update cycle
        2. Unmounting the component
      11. Alternate component forms
        1. React.createClass
        2. Functional components
      12. Summary
    10. 2. Saying HelloWorld in React Native
      1. Understanding the mobile app development ecosystem
        1. Adobe PhoneGap
        2. Ionic
        3. NativeScript
        4. React Native
          1. Extending React Native
          2. Introducing style and layout in React Native
      2. Understanding all the React Native tools
        1. Xcode
        2. Google Chrome
        3. Homebrew (also known as brew)
        4. Node.js and npm
      3. Watchman
        1. Flow
        2. React Native command-line interface (CLI)
      4. Installing our tools
        1. Installing Xcode
        2. Installing Homebrew
        3. Installing Node and npm
      5. Installing Watchman and Flow
        1. Installing the React Native CLI
      6. Creating our first React Native app
        1. React Native Packager
      7. Understanding our HelloWorld app
        1. Importing dependencies using ECMAScript 2015
        2. Our HelloWorld component
        3. HelloWorld style code
        4. Registering the root component
        5. Why import React?
      8. Debugging a React Native app
        1. Enabling the Chrome Debugger
        2. Breakpoints
      9. Summary
    11. 3. Styling and Layout in React Native
      1. Constructing and applying styles
        1. Inline styles
        2. Styles as objects in your React Native components
        3. Stylesheet
          1. Using Stylesheet.hairlineWidth
        4. Applying component-specific style properties
      2. Styling without inheritance
      3. Understanding React Native's take on the box model and flexbox
        1. Box model
      4. Understanding Flexbox
        1. Covering the other axis
        2. Flex shrinking and growing
          1. Setting flexBasis
          2. Growing and shrinking flex items
      5. Styling text with React Native
        1. Text style properties
        2. Encapsulating text styles in reusable components
      6. Styling images
        1. Background images
      7. Inspecting and debugging styles
        1. Using the React Native Inspector
      8. Adding media query behavior to React Native
        1. Using Dimensions
        2. Using onLayout per View
      9. Summary
    12. 4. Starting our Project with React Native Components
      1. Native components
        1. Text
          1. Props
        2. View
          1. Props
        3. Image
          1. Props
          2. Static methods
        4. Touchable
          1. Props
        5. ListView
          1. DataSource
          2. renderRow
          3. Props
        6. Modal
          1. Props
        7. WebView
          1. Props
        8. TabBarIOS
          1. Props
          2. TabBarIOS.Item
          3. Props
        9. TextInput
          1. Props
        10. Other input components
      2. Native APIs
        1. ActionSheetIOS
        2. Alert
        3. Vibration
        4. StatusBar
      3. Summary
    13. 5. Flux and Redux
      1. The Flux architecture
        1. Motivation
        2. Implementing Flux
          1. Creating our view
          2. Actions and action creators
          3. Dispatcher
          4. Stores
          5. Rendering updated data
      2. Getting started with Redux
        1. Principles of Redux
        2. Installing Redux
        3. Implementing Redux
          1. Refactoring the store
            1. Reducer
            2. Creating the store
            3. Multiple reducers
          2. Action creators
          3. Subscribing to the store
        4. React-Redux
          1. Installing React-Redux
          2. React context and providers
          3. Container and presentational components
        5. Middleware
      3. Summary
    14. 6. Integrating with the NYT API and Redux
      1. Understanding the NYT API data
      2. Wiring up our Redux data flow
        1. Creating the Redux state tree
        2. Wiring up Redux data to our app
        3. Refactoring and reshaping
          1. Refactoring the components
          2. Reshaping the data
        4. Introducing Reselect
        5. Adding search
      3. Wiring up the NYT API with asynchronous requests
        1. Fixing iOS transport security
        2. Adding pull to refresh and a loading spinner
      4. Summary
    15. 7. Navigation and Advanced APIs
      1. Navigation landscape
        1. NavigatorIOS
        2. Navigator
        3. NavigationExperimental
        4. Choosing a navigator
      2. Using Navigator
        1. The Navigator component
        2. Navigation bar
      3. Advanced navigation with NavigationExperimental
        1. Representing the navigation state
        2. Managing the navigation state
        3. The CardStack component
        4. Navigation header
        5. Tabbed navigation
        6. Adding in the modal
      4. Other advanced APIs
        1. Offline messages with NetInfo
        2. Opening the browser with linking
        3. Saving bookmarks locally with AsyncStorage
      5. Summary
    16. 8. Animation and Gestures in React Native
      1. Introducing LayoutAnimation and Animated
      2. Building the basic Onboarding experience
        1. Getting started
      3. Adding LayoutAnimation
        1. Adding a bit more animation
      4. Understanding Animated
        1. Refactoring our Onboarding experience
        2. Adding Animated to our Onboarding experience
        3. Interpolating Animated Values
      5. Using PanResponder with the Animated API
        1. Touching up PanResponder
      6. Summary
    17. 9. Refactoring for Android
      1. Installing the necessary tools
        1. Installing the Java Development Kit
        2. Installing Android Studio
          1. Configuring Android Studio
        3. Configuring ANDROID_HOME and your PATH
        4. Verifying that the CPU/ABIs are installed
        5. Starting the Android emulator
      2. Adding Android support to RNNYT
        1. Branching platform logic
        2. Refactoring RNNYT for Android
          1. Fixing Android vibration
          2. Using DrawerLayoutAndroid
          3. Customizing Android styling
          4. Enabling LayoutAnimation
      3. Summary
    18. 10. Using and Writing Native Modules
      1. Using native modules
        1. Installing native modules
        2. Using the library
          1. Profile page
          2. Adding the profile to the iOS home screen
          3. Adding the profile to the Android home screen
      2. Writing native modules
        1. Native modules in iOS
          1. Setting up the module
          2. Exporting methods
          3. Communicating with callbacks
          4. Communicating with promises
          5. Communicating with events
          6. Exporting constants
        2. Native modules in Android
          1. Setting up the module
          2. Exporting methods
          3. Communicating with callbacks
          4. Communicating with promises
          5. Communicating with events
          6. Exporting constants
      3. Summary
    19. 11. Preparing for Production
      1. Testing
        1. Unit testing
        2. Component testing
      2. Performance
        1. Problematic ListView
          1. Using Perf Monitor
          2. Analyzing a Systrace
          3. The React Perf Library
          4. shouldComponentUpdate and PureRenderMixin
          5. Minimizing the impact of state changes
          6. The ListView data source
          7. Additional optimizations
        2. Unresponsive touch and slow navigation
          1. Mitigating unresponsive touch
          2. Smoothing out animations with InteractionManager
        3. Performance summary
      3. Running on physical devices
        1. Debugging on an iOS device
          1. Testing your app on an iOS device using Release
        2. Debugging on Android devices
          1. Generating a signed APK
      4. Deploying our application
        1. Remove debugging code
        2. iOS
          1. Creating provisioning profiles
          2. Registering an application in iTunes Connect
          3. Adding icons and updating the launch screen
          4. Creating an archive
          5. Beta testing and release
        3. Android
          1. Signing the application
          2. Testing the release build
          3. Generating the APK
          4. Beta-test and release
      5. Summary
    20. 12. React Native Tools and Resources
      1. Evaluating React Native Editors, Plugins, and IDEs
        1. Atom and Nuclide
      2. Taking React Native beyond iOS and Android
        1. Introducing React Native Web
          1. Configuring React Native Web
        2. React Native plugin for Universal Windows Platform
          1. Configuring the React Native plugin for UWP
        3. React Native macOS
          1. Configuring React Native macOS
      3. Summary
      4. References

Product information

  • Title: Mastering React Native
  • Author(s): Eric Masiello, Jacob Friedmann
  • Release date: January 2017
  • Publisher(s): Packt Publishing
  • ISBN: 9781785885785