Using Styled Components to Build a Recipe App UI in React Native

แชร์
ฝัง
  • เผยแพร่เมื่อ 24 ม.ค. 2025

ความคิดเห็น • 58

  • @DesignIntoCode
    @DesignIntoCode  4 ปีที่แล้ว +4

    I have a course coming out on building an Instagram clone from scratch using React Native & Firebase, make sure you sign up to get discounts, release date info and sample chapters! www.instaclone.app

  • @DesignIntoCode
    @DesignIntoCode  4 ปีที่แล้ว +8

    What do you think about styled components? Are they your preferred method? Do you like inline styles, or something else?

    • @manueltaveras3546
      @manueltaveras3546 4 ปีที่แล้ว +1

      Thank God you're using styled component I love style components

    • @manueltaveras3546
      @manueltaveras3546 4 ปีที่แล้ว

      It's so much cleaner

    • @tonykharioki6913
      @tonykharioki6913 4 ปีที่แล้ว

      I have used styled components in building huge web apps and I must say, I like using them in react native too. This is awesome. Thanks

    • @fernandomedina775
      @fernandomedina775 4 ปีที่แล้ว

      How do you use Animated Api with sc?

    • @Chris-mb3zn
      @Chris-mb3zn 4 ปีที่แล้ว

      I'm a bit concerned about the usage of 16px directly - does this not affect React-Native's ability to automatically adjust to different screen sizes? I'm very keen to give styled-components a try but don't want to run into responsiveness issues.

  • @HeronHideki
    @HeronHideki 4 ปีที่แล้ว +2

    OMG!!, Switch in styled text is amazing!

  • @osagiee9553
    @osagiee9553 4 ปีที่แล้ว +6

    Never thought of using a switch statement like that...

  • @mydhe6
    @mydhe6 3 ปีที่แล้ว

    Learning while enjoying the background music. Ended up shazaming the music :)

  • @m__link6499
    @m__link6499 4 ปีที่แล้ว +2

    Very nice vid ♥️!!! I'm your number one follower...Keep going dude.

  • @varshneyabhay
    @varshneyabhay 4 ปีที่แล้ว +3

    This is really AMAZING! Can you create an extension for this video where you can possibly have an animation the card to scroll down to position 0:03 if the user taps/swipes on the card? Sort of how maps does it.

    • @anugupta8711
      @anugupta8711 4 ปีที่แล้ว

      that would be cool if you can do that!

  • @filipemarques542
    @filipemarques542 4 ปีที่แล้ว +4

    Nice video! Can I use your design in one of my projects?

  • @TomiNiyi
    @TomiNiyi 4 ปีที่แล้ว

    He just made me fall in love with react native all over again, cooool😎😎😎. This whole coding is on a Sage level

  • @starverseofficial
    @starverseofficial ปีที่แล้ว

    i want to know one thing, right now i am using styled-component/native for making my component library in react native app, but i am facing performance lag. what should be the ideal css framework for making component lib for react native app?

  • @mirzairshad4063
    @mirzairshad4063 4 ปีที่แล้ว +2

    Amazing keep doing more bro

  • @shkrmkr
    @shkrmkr 3 ปีที่แล้ว

    7:23 If you're using typescript...
    const Text = styled.Text`
    color: ${({ dark }) => (dark ? "#000" : "#fff")};
    ${({ type }) => {
    switch (type) {
    case "title":
    return "font-size: 32px;";
    case "large":
    return "font-size: 20px;";
    case "small":
    return "font-size: 13px;";
    default:
    return "";
    }
    }}
    `;

  • @senoldincc
    @senoldincc 4 ปีที่แล้ว

    Thats really cool man if you can use collapsible header this apps returns must be more delicus :D

  • @thatotwala9723
    @thatotwala9723 4 ปีที่แล้ว +2

    Wow This is amazing, I'm still a newbie to programming.. So can you please tell me where you learned all these?

  • @bhargavaprabureddym9693
    @bhargavaprabureddym9693 4 ปีที่แล้ว

    Nice video!! Love it.💓

  • @AbhishekSingh-ef7rg
    @AbhishekSingh-ef7rg 4 ปีที่แล้ว +1

    Your video is awesome man just a tip all laptop screen sizes are almost 13 or 15 inch so u can increase the font size of the code editor so the user experience will be a lot better.. Thanks Man..!! awesome stuff

    • @DesignIntoCode
      @DesignIntoCode  4 ปีที่แล้ว +1

      I have it as large as I can when recording

    • @AbhishekSingh-ef7rg
      @AbhishekSingh-ef7rg 4 ปีที่แล้ว

      @@DesignIntoCode can't u increase it in the vs code itself..??

    • @DesignIntoCode
      @DesignIntoCode  4 ปีที่แล้ว +1

      Yes, obviously you can increase it. However, the next zoom up, I can get about 4 words per line.

    • @AbhishekSingh-ef7rg
      @AbhishekSingh-ef7rg 4 ปีที่แล้ว

      @@DesignIntoCode ok no issues

  • @thaenuwynn9599
    @thaenuwynn9599 3 ปีที่แล้ว

    I'm not getting auto complete for css, how can i get it?

  • @anag2125
    @anag2125 4 ปีที่แล้ว +2

    Hi! Can I use this video for normal React and not React Native? Thank you!!
    So far your videos look so cool but I'm still learning React alone, not native yet! :D

    • @DesignIntoCode
      @DesignIntoCode  4 ปีที่แล้ว +1

      I’d say for the most part you probably can

  • @mannyquintero2190
    @mannyquintero2190 4 ปีที่แล้ว

    what are the pros of switching from styleSheet objects to Styled components?

  • @mohammedsulthana9305
    @mohammedsulthana9305 4 ปีที่แล้ว +1

    it's better than inline style. But in my vscode there is no auto suggestion for styled-components

    • @DesignIntoCode
      @DesignIntoCode  4 ปีที่แล้ว +1

      I believe there’s an extension for that, but ya it’s definitely not as seamless to use in vscode as just vanilla react

  • @ryannnkl
    @ryannnkl 4 ปีที่แล้ว

    Usar styled-components em um projeto não almenta o tamanho do apk? No caso iria ter vários arquivos com várias Strings isso deveria deixar o apk mior?

  • @SunriseBusinessClub
    @SunriseBusinessClub 4 ปีที่แล้ว

    Is it an app or just one component example?

  • @euvictorguedes
    @euvictorguedes 4 ปีที่แล้ว +1

    What's you theme and font?

    • @DesignIntoCode
      @DesignIntoCode  4 ปีที่แล้ว

      It’s a version of Nord. I think I’m just using source code pro

  • @jennifereileenmartinez2104
    @jennifereileenmartinez2104 3 ปีที่แล้ว

    How can I install expo/vector-icons yesterday I tried and I messed up my project because I tried with several like antd, expo icons and others and I have to start from scratch because I couldn't remove the dependencies, I'm very new at ReactNative. Anyway thanks for your video it's a awesome start to create apps with ReactNative.

    • @DesignIntoCode
      @DesignIntoCode  3 ปีที่แล้ว +1

      Welcome! Are you using expo? If so, no need to install the package, it’s always available. To remove a dependency, just look in your package.json file, remove the one you want, then run npm install.

    • @jennifereileenmartinez2104
      @jennifereileenmartinez2104 3 ปีที่แล้ว

      @@DesignIntoCode Thanks, actually I did it and my project came back but I have to delete all the content related to AntDesing, because as soon as I add it, it just breaks.

    • @DesignIntoCode
      @DesignIntoCode  3 ปีที่แล้ว +1

      Sounds like there’s something not correct in your code. Just having a package installed isnt going to cause any problems, only when you start referencing it. If you post your code related to that and what the errors you’re getting are, I can take a look to see what’s going on

    • @DesignIntoCode
      @DesignIntoCode  3 ปีที่แล้ว

      Also need to know if you are using expo or not...

    • @jennifereileenmartinez2104
      @jennifereileenmartinez2104 3 ปีที่แล้ว

      @@DesignIntoCode I don't know, this is pretty much what I been doing so far. pastebin.com/1twE7qQB

  • @marlonstevendiazlopez2709
    @marlonstevendiazlopez2709 4 ปีที่แล้ว

    good evening
    I have a question for you?
    could you explain to me how your line of learning was to do this kind of things, which I find very interesting, or if you can share with me the information or knowledge you have about the subject
    thank you very much

    • @DesignIntoCode
      @DesignIntoCode  4 ปีที่แล้ว

      Reading, and practice practice practice

  • @romaisaliaquat9308
    @romaisaliaquat9308 3 ปีที่แล้ว

    kindly make a video of the installation of emulator

  • @AislanMiranda
    @AislanMiranda 4 ปีที่แล้ว

    very good!

  • @FelipeAlvesCosta
    @FelipeAlvesCosta 4 ปีที่แล้ว

    Fantastic movie! Thkns

  • @gosnooky
    @gosnooky 4 ปีที่แล้ว +1

    cant really see you're code is to small.

  • @computeearning432
    @computeearning432 3 ปีที่แล้ว

    wow

  • @TheMrchement
    @TheMrchement 3 ปีที่แล้ว

    I like it ❤, but I don't have money for this course

  • @ajithanandan5823
    @ajithanandan5823 4 ปีที่แล้ว

    thank u am learn somthing

  • @pratikpisudde5301
    @pratikpisudde5301 ปีที่แล้ว +1