React Native Web Full App Tutorial - Build a Workout App for iOS, Android, and Web

Learn to use React Native for Web to create a workout app that works on Android, iOS, and the web. The app uses Mobx, Typescript, React Navigation, React Hooks, AsyncStorage / Localstorage, and more. Once the app is complete, you will learn how to deploy it to Netlify.

⭐️ Contents ⭐️
⌨️ (0:00:00) Setting Up a React Native Web Project
⌨️ (0:09:04) Setting Up React Native Hooks
⌨️ (0:15:03) Setting Up a React Native Web Monorepo
⌨️ (0:28:24) Configuring React Native for Yarn Workspaces
⌨️ (0:39:58) How to use Mobx with React Hooks
⌨️ (0:49:15) Navigation in React Native Web
⌨️ (1:03:28) Styling a Component in React Native Web
⌨️ (1:27:40) Mobx Root Store
⌨️ (1:45:20) Workout Timer with Mobx
⌨️ (2:11:20) React Router with React Native Web
⌨️ (2:22:45) How to Persist Mobx Stores
⌨️ (2:30:47) Storing and Displaying Workout History
⌨️ (2:54:33) React Router Params in React Native Web
⌨️ (3:17:30) Floating Action Button React Native Web
⌨️ (3:34:45) Deploy React Native Web to Netlify

⭐️ Links: ⭐️

--

[James-egjd]

Just got to give a shoutout to Ben. You are the man, dude. I'm coming over from a C++/C# background mostly doing win32 desktop apps, and starting dev in react-native, especially all the pain that comes with the JS/node ecosystem, the repo setups, the node modules metro symlinks, and all the react and rn goodness, mono repos etc, Ben's tutorials have been an enormous help. Much obliged!

[wasisadman]

For those who have downvoted, I think you guys have better solutions. Please share with us. And if you guys can't then please appreciate what this guy have done....

[conw_y]

Awesome tutorial, so helpful. Many thanks.

[giridharkumar]

Wow, it is wonderful and very much useful

[mdrayhanakon]

thank you so much sir...love from Bangladesh

[vigneshwaraneswaramoorthi]

If anyone facing issue on deployment try below steps:
1. change deploy build command(netlify) - cd packages/web && npm run build
2. Publish directory - packages/web/build

[alieltom]

Hi Ben. Thanks for a fantastic tutorial, you are great man. Question. Isn't there an easier way to set up a React JS and React Native app simultaneously like a create-react-web-mobile for both RJS and RN? Please let us know if there is such a starter package. I haven't seen anything done like that yet, but there should be so to reduce the boilerplate set up which takes a lot of time each time.

[conw_y]

Question: Any reason you used npm instead of yarn sometimes, e.g. at 9:55 or 10:53? I managed to do all the same commands with yarn anyway, so all good. 👍

[soniaferreira]

Many hours! Didn t manage yet ! Mobile dev part goes pretty easy!! But still stuck with the web compile perhaps should i jump to typescript lool

[phoenixabcineraturus]

Awesome! I am actually building a Workout tracking app in android studio. Just stuck at the moment because I can't retrieve the content from my Firebase. Hopefully, I can get some pointers here.

[rupay]

I am a novice developer. We were using the React Native for IOS App and also we have created PWA in React. My question is can I use a React UI component in React Native as well as in React Web(obviously we can in react) which has located in different repo? Like we are importing the UI components from NPM for Platform specific. Can I use React UI component in React Native .Both are having the different UI component Structure right even styling also. How can we achieve this? Basically I have to reuse the react component in react native too by hosting in npm.

[AdemoyeOpeoluwa]

PLEASE make Ecommerce App full tutorial using Flutter or React Native

[raj]

Hi what is the git VS code extension called that shows when a file was edited moments ago?

[yaladal]

What a way to start it off, how would i even get there as a beginner, you just magically set it up and expect us to already know how to set it up,

[VarunChoudharyJ]

The start doesn't seem like a start

[marekchojecki]

Did they fix the symlinks issue? I was sure the native part of this tutorial is useless as everyone has symlinks issues with native app

[BrianAkaBear]

Great video: How did you get the file structure you began with?

[ervanttechintel_github_io]

One important question: *Will you use `react-native-web` on a non-trivial project?*

[UmairAliUGINTL]

Will this also create android and ios apps which can be uploaded on app stores?

[dafyduck]

What would change if I wanted to use the EXPO app to avoid using the android studio and android simulator?