React Native in Action

React Native in Action

by nader dabit, Nickie Buckner
Released April 2019
Publisher(s): Manning Publications
ISBN: 9781617294051

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

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

Table of contents

  1. Titlepage
  2. Copyright
  3. contents in brief
  4. contents
  5. preface
  6. acknowledgments
  7. about this book
    1. Source code
    2. Book forum
  8. about the author
  9. about the cover illustration
  10. Part 1: Getting started with React Native
    1. Chapter 1: Getting started with React Native
      1. 1.1 Introducing React and React Native
        1. 1.1.1 A basic React class
        2. 1.1.2 React lifecycle
      2. 1.2 What you’ll learn
      3. 1.3 What you should know
      4. 1.4 Understanding how React Native works
        1. 1.4.1 JSX
        2. 1.4.2 Threading
        3. 1.4.3 React
        4. 1.4.4 Unidirectional data flow
        5. 1.4.5 Diffing
        6. 1.4.6 Thinking in components
      5. 1.5 Acknowledging React Native’s strengths
        1. 1.5.1 Developer availability
        2. 1.5.2 Developer productivity
        3. 1.5.3 Performance
        4. 1.5.4 One-way data flow
        5. 1.5.5 Developer experience
        6. 1.5.6 Transpilation
        7. 1.5.7 Productivity and efficiency
        8. 1.5.8 Community
        9. 1.5.9 Open source
        10. Immediate updates
        11. Other solutions for building cross-platform mobile applications
      6. 1.6 React Native’s drawbacks
      7. 1.7 Creating and using basic components
        1. 1.7.1 An overview of components
        2. 1.7.2 Native components
        3. 1.7.3 Component composition
        4. 1.7.4 Exportable components
        5. 1.7.5 Combining components
      8. 1.8 Creating a starter project
        1. 1.8.1 Create React Native App CLI
        2. 1.8.2 React Native CLI
      9. Summary
    2. Chapter 2: Understanding React
      1. 2.1 Managing component data using state
        1. 2.1.1 Correctly manipulating component state
      2. 2.2 Managing component data using props
      3. 2.3 React component specifications
        1. 2.3.1 Using the render method to create a UI
        2. 2.3.2 Using property initializers and constructors
      4. 2.4 React lifecycle methods
        1. 2.4.1 The static getDerivedStateFromProps method
        2. 2.4.2 The componentDidMount lifecycle method
        3. 2.4.3 The shouldComponentUpdate lifecycle method
        4. 2.4.4 The componentDidUpdate lifecycle method
        5. 2.4.5 The componentWillUnmount lifecycle method
      5. Summary
    3. Chapter 3: Building your first React Native app
      1. 3.1 Laying out the todo app
      2. 3.2 Coding the todo app
      3. 3.3 Opening the developer menu
        1. 3.3.1 Opening the developer menu in the iOS simulator
        2. 3.3.2 Opening the developer menu in the Android emulator
        3. 3.3.3 Using the developer menu
      4. 3.4 Continuing building the todo app
      5. Summary
  11. Part 2: Developing applications in React Native
    1. Chapter 4: Introduction to styling
      1. 4.1 Applying and organizing styles in React Native
        1. 4.1.1 Applying styles in applications
        2. 4.1.2 Organizing styles
        3. 4.1.3 Styles are code
      2. 4.2 Styling view components
        1. 4.2.1 Setting the background color
        2. 4.2.2 Setting border properties
        3. 4.2.3 Specifying margins and padding
        4. 4.2.4 Using position to place components
        5. 4.2.5 Profile Card positioning
      3. 4.3 Styling Text components
        1. 4.3.1 Text components vs. View components
        2. 4.3.2 Font styles
        3. 4.3.3 Using decorative text styles
      4. Summary
    2. Chapter 5: Styling in depth
      1. 5.1 Platform-specific sizes and styles
        1. 5.1.1 Pixels, points, and DPs
        2. 5.1.2 Creating drop shadows with ShadowPropTypesIOS and Elevation
        3. 5.1.3 Putting it into practice: drop shadows in the ProfileCard
      2. 5.2 Using transformations to move, rotate, scale, and skew components
        1. 5.2.1 3D effects with perspective
        2. 5.2.2 Moving elements along the x- and y-axes with translateX and translateY
        3. 5.2.3 Rotating elements with rotateX, rotateY, and rotateZ (rotate)
        4. 5.2.4 Setting visibility when rotating an element more than 90°
        5. 5.2.5 Scaling objects on the screen with scale, scaleX, and scaleY
        6. 5.2.6 Using the scale transform to create a thumbnail of the ProfileCard
        7. 5.2.7 Skewing elements along the x- and y-axes with skewX and skewY
        8. 5.2.8 Transformation key points
      3. 5.3 Using flexbox to lay out components
        1. 5.3.1 Altering a component’s dimensions with flex
        2. 5.3.2 Specifying the direction of the flex with flexDirection
        3. 5.3.3 Defining how space is used around a component with justifyContent
        4. 5.3.4 Aligning children in a container with alignItems
        5. 5.3.5 Overriding the parent container’s alignment with alignSelf
        6. 5.3.6 Preventing clipped items with flexWrap
      4. Summary
    3. Chapter 6: Navigation
      1. 6.1 React Native navigation vs. web navigation
      2. 6.2 Building a navigation-based app
      3. 6.3 Persisting data
      4. 6.4 Using DrawerNavigator to create drawer-based navigation
      5. Summary
    4. Chapter 7: Animations
      1. 7.1 Introducing the Animated API
      2. 7.2 Animating a form input to expand on focus
      3. 7.3 Creating a custom loading animation using interpolation
      4. 7.4 Creating multiple parallel animations
      5. 7.5 Creating an animated sequence
      6. 7.6 Using Animated.stagger to stagger animation start times
      7. 7.7 Other useful tips for using the Animated library
        1. 7.7.1 Resetting an animated value
        2. 7.7.2 Invoking a callback
        3. 7.7.3 Offloading animations to the native thread
        4. 7.7.4 Creating a custom animatable component using createAnimatedComponent
      8. Summary
    5. Chapter 8: Using the Redux data architecture library
      1. 8.1 What is Redux?
      2. 8.2 Using context to create and manage global state in a React application
      3. 8.3 Implementing Redux with a React Native app
      4. 8.4 Creating Redux reducers to hold Redux state
      5. 8.5 Adding the provider and creating the store
      6. 8.6 Accessing data using the connect function
      7. 8.7 Adding actions
      8. 8.8 Deleting items from a Redux store in a reducer
      9. Summary
  12. Part 3: API reference
    1. Chapter 9: Implementing cross-platform APIs
      1. 9.1 Using the Alert API to create cross-platform notifications
        1. 9.1.1 Use cases for alerts
        2. 9.1.2 Example of using alerts
      2. 9.2 Using the AppState API to detect the current application state
        1. 9.2.1 Use cases for AppState
        2. 9.2.2 Example of using AppState
      3. 9.3 Using the AsyncStorage API to persist data
        1. 9.3.1 Use cases for AsyncStorage
        2. 9.3.2 Example of using AsyncStorage
      4. 9.4 Using the Clipboard API to copy text into the user’s clipboard
        1. 9.4.1 Use cases for Clipboard
        2. 9.4.2 Example of using Clipboard
      5. 9.5 Using the Dimensions API to get the user’s screen information
        1. 9.5.1 Use cases for the Dimensions API
        2. 9.5.2 Example of using the Dimensions API
      6. 9.6 Using the Geolocation API to get the user’s current location information
        1. 9.6.1 Use cases for the Geolocation API
        2. 9.6.2 Example of using Geolocation
      7. 9.7 Using the Keyboard API to control the location and functionality of the native keyboard
        1. 9.7.1 Use cases for the Keyboard API
        2. 9.7.2 Example of using the Keyboard API
      8. 9.8 Using NetInfo to get the user’s current online/offline status
        1. 9.8.1 Use cases for NetInfo
        2. 9.8.2 Example of using NetInfo
      9. 9.9 Getting information about touch and gesture events with PanResponder
        1. 9.9.1 Use cases for the PanResponder API
        2. 9.9.2 Example of using PanResponder
      10. Summary
    2. Chapter 10: Implementing iOS-specific components and APIs
      1. 10.1 Targeting platform-specific code
        1. 10.1.1 iOS and Android file extensions
        2. 10.1.2 Detecting the platform using the Platform API
      2. 10.2 DatePickerIOS
        1. 10.2.1 Example of using DatePickerIOS
      3. 10.3 Using PickerIOS to work with lists of values
        1. 10.3.1 Example of using PickerIOS
      4. 10.4 Using ProgressViewIOS to show loading indicators
        1. 10.4.1 Use cases for ProgressViewIOS
        2. 10.4.2 Example of using ProgressViewIOS
      5. 10.5 Using SegmentedControlIOS to create horizontal tab bars
        1. 10.5.1 Use cases for SegmentedControlIOS
        2. 10.5.2 Example of using SegmentedControlIOS
      6. 10.6 Using TabBarIOS to render tabs at the bottom of the UI
        1. 10.6.1 Use cases for TabBarIOS
        2. 10.6.2 Example of using TabBarIOS
      7. 10.7 Using ActionSheetIOS to show action or share sheets
        1. 10.7.1 Use cases for ActionSheetIOS
        2. 10.7.2 Example of using ActionSheetIOS
      8. Summary
    3. Chapter 11: Implementing Android-specific components and APIs
      1. 11.1 Creating a menu using DrawerLayoutAndroid
      2. 11.2 Creating a toolbar with ToolbarAndroid
      3. 11.3 Implementing scrollable paging with ViewPagerAndroid
      4. 11.4 Using the DatePickerAndroid API to show a native date picker
      5. 11.5 Creating a time picker with TimePickerAndroid
      6. 11.6 Implementing Android toasts using ToastAndroid
      7. Summary
  13. Part 4: Bringing it all together
    1. Chapter 12: Building a Star Wars app using cross-platform components
      1. 12.1 Creating the app and installing dependencies
        1. 12.1.1 Importing the People component and creating the Container component
        2. 12.1.2 Creating the navigation component and registering routes
        3. 12.1.3 Creating the main class for the initial view
      2. 12.2 Creating the People component using FlatList, Modal, and Picker
        1. 12.2.1 Creating the state and setting up a fetch call to retrieve data
        2. 12.2.2 Adding the remaining class methods
        3. 12.2.3 Implementing the render method
      3. 12.3 Creating the HomeWorld component
        1. 12.3.1 Creating the HomeWorld class and initializing state
        2. 12.3.2 Fetching data from the API using the url prop
        3. 12.3.3 Wrapping up the HomeWorld component
      4. Summary
  14. appendix: Installing and running React Native
    1. Developing for iOS devices
      1. Getting started
      2. Testing the installation on iOS
    2. Developing for Android devices
      1. Mac and Android
      2. Windows and Android
      3. Linux and Android
      4. Creating a new project (Mac/Windows/Linux)
      5. Running a project (Mac/Windows/Linux)
  15. Index
  16. List of Figures
  17. List of Tables
  18. List of Listings

Product information

  • Title: React Native in Action
  • Author(s): nader dabit, Nickie Buckner
  • Release date: April 2019
  • Publisher(s): Manning Publications
  • ISBN: 9781617294051