Upgrade to Pro — share decks privately, control downloads, hide ads and more …

10 Things You Didn't Know You Could Do with Expo

A01b931867096ec8874202e233279212?s=47 Simon Sturmer
PRO
September 24, 2020
1

10 Things You Didn't Know You Could Do with Expo

This is a talk I gave on Sep 24, 2020 at React Native Bay Area.

A01b931867096ec8874202e233279212?s=128

Simon Sturmer
PRO

September 24, 2020
Tweet

Transcript

  1. Expo: 10 things... you didn't know you could do.

  2. I'm Simon Software engineer, founder, React Native enthusiast; previously engineering

    at Facebook, Google/YouTube. @sstur_
  3. I'm here today to talk to about Expo

  4. What is Expo?

  5. What is Expo and why would I use it? •

    a set of tooling for RN • ...like all the stuff that should be in RN core but isn’t • Really tho, it’s much more than that... • Build services, web support, online playground, app runner
  6. 3.5 yrs ago in Singapore I gave a talk on

    Expo at SingaporeJS back in 2017...
  7. OK, 10 things... in no particular order

  8. Build for iOS without a Mac 1

  9. 1. Code your app on Windows, Linux, Chromebook, etc 2.

    Preview on your physical iPhone 3. Build using Expo's free build servers 4. Deploy to TestFlight or App Store* Powered by Expo's awesome (and free) build services.
  10. Build a completely offline app 2

  11. No network, no problem • Full SQLite database • File

    Storage • Biometric authentication • Local notifications
  12. Build for web... and desktop apps! 3

  13. Web has first-class support out of the box. You probably

    know that Expo supports web. but did you know we have: • Camera Support • QR Scanning • GestureHandler • Dark Mode • Image Manipulation • Accelerometer
  14. With Expo you really can build desktop apps. Credit: Expo

    Blog
  15. PR Deploy Previews 4

  16. Get a usable Expo link for every PR PR Previews

  17. Shared Element Transitions 5

  18. What is a shared element transition? Credit: @nandorojo

  19. What cool stuff can we make? Credit: Catalin Miron

  20. Expo and React Navigation include baked-in support for Shared Elements.

    Combined with Reanimated, you can build really immersive experiences with this. Go checkout Catalin's awesome examples and courses (and back him on Patreon).
  21. SVG and Lottie 6

  22. One of my favorite tricks: Import SVG files directly as

    components.
  23. None
  24. 60fps Animations with Reanimated and Gesture Handler 7

  25. This topic really deserves a whole talk of its own.

    Reanimated brought high performance native-accelerated animations. Reanimated v2-alpha just landed in Expo this week. Reanimated brought to you by: @kmagiera and Software Mansion
  26. Sign in with Apple 8

  27. You don't need to eject from Expo to use Apple

    Auth. It's easy to implement and a stellar user experience.
  28. Compile-time branching 9

  29. Compile time branching is built-in and simple: • .web.js •

    .ios.js • .android.js • .expo.js • .electron.js You can share 95% of code and branch for each platform.
  30. But there's another trick I find really useful...

  31. 1. Set an env var in your expo start command.

    2. Use a custom entry point for your app.json
  32. Use the best parts of Expo... without using Expo 10

  33. Unimodules

  34. Last year, Expo announced a major architecture that splits each

    module into a standalone package that can be used even in a non-Expo project. Pull in almost any Expo module to your bare RN project.
  35. It's also worth noting that you can use Expo Web

    even in a bare RN project. In fact, I've used Expo Web in pure web projects too.
  36. Runners up... ★

  37. There are so many great Expo features that we haven't

    even touched on. Runners up: • SSR • ExpoGL • Background Audio • Screen Capture • Face Detector • Haptics • Image Manipulation • Printing
  38. Expo unlocks so many exciting things about mobile, web development.

  39. Thanks for Listening Hit me with some questions. And find

    me online → @sstur_