$30 off During Our Annual Pro Sale. View Details »

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

Simon Sturmer
PRO
September 24, 2020
11

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.

Simon Sturmer
PRO

September 24, 2020
Tweet

Transcript

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

    View Slide

  2. I'm Simon
    Software engineer, founder,
    React Native enthusiast;
    previously engineering at
    Facebook, Google/YouTube. @sstur_

    View Slide

  3. I'm here today to
    talk to about
    Expo

    View Slide

  4. What is Expo?

    View Slide

  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

    View Slide

  6. 3.5 yrs ago in Singapore
    I gave a talk on Expo at
    SingaporeJS back in
    2017...

    View Slide

  7. OK, 10 things...
    in no particular order

    View Slide

  8. Build for iOS
    without a Mac
    1

    View Slide

  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.

    View Slide

  10. Build a completely
    offline app
    2

    View Slide

  11. No network, no
    problem
    ● Full SQLite database
    ● File Storage
    ● Biometric authentication
    ● Local notifications

    View Slide

  12. Build for web...
    and desktop apps!
    3

    View Slide

  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

    View Slide

  14. With Expo you
    really can
    build desktop
    apps.
    Credit: Expo Blog

    View Slide

  15. PR Deploy
    Previews
    4

    View Slide

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

    View Slide

  17. Shared Element
    Transitions
    5

    View Slide

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

    View Slide

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

    View Slide

  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).

    View Slide

  21. SVG and Lottie
    6

    View Slide

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

    View Slide

  23. View Slide

  24. 60fps Animations
    with Reanimated
    and Gesture Handler
    7

    View Slide

  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

    View Slide

  26. Sign in with Apple
    8

    View Slide

  27. You don't need to
    eject from Expo to use
    Apple Auth.
    It's easy to implement
    and a stellar user
    experience.

    View Slide

  28. Compile-time
    branching
    9

    View Slide

  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.

    View Slide

  30. But there's another trick I
    find really useful...

    View Slide

  31. 1. Set an env var in
    your expo start
    command.
    2. Use a custom entry
    point for your
    app.json

    View Slide

  32. Use the best parts
    of Expo...
    without using Expo
    10

    View Slide

  33. Unimodules

    View Slide

  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.

    View Slide

  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.

    View Slide

  36. Runners up...

    View Slide

  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

    View Slide

  38. Expo unlocks so many exciting things
    about mobile, web development.

    View Slide

  39. Thanks for Listening
    Hit me with some questions.
    And find me online →
    @sstur_

    View Slide