React Native in a Nutshell

CS498RK Who Am I?

I’m Sujay, a full stack engineer at Samsara

UIUC CS Bachelor’s and Master’s 2018

Working with Professor Kumar’s research group from 2014 to the end of time Where Do I Work? Some Details Our stack - $530 Million in Funding ($6 Billion Valuation) - React + Typescript - React Native - GraphQL - ~200 Engineers - Go

- Offices in SF, San Jose, Atlanta, London

We use React Native! Let’s Talk Mobile

- Increasingly shift from desktop to mobile in the world

- Virtually everybody has a smartphone

- Mobile development primarily works in Swift and Java for iOS and Android Native Mobile Dev

Advantages Disadvantages

- Availability of specific UI components - Re-compiling is slow - Gesture systems - New languages to learn - Device compatibility - Two separate code-bases for each - Sophisticated threading models language

https://code.fb.com/android/react-native-bringing-modern-web-techniques-to-mobile/ Using WebViews

- Popularized by Cordova, Ionic, Xamarin - Writing Javascript code inside of WebViews - Slow, doesn’t provide access to native libraries and processes Enter React Native

- Facebook’s solution to writing cross-platform apps - Use familiar, popular web technologies like React and flexbox - Make development fast! Who Uses React Native? React

https://facebook.github.io/react-native/ React

===

===

https://facebook.github.io/react-native/ Styling

Inline:

- Javascript objects

“Classes”

- camelCased properties

What’s best practice? Flexbox!

flexDirection, alignItems, justifyContent, etc Getting Started Let’s Get Started

Choose your own adventure

Expo CLI Quickstart

- Requires no native editor installations, easy to get started

React Native CLI Quickstart

- Requires native editor installations, more feature robust

More Info: https://facebook.github.io/react-native/docs/getting-started Expo is Magical

https://expo.io/ My Preferred Editor & Environment

CLI: React Native CLI

Editor of Choice: VSCode (lots of nice plugins out of the box)

OS: Mac

App: iOS Development in React Native - Fast Refresh - Live Reloading - Debugging through your browser - Cmd + R Demo Time

React Native Development === Mobile Development Handling Text Input

- The keyboard pops up and covers a third of the screen Differences between iOS & Android Touchable Areas

Clicking is different from touching a screen! Follow Native UI Guidelines

Try to use your app on an actual device!

iOS: https://developer.apple.com/design/human-interface-guidelines/ios/overview/them es/

Android: https://material.io/ Understand Native App Modules

- Create your own native bridges between a native module and React Native! - When importing new libraries and npm modules, you may need to link native dependencies through XCode and Android Studio React Native Limitations

- Performance Bottlenecks - Crossing the React Native Bridge Popular Libraries & Resources Redux

- Manage global state - Works well by connecting to AsyncStorage

https://redux.js.org/ React Navigation

Manage screen transitions between your app

https://reactnavigation.org/ React Native Docs

https://facebook.github.io/react-native/docs/getting-started

Awesome React Native http://www.awesome-react-native.com/ https://github.com/facebook/flipper

Data Driven Design Group

Opico

Try it at:

onelink.to/opico

Want to dev on it?

Talk to Ranjitha Say Hi! Twitter: @sujaykhandekar

Github: sskhandek

My Website: sujay.io

Email: [email protected]