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 - Building Mobile Apps with JavaScript

Book Description

Your go-to guide to creating truly native iOS and Android mobile applications using React and JavaScript

About This Book

  • Build cross-platform best seller native mobile applications in JavaScript with React-Native framework
  • Learn about real world examples like Whatsapp, Instagram or Twitter.
  • Learn all steps in React Native application development workflow from prototyping to deployment
  • Get familiar with various mobile APIs covered in React Native framework and learn how to extend it further to non-supported APIs

Who This Book Is For

This book is for JavaScript developers who want to learn how to create native mobile apps using React Native.

What You Will Learn

  • Understand how React Native works under the hood and what makes it an ultimate choice for app development for lots of businesses.
  • Create real world native apps with complex animations and styles
  • Get familiar with important iOS and Android native APIs and access them using React Native
  • Learn authentication techniques and how to connect your app to a real data by using Firebase or your own server
  • Get familiar with lots of community packages considered as industry standard
  • Walk through the whole app development workflow by creating Twitter app clone from design to deployment.
  • Understand application release process to the Apple App Store and Google’s Play Store

In Detail

The emergence of React Native has made creating mobile apps in JavaScript easier for developers. This book introduces you to the React Native framework and the mobile apps development process. It starts with how React Native fits into the world of hybrid apps, and why it’s a popular framework. You’ll learn how React Native works under the hood--compiling JavaScript to Native code to bridge JavaScript and native apps. Also, you’ll learn how to write React Native components and use the ReactJS way of structuring your app. Understand how to use the industry standard Redux architecture as well as MobX--a newly emerging approach for state management--making your apps more robust and scalable.

The mobile native world can be intimidating, with lots of platform-specific APIs. In this book, you’ll learn about the most important APIs with help of the real-world examples. You’ll also learn about the community packages that can help speed up your development. The book explains how to use these packages with JavaScript code, include native modules in your application, and write the modules yourself. Throughout the book, you will see examples of WhatsApp, Instagram, and YouTube apps and learn how to recreate them. You’ll also learn debugging and testing techniques, authentication, dealing with real data, and much more.

At the end we will walk through design to production process of Twitter app clone and will explain application release process to App Store and Play Store

Style and approach

This book gives you a solid foundation in building apps with React Native, from the basics to creating a fully functional Twitter clone! With industry best practices, plenty of code examples and complete projects to walk through.

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. Understanding Why React Native is the Future of Mobile Apps
    1. What is React Native?
      1. The history of React Native
        1. It all begun with ReactJS
        2. Hackathon, that grew bigger
        3. React Native today
      2. The motivation of creating React Native
        1. Mobile development is too specific
        2. Taking the React approach
        3. Making developer experience state of the art
      3. How React Native is different from hybrid applications?
        1. What are hybrid applications?
        2. Why Native applications lead the way?
        3. Is React Native really a Native framework?
    2. How the React Native bridge from JavaScript to Native world works?
      1. Information flow
      2. Architecture
      3. Threading model
    3. The benefits of React Native
      1. Developer experience
        1. Chrome DevTools debugging
        2. Live reload
        3. Hot reload
        4. Component hierarchy inspections
      2. Web-inspired layout techniques
      3. Code reusability across applications
    4. Summary
  3. Working with React Native
    1. Setting up an environment for developing iOS and Android apps
      1. Installing projects with native code
      2. Installing iOS dependencies
      3. Installing Android dependencies
        1. Installing JDK
        2. Installing Android studio
        3. Installing SDK and built tools
        4. Setting up the ANDROID_HOME environment variable
        5. Creating an Android virtual device
      4. The development environment
    2. Creating your application
      1. Application with create-react-app and Expo
    3. Introduction to JSX and how it's used in React Native
      1. What is JSX?
      2. Children in JSX
      3. JSX props
    4. Stateful versus presentational components
      1. Presentational components
      2. Stateful components
    5. React lifecycle methods
      1. Mounting
      2. Updating
    6. Structuring React Native apps and their resemblance to HTML
      1. Thinking in React
      2. Reusable components
      3. Containers
      4. Basic React Native components
    7. The folder structure
    8. Summary
  4. Getting Familiar with React Native Components
    1. Platform-independent components
    2. Basic components
      1. View
        1. Layouting
        2. Touch events
        3. Accessibility
      2. Text
      3. StatusBar
      4. Images and media
    3. Basic user interaction
      1. Button
      2. TouchableOpacity
      3. TouchableHighlight
      4. TouchableWithoutFeedback
    4. Getting feedback from your application
      1. ActivityIndicator
      2. Modal
    5. Dealing with lists of data
      1. ListView
      2. ScrollView
      3. RefreshControl
      4. FlatList
      5. SectionList
      6. VirtualizedList
    6. Embedding web content
    7. Handling user input
      1. TextInput
      2. Restricted choice inputs
    8. Platform-dependent components
      1. Detecting specific platform
      2. Extensions
    9. DatePickerIOS
    10. Progress bars
    11. Additional controls
      1. SegmentedControlIOS
      2. TouchableNativeFeedback
    12. Platform-specific navigation
    13. Navigation in React Native
      1. The Navigator component
    14. Summary
  5. Debugging and Testing React Native
    1. Debugging your React Native apps
      1. Developer in-app menu
      2. Reloading your app
        1. Reloading
        2. Live reload
        3. Hot reloading
    2. Remote debugging
      1. Debug with Chrome DevTools
      2. Debuging our device
    3. Logging
      1. In-app errors and warnings
        1. Errors
        2. Warnings
    4. Inspecting React Native components
      1. Performance monitoring
    5. Testing
    6. Introduction to the Jest testing framework
      1. Setup
      2. Preset system
      3. Basic syntax
    7. Snapshot testing your React Native components
    8. Working with functions
    9. Mocking modules
    10. Summary
  6. Bringing the Power of Flexbox to the Native World
    1. Flexbox styling concepts and techniques
      1. The flexbox layout
      2. Aligning elements
      3. Item dimensions
      4. How different is React Native styling from CSS or inline?
    2. Laying out our app
      1. Dealing with background images
      2. Applying styles conditionally
    3. Best practices and techniques for styling your React Native applications
      1. Dimensions
      2. Style sheet
      3. Split your styles
      4. Code your styles
      5. Extract common components
    4. Summary
  7. Animating React Native Components
    1. Understanding animations
      1. Conventions
    2. How animation works
      1. Using the LayoutAnimation API for simple animations
      2. Basic syntax
      3. The preset system under the hood
    3. Using Animated API for complex animations
      1. Animated values
        1. Calculations
    4. Animated functions
      1. Interpolation
      2. Extrapolation
    5. Combining several animations to create complex sequences
      1. Panning and scrolling animations
    6. Summary
  8. Authenticating Your App and Fetching Data
    1. Getting familiar with Firebase
      1. What is Firebase?
      2. Firebase setup
      3. Creating real-time database
    2. Managing permissions
      1. Bringing Firebase to React Native and fetching data
      2. Initializing your app
      3. Setting up Firebase database listeners
    3. Writing data to Firebase
    4. Fetching data in React Native
      1. Websockets support in React Native
      2. Fetching and uploading files
    5. Setting up authentication at Firebase
    6. Creating functional Login and Sign Up screens
      1. Login screen
      2. The Sign Up screen
      3. Authentication logic
    7. Authenticating via social providers
    8. Summary
  9. Implementing a Flux Architecture with Redux or MobX
    1. What is Flux architecture?
      1. MVC problem
      2. The unidirectional data flow solution
        1. How it works
    2. Redux concepts and usage
      1. What is Redux?
        1. Redux in a nutshell
      2. Three principles
        1. A single source of truth
        2. State is read-only
        3. Changes are made with pure functions
      3. Basic building blocks
        1. Actions
        2. Reducers
        3. Store
        4. Middleware
      4. Data flow
    3. Connecting Redux to your app
      1. Containers versus Components
      2. Provider
      3. Using connect
      4. Getting relevant state keys with selectors
    4. Using redux-thunk for async actions
      1. Async data flow
      2. Adding redux-thunk
      3. Centralizing side effects
    5. Mobx- a functional reactive Flux implementation
      1. What is Mobx?
      2. Basic concepts
        1. State
        2. Derivations
        3. Actions
    6. Connecting MobX to our app
    7. Summary
  10. Understanding Supported APIs and How to Use Them
    1. Linking libraries and APIs with native code
      1. Auto linking
      2. Manual linking
        1. Linking libraries
        2. Configuring build phases
    2. Getting familiar with a list of native APIs covered by React Native
      1. Notification APIs
        1. Alert
        2. AlertIOS
        3. ToastAndroid
        4. ActionSheetIOS
        5. Vibration
        6. PushNotificationIOS
      2. Information APIs
        1. AccessibilityInfo
        2. AppState
        3. NetInfo
        4. PixelRatio
        5. Dimensions
        6. Platform
        7. Settings
      3. Input related
        1. Clipboard
        2. Keyboard
        3. DatePickerAndroid
        4. TimePickerAndroid
      4. App related
        1. InteractionManager
        2. Linking
      5. Image related
        1. ImageEditor
        2. ImageStore
        3. ImagePickerIOS
      6. Style related
      7. Other various APIs
        1. BackHandler
        2. PermissionsAndroid
        3. AdSupportIOS
        4. Share
    3. Retrieving and saving photos with CameraRoll API
    4. Getting your exact location with GeoLocation API
      1. IOS
      2. Android
      3. Usage
    5. Learning about persistence with AsyncStorage API
    6. Responding to user gestures with PanResponder
      1. The Gesture responder system
      2. PanResponder
      3. Combining it with Animated
    7. Summary
  11. Working with External Modules in React Native
    1. Diving deeper into react-navigation
      1. Navigators explained
      2. Navigation
      3. Redux integration
      4. MobX integration
      5. Setting the app navigation structure for a real app.
    2. The best open source packages to use
      1. Visuals and animations
        1. react-native-vector-icons
        2. react-native-animatable
        3. lottie-react-native
        4. Shoutem UI
        5. NativeBase
        6. react-native-elements
      2. Social providers
        1. Facebook
      3. OAuth
      4. Additional APIs
        1. ExpoKit
        2. Maps
        3. Image Picker
        4. Video
        5. Toasts
        6. Camera
      5. Data related packages
        1. react-native-fetch-blob
        2. react-native-firebase
        3. react-native-push-notifications
        4. react-native-i18n
      6. Boilerplates
    3. Writing your own Native modules
      1. Diving into iOS and Objective-C
      2. Android
        1. Creating folder structure and files
        2. Creating a native module Java class
        3. Creating a native module package
        4. Registering the package
    4. Integrating React Native with the existing apps
    5. Summary
  12. Understanding Application Development Workflow by Recreating Twitter
    1. Defining your application requirements
    2. Defining your application architecture using a desired design
    3. Setting up functional navigation and a wireframe for your application
      1. SplashScreen
      2. The Login screen
      3. Main flow
      4. Home
      5. Discover
      6. Notifications
      7. Profile
      8. Tweet
    4. Mock data and style application screens including animations
    5. Bringing Redux or MobX to your application and moving data mocks to a centralized state
      1. Redux
      2. Refactoring all actions
      3. MobX
    6. Using the Twitter API to work with real data
    7. Summary
  13. Deploying Your App to App Store or Google Play
    1. Deploying iOS apps and how it's done in React Native
      1. Join the Apple Developer program
      2. Creating a certificate for your device
      3. Signing your app to run on a device
      4. Enable App Transport Security
      5. Configure Release scheme
      6. Registering our App ID
      7. Archiving your app
    2. Deploying Android apps and how it's done in React Native
      1. Generating a Signed APK file
      2. Distributing your APK
    3. Introducing fastlane - automate your deployment workflow
    4. Get to know Microsoft CodePush and integrate it with your application
      1. So, how do we get started
      2. Setting up your mobile client
    5. Summary