React Native & Expo Router Course - Build a Meditation App

Sdílet
Vložit
  • čas přidán 11. 07. 2024
  • Improve your React Native skills by building a meditation app using Expo. Learn to utilize TypeScript, React, NativeWind, React Native, and Expo to develop a simple mobile app.
    💻 GitHub: github.com/stevenGarciaDev/si...
    ✏️ Course developed by ‪@StevenCodeCraft‬
    ⭐️ Contents ⭐️
    ⌨️ (0:00:00) Simple Meditation App (Expo React Native)
    ⌨️ (0:01:41) GitHub Repository Info
    ⌨️ (0:02:42) Upcoming Courses
    ⌨️ (0:03:21) Social Media and FitFuelPlanner
    ⌨️ (0:03:45) Setup Local Development Environment
    ⌨️ (0:14:53) Add static assets and define constant files
    ⌨️ (0:18:38) Setup NativeWind
    ⌨️ (0:21:14) Implement Initial Screen
    ⌨️ (0:32:03) Splash Screen Image
    ⌨️ (0:32:49) The useRouterHook
    ⌨️ (0:34:22) Add AppGradient Component and Tabs directory
    ⌨️ (0:39:06) The Meditation Index Screen
    ⌨️ (0:47:47) Use FlatList on the Meditation Index Screen
    ⌨️ (0:54:16) The Affirmations Index Screen
    ⌨️ (1:02:38) The Affirmations Detail Screen
    ⌨️ (1:15:22) The Meditation Detail Screen
    ⌨️ (1:33:17) Meditation Audio/Song
    ⌨️ (1:40:27) React Context and Modal Screen
    🎉 Thanks to our Champion and Sponsor supporters:
    👾 davthecoder
    👾 jedi-or-sith
    👾 南宮千影
    👾 Agustín Kussrow
    👾 Nattira Maneerat
    👾 Heather Wcislo
    👾 Serhiy Kalinets
    👾 Justin Hual
    👾 Otis Morgan
    👾 Oscar Rahnama
    --
    Learn to code for free and get a developer job: www.freecodecamp.org
    Read hundreds of articles on programming: freecodecamp.org/news

Komentáře • 29

  • @StevenCodeCraft
    @StevenCodeCraft Před 10 dny +27

    Thank you Beau and FreeCodeCamp for sharing my second course. I'm working on creating more content on JavaScript and React Native which I'll be sharing with FreeCodeCamp and the tutorials will have more advanced features.

  • @tigana
    @tigana Před 10 dny +5

    Love the wellness theme. Please more tutorials in this niche!!! Can’t wait to try this tutorial. I’ve been wanting to play around with mobile dev for awhile now.

  • @2ru2pacFan
    @2ru2pacFan Před 10 dny +2

    Finally! Thank you so much!

  • @tomarozziluan
    @tomarozziluan Před 10 dny +2

    Thank you so much for sharing your knowledge!

  • @srsh12345
    @srsh12345 Před 5 dny

    Perfect Timing for me. I've been trying to teach myself React Native and struggling with some of the concepts. Thank you so so much for this video.

  • @hmlsnt5134
    @hmlsnt5134 Před 21 hodinou

    Thanks for making this video.

  • @soumya_dey_
    @soumya_dey_ Před 10 dny

    Thanks a lot man😂❤

  • @mr.fabian8471
    @mr.fabian8471 Před 10 dny

    thanks

  • @soumya_dey_
    @soumya_dey_ Před 10 dny

    Need more contents on react native

  • @rishiraj2548
    @rishiraj2548 Před 10 dny

    💯🙏🏻😌

  • @kymrhys
    @kymrhys Před 10 dny

    Nice

  • @geraldjunior4235
    @geraldjunior4235 Před 10 dny +1

  • @vss318
    @vss318 Před 10 dny +4

    Whoa I needed exactly this, what convent timing! I just don’t really know how to code yet…
    Do you think you can make a beginner friendly course on making a meditation app soon?

    • @adityaanuragi6916
      @adityaanuragi6916 Před 10 dny +2

      You need to learn how to code first before using any library
      And most likely this is beginner friendly, if you find it overwhelmingly difficult then you need spend more time programming

    • @itzdonamicable3735
      @itzdonamicable3735 Před 10 dny +1

      You really need the basics Idea on html,CSS and JavaScript before using frame work like react and other languages

    • @aammssaamm
      @aammssaamm Před 9 dny +1

      Go to school.

  • @aryabp
    @aryabp Před 9 dny +2

    Rustaceans use Tauri 🦀

  • @BizimKafa
    @BizimKafa Před 10 dny +1

    Hello friends. If we had to choose a field at university, should we choose artificial intelligence or software engineering? To be honest, I haven't chosen what I will be yet, I am also interested in cyber security.

  • @angerbadge773
    @angerbadge773 Před 3 dny

    How do I get rid of the default "index" initial route in my expo react native app also when i try to use _layout.tsx it alphabetically loads the route (ex: if the first stack screen is (tabs) and the second one is (auth) and the final one is default index it loads the (auth) route )

  • @SaileelaMekala-fp4qv
    @SaileelaMekala-fp4qv Před 10 dny +1

    Can anyone suggest best channel for SAP ABAP

  • @ZoroBoiInd_laman
    @ZoroBoiInd_laman Před 10 dny

    Hi bro pls sharing toturial Ruby and Rust dev bro very pls and course for fullstack developer

  • @Another-Address
    @Another-Address Před 10 dny

    I have a notion that in ten or so years, the tech of today will appear and feel like looking back at retro systems requiring punch cards to operate on low speed byte sized Ram and ROM. Been watching some videos today on what they are working on...
    Still stuck on, "Hello World" and have not got any further..lack of gear and funds..

  • @elvispalace
    @elvispalace Před 9 dny

    so easy

  • @oyeyemiibitomisi5023
    @oyeyemiibitomisi5023 Před 8 dny

    Give me a sacla tutorial

  • @Btechdom
    @Btechdom Před 10 dny +3

    Too bad Apple is still gating half of devs by not releasing xcode for Windows.

  • @942hishan
    @942hishan Před dnem +1

    i tried to clone your app and setup on my local machine it shows blank screen on the emulator and index.tsx on line fourteen i get a error calling import beachImage from "@/assets/meditation-images/beach.webp"; Cannot find module '@/assets/meditation-images/beach.webp' or its corresponding type declarations

    • @alias-wh1et
      @alias-wh1et Před dnem

      I also got the same error message regarding the import statement, but it seems to be ignorable.
      As for seeing a blank screen instead of the background image, I found adding "w-full" to ImageBackground's classes to fix that the issue.