React Native By Example

React Native By Example

by Richard Kho
Released April 2017
Publisher(s): Packt Publishing
ISBN: 9781786464750

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 the full potential of the React Native framework to build and deploy your own native mobile applications for iOS and Android

Key Features

  • [*] Work on native APIs and UI Elements using React Native
  • [*] Get the best of both worlds: the power of native approach and the fluidity of JavaScript
  • [*] Create increasingly complex real-world applications and dive deeper into React Native

Book Description

React Native's ability to build performant mobile applications with JavaScript has resulted in its popularity amongst developers. Developers now have the luxury to create incredible mobile experiences that look and feel native to their platforms with the comfort of a well-known language and the popular React.js library.

This book will show you how to build your own native mobile applications for the iOS and Android platforms while leveraging the finesse and simplicity of JavaScript and React.

Throughout the book you will build three projects, each of increasing complexity. You will also link up with the third-party Facebook SDK, convert an app to support the Redux architecture, and learn the process involved in making your apps available for sale on the iOS App Store and Google Play.

At the end of this book, you will have learned and implemented a wide breadth of core APIs and components found in the React Native framework that are necessary in creating great mobile experiences.

What you will learn

  • [*] How to create mobile-performant iOS and Android apps using JavaScript and React
  • [*] The potential of each API and component, putting them into practice throughout the course of three projects
  • [*] The process of integrating the Facebook SDK to build an app that connects to third-party data
  • [*] Every step taken to implement Redux, a popular state management library, in your mobile apps
  • [*] The requirements for building and deploying your apps to market, with detailed instructions on how to release and beta test apps on both the Apple App Store and Google Play

Who this book is for

