The Tools to get you started with React Native
- 1. The Tools to get you started with React Na4ve Robert Tochman-Szewc © Robert Tochman-Szewc, 2017 1
- 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. © Robert Tochman-Szewc, 2017 3
- 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. 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. © Robert Tochman-Szewc, 2017 6
- 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. 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. 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. 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. 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. © Robert Tochman-Szewc, 2017 12
- 13. Bonus Rant Present since at least May 2016, s3ll not reliably solved: Text Input © Robert Tochman-Szewc, 2017 13
- 14. Thanks! rob@rtsworks.com © Robert Tochman-Szewc, 2017 14
- 15. Links • Expo • React Naviga0on • Redux • React Na0ve Router Flux • React Na0ve UI Ki:en • Jest © Robert Tochman-Szewc, 2017 15