Travel App UI Part 1 - Figma to React Native

Поділитися
Вставка
  • Опубліковано 24 гру 2024

КОМЕНТАРІ • 77

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

    Can't stop binging on all your playlists...Thanks for your awesome work

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

      I really appreciate it, thanks so much for the comment 🙌 I'm really happy you enjoy the playlists 🚀

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

    very great and clever programmer thanks for making this series

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

    1 nit is the drop shadow for the bottom tab navigator, which can simply be added similar to the later parts of the series.

  • @ImprovementTheory
    @ImprovementTheory 3 місяці тому

    What extensions do you use for that beautiful folder hover animation? Would love to have that in VS Code myself!

  • @salihalnor
    @salihalnor Рік тому

    Really you're the best❤

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

    Amazing !

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

      Thanks! Happy to see you enjoyed it 😁🔥

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

    It would be nice to have a video with your setup. Couldn't understand quite well that lambda function but I am really interested on it. Great videos btw. Thanks

  • @where-is-donde
    @where-is-donde 2 роки тому +1

    This is a great video! I decided to work with Expo instead of bare React Native 😊 I few things have changed in the last year but nothing super crucial that I wasn't able to figure out. Thank you for creating such an easy to follow content.

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

    Need More React Natives Matt!!! Thanks A lot

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

      I appreciate the comment, coming soooon 😁

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

    Thanks for sharing!!!

  • @lo-ficup
    @lo-ficup 2 роки тому +1

    how to open this project with expo ???

  • @rabeyatasleem9537
    @rabeyatasleem9537 Рік тому

    Will you please mention the name of extension of shortcuts?

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

    Hey Matt, it was nice tutorial. Would you mind making another tutorial working with database?

    • @MadeWithMatt
      @MadeWithMatt  3 роки тому +3

      Thanks, I'm glad you enjoyed it!! Yes absolutely, I'm thinking of making something to do with fetching data from an API soon and also a database 💯

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

    Thanks Matt! I'm learning react and you really help me a lot!

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

      Appreciate the comment, and very happy I could help out 😁

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

    really nice matt.. but i got a problem.. all the icon from Entypo or MaterialCommunityicons are not show up..
    how can i replace it with image from asset folder?

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

      Hey! Are you on Android, if yes it might be because I forgot to include a few steps in the video 😬(sorry about that). Check out these steps which will guide you through the android setup: github.com/oblador/react-native-vector-icons#android

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

      Otherwise, you can always download the icons as PNG and insert them using the tag in react native by adding them in the assets folder and importing them in the file you'd like to use them!

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

    I noticed that in your videos you prefer to use margin (e.g. 20) to give all elements some space from the edge of the device. How come you prefer this to having a container with padding around everything?

  • @ImprovementTheory
    @ImprovementTheory 3 місяці тому

    Matt, I noticed that when I used npx react-native link, the files did not link. I also tried npx react-native-assets and npx react-native-assets link but none of them worked. I used React Native for my project, not Expo, so I'm not sure what's going on. Could you help? Thanks for your time and the video (it was great!)

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

    Great work Matt! I just found your videos and they are amazing! Thanks! I am not sure if you answered this in the first video, but why not just keep one image instead of having a smaller version for the card and the large one for the detail screen?

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

      I'll be honest with you, I don't exactly remember! I think it might've been something about the image getting pixelated, but looking back on it I think one image would have been fine. Thanks for pointing it out 👍

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

      @@MadeWithMatt gotcha ya! Thanks again man!

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

    Which db is best & widely used with react native apps..i am web developor & just started react native apps but unable to decide as i was using & the rest of developers too is using mysql with laravel & sql server with .net etc.

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

    is this writed on Visual studio code?

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

    BRO! Keep it up! Really loving it. 😍 I've been watching these instead of watching movies. :D
    Great! Keep 'em coming! 👌

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

      Ahahaah bro I really really appreciate it means a lot to me!! Ngl I do the same all the time lol

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

      Bro, is there going to be a beginner friendly series? Coming up soon? Would love that BTW. 😍

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

      @@adnanamin1843 YES!! Just to be sure you mean the basics of react native right? I'm thinking of having a bunch of videos to help people get into react native (for ex: the basics of certain complicated components, the basics of styling, getting a simulator up and running, and much more!)

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

      Exactly, Matt! That's what I meant to say. 😊
      Thank you so much for yout hardwork! Much appreciated!! ✌️

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

      @@adnanamin1843 It's support like yours that keeps me going! 😁😁

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

    Matt, I have difficult to run it on windows.

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

    I dont think this works anymore the part about link. npx react-native link. If you get an error, try this instead:npx react-native-asset
    link it seems has been deprecated

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

    Thanks Matt ✨

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

      Thanks for the comment, and I'm really glad you enjoyed it 😁🚀

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

    Oh my god.... So thanks , man)

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

    great - i just have one question on Tab Navigator, can we put marginTop also ? to give it kind of levitating effect - i will practice this tomorrow

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

      If you mean something like this - dribbble.com/shots/10003430-Contact-App-Floating-bottom-navigation - you'd have to make a custom tab navigator component. It's not too complicated to do, lmk if you'd like to see a video about that to help!

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

      @@MadeWithMatt i tried and its done just stuck with 1 thing -
      **when i put position absolute - it will not accept align center, automatically goto starting position
      **without absolute its fine - but i need with absolute position centered

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

      Hmm I see, if I understand correctly, you're having trouble placing the Tab Navigator at the bottom center to make it look like it's floating (correct me if I'm wrong). I'll make a video on that in the near future, but in the meantime check out this stack overflow solution and let me know if it works! stackoverflow.com/a/57775706/13110687

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

      @@MadeWithMatt doesn't work - cant center align bottom tab navigator

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

      ​@@dopeladd Hmm alright I've never done it myself so I'm not exactly sure how to do it, but will make a video on it soon!!

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

    Hi Matt, after adding the fonts, there was an error after inserting npx react-native. it says error not recognizing command link. what should i do? is it because i used expo? I'm sorry if my question does not make sense. I'm still learning.

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

      No worries, it's always great to ask questions! This tutorial isn't using expo, so there is a chance that's why you're seeing the error. Luckily for you though, it's even easier to set up expo with google fonts - you can check out the documentation here docs.expo.io/guides/using-custom-fonts/

  • @dopeladd
    @dopeladd 4 роки тому +2

    Amazing Matt 😄 i started designing really good ui's in react native BUT some issues as i found not purely visible on youtube is
    1. Carousel with Pagination
    2. Change state of button "text" or any element after onPress (basically changing CSS onPress)
    it will be really really helpful if after this playlist you can guide us 🤓 Thankyou so much

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

      That's awesome! Send over your ui's if ever you publish them, would love to take a look 😀
      I'll make some videos on those topics as soon as this playlist is up! In the meantime though, check out my Onboard UI video and let me know if that's what you need for the carousel with pagination -> ua-cam.com/video/A__XR8xNi-g/v-deo.html

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

      @@MadeWithMatt www.linkedin.com/posts/zaybei_reactjs-reactdeveloper-reactnative-activity-6743893188173414400-4cxE
      posted on LinkedIn - code and figma design shared 🤘

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

      ​@@dopeladd Wow! Looks amazing! Keep up the great work 👍

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

    Hey Matt, Great Great Quality Tutorials 🖤, I'm very new to rn and js do you recommend Expo or Cli for learning and creating small to mid size projects? Thx

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

      Great question! I'd recommend Expo. Using Expo gives you less to worry about and is generally easier to use for small and medium projects. Best of luck with what you're working on 🚀

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

      @@MadeWithMatt Hey matt, I have one question regarding the expo, how do I use npx react-native link in expo CLI??

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

    excellent.

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

    Thanks for the video! For future videos could you zoom in or make the font size bigger so it's easier to read, thanks💯

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

      Will do, thanks so much for letting me know and thanks for watching 🚀

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

    Can you make a video how to set up the emulator to test the app ?

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

      Yeah definitely! Will get that one out asap 👍 In the meantime though, here's a link that could help reactnative.dev/docs/running-on-simulator-ios. On ios, it should just be " npx react-native run-ios " or " npm run-ios ", but sometimes it's tougher to get it running the first time around

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

      @@MadeWithMatt thanks

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

    Thank you so much.

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

    need complete RN course pleaseeeeeee

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

      What topics would you like to see covered in a RN course?

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

      @@MadeWithMatt sir i am currently in JS course and want to become app dev using react i need from basics to advance as app developer need

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

      Cool! Thanks for letting me know. I’m the next couple of months I’d love to get a course out. If I do you’ll see it show up on the channel and it would be great to get your feedback

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

      @@MadeWithMatt thank you so much waiting for that precious course

  • @humbertoventura1344
    @humbertoventura1344 8 місяців тому +1

    you need to download and apply react native first

    • @ImprovementTheory
      @ImprovementTheory 3 місяці тому

      Can you please tell me how? I'm not really sure. It throws an error when I apply the CLI commands he says to use. But that's probably because I haven't installed React Native yet.

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

    increase your font size.

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

      Sure! Do you mean in my VS Code or my app font size?

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

      @@MadeWithMatt vs code font size.

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

      @@adityashinde3864 Perfect, thanks for letting me know! The rest of this series has already been pre-recorded, but every video afterwards will be a bigger font 🙂

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

    Figma balls

  • @alamin.primary
    @alamin.primary 2 роки тому

    Subscribe done dear Matt