book

React Native in Action

by nader dabit, Nickie Buckner

April 2019

Intermediate to advanced

320 pages

8h 13m

English

Manning Publications

Read now

Unlock full access

Source codeBook forum

1.1 Introducing React and React Native1.1.1 A basic React class1.1.2 React lifecycle1.2 What you’ll learn1.3 What you should know1.4 Understanding how React Native works1.4.1 JSX1.4.2 Threading1.4.3 React1.4.4 Unidirectional data flow1.4.5 Diffing1.4.6 Thinking in components1.5 Acknowledging React Native’s strengths1.5.1 Developer availability1.5.2 Developer productivity1.5.3 Performance1.5.4 One-way data flow1.5.5 Developer experience1.5.6 Transpilation1.5.7 Productivity and efficiency1.5.8 Community1.5.9 Open sourceImmediate updatesOther solutions for building cross-platform mobile applications1.6 React Native’s drawbacks1.7 Creating and using basic components1.7.1 An overview of components1.7.2 Native components1.7.3 Component composition1.7.4 Exportable components1.7.5 Combining components1.8 Creating a starter project1.8.1 Create React Native App CLI1.8.2 React Native CLISummary
2.1 Managing component data using state2.1.1 Correctly manipulating component state2.2 Managing component data using props2.3 React component specifications2.3.1 Using the render method to create a UI2.3.2 Using property initializers and constructors2.4 React lifecycle methods2.4.1 The static getDerivedStateFromProps method2.4.2 The componentDidMount lifecycle method2.4.3 The shouldComponentUpdate lifecycle method2.4.4 The componentDidUpdate lifecycle method2.4.5 The componentWillUnmount lifecycle methodSummary
3.1 Laying out the todo app3.2 Coding the todo app3.3 Opening the developer menu3.3.1 Opening the developer menu in the iOS simulator3.3.2 Opening the developer menu in the Android emulator3.3.3 Using the developer menu3.4 Continuing building the todo appSummary
4.1 Applying and organizing styles in React Native4.1.1 Applying styles in applications4.1.2 Organizing styles4.1.3 Styles are code4.2 Styling view components4.2.1 Setting the background color4.2.2 Setting border properties4.2.3 Specifying margins and padding4.2.4 Using position to place components4.2.5 Profile Card positioning4.3 Styling Text components4.3.1 Text components vs. View components4.3.2 Font styles4.3.3 Using decorative text stylesSummary
5.1 Platform-specific sizes and styles5.1.1 Pixels, points, and DPs5.1.2 Creating drop shadows with ShadowPropTypesIOS and Elevation5.1.3 Putting it into practice: drop shadows in the ProfileCard5.2 Using transformations to move, rotate, scale, and skew components5.2.1 3D effects with perspective5.2.2 Moving elements along the x- and y-axes with translateX and translateY5.2.3 Rotating elements with rotateX, rotateY, and rotateZ (rotate)5.2.4 Setting visibility when rotating an element more than 90°5.2.5 Scaling objects on the screen with scale, scaleX, and scaleY5.2.6 Using the scale transform to create a thumbnail of the ProfileCard5.2.7 Skewing elements along the x- and y-axes with skewX and skewY5.2.8 Transformation key points5.3 Using flexbox to lay out components5.3.1 Altering a component’s dimensions with flex5.3.2 Specifying the direction of the flex with flexDirection5.3.3 Defining how space is used around a component with justifyContent5.3.4 Aligning children in a container with alignItems5.3.5 Overriding the parent container’s alignment with alignSelf5.3.6 Preventing clipped items with flexWrapSummary
6.1 React Native navigation vs. web navigation6.2 Building a navigation-based app6.3 Persisting data6.4 Using DrawerNavigator to create drawer-based navigationSummary
7.1 Introducing the Animated API7.2 Animating a form input to expand on focus7.3 Creating a custom loading animation using interpolation7.4 Creating multiple parallel animations7.5 Creating an animated sequence7.6 Using Animated.stagger to stagger animation start times7.7 Other useful tips for using the Animated library7.7.1 Resetting an animated value7.7.2 Invoking a callback7.7.3 Offloading animations to the native thread7.7.4 Creating a custom animatable component using createAnimatedComponentSummary
8.1 What is Redux?8.2 Using context to create and manage global state in a React application8.3 Implementing Redux with a React Native app8.4 Creating Redux reducers to hold Redux state8.5 Adding the provider and creating the store8.6 Accessing data using the connect function8.7 Adding actions8.8 Deleting items from a Redux store in a reducerSummary
9.1 Using the Alert API to create cross-platform notifications9.1.1 Use cases for alerts9.1.2 Example of using alerts9.2 Using the AppState API to detect the current application state9.2.1 Use cases for AppState9.2.2 Example of using AppState9.3 Using the AsyncStorage API to persist data9.3.1 Use cases for AsyncStorage9.3.2 Example of using AsyncStorage9.4 Using the Clipboard API to copy text into the user’s clipboard9.4.1 Use cases for Clipboard9.4.2 Example of using Clipboard9.5 Using the Dimensions API to get the user’s screen information9.5.1 Use cases for the Dimensions API9.5.2 Example of using the Dimensions API9.6 Using the Geolocation API to get the user’s current location information9.6.1 Use cases for the Geolocation API9.6.2 Example of using Geolocation9.7 Using the Keyboard API to control the location and functionality of the native keyboard9.7.1 Use cases for the Keyboard API9.7.2 Example of using the Keyboard API9.8 Using NetInfo to get the user’s current online/offline status9.8.1 Use cases for NetInfo9.8.2 Example of using NetInfo9.9 Getting information about touch and gesture events with PanResponder9.9.1 Use cases for the PanResponder API9.9.2 Example of using PanResponderSummary
10.1 Targeting platform-specific code10.1.1 iOS and Android file extensions10.1.2 Detecting the platform using the Platform API10.2 DatePickerIOS10.2.1 Example of using DatePickerIOS10.3 Using PickerIOS to work with lists of values10.3.1 Example of using PickerIOS10.4 Using ProgressViewIOS to show loading indicators10.4.1 Use cases for ProgressViewIOS10.4.2 Example of using ProgressViewIOS10.5 Using SegmentedControlIOS to create horizontal tab bars10.5.1 Use cases for SegmentedControlIOS10.5.2 Example of using SegmentedControlIOS10.6 Using TabBarIOS to render tabs at the bottom of the UI10.6.1 Use cases for TabBarIOS10.6.2 Example of using TabBarIOS10.7 Using ActionSheetIOS to show action or share sheets10.7.1 Use cases for ActionSheetIOS10.7.2 Example of using ActionSheetIOSSummary
11.1 Creating a menu using DrawerLayoutAndroid11.2 Creating a toolbar with ToolbarAndroid11.3 Implementing scrollable paging with ViewPagerAndroid11.4 Using the DatePickerAndroid API to show a native date picker11.5 Creating a time picker with TimePickerAndroid11.6 Implementing Android toasts using ToastAndroidSummary
12.1 Creating the app and installing dependencies12.1.1 Importing the People component and creating the Container component12.1.2 Creating the navigation component and registering routes12.1.3 Creating the main class for the initial view12.2 Creating the People component using FlatList, Modal, and Picker12.2.1 Creating the state and setting up a fetch call to retrieve data12.2.2 Adding the remaining class methods12.2.3 Implementing the render method12.3 Creating the HomeWorld component12.3.1 Creating the HomeWorld class and initializing state12.3.2 Fetching data from the API using the url prop12.3.3 Wrapping up the HomeWorld componentSummary
Developing for iOS devicesGetting startedTesting the installation on iOSDeveloping for Android devicesMac and AndroidWindows and AndroidLinux and AndroidCreating a new project (Mac/Windows/Linux)Running a project (Mac/Windows/Linux)
List of TablesList of Listings

Overview

React Native in Action gives iOS, Android, and web developers the knowledge and confidence they need to begin building high-quality iOS and Android apps using the React Native framework.

About the Technology

React Native gives mobile and web developers the power of "and." Write your app once and easily deploy it to iOS and Android and the web. React Native apps compile into platform-specific code, reducing development time, effort, and cost! And because you're using JavaScript and the React framework, you benefit from a huge ecosystem of tools, expertise, and support.

About the Book

React Native in Action teaches you to build high-quality cross-platform mobile and web apps. In this hands-on guide, you'll jump right into building a complete app with the help of clear, easy-to-follow instructions. As you build your skills, you'll drill down to more-advanced topics like styling, APIs, animations, data architecture, and more! You'll also learn how to maximize code reuse without sacrificing native platform look-and-feel.

What's Inside

Building cross-platform mobile and web apps
Routing, Redux, and animations
Cross-network data requests
Storing and retrieving data locally
Managing data and state

About the Reader

Written for beginner-to-intermediate web, Android, and iOS developers.

About the Author

Nader Dabit is a developer advocate at AWS Mobile, where he works on tools and services to allow developers to build full-stack web and mobile applications using their existing skillset. He is also the founder of React Native Training and the host of the "React Native Radio" podcast.

Quotes
Learn how to utilize your existing JavaScript skills to create rich cross-platform mobile apps.
- Ian Lovell, Parmenion Capital Partners

Dabit not only teaches, he guides you into details and introspection that only an expert React Native veteran can know.
- Joseph Tingsanchali, Netspend

A quick and practical way to become productive with React Native.
- Francesco Strazzullo, extrategy

Your definitive companion to learning React Native.
- Ubaldo Pescatore, Datalogic