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.

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