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

Preface

This book is an introduction to React Native, Facebook’s JavaScript framework for building mobile applications. Using your existing knowledge of JavaScript and React, you’ll be able to build and deploy fully featured mobile applications for both iOS and Android that truly render natively. Just because it’s JavaScript doesn’t mean we should settle for less. There are plenty of advantages to working with React Native over traditional means of mobile development, and we don’t need to sacrifice the native look and feel.

We’ll start with the basics, and work our way up to deploying a full-fledged application to both the iOS App Store and the Google Play Store, with 100% code reuse between the two platforms. In addition to the essentials of the framework, we’ll discuss how to work beyond it, including how to make use of third-party libraries and even how to write your own Java or Objective-C libraries to extend React Native.

If you’re coming to mobile development from the perspective of a frontend software engineer or web developer, this is the book for you. React Native is a pretty amazing thing, and I hope you’re as excited to explore it as I am!

Prerequisites

This book is not an introduction to React, in general. We’ll assume that you have some working knowledge of React. If you’re brand new to React, I suggest reading through a tutorial or two before coming back to take the plunge into mobile development. Specifically, you should be familiar with the role of props and state, ...