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

Content preview from Learning React Native, 2nd Edition

Conclusion

If you’ve made it this far, congratulations!

We’ve gone from creating your very first “Hello, World” React Native application all the way up through a complex, fully featured application with total code reuse across iOS and Android. In order to do so, we started by looking at the basic components for React Native, and how to style them. We learned how to work with touch and platform native APIs, like the AsyncStorage and Geolocation APIs. We covered how to debug React Native applications with the developer tools, and how to deploy your applications to real devices. For functionality beyond the standard React Native library, we also saw how to use native Objective-C and Java modules as well as third-party JavaScript libraries using npm.

Your knowledge of JavaScript and React, coupled with the topics we’ve covered in this book, should enable you to quickly and efficiently write cross-platform mobile applications for Android and iOS. Of course, there’s still plenty to learn, and this single book can’t cover all the things you’ll need to know in order to develop mobile applications with React Native. If you get stuck or have questions, reach out to the community, whether that’s on Stack Overflow or on IRC (irc.lc/freenode/reactnative).

Keep in touch! Join the Learning React Native mailing list at LearningReactNative.com for more resources and updates related to the book. You can also find me on Twitter as @brindelle.

Finally, and most importantly, have fun! I’m looking ...