If you are keen on learning to use the revolutionary mobile development tool React Native to build native mobile applications, then this book is for you. Prior experience with JavaScript would be useful.

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. First Project - Creating a Basic To-Do List App
    1. Initializing a new project
    2. Feature planning
    3. Project architecture
    4. StyleSheet
      1. Inline styles
      2. With StyleSheet, within the same file
      3. StyleSheet as an imported module
    5. Flexbox
      1. flex
      2. flexDirection
    6. Writing in ES6
    7. Building the app
    8. ListView
    9. Creating the TasksList component
    10. Linking TasksList to index
    11. The iOS Simulator Developer menu
    12. TextInput
    13. AsyncStorage
      1. Using the Async and Await keywords
    14. Custom RenderRow component
      1. Custom RenderRow example
    15. Prop validation in React
    16. Moving beyond MVP
    17. Summary
  3. Advanced Functionality and Styling the To-Do List App
    1. Navigator and NavigatorIOS
      1. Looking at NavigatorIOS
      2. A simple EditTasks component
    2. Using DatePickerIOS
      1. Writing a collapsible component
      2. The LayoutAnimation API
      3. Basic ExpandableCell implementation
    3. Using onLayout
    4. Button
      1. Clearing due date example
    5. Switch
    6. Save button
    7. TasksListCell modifications
      1. Modifying tasks for Android
    8. Navigator
      1. Navigator example
    9. Platform
    10. DatePickerAndroid and TimePickerAndroid
      1. DatePickerAndroid and TimePickerAndroid example
    11. Saving updates
    12. BackAndroid
    13. Summary
  4. Our Second Project - The Budgeting App
    1. Getting started
      1. App planning
      2. Installing vector icons
    2. Folder structure
      1. Utilities
      2. Date methods
      3. Storage methods
      4. App.js and index.ios.js
    3. The EnterBudget component
      1. EnterBudget component example
    4. The AddExpenses container and modal
      1. Looking at modals
      2. Header and TextInput fields
      3. DatePickerIOS plus ExpandableCell
      4. ScrollView
      5. ScrollView example
      6. Saving expenses
    5. Displaying the current month's expenses
      1. CurrentMonthExpenses example
    6. Summary
  5. Advanced Functionality with the Expenses App
    1. Using vector icons
      1. Icon methods
    2. Picker
      1. Selecting a category
      2. Updating CurrentMonthExpenses and ExpenseRow
    3. Updating App.js with ProgressViewIOS
      1. ProgressViewIOS example
    4. A view for prior months' expenses
      1. ListView with section headers
    5. The previous month's expenses
    6. Implementing TabBarIOS
    7. Deleting expenses
    8. Summary
  6. Third Project - The Facebook Client
    1. Planning the app
    2. About the Facebook API
    3. Obtaining Facebook API credentials
    4. Installing the Facebook SDK on iOS and Android
    5. Logging in with the Facebook SDK
    6. Using the Facebook Graph API
      1. GraphRequest
      2. GraphRequestManager
      3. Creating our first request
      4. GraphMethods
      5. NavigatorIOS and App component
    7. Creating a login prompt
    8. Optimizing for the API
    9. Using ActivityIndicator
    10. Creating a standard ListView
    11. Summary
  7. Advanced Facebook App Functionality
    1. Creating a PostView
      1. Adding comments to PostView
    2. Reloading data with RefreshControl
    3. Rendering images
    4. Rendering links with WebView
    5. Signing out with TabBarIOS
    6. Porting to Android
      1. Adding DrawerLayoutAndroid and ToolbarAndroid
      2. Integrating Drawer with Friends
      3. Creating an Android version of App.js
      4. Modifying FeedList
      5. Supporting Navigator in FeedListRow
      6. Adding PostView navigator and BackAndroid support
    7. Summary
  8. Redux
    1. Introducing Redux
      1. The three principles of Redux
      2. Single state tree
      3. State is read-only
      4. Changes are made with pure functions
      5. Actions
      6. Reducers
      7. Stores
      8. Installing Redux
      9. Redux architecture
      10. Containers in Redux
      11. Remaining folder structure
    2. Planning the Redux conversion
    3. Creating the entry point
      1. Setting up our store
      2. Building the app container
      3. Creating actions
      4. Building reducers
      5. Creating the TasksList container
      6. Redux-connected TasksList component
    4. Converting EditTasks to Redux
      1. Adding actions for EditTask
      2. Reducers for EditTask
      3. Updating TasksListContainer to accommodate EditTask
      4. Updating the TasksList component
      5. Creating the EditTask container
      6. Modifying the EditTask component for iOS
      7. Modifying the EditTask component for Android
      8. Creating a StorageMethods file for asynchronous saving
      9. Subscribing the store to changes
      10. Creating a thunk
      11. Modifying our reducers
      12. Updating the TasksListContainer
      13. Modifying the TasksList component
    5. Summary
  9. Deploying Your Applications
    1. Basic requirements
    2. Creating developer memberships
      1. Enrolling in the Apple Developer Program
      2. Signing up for a Google Play Publisher account
    3. Making your app look great
      1. Creating an icon
      2. Taking app screenshots
      3. Writing a description
      4. Combining it all
      5. Apple App Store
      6. Modifying the Bundle ID in Xcode
      7. Adding app icons in Xcode
      8. Creating an archive
      9. iTunes Connect
      10. Validating our app in Xcode
      11. Submitting our app for review
        1. Beta testing iOS apps with TestFlight
        2. Entering test information
        3. Creating an Internal beta test with TestFlight
        4. Creating an External beta test with TestFlight
      12. Google Play Store
      13. Adding an app icon for Android
      14. Creating a unique package identifier
      15. Generating a Signed APK file
      16. Submitting to Google Play
        1. Alpha and beta testing Android apps
    4. Summary
  10. Additional React Native Components
    1. Setting up a boilerplate project
    2. Making Fetch happen
    3. Vibration
      1. Linking apps with a button
      2. Slider
    4. Using ActionSheetIOS
      1. Creating an action sheet
      2. Sharing content with ShareSheetIOS
    5. Grabbing user geolocation data
    6. Expenses for Android
    7. Android modifications
      1. Installing the vector icon library
      2. ToolbarAndroid
      3. DrawerLayoutAndroid
      4. Connecting ToolbarAndroid and DrawerLayoutAndroid
      5. Android-specific app component
      6. EnterBudget styling changes
      7. CurrentMonthExpenses for Android
      8. Removing ExpandableCell from AddExpensesModal
      9. Modifying Navigation for PreviousMonthsList
    8. Summary

Product information

  • Title: React Native By Example
  • Author(s): Richard Kho
  • Release date: April 2017
  • Publisher(s): Packt Publishing
  • ISBN: 9781786464750