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