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: Cross-Platform Application Development with React Native

Book Description

Harness the power of React Native to build 4 real-world apps

About This Book

  • Build quirky and fun projects from scratch and become efficient with React Native
  • Learn to build professional Android and iOS applications using your existing JavaScript knowledge
  • Use isomorphic principles to build mobile apps that offer a native user experience
  • Embedded with assessments that will help you revise the concepts you have learned in this course

Who This Book Is For

This book is for developers who want to build amazing cross-platform apps with React Native.

What You Will Learn

  • Structure React Native projects to ease maintenance and extensibility
  • Optimize a project to speed up development
  • 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

React Native helps web and mobile developers to build cross-platform apps that perform at the same level as any other natively developed app. The range of apps that can be built using this library is huge. From e-commerce to games, React Native is a good fit for any mobile project due to its flexibility and extendable nature.

This project-based book consists of four standalone projects. Each project will help you gain a sound understanding of the framework and build mobile apps with native user experience. Starting with a simple standalone car booking 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 is ideal for developers who want to build amazing cross-platform apps with React Native.

This book is embedded with useful assessments that will help you revise the concepts you have learned in this book.

Style and approach

This project-based book consists of four projects. Each project is a standalone project that covers the core techniques and concepts of React Native.

Note: This book is a blend of text and quizzes, all packaged up keeping your journey in mind. It includes content from the following Packt products:

  • React Native Blueprints by Emilio Rodriguez Martinez

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 files e-mailed directly to you.

Table of Contents

  1. React: Cross-Platform Application Development with React Native
    1. React: Cross-Platform Application Development with React Native
    2. Credits
      1. Meet Your Expert
    3. Preface
      1. What's in It for Me?
      2. What Will I Get from This Book ?
      3. Prerequisites
    4. 1. Project 1 – 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
      10. Assessments
    5. 2. Project 2 – 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
      15. Assessments
    6. 3. Project 3 – 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
      14. Assessments
    7. 4. Project 4 – 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
      17. Assessments
    8. 5. Assessment Answers
      1. Lesson 1: Project 1 – Car Booking App
      2. Lesson 2: Project 2 – Image Sharing App
      3. Lesson 3: Project 3 – Messaging App
      4. Lesson 4: Project 4 – Game