O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

React Native Blueprints

Book Description

Develop real world Android and iOS applications with the power of React native.

About This Book

  • Build quirky and fun projects from scratch and become efficient with React Native
  • Learn to build professional Android and iOS applications with your JavaScript skills
  • Use Isomorphic principles to build mobile apps that offer a native user experience

Who This Book Is For

This book is for developers who want to use their JavaScript knowledge for mobile development. Prior knowledge of React will be beneficial.

What You Will Learn

  • Structure React Native projects to ease maintenance and extensibility
  • Optimize a project to speed up development
  • Make a React Native project production-ready
  • Use external modules to speed up the development and maintenance of your projects
  • Explore the different UI and code patterns to be used for iOS and Android
  • Get to know the best practices when building apps in React Native

In Detail

Considering the success of the React framework, Facebook recently introduced a new mobile development framework called React Native. With React Native's game-changing approach to hybrid mobile development, you can build native mobile applications that are much more powerful, interactive, and faster by using JavaScript

This project-based guide takes you through eight projects to help you gain a sound understanding of the framework and helps you build mobile apps with native user experience. Starting with a simple standalone groceries list app, you will progressively move on to building advanced apps by adding connectivity with external APIs, using native features, such as the camera or microphone, in the mobile device, integrating with state management libraries such as Redux or MobX, or leveraging React Native’s performance by building a full-featured game.

This book covers the entire feature set of React Native, starting from the simplest (layout or navigation libraries) to the most advanced (integration with native code) features.

By the end of this book, you’ll be able to build professional Android and iOS applications using React Native.

Style and approach

This project-based guide consists of 8 projects. Each project is a standalone project that covers the core techniques and concepts in each project.

Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the code file.

Table of Contents

  1. 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. Downloading the color images of this book
      3. Errata
      4. Piracy
      5. Questions
  2. Shopping List
    1. Overview
    2. Setting up our project
    3. Setting up the folder structure
    4. Adding a Navigation component
    5. Styling our app with NativeBase
    6. Building the ShoppingList screen
      1. Adding state to our screen
      2. Adding event handlers 
      3. Putting it all together
    7. Building the AddProduct screen
      1. Using AsyncStorage
        1. Adding state to our screen
      2. Adding event listeners
      3. Putting it all together
    8. Installing and distributing the app
      1. Testflight
      2. Diawi
      3. Installr
    9. Summary
  3. RSS Reader
    1. Overview
    2. Setting up the folder structure
      1. Adding dependencies
      2. Using vector icons
    3. Managing our state with MobX
      1. The store
    4. Setting up the store
    5. Defining actions
      1. Networking in React Native
    6. Creating our app's entry point
    7. Building the FeedsList screen
      1. Adding event handlers
    8. Building the AddFeed screen
      1. ActivityIndicator
    9. Building the FeedDetail screen
    10. Building the EntryDetail screen
    11. Summary
  4. Car Booking App
    1. Overview
    2. Setting up the folder structure
      1. Files and folders created by React Native's CLI
        1. __tests__/
        2. android/ and ios/
        3. node_modules/
        4. Files in the root folder
      2. react-native link
    3. Running the app in the simulator
      1. The developer menu
    4. Creating our app's entry point
      1. Adding images to our app
    5. LocationSearch
      1. Aligning elements
    6. LocationPin
      1. flexDirection
      2. Dimensions
      3. Shadows
    7. ClassSelection
      1. Adding custom fonts
      2. Animations
    8. ConfirmationModal
    9. Summary
  5. Image Sharing App
    1. Overview
    2. Setting up the folder structure
    3. Redux
    4. ImagesList
    5. Gallery
    6. Header
    7. ActivityIndicator
    8. Camera
    9. MyImages
    10. ImageGrid
    11. Actions
    12. Reducers
    13. API
    14. Summary
  6. Guitar Tuner
    1. Overview
    2. Setting up the folder structure
    3. Writing the native module
    4. index.ios.js
      1. utils
    5. Tuner
    6. Strings
    7. Adding an icon
    8. Adding a launch screen
    9. Disabling the landscape mode
    10. Summary
  7. Messaging App
    1. Overview
    2. Firebase
      1. Real-time database
        1. Reading data from Firebase's database
        2. Updating data in Firebase's database
      2. Authentication
    3. Setting up the folder structure
    4. Users store
    5. Chats store
    6. Push notifications using Firebase
    7. Login
    8. Chats
    9. ListItem
    10. Chat
    11. Search
    12. Profile
    13. Summary
  8. Game
    1. Overview
    2. Sprites
      1. Numbers
      2. Background
      3. Ground
      4. Rocks
      5. Parrot
      6. The home screen
      7. Game over screen
    3. Setting up the folder structure
    4. GameContainer
    5. Actions
    6. Reducer
    7. The sprites module
      1. The sprites array
      2. prepareNewRockSizes()
      3. getRockProps()
      4. moveSprites()
      5. bounceParrot()
      6. checkForCollision()
      7. getUpdatedScore()
    8. Constants
    9. Parrot
    10. RockUp and RockDown
    11. Ground
    12. Score
    13. Start
    14. GameOver
    15. StartAgain
    16. Summary
  9. E-Commerce App
    1. Overview
    2. Setting up the folder structure
    3. Linting and code formatting
    4. Indexes and main files
    5. Reducers
    6. API
    7. ProductList
    8. ProductDetail
    9. MyCart
    10. Payment
    11. PaymentConfirmation
    12. MyProfile
    13. LoginOrRegister
      1. Login
    14. Register
    15. Sales
    16. Summary