book

React Native in Action

Name: React Native in Action
ISBN: 9781617294051

by Nader Dabit, Nickie Buckner

April 2019

Intermediate to advanced

320 pages

8h 13m

English

Manning Publications

Read now

Unlock full access

Titlepage
Copyright
contents in brief
contents
preface
acknowledgments
about this book
Source codeBook forum
about the author
about the cover illustration
Part 1: Getting started with React Native

Chapter 1: Getting started with React Native
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
Chapter 2: Understanding React
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
Chapter 3: Building your first React Native app
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
Part 2: Developing applications in React Native
Chapter 4: Introduction to styling
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
Chapter 5: Styling in depth
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
Chapter 6: Navigation
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
Chapter 7: Animations
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
Chapter 8: Using the Redux data architecture library
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
Part 3: API reference
Chapter 9: Implementing cross-platform APIs
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
Chapter 10: Implementing iOS-specific components and APIs
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
Chapter 11: Implementing Android-specific components and APIs
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
Part 4: Bringing it all together
Chapter 12: Building a Star Wars app using cross-platform components
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
appendix: Installing and running React Native
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)
Index
List of Figures
List of TablesList of Listings

Content preview from React Native in Action

5 Styling in depth

This chapter covers

Platform-specific sizes and styles
Adding drop shadows to components
Moving and rotating components on the x- and y-axes
Scaling and skewing components
Using flexbox for layout

Chapter 4 introduced styling React Native components. It showed how to style View and Text components, styles you’ll likely use every day and that mostly affect the look of a component. This chapter continues the discussion and goes into more depth with platform-specific styles; drop shadows; manipulating components with transformations such as translation, rotation, scaling, and skewing; and dynamically laying out components with flexbox.

Some of these topics may feel familiar. You used platform-specific styles and flexbox ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Publisher Resources

ISBN: 9781617294051Publisher Support Publisher Website

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

React Native in Action

by Nader Dabit, Nickie Buckner

5 Styling in depth

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.