Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The Tools to get you started with React Native

41 views

Published on

Presentation from the Berlin React + React Native Meetup in November 2017.

Published in: Internet
  • Hello! Who wants to chat with me? Nu photos with me here http://bit.ly/helenswee
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

The Tools to get you started with React Native

  1. 1. The Tools to get you started with React Na4ve Robert Tochman-Szewc © Robert Tochman-Szewc, 2017 1
  2. 2. My Background • Started with React Na/ve in May 2016 on side projects • Turned this into a full-/me job beginning of 2017 • Released three apps with RN, most recently Blue Boat Log © Robert Tochman-Szewc, 2017 2
  3. 3. © Robert Tochman-Szewc, 2017 3
  4. 4. Recap: React Na*ve • Same thing as React • But with na2ve components (<View> instead of <div>) • Benefits: Smooth Android and iOS apps using familiar JS ecosystem • Downsides: ... © Robert Tochman-Szewc, 2017 4
  5. 5. Step 1: The Sandbox • Expo allows you to get familiar with RN easily • Write code, test on the device • No work with iOS/Android ecosystem required • No access to NaCve Modules © Robert Tochman-Szewc, 2017 5
  6. 6. © Robert Tochman-Szewc, 2017 6
  7. 7. Step 2: Connect the Dots • How to switch between views? No react-router • Instead: react-naviga9on • Want to manage state be<er? Here's how: • State Management: redux • Router: react-na9ve-router-flux © Robert Tochman-Szewc, 2017 7
  8. 8. Step 3: Visuals • Special CSS syntax based on Flexbox • Out of the box: No styled components • Build your own or ... • Use one of the alterna@ves: react-na@ve-ui-kiDen © Robert Tochman-Szewc, 2017 8
  9. 9. Step 4: NATIVE • There is a sea of libraries out there • Background GPS, Crashly<cs/Fabric, Google/FB Signin, FontAwesome/Material Icons, LoEe, SQLite, File System • Everything you can do na<vely can be done with RN • OLen as easy as yarn install <native library> react-native link <native library> © Robert Tochman-Szewc, 2017 9
  10. 10. Step 4: NATIVE (2) • Possibly more difficult, but allows insight into iOS/Android tooling • Problem: Many projects are/become abandoned • Learn to place bets and switch every now and again © Robert Tochman-Szewc, 2017 10
  11. 11. Step 5: Test Automa/on • Jest • Mock Na-ve Modules by hand • Mock states and use snapshots • Will save you countless hours debugging © Robert Tochman-Szewc, 2017 11
  12. 12. © Robert Tochman-Szewc, 2017 12
  13. 13. Bonus Rant Present since at least May 2016, s3ll not reliably solved: Text Input © Robert Tochman-Szewc, 2017 13
  14. 14. Thanks! rob@rtsworks.com © Robert Tochman-Szewc, 2017 14
  15. 15. Links • Expo • React Naviga0on • Redux • React Na0ve Router Flux • React Na0ve UI Ki:en • Jest © Robert Tochman-Szewc, 2017 15

×