Building for Mobile and Web with Expo
React Advanced London
2022-10-27
Josh Justice
codingitwrong.com/workshops/rnweb
Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 1

Workshop Web Page
codingitwrong.com/workshops/rnweb
Clone the repo, pull the latest, and install!
Sign in to GitNation Discord to ask questions! #radv-
workshops
Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 2

react-native-web
One Codebase, Three Platforms
Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 3

A Real App in the App Store
Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 4

Surely
A focused todo app giving you only what
you need to get your todos done.
Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 5

Web/iOS: surelytodo.com
Source: bit.ly/surely-expo
Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 6

Overview
1. What is React Native Web?
2. Walkthrough: Setting Up an App Skeleton
3. Discussion: When to Use React Native Web
Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 7

Not an intro to React Native.
An intro to React Native:
reactnative.dev/docs/getting-started
Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 8

Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 9

What is React Native Web?
Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 10

Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 11

Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 12

Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 13

Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 14

React Native for Web
— github.com/necolas/react-native-web
— Can be used in any React Native project
— Recommended way to use it is Expo [link]
Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 15

Walkthrough
Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 16

Walkthrough
— Navigation and URLs
— Component library
— Dark mode
— Custom theme
— Responsive design
Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 17

Tools Used
Expo
React Navigation
React Native
Paper
Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 18

To the code!
Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 19

Discussion:
When to Use React Native
Web
Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 20

— What projects might be a good fit for React Native
Web?
— What projects might not be a good fit for it?
Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 21

My Thoughts on When to Use React Native Web
1. You need both a web and mobile app.
2. It's (largely) the same app on mobile and web.
3. You don't need fine-grained control of HTML.
Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 22

Conclusion:
On Abstractions
Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 23

Do More!
Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 24

Do More!
Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 25

Do More!
Do More With Less!
Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 26

Accidental Complexity
Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 27

Workshop Web Page
codingitwrong.com/workshops/rnweb
Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 28

Stay in Touch!
— CodingItWrong's Discord Server - the workshop,
React Native, and testing
— Weekly Live Stream - working on two web+native
Expo apps
Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 29

Questions?
codingitwrong.com/workshops/rnweb
Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 30

Thank you!
Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 31