book

Learning React Native, 2nd Edition

by Bonnie Eisenman

October 2017

Beginner

242 pages

4h 54m

English

O'Reilly Media, Inc.

Read now

Unlock full access

PrerequisitesConventions Used in This BookUsing Code ExamplesO’Reilly SafariHow to Contact UsResourcesAcknowledgments
Advantages of React NativeDeveloper ExperienceCode Reuse and Knowledge SharingRisks and DrawbacksSummary
How Does React Native Work?Rendering LifecycleCreating Components in React NativeWorking with ViewsUsing JSXStyling Native ComponentsHost Platform APIsSummary
Setting Up Your EnvironmentDeveloper Setup: Create React Native AppCreating Your First Application with create-react-native-appPreviewing Your App on iOS or AndroidDeveloper Setup: The Traditional ApproachCreating Your First Application with react-nativeRunning Your App on iOSRunning Your App on AndroidExploring the Sample CodeBuilding a Weather AppHandling User InputDisplaying DataFetching Data from the WebAdding a Background ImagePutting It All TogetherSummary
Analogies Between HTML Elements and Native ComponentsThe <Text> ComponentThe <Image> ComponentWorking with Touch and GesturesCreating Basic Interactions with <Button>Using the <TouchableHighlight> ComponentUsing the PanResponder ClassWorking with ListsUsing the Basic <FlatList> ComponentUpdating the <FlatList> ContentsIntegrating Real DataWorking with <SectionList>NavigationOther Organizational ComponentsSummary
Declaring and Manipulating StylesUsing Inline StylesStyling with ObjectsUsing StyleSheet.createConcatenating StylesOrganization and InheritanceExporting Style ObjectsPassing Styles as PropsReusing and Sharing StylesPositioning and Designing LayoutsUsing Layouts with FlexboxUsing Absolute PositioningPutting It TogetherSummary
Using GeolocationReading the User’s LocationHandling PermissionsTesting Geolocation in Emulated DevicesWatching the User’s LocationWorking Around LimitationsUpdating the Weather ApplicationAccessing the User’s Images and CameraInteracting with the CameraRoll ModuleRequesting Images with GetPhotoParamsRendering an Image from the Camera RollUploading an Image to a ServerStoring Persistent Data with AsyncStorageThe SmarterWeather ApplicationThe <WeatherProject> ComponentThe <Forecast> ComponentThe <Button> ComponentThe <LocationButton> ComponentThe <PhotoBackdrop> ComponentSummary
Installing JavaScript Libraries with npmInstalling Third-Party Components with Native CodeUsing the Video ComponentObjective-C Native ModulesWriting an Objective-C Native Module for iOSExploring react-native-video for iOSJava Native ModulesWriting a Java Native Module for AndroidExploring react-native-video for JavaCross-Platform Native ModulesSummary
iOS- or Android-Only ComponentsComponents with Platform-Specific ImplementationsUsing Platform-Specific File ExtensionsUsing the Platform ModuleWhen to Use Platform-Specific Components
JavaScript Debugging Practices, TranslatedActivating the Developer OptionsDebugging with console.logUsing the JavaScript DebuggerWorking with the React Developer ToolsReact Native Debugging ToolsUsing Inspect ElementInterpreting the Red Screen of DeathDebugging Beyond JavaScriptCommon Development Environment IssuesCommon Xcode ProblemsCommon Android ProblemsThe React Native PackagerIssues Deploying to an iOS DeviceSimulator BehaviorTesting Your CodeType Checking with FlowUnit Testing with JestSnapshot Testing with JestWhen You’re StuckSummary

The Flashcard ApplicationProject StructureApplication ScreensReusable ComponentsStylesData ModelsUsing React-NavigationCreating a StackNavigatorUsing navigation.navigate to Transition Between ScreensConfiguring the Header with navigationOptionsImplementing the RestSummary
Using Redux to Manage StateActionsReducersConnecting ReduxPersisting Data with AsyncStorageSummary and Homework
let and constImporting ModulesDestructuringFunction ShorthandFat-Arrow FunctionsDefault ParametersString InterpolationWorking with Promises
Check Your Application Assets and Specify Target OS Versions and DevicesCreate a Release BuildComplete Your PaperworkBeta Test Your ApplicationCreate a ListingWait for ReviewRelease
Ejecting from Expo

Overview

Get a practical introduction to React Native, the JavaScript framework for writing and deploying fully featured mobile apps that render natively. The second edition of this hands-on guide shows you how to build applications that target iOS, Android, and other mobile platforms instead of browsers—apps that can access platform features such as the camera, user location, and local storage.

Through code examples and step-by-step instructions, web developers and frontend engineers familiar with React will learn how to build and style interfaces, use mobile components, and debug and deploy apps. You’ll learn how to extend React Native using third-party libraries or your own Java and Objective-C libraries.

Understand how React Native works under the hood with native UI components
Examine how React Native’s mobile-based components compare to basic HTML elements
Create and style your own React Native components and applications
Take advantage of platform-specific APIs, as well as modules from the framework’s community
Incorporate platform-specific components into cross-platform apps
Learn common pitfalls of React Native development, and tools for dealing with them
Combine a large application’s many screens into a cohesive UX
Handle state management in a large app with the Redux library