React Native Crash Course - Full App tutorial with Expo

Поділитися
Вставка
  • Опубліковано 3 лют 2025

КОМЕНТАРІ • 161

  • @chupitolepame5357
    @chupitolepame5357 2 роки тому +1

    For the people watching the video that is just as impatient as am I, put the video at 1.5x and you can kill your anxiety.
    Great content Esteban.

  • @kcmichealx
    @kcmichealx 3 роки тому +5

    Thank you very much for this. You and I are almost alike. I can't wait to meet you and hopefully, one day share my own journey. You're really proof anyone can learn how to code through sheer force and determination.

  • @goodlvn
    @goodlvn 4 роки тому +1

    THIS IS WHAT I WAS LOOKING FOR - I wanted to find a mini crash course that would leave me with a built app at the end! Thank You!!!

  • @EstebanCodes
    @EstebanCodes  4 роки тому +31

    Guys, there is an issue at 01:55:49 when using react-native-dotenv for hiding the weather api-key , that package was upgraded from 0.2.0 to 2.2.0 (that causes some breaking changes) To follow the tutorial please install the package if you are using yarn, like this
    yarn add -D react-native-dotenv@0.2.0.
    or if you are using npm
    npm install --save-dev react-native-dotenv@0.2.0
    Alternatively, you can use a different plugin for achieving this like github.com/tusbar/babel-plugin-dotenv-import.

    • @manushvenkatesh4318
      @manushvenkatesh4318 4 роки тому +1

      @Esteban Please provide details on how we can deploy the app to real iOS devices, without needing to publish to app store.. Thanks..

    • @EstebanCodes
      @EstebanCodes  4 роки тому +7

      For that, you will need to create an account in expo.io/signup and then you can run expo login, and then you should be able to run expo publish, which will create a new project in expo . To access that project in the ios device you will need to install the expo app apps.apple.com/us/app/expo-client/id982107779 and the sign in with your credentials, the project should be there.

    • @elozinoovedhe
      @elozinoovedhe 2 роки тому

      Hi... I'm having issues fetching data after following everything you did

  • @JoeBoo532
    @JoeBoo532 3 роки тому +2

    This is a good starter for anyone who wants to get into React Native. Thanks a lot dude! you're rock! 🤘🏼

  • @miklosnemeth8566
    @miklosnemeth8566 2 роки тому

    I am only at 15:45 and I love your relaxed teaching methid. Honestly, I like the layouting and styling concepts of RN a lot better than HTML.

    • @elozinoovedhe
      @elozinoovedhe 2 роки тому

      I'm having issues fetching data.. do you know why?

  • @JorgeGarcia-ef4py
    @JorgeGarcia-ef4py 4 роки тому +1

    Great Tutorial, Esteban!! Congratulations!! Greetings from Colombia. Subscribed and reccomended your channel!!

  • @narcissisticnarcissus4956
    @narcissisticnarcissus4956 4 роки тому +3

    Amazing!
    Greetings from Finland!

  • @twinprimestudio6865
    @twinprimestudio6865 3 роки тому

    Your sweater is amazing. Good job. 10/10

  • @Daniel-bx2ou
    @Daniel-bx2ou 3 роки тому

    your english is great and i like your vibe! keep it up!

  • @compton8301
    @compton8301 4 роки тому +1

    Greetings from South Africa.

  • @ЛяПарфюм
    @ЛяПарфюм 2 роки тому

    Thank you, friend!!!! Super-super helpful!

  • @Sura_Rzayeva
    @Sura_Rzayeva 4 роки тому +1

    Thank you, dear

  • @younus4256
    @younus4256 3 роки тому +1

    Insightful and easy to follow along, Esteban. Thanks, and well done 👌👏

  • @arikmosfor4907
    @arikmosfor4907 3 роки тому

    asombroso hermano!!

  • @gabrieltoledo5082
    @gabrieltoledo5082 4 роки тому

    Thank you very much, without your example I would not have succeeded !!

  • @yahyadianprastyo2574
    @yahyadianprastyo2574 4 роки тому +1

    Thank you for the tutorials! Probably ill try it later :D

  • @EliasGuderian
    @EliasGuderian 3 роки тому

    Love the sweater bro.

  • @nazpromi6521
    @nazpromi6521 3 роки тому +4

    play speed = 1.5x..... And now perfect

  • @NomadicDmitry
    @NomadicDmitry 3 роки тому +1

    Very good channel, thank you!

  • @salkjshaweoiuenvohvr
    @salkjshaweoiuenvohvr 4 роки тому

    Good stuff man. Thanks a whole bunch!

  • @programmerrdai
    @programmerrdai 4 роки тому

    Great Content Keep Up the good work !

  • @compton8301
    @compton8301 4 роки тому +31

    Next video: Deploying a React Native app to Playstore or App Store.

    • @computadorhumano949
      @computadorhumano949 4 роки тому

      Where is video, release out?

    • @compton8301
      @compton8301 4 роки тому

      @@computadorhumano949 Not yet.

    • @ongpytran4552
      @ongpytran4552 3 роки тому

      ok

    • @nikhilsastry6631
      @nikhilsastry6631 3 роки тому +1

      @@computadorhumano949 You can find the generated APK at android/app/build/outputs/apk/app-release. apk. This is the actual app, which you can send to your phone or upload to the Google Play Store........to upload in playstore purchase rights just for $25 and upload hope understand it!

  • @haseeb_ahmed
    @haseeb_ahmed 4 роки тому +1

    Thanks for making this amazing course!

  • @bricxcarasco3653
    @bricxcarasco3653 4 роки тому

    Thank you for this Esteban, keep it up and god bless.

  • @ncimli
    @ncimli 4 роки тому

    Gr8 tutorial, thank u, Esteban!!

  • @neneodonkor
    @neneodonkor 2 роки тому

    Really nice tutorial.

  • @AmineSdour
    @AmineSdour 4 роки тому

    Very instructive !! God bless you

  • @psycho5553
    @psycho5553 4 роки тому +5

    03:30 mac users use the "sudo npm install -g expo-cli" instead

  • @vardhuyt713
    @vardhuyt713 4 роки тому

    Liked & Subscribed, good job. Thanks.

  • @borotoofficial9772
    @borotoofficial9772 4 роки тому

    Thank for this video please make it more. Now, I'm learning react native. Anyways, I really appreciate with your video.

  • @YogeshYadav-tk9bh
    @YogeshYadav-tk9bh 4 роки тому

    Great work buddy...👍

  • @DCodingStudio
    @DCodingStudio 4 роки тому

    Latest React Native version 0.63.0 features:
    Pressable: ua-cam.com/video/MLgmJCWyFmk/v-deo.html
    PlatformColors: ua-cam.com/video/OM7lQd-lsL0/v-deo.html

  • @bstaysglamorous
    @bstaysglamorous 3 роки тому

    Nice job thank you!!

  • @manishbasnet5230
    @manishbasnet5230 4 роки тому +1

    Great tutorial

  • @essam_ly
    @essam_ly 4 роки тому +1

    Thank you for your effort, It's very helpful

  • @manishbasnet5230
    @manishbasnet5230 4 роки тому +1

    Love from Nepal

  • @isaacsarte2708
    @isaacsarte2708 3 роки тому

    mmm love your voice cracks

  • @ascendedfenix
    @ascendedfenix 4 роки тому +3

    I got an error trying to install the first thing you instructed us to install in the terminal. Will this hamper the tutorial?

  • @alifhakimi3807
    @alifhakimi3807 3 роки тому +2

    Hi, why can't i install the expo-location? it says it couldnt be found on the project

  • @batuhanbag5054
    @batuhanbag5054 3 роки тому

    Thank u nice tutorial

  • @CodingwithElias
    @CodingwithElias 4 роки тому

    nice,
    keep it up

  • @d-e-v-esh
    @d-e-v-esh 4 роки тому

    Thank you so much... Very helpful

  • @westfield90
    @westfield90 4 роки тому +1

    Thank you for this

  • @davorlambregts7742
    @davorlambregts7742 3 роки тому

    i can not figure out the part around 26:20 . when i insert this:
    const location = await Location.getCurrentPositionAsync()
    const {latitude, longitude} = location.coords;
    alert('Latitude : ${latitude}, Longitude: ${longitude}')
    it does give me a alert, but not with with coordinates, but only with the message:
    alert('Latitude : ${latitude}, Longitude: ${longitude}')
    can somebody help me by any chance?
    thanks!

    • @EstebanCodes
      @EstebanCodes  3 роки тому

      I think you need to use backticks `` instead of '' so it will be something like
      alert(`Latitude : ${latitude}, Longitude: ${longitude}`)

  • @shantanu391996
    @shantanu391996 4 роки тому

    This video is really informative. Thank you!

  • @someshgusain2707
    @someshgusain2707 3 роки тому +1

    Sir (Is different from) on 22:09 how do you make that symbol?

  • @mananshah5913
    @mananshah5913 4 роки тому

    Awesome Content

  • @chaseheavner8319
    @chaseheavner8319 3 роки тому

    I receive the error Network request failed upon the first API call. My code matches the 40 minute mark in the video and I am using the expo app on my iPhone 13 pro.

  • @philipp332
    @philipp332 4 роки тому

    Thank you for the video

  • @freeskillscamp2107
    @freeskillscamp2107 4 роки тому +1

    Hey bro I have an issue in installation of expo-cli can you please help me out?

  • @techkeocybersecurity4235
    @techkeocybersecurity4235 4 роки тому

    Nice video sir

  • @Itachii-lord
    @Itachii-lord 3 роки тому

    which snippets are you using

  • @hi-ff4uw
    @hi-ff4uw 4 роки тому

    Thank you!

  • @prajalrana5499
    @prajalrana5499 3 роки тому

    43:03 must be cold out there

  • @giango9443
    @giango9443 4 роки тому

    thank you, it's helpful for me.

  • @ooichengjie7207
    @ooichengjie7207 3 роки тому

    My alert is not showing anything...Can you please help on this. I follow exactly your code

  • @pratikwaghmare2000
    @pratikwaghmare2000 3 роки тому

    Am following this tutoring. The problem is that. That longitude and latitude is not loading in my Android device why? Plzzzz. Help me...

  • @nov0caina
    @nov0caina 4 роки тому

    I'm getting this error "TypeError: setUnitsSystem is not a function" at 1:09:12 when I tried to change to Cº
    Help please, I'm new to react native :(

    • @joseaquezada7386
      @joseaquezada7386 4 роки тому +1

      There are a couple of possible causes for that error, but first make sure you are passing the hooks arguments using curly braces {}; for example:
      export default function UnitPicker({unitsSystem,setUnitsSystem}){...}, or you might be using a version of react-dom (< 16.8.0) or react-native (< 0.59) that doesn’t yet support Hooks.

    • @nov0caina
      @nov0caina 4 роки тому

      ​@@joseaquezada7386 Thank you so much, it was both of the problems you described, it works now!

  • @abdremo
    @abdremo 3 роки тому

    Thank you

  • @compton8301
    @compton8301 4 роки тому

    Thank you.

  • @jesusadrianquirozpalacios155
    @jesusadrianquirozpalacios155 4 роки тому

    i have an error in ios simulator, unhandled js exception typeerror null is not an object evaluating t.prevent

  • @razikkhan2637
    @razikkhan2637 3 роки тому

    Is its Fetches random wheather data

  • @belkocik
    @belkocik 3 роки тому

    My first project in React Native. Let's see what I can learn here. When I done it, what you suggest to do next? I'd like to build an news app with Firebase.

  • @NavyCrack1
    @NavyCrack1 3 роки тому

    Can I upload app from Windows 10, Im making with React native? thanks

  • @timzeynalov3537
    @timzeynalov3537 3 роки тому

    Hi there , I start to watching your chanel becouse I had a problems with react navigation , I had a warnings and it does not work , so I hope this video will help me and I will able to use this simple react Navigation in my project whithout any warnings

  • @sazadahemad2799
    @sazadahemad2799 3 роки тому

    I am having problem sir.. can you please help..??

  • @jenny2814.
    @jenny2814. 4 роки тому

    thanks bud

  • @aman.tyagi112
    @aman.tyagi112 4 роки тому

    Brother great react native tut are you a freelancer or doing job

  • @earlwood7826
    @earlwood7826 4 роки тому

    Thanks for this video!
    Do you know how to send files by email using firebase with expo?

  • @naeemshaikh4683
    @naeemshaikh4683 3 роки тому

    Can it will run with react native cli

  • @wakifhossain3568
    @wakifhossain3568 4 роки тому

    Please help me!
    My weather icon is not displaying.

  • @raulreissoares343
    @raulreissoares343 3 роки тому

    Hi, i'm from Brazil.
    When I try including "import * as Location from 'expo-location';" my app show that it failed to compile. Would you help me?
    I don't have any idea of how to fiz this issue.

    • @eatoldglue
      @eatoldglue 3 роки тому

      have you install that package?

    • @LucasAlves-yf8pf
      @LucasAlves-yf8pf 3 роки тому

      tenta atualizar o expo ou o nodeJS, sempre tenta manter eles atualizados

  • @ekremsar488
    @ekremsar488 4 роки тому

    Thank you for tutorial.
    What is the Vscode theme?

    • @EstebanCodes
      @EstebanCodes  4 роки тому

      Hey it is this one marketplace.visualstudio.com/items?itemName=ahmadawais.shades-of-purple

  • @abdullohtursunov3380
    @abdullohtursunov3380 3 роки тому

    Hello Esteban bro, i have question: how can i convert my react-native app to apk version to install or share others?

    • @EstebanCodes
      @EstebanCodes  3 роки тому

      Hey! you can do using the expo cli docs.expo.dev/distribution/building-standalone-apps/#3-start-the-build check the docs , you may also need to create an expo account to download the build

  • @rathanankonn5355
    @rathanankonn5355 4 роки тому

    expo init command doesn't work for me in the terminal, i get this error message.
    ERROR: Node.js v13.12.0 is no longer supported.
    expo-cli supports following Node.js versions:
    * >=10.13.0 =12.13.0 =14.0.0

    • @EstebanCodes
      @EstebanCodes  4 роки тому

      Hey you just need to change your node version, if you are in linux or mac you can easily do it with www.npmjs.com/package/n for windows you can use github.com/coreybutler/nvm-windows

  • @eledorusso
    @eledorusso 3 роки тому

    De donde eres?

  • @belkocik
    @belkocik 3 роки тому

    it doesn't show the alert if I do:
    alert(`Latitude : ${latitude}, Longitude: ${longitude}`);
    I did everything step by step, set the location and installed expo-location.
    - Android emulator

    • @davorlambregts7742
      @davorlambregts7742 3 роки тому

      did you find a solution for this, cant figure it out. Thanks!

  • @code3144
    @code3144 4 роки тому

    Thanks

  • @kennycreator4800
    @kennycreator4800 4 роки тому

    Hey i'm unable to run emulators on my laptop because of VT-X. Should i be worried or stick to using the QR code for all my cross platform projects?

    • @EstebanCodes
      @EstebanCodes  4 роки тому

      The advantages of the emulator is that you can "test" in multiple devices, but acctually our phone will give you a closer feel of how you app behaves. Don't worry , the only problem is if you are targeting specific code to IOS or Android and you need to test that

  • @dhilipkumar5905
    @dhilipkumar5905 3 роки тому

    how to solve this problem bro?
    Development-level warnings: ON.
    Performance optimizations: OFF.

  • @omarkhan5223
    @omarkhan5223 3 роки тому

    I keep getting errors and i've been trying this for DAYS.
    Whenver I write "import * as Location from 'expo-location';" I keep getting errors that
    Unable to resolve module expo-location from C:\User...
    Anyone run into a similar problem, I can literally not even start this project. :(

    • @EstebanCodes
      @EstebanCodes  3 роки тому

      Did you install the package? expo install expo-location
      If you installed the package you may be having some cache issue then.
      expo start -c
      you can run that the next time you start the project to clear the cache, if the issue persists you can delete your node_packages and re install them

    • @omarkhan5223
      @omarkhan5223 3 роки тому

      @@EstebanCodes Omg that worked! Thank you! But when do you do that in the video? I must've missed it.. Regardless, it's working now! :D

    • @omarkhan5223
      @omarkhan5223 3 роки тому

      Nvm, it's at 18:43... i'm just a bad listener lol

  • @nenadtsvetanovski1955
    @nenadtsvetanovski1955 3 роки тому

    Good example, but too many unnecessary divs/Views. If you open this app on the browser and inspect the DOM tree..

  • @sani-us-nainrajpoot7382
    @sani-us-nainrajpoot7382 3 роки тому

    please tell the theme of VS code

    • @EstebanCodes
      @EstebanCodes  3 роки тому

      For this project is this one
      marketplace.visualstudio.com/items?itemName=ahmadawais.shades-of-purple

  • @kamalsaxena1384
    @kamalsaxena1384 4 роки тому +1

    Plz use background white theme for better understanding code

  • @xtordngy
    @xtordngy 4 роки тому

    thumbs up

  • @israel333666
    @israel333666 4 роки тому +1

    suscribed can you to make a delivery food please

  • @angieacerohernandez231
    @angieacerohernandez231 4 роки тому

    Cuanto cobras por una tutoria_acompañamiento gracias

  • @Karrie8333
    @Karrie8333 4 роки тому +1

    Please make THIS VIDEO with REACT NATIVE WITHOUT EXPO

    • @EstebanCodes
      @EstebanCodes  4 роки тому

      Should almost be the same with the react native cli, the only difference migh be that you will need to use @react-native-community/geolocation instead of expo-location

  • @hvaandres
    @hvaandres 4 роки тому

    How do I fix this issue node_modules/expo/AppEntry.js: [BABEL] ? github.com/hvaandres/WeatherApp_React

  • @caglarpeker2885
    @caglarpeker2885 4 роки тому +1

    Hi
    const location = await Location.getCurrentPositionAsync();
    wait forever why do this :)

  • @davidhaller2013
    @davidhaller2013 4 роки тому

    I'm getting this error on importing key from .env
    App.js: [BABEL] /home/michael/react-native/weather/App.js: Unknown option: .name. Check out babeljs.io/docs/en/babel-core/#options for more information about options.

    • @EstebanCodes
      @EstebanCodes  4 роки тому

      Hey , How does your babel.config.js looks like ?

    • @davidhaller2013
      @davidhaller2013 4 роки тому

      @@EstebanCodes module.exports = function (api) {
      api.cache(true);
      return {
      presets: ['babel-preset-expo', 'module:react-native-dotenv'],
      };
      };

    • @EstebanCodes
      @EstebanCodes  4 роки тому +3

      @@davidhaller2013 I think I found the issue, there was a recent upgrade of react-native-dotenv that is causing this problem
      Please install the package if you are using yarn, like this
      yarn add -D react-native-dotenv@0.2.0.
      or if you are using npm
      npm install --save-dev react-native-dotenv@0.2.0

    • @lokeshsingrol
      @lokeshsingrol 4 роки тому

      @@EstebanCodes -> yarn add -D react-native-dotenv@0.2.0
      works for me :)

  • @gearyaudie345
    @gearyaudie345 4 роки тому

    Watch in 1.25x speed

  • @dxbminer7629
    @dxbminer7629 3 роки тому

    you are falling asleep in 3...2...1...

  • @yogadiary8584
    @yogadiary8584 4 роки тому

    I followed the tutorial for about 26 minutes, I couldn't see the Alert of Latitude and Longitude on my emulator.

  • @devanshchaudhary7976
    @devanshchaudhary7976 2 роки тому +1

    Rajat bhai real ID se aa na 😂😂😂

  • @LucasAlves-yf8pf
    @LucasAlves-yf8pf 3 роки тому

    parei no 1:55:00

  • @kelolettek3927
    @kelolettek3927 3 роки тому +1

    difficult to understand your explanation

  • @gamershaven-789
    @gamershaven-789 4 роки тому

    make app chat react native + firebase

  • @chetannimbalkar1853
    @chetannimbalkar1853 4 роки тому

    you sound like ben awad