book

Learning React Native

by Bonnie Eisenman

December 2015

Beginner

200 pages

5h 48m

English

O'Reilly Media, Inc.

Read now

Unlock full access

PrerequisitesConventions Used in This BookUsing Code ExamplesSafari® Books OnlineHow 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 EnvironmentInstalling React NativeiOS DependenciesAndroid DependenciesCreating a New ApplicationRunning a React Native Application for iOSUploading to Your iOS DeviceRunning a React Native Application for AndroidRecap: Creating and Running ProjectsExploring the Sample CodeAttaching a Component to the ViewImports in React NativeThe FirstProject ComponentBuilding a Weather AppHandling User InputDisplaying DataAdding a Background ImageFetching Data from the WebPutting It TogetherSummary
Analogies Between HTML Elements and Native ComponentsThe Text ComponentThe Image ComponentWorking with Touch and GesturesUsing TouchableHighlightThe GestureResponder SystemPanResponderWorking with Organizational ComponentsUsing ListViewUsing NavigatorsOther Organizational ComponentsPlatform-Specific ComponentsiOS- or Android-Only ComponentsComponents with Platform-Specific VersionsWhen to Use Platform-Specific ComponentsSummary
Declaring and Manipulating StylesInline StylesStyling with ObjectsUsing Stylesheet.CreateStyle ConcatenationOrganization and InheritanceExporting Style ObjectsPassing Styles as PropsReusing and Sharing StylesPositioning and Designing LayoutsLayouts with FlexboxUsing Absolute PositioningPutting It TogetherSummary
Using GeolocationGetting the User’s LocationHandling PermissionsTesting Geolocation In the iOS SimulatorWatching the User’s LocationLimitationsUpdating the Weather ApplicationAccessing the User’s Images and CameraThe CameraRoll ModuleRequesting Images with GetPhotoParamsRendering an Image from the Camera RollDisplaying a List of PhotosUploading an Image to a ServerStoring Persistent Data with AsyncStoreOther Storage OptionsThe SmarterWeather ApplicationThe WeatherProject ComponentThe Forecast ComponentThe Button ComponentThe LocationButton ComponentThe PhotoBackdrop ComponentSummary
Installing JavaScript Libraries with npmNative Modules for iOSIncluding a Third-Party ComponentUsing the Video ComponentAnatomy of an Objective-C Native ModuleImplementation of RCTVideoNative Modules for AndroidInstalling a Third-Party ComponentAnatomy of a Java Native ModuleAndroid Implementation of LinearGradientCross-Platform Native ModulesSummary
JavaScript Debugging Practices, TranslatedActivating the Developer OptionsDebugging with console.logUsing the JavaScript DebuggerWorking with the React Developer ToolsReact Native Debugging ToolsUsing Inspect ElementThe 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 FlowTesting with JestWhen You’re StuckSummary
The Flashcard ApplicationProject StructureComponent HierarchyModeling and Storing DataData Flow Architecture: Reflux and FluxUsing Reflux in ZebretoPersistence, AsyncStorage, and the Reflux StoresUsing the NavigatorA Look at Third-Party DependenciesResponsive Design and Font SizesSummary and Homework

Preparing Your Xcode ProjectSelecting Supported Devices and Target iOS VersionLaunch Screen ImagesAdding Your Application IconSetting Your Bundle NameUpdating AppDelegate.mSet Schema for ReleaseUploading Your ApplicationGetting Your Paperwork in OrderCreating an ArchiveCreating an App in iTunes ConnectBeta Testing with TestFlightSubmitting the Application for ReviewSummary
Setting Application IconBuilding the APK for ReleaseDistributing via Email or Other LinksSubmitting Your Application to the Play StoreBeta Testing via the Play StorePlay Store ListingRequired Assets for the Store ListingPublishing Your ApplicationSummary
DestructuringImporting ModulesFunction ShorthandFat Arrow FunctionsString Interpolation
Creating a New ProjectRunning on iOSTaking Screenshots on iOSRunning on AndroidTaking Screenshots on AndroidRunning the React Native Packager

Content preview from Learning React Native

Chapter 6. Platform APIs

When building mobile applications, you will naturally want to take advantage of the host platform’s specific APIs. React Native makes it easy to access things like the phone’s camera roll, location, and persistent storage. These platform APIs are made available to React Native through included modules, which provide us with easy-to-use asynchronous JavaScript interfaces to these functions.

React Native does not wrap all of its host platform’s functionality by default; some platform APIs will require you to either write your own modules, or use modules written by others in the React Native community. We will cover that process in Chapter 7. The docs are the best place to check if an API is supported.

This chapter covers some of the available platform APIs. For our example, we’ll make some modifications to the Weather application from earlier. We’ll add geolocation to the app, so that it detects the user’s location automatically. We will also add “memory” to the app, so it will remember your previously searched locations. Finally, we’ll use the camera roll to change the background image to one of the user’s photos.

While relevant code snippets will be presented in each section, the full code for the application is included in “The SmarterWeather Application”.

iOS and Android Compatibility

Cross-platform support for these APIs is a work in progress, so while AsyncStorage is supported on both iOS and Android, geolocation and the camera roll are currently iOS-only. ...