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 1. What Is React Native?

React Native is a JavaScript framework for writing real, natively rendering mobile applications for iOS and Android. It’s based on React, Facebook’s JavaScript library for building user interfaces, but instead of targeting the browser, it targets mobile platforms. In other words: web developers can now write mobile applications that look and feel truly “native,” all from the comfort of a JavaScript library that we already know and love. Plus, because most of the code you write can be shared between platforms, React Native makes it easy to simultaneously develop for both Android and iOS.

Similar to React for the Web, React Native applications are written using a mixture of JavaScript and XML-esque markup, known as JSX. Then, under the hood, the React Native “bridge” invokes the native rendering APIs in Objective-C (for iOS) or Java (for Android). Thus, your application will render using real mobile UI components, not webviews, and will look and feel like any other mobile application. React Native also exposes JavaScript interfaces for platform APIs, so your React Native apps can access platform features like the phone camera, or the user’s location.

React Native currently supports both iOS and Android, and has the potential to expand to future platforms as well. In this book, we’ll cover both iOS and Android. The vast majority of the code we write will be cross-platform. And yes: you can really use React Native to build production-ready mobile applications! ...