react-native-web is a library that allows you to take the same React Native codebase you deploy to Android and iOS and deploy it to the web as well. The recommended way to get started with react-native-web is with Expo, which includes web support. To learn more about react-native-web, let's look at an open-source app that was recently released on iOS and the web. We'll look at ways to set up URLs, responsive design, and dark theme, cases where you need different code for the web, and testing options that are unlocked by the web. We'll also talk about how to choose between React, React Native, and Expo for your next project.

1. Building an App for Mobile and Web
with Expo
4 ReactATL
4 2021-12-01
4 Josh Justice
Building an App for Mobile and Web with Expo - ReactATL - 2021-12-01 - Josh Justice - bit.ly/surely-expo 1

2. Today I'm going to be sharing
with you an app built with
react-native-web.
It's one codebase and it serves
for three platforms: Android,
iOS, and a web app.
react-native-web
One Codebase, Three Platforms
Building an App for Mobile and Web with Expo - ReactATL - 2021-12-01 - Josh Justice - bit.ly/surely-expo 2

3. It's a real app that's live today on
the web and in the iOS App Store
Some of you may be thinking to
yourself "great, I want to see a real
app, not just another todo list."
If so, I have some bad news for you
A Real App in the App
Store
Building an App for Mobile and Web with Expo - ReactATL - 2021-12-01 - Josh Justice - bit.ly/surely-expo 3

4. Surely
A focused todo app giving
you only what you need
to get your todos done.
Building an App for Mobile and Web with Expo - ReactATL - 2021-12-01 - Josh Justice - bit.ly/surely-expo 4

5. Another todo app?
Surely. You jest!
Building an App for Mobile and Web with Expo - ReactATL - 2021-12-01 - Josh Justice - bit.ly/surely-expo 5

6. I do. I do Jest.
describe('arrayWithItemMovedDownward', () => {
const item1 = {name: 'Item 1'};
const item2 = {name: 'Item 2'};
const item3 = {name: 'Item 3'};
const item4 = {name: 'Item 4'};
it('moves an item downward', () => {
const array = [
item1, item2, item3, item4,
];
const result =
arrayWithItemMovedDownward(
array,
item1,
);
expect(result).toEqual([
item2,
item1,
item3,
item4,
]);
});
});
Building an App for Mobile and Web with Expo - ReactATL - 2021-12-01 - Josh Justice - bit.ly/surely-expo 6

7. It's free to use, so you can go to
surelytodo.com to use the web
version, or to get the link to
download it on iOS.
It's also open-source, so you
can pull it down and check it out.
Web/iOS: surelytodo.com
Source: bit.ly/surely-expo
Building an App for Mobile and Web with Expo - ReactATL - 2021-12-01 - Josh Justice - bit.ly/surely-expo 7

8. Overview
4 What is React Native Web?
4 Implementation Notes
4 When to Use React Native Web
4 Conclusion: On Abstractions
Building an App for Mobile and Web with Expo - ReactATL - 2021-12-01 - Josh Justice - bit.ly/surely-expo 8

9. This is Not an
Intro to React Native
Building an App for Mobile and Web with Expo - ReactATL - 2021-12-01 - Josh Justice - bit.ly/surely-expo 9

10. Intro to React Native
Building an App for Mobile and Web with Expo - ReactATL - 2021-12-01 - Josh Justice - bit.ly/surely-expo 10

11. Software for 17 years
Backend, frontend web, native mobile,
React Native
Web Platform Lead at Big Nerd Ranch
If you're looking for work, we'd love to
hire you
If you need a React Native app, we'd love
for you to apply
Me
bignerdranch.com
Building an App for Mobile and Web with Expo - ReactATL - 2021-12-01 - Josh Justice - bit.ly/surely-expo 11

12. What is React Native Web?
Building an App for Mobile and Web with Expo - ReactATL - 2021-12-01 - Josh Justice - bit.ly/surely-expo 12

13. Using React on the web: for
example, to create a button
But you also have iOS and Android
mobile apps: each a different way to
create a button
That's three things to build, with
three technologies
Building an App for Mobile and Web with Expo - ReactATL - 2021-12-01 - Josh Justice - bit.ly/surely-expo 13

14. React Native lets you build with React
paradigms
It creates its own UI abstraction, so
you create a Pressable, and it creates
the corresponding iOS and Android UI
Now just two things to build, both
using React paradigm
Building an App for Mobile and Web with Expo - ReactATL - 2021-12-01 - Josh Justice - bit.ly/surely-expo 14

15. React Native web takes your
React Native code and lets you
run it on the web.
Instead of creating an iOS or
Android UI, it creates a
browser UI
Building an App for Mobile and Web with Expo - ReactATL - 2021-12-01 - Josh Justice - bit.ly/surely-expo 15

16. Now you don't need the
separate React app. Just one
app, one codebase, three
platforms
Tradeoffs
Building an App for Mobile and Web with Expo - ReactATL - 2021-12-01 - Josh Justice - bit.ly/surely-expo 16

17. React Native for Web
4 github.com/necolas/react-native-web
4 Can be used in any React Native project
4 Recommended way to use it is Expo
Building an App for Mobile and Web with Expo - ReactATL - 2021-12-01 - Josh Justice - bit.ly/surely-expo 17

18. Implementation Notes
Building an App for Mobile and Web with Expo - ReactATL - 2021-12-01 - Josh Justice - bit.ly/surely-expo 18

19. Implementation Notes
4 Visuals
4 Navigation and URLs
4 Platform Differences
4 Testing
4 Release
Building an App for Mobile and Web with Expo - ReactATL - 2021-12-01 - Josh Justice - bit.ly/surely-expo 19

20. To the code!
Building an App for Mobile and Web with Expo - ReactATL - 2021-12-01 - Josh Justice - bit.ly/surely-expo 20

21. When to Use
React Native Web
Building an App for Mobile and Web with Expo - ReactATL - 2021-12-01 - Josh Justice - bit.ly/surely-expo 21

22. Sometimes the web is enough.
When to Use React Native Web
1. You need both a web and
mobile app.
Building an App for Mobile and Web with Expo - ReactATL - 2021-12-01 - Josh Justice - bit.ly/surely-expo 22

23. If much of the feature set is
different, you might as well do
a separate React web app.
When to Use React Native Web
2. It's the same app on
mobile and web.
Building an App for Mobile and Web with Expo - ReactATL - 2021-12-01 - Josh Justice - bit.ly/surely-expo 23

24. Because you aren't writing
HTML, you're writing React
Native components, and those
are being translated to HTML.
When to Use React Native Web
3. You don't need fine-
grained control of HTML.
Building an App for Mobile and Web with Expo - ReactATL - 2021-12-01 - Josh Justice - bit.ly/surely-expo 24

25. Conclusion:
On Abstractions
Building an App for Mobile and Web with Expo - ReactATL - 2021-12-01 - Josh Justice - bit.ly/surely-expo 25

26. Some people get excited by
finding ways to do more in
software
Data analysis, machine
learning, crypto
Do More!
Building an App for Mobile and Web with Expo - ReactATL - 2021-12-01 - Josh Justice - bit.ly/surely-expo 26

27. That isn't the kind of problem
that gets me excited to solve it
Do More!
Building an App for Mobile and Web with Expo - ReactATL - 2021-12-01 - Josh Justice - bit.ly/surely-expo 27

28. I get excited by finding ways to
do more with less
That is, build things with less
effort
Do More!
Do More With Less!
Building an App for Mobile and Web with Expo - ReactATL - 2021-12-01 - Josh Justice - bit.ly/surely-expo 28

29. Accidental Complexity refers to things
in software development that take a
lot of effort, but they don't need to
If we can find ways to get rid of that
complexity, we can go much faster
It's not just about saving time; it
allows new paradigms
Accidental Complexity
Building an App for Mobile and Web with Expo - ReactATL - 2021-12-01 - Josh Justice - bit.ly/surely-expo 29

30. When you can build software efficiently, it doesn't have to be a full-
time job.
Teams and individuals working in other fields can make their own
software to make their work better.
Now, we do work in software. For us, this means if you want to make
an app for yourself, depending on your life circumstances you might
be able to do it in your spare time.
This means you don't need to start a business to do it, and you
don't even have to charge anyone for it. You can offer free accounts
and open-source it.
It's also easier to ship the project, because you don't have to add
every feature and configuration option in the world since it meets
your needs.
"Personal Software"
Building an App for Mobile and Web with Expo - ReactATL - 2021-12-01 - Josh Justice - bit.ly/surely-expo 30

31. Expo Web, React Navigation, and
RN Paper are a great stack to
remove accidental complexity and
empower you to make personal
software
This gets me really excited about
them
Building an App for Mobile and Web with Expo - ReactATL - 2021-12-01 - Josh Justice - bit.ly/surely-expo 31

32. Questions?
4 surelytodo.com
4 bit.ly/surely-expo
4 bignerdranch.com
Building an App for Mobile and Web with Expo - ReactATL - 2021-12-01 - Josh Justice - bit.ly/surely-expo 32

33. Thank you!
Building an App for Mobile and Web with Expo - ReactATL - 2021-12-01 - Josh Justice - bit.ly/surely-expo 33