Making Open Work
May 8–9, 2017: Training & Tutorials
May 10–11, 2017: Conference
Austin, TX

Leveraging the mobile device with React Native and Redux

Jonathan Lebensold (Paradem)
1:30pm5:00pm Monday, May 8, 2017
The Cutting Edge
Location: Meeting Room 17 A
Level: Intermediate
Average rating: ****.
(4.50, 4 ratings)

Who is this presentation for?

  • Software developers

Prerequisite knowledge

  • Experience developing and building web or mobile applications
  • A general understanding of JavaScript or ES6

Recommended reading and viewing for React Native and Redux preparation:

Materials or downloads needed in advance

  • A laptop with XCode, Android Studio, Node.js, and React Native installed (In order to build the iOS version of the application, you will need to be running macOS. Follow the guide to get started. To ensure everything installed correctly, run the Hello, World application.

What you'll learn

  • Learn how to handle the most fundamental parts of building a mobile app with React Native
  • Understand how data is managed in React Native with Redux
  • Learn how to interface with the mobile device, modify the application's state, navigate through multiple mobile views, create a unique style for the application, import open source libraries from the broader developer community, and work with mapping libraries
  • Explore building the same app on Android
  • See how to use a mobile device's camera and handle binary data

Description

Jonathan Lebensold walks you through building a picture-tagging application for iOS and Android, sharing best practices for cross-platform development with React Native and touching on sharing code, camera integration, and mapping along the way.

Jonathan begins by exploring some of the features of a simple application that enables someone to pick a GPS location, take a picture, and save it with a description locally. A list view enumerates the pins and allows the user to delete the picture. Starting with a bare-bones GitHub repository that has Redux and React Native setup with a simple routing library, you’ll dive into some of the challenges with cross-platform mobile development, discovering how to handle local application state with Redux and ensuring that you can build cross-platform components in addition to platform-specific components.

You’ll then take a step back and review how to leverage an existing mapping library and what to look for in the React Native ecosystem. After confirming that the mapping library and state management are functioning correctly, Jonathan helps you implement some simple routes to round off the views in your application. Once you can navigate, store, and pin labels on the map, you’ll integrate the device’s camera and learn how to store binary data in Redux.

Along the way, Jonathan also covers some device-specific considerations for Android and iOS and illustrates some of the techniques for bridging code between Swift and React Native by creating a special “Westernize” button that calls a GPU-accelerated image manipulation library, transforms the binary image, and then issues a callback back to the React Native application in order to update the Redux store.

Photo of Jonathan Lebensold

Jonathan Lebensold

Paradem

Jonathan Lebensold is a software architect and a contributor to several open source projects whose online courses have reached thousands of students thanks to O’Reilly Media, Udemy, StudioWeb, and his YouTube channel. He works with startups and NGOs and on open source projects, taking ideas to production and helping teams adopt Agile development processes. Currently, Jonathan spends his time working with Ruby, React, React Native, and .NET Core and baking the occasional apple pie.