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 <div> === <View> <span> === <Text> 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].