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

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

307
30



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.

💻 Code: https://github.com/benawad/react-native-web-series

⭐️ 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: ⭐️
🔗 https://stronglifts.com/apps/
🔗 https://github.com/necolas/react-native-web/blob/master/docs/guides/client-side-rendering.md

🔗 VSCode settings used: https://gist.github.com/benawad/1e9dd01994f78489306fbfd6f7b01cd3

Course from Ben Awad. Check out his YouTube channel: https://www.youtube.com/benawad97

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://medium.freecodecamp.org

And subscribe for new videos on technology: https://youtube.com/subscription_center?add_user=freecodecamp

30 Comments

  1. Thanks for sharing my tutorial freeCodeCamp! If you liked this video you might like some of my other videos: https://www.youtube.com/c/benawad97

  2. 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….

  3. So I created my react app with –typescript and it just made javascript files anyways? lol

  4. Failed to compile

    ../common/dist/index.js

    Module not found: Can't resolve 'react-native/Libraries/NewAppScreen' in 'C:UsersTDC-ITReactNativeProjectsmy-monorepopackagescommondist'

    Can anyone help with this?

  5. What will you choose, React Native for Web or Expo for Web?

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

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

  8. Did REACT change drastically since this video was made? I just installed it and got the iOS Simulator running and none of the files remotely match yours. So all the edits you suggested are in files I don't see. I do however see lines that are similar in my _test_ directory, but nothing remotely close in the total sum.

  9. Did someone manage to run the project without typescript?

  10. 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. 👍

  11. Awesome tutorial, so helpful. Many thanks.

  12. Hello Friends!
    ios/build/Build/Intermediates.noindex/React.build/Debug-iphonesimulator/double-conversion.build/Script-190EE32F1E6A43DE00A8543A.sh

    (1 failure)

    I have this error when I run react-native run-ios I think is a problem with double conversion but I could not resolve it until now.
    Hope somebody can help me I don´t want to waste more time with this issue.

  13. I'm following along but without using typescript. I'm getting an error when trying to run the App component from common/index.js. Unexpected token after return ( . Is this due to this file not being build with babel or something? Is the typescript config doing more than just converting to typescript?

    If I copy that component directly into web/src/App.js it renders fine.

    Thanks

  14. THANKS A TON, Searched for 3 months & this is the only one that has all in one, Thanks again

  15. For anyone having trouble using wml with Windows, try using haul. Information on how to set haul up with typescript can be found here: https://callstack.github.io/haul/docs/recipes.html

    There are a few edits, namely changing the source to your actual index file ("./index.js") and changing the typscript config. Here are mine that worked for me:

    webpack.haul.js:

    module.exports = ({ platform }, { module, resolve }) => ({

    entry: `./index.js`,

    module: {

    …module,

    rules: [

    {

    test: /.tsx?$/,

    loader: "ts-loader"

    },

    …module.rules

    ]

    },

    resolve: {

    …resolve,

    extensions: [

    ".ts",

    ".tsx",

    `.${platform}.ts`,

    ".native.ts",

    `.${platform}.tsx`,

    ".native.tsx",

    …resolve.extensions

    ]

    }

    });

    tsconfig.json:

    {

    "compilerOptions": {

    "allowJs": true,

    "allowSyntheticDefaultImports": true,

    "esModuleInterop": true,

    "isolatedModules": false,

    "jsx": "react",

    "lib": ["es6"],

    "moduleResolution": "node",

    "strict": true,

    "target": "esnext"

    },

    "exclude": [

    "node_modules",

    "babel.config.js",

    "metro.config.js",

    "jest.config.js"

    ]

    }

    Once installed, go to your common folder and execute `yarn link`

    Then instead of doing `yarn start` in your app folder, do `yarn haul start`.

    Also, for whatever reason I had to install react-dom as a dependency when using haul. Hope this helps because I could not for the life of me get wml to work on windows

  16. Can iam make a game with react?

  17. is there something similar without using typescript?

  18. Help!
    When I initialise "MyAwesomeProject", I don't have the same files as you do. I have App.tsx, setup.js, jest.json or tsconfig.json. Additionally I have some files you dont, such as metro.config.js and a folder node_modules. Also, my package.json file is not containing any dev dependencies.
    I've tried 3 times, still the same. Please help.

  19. The start doesn't seem like a start

  20. thank you so much sir…love from Bangladesh

  21. i love freeCodeCamp because every struck me by new professional videos .
    you are too experts and consistency people

  22. do i need a mac to use react native for ios?

  23. thank you for sharing this <3

  24. one question. It does not create dist directory when I make yarn build. any idea?

Leave a Reply

Your email address will not be published. Required fields are marked *