10 Must-Have React Native Components 😎

Поделиться
HTML-код
  • Опубликовано: 19 июн 2024
  • Speed up your React Native app development with these 10 components. Don't reinvent the wheel with every new project!
    🔥 Learn React Native FAST: galaxies.dev
    The components:
    1. Bouncy checkbox github.com/WrathChaos/react-n...
    2. Bottom sheet github.com/gorhom/react-nativ...
    3. Gifted Chat github.com/FaridSafi/react-na...
    4. Charts github.com/FormidableLabs/vic...
    5. Toast github.com/calintamas/react-n...
    6. Skeleton github.com/danilowoz/react-co...
    7. Pager view github.com/callstack/react-na...
    8. Blur view docs.expo.dev/versions/latest...
    9. Calendar github.com/wix/react-native-c...
    10. FlashList shopify.github.io/flash-list/
    #############################
    ❤️ You can also find me on:
    Twitter: / schlimmson
    Instagram: / simongrimm_
    #############################
    #reactnative #reactjs
    📌Chapters:
    00:00 Intro
    00:31 Bouncy checkbox
    01:03 Bottom sheet
    01:43 Gifted Chat
    02:33 Charts
    03:24 Toast
    04:05 Skeleton
    05:16 Pager view
    06:28 Blur view
    07:32 Calendar
    08:32 FlashList
    09:26 Outro
  • НаукаНаука

Комментарии • 108

  • @galaxies_dev
    @galaxies_dev  7 месяцев назад +6

    Become an Expert React Native Developer @ Galaxies.dev and join our space crew 🚀

  • @Flash136
    @Flash136 7 месяцев назад +30

    React Native has so many packages and libraries that just don't get enough attention. Awesome video!

    • @galaxies_dev
      @galaxies_dev  7 месяцев назад +2

      Completely agree, that's what makes the ecosystem so powerful!

    • @fluffybunny510
      @fluffybunny510 3 месяца назад

      Only issue is , it makes your apk 186 mb

    • @Flash136
      @Flash136 3 месяца назад

      @@fluffybunny510 Yeah, I did notice APKs got larger recently with SDK 50. There's an option to bring back smaller APKs again, but I don't think it's really worth it for the projects I'm working on.

    • @haiffy
      @haiffy 3 месяца назад

      So is it better to use just one component library (like gluestack ui) that has almost everything or installing many components individually?

  • @jrhager84
    @jrhager84 Месяц назад +1

    So glad some of these packages are getting the love they deserve ❤

  • @cristikrs5686
    @cristikrs5686 6 месяцев назад +11

    Really cool video!
    For number 7, I also recommend react-native-reanimated-carousel.
    I would also recommend react-native-drax. Very good for drag n drop.

  • @peterxavier1
    @peterxavier1 5 месяцев назад +1

    Love your videos. Straight to the point.

  • @ernestogarcia5762
    @ernestogarcia5762 29 дней назад

    Thanks dude! Amazing tips

  • @umitcelik5508
    @umitcelik5508 5 месяцев назад +1

    absolutely useful video content for everyone. ty.

  • @jona1365
    @jona1365 5 месяцев назад +2

    Great Video, especially the gifted chat package will come very handy once i need to implement my chat feature in the future!!

  • @hugopinho9534
    @hugopinho9534 7 месяцев назад +2

    Loved it!! This was really helpful

  • @lutinabeats5730
    @lutinabeats5730 6 месяцев назад

    Thank u! Man! U just save my live with the FlashList and Toast!

  • @domthefounder
    @domthefounder 7 месяцев назад +1

    Appreciate this video 🙏🏽

  • @Alexchtch
    @Alexchtch 7 месяцев назад +1

    Amazing! Please keep doing such great videos!

  • @hwj8640
    @hwj8640 5 месяцев назад +1

    Very helpful, thanks! hope you can share more others

  • @K.Huynh.
    @K.Huynh. 6 месяцев назад

    Thank you so much!

  • @VErmuratski
    @VErmuratski 6 месяцев назад

    Hi Simon, great video thank you from NZ! Just one interesting note, Toast does not show in 0.72.6, do you know about this issue ?

  • @teminoah2960
    @teminoah2960 2 месяца назад +1

    Fantastic information
    Thanks awesome work

    • @galaxies_dev
      @galaxies_dev  2 месяца назад

      Glad you liked it, give it a share :)

  • @anlythree1809
    @anlythree1809 3 месяца назад +1

    Great! 🧠this is all i need!

  • @Howleyy13
    @Howleyy13 7 месяцев назад

    Great! More videos like this please 😊

  • @sachinkanna13
    @sachinkanna13 4 месяца назад

    Big fan, Simon.. Great content in your videos. Highly appreciate it.. Can I have the repo of the app you used in this video?

  • @udaym4204
    @udaym4204 7 месяцев назад +1

    Thank you.

  • @user-su7ew8id4e
    @user-su7ew8id4e 7 месяцев назад

    Great this video helps most!🎉

  • @136machiner
    @136machiner 19 дней назад

    Awesome!

  • @willdunertm5047
    @willdunertm5047 7 месяцев назад

    Omg nice vídeo, love your content ❤

    • @galaxies_dev
      @galaxies_dev  7 месяцев назад

      Happy to hear - give it a share so more React Native devs can find these components 🙌

  • @anlythree1809
    @anlythree1809 3 месяца назад

    great video! and may I ask the Small lights like earth ,I wanna a purchase link😍

  • @denis3451
    @denis3451 7 месяцев назад +1

    I have a Question regarding your Livestream from 15.06.2023 where you build a Ionic Calendar: Do you use Ionic 6 or Ionic 7 in the Stream? And if you´re using Ionic 6, do you think it´ll work with Ionic 7? Would be very important for me to know, thanks!

  • @CatalinMironDev
    @CatalinMironDev 7 месяцев назад +8

    Great job Simon and awesome video. The pager view animation is done by me. I have the tutorial on my channel. ❤

    • @favouritejome
      @favouritejome 7 месяцев назад

      wow, I'm gonna be paying more attention to your channel now

    • @galaxies_dev
      @galaxies_dev  7 месяцев назад +1

      You are the best Catalin ❤️

  • @lak729
    @lak729 5 месяцев назад +1

    Thanks for the wonderful video and knowledge. Is there any package for Blurred text?

  • @favouritejome
    @favouritejome 7 месяцев назад +1

    Thanks Simon

  • @przemekdanysz53
    @przemekdanysz53 7 месяцев назад +2

    Thanks! Great stuff :)
    I'm currently missing one more thing: a DROPDOWN (HTML Select) for RN :)

    • @galaxies_dev
      @galaxies_dev  7 месяцев назад +2

      Good point, maybe I can find 10 more great packages ✌

  • @aymenbachiri-yh2hd
    @aymenbachiri-yh2hd 2 месяца назад +1

    Thank You

  • @oketimilehin8526
    @oketimilehin8526 7 месяцев назад +1

    Great video.

  • @michel.daligou
    @michel.daligou 7 месяцев назад

    For me the best video about React Native for 2023

  • @laxmanadhikari3989
    @laxmanadhikari3989 15 дней назад

    thank you

  • @kwesikayofficial3078
    @kwesikayofficial3078 7 месяцев назад

    Great video

  • @codewithdalvin
    @codewithdalvin 7 месяцев назад +1

    Good video!

  • @bladbimer
    @bladbimer Месяц назад

    Thanks for this new video, honnestly I felt this update not really smooth with all depencies issues with expo doctor but I think this is temporary.
    I am personnaly really confused on the developement build that replaces expo go.
    Basically in a perfect word I would like to do hot reload (the app refresh) automatically on my real personnal android device. As of today I am using Expo go but I am wondering If I can swich to something else when I will have to use more native stuff.
    You mentionned you talked about it alreay, I just wasn't lucky to find the video so by any chance if you can share me the link this will help me a lot.
    Thank you.

  • @alok.01
    @alok.01 2 месяца назад

    How did you enable the underline and vertical line to show the code segment in vscode

  • @hssdiv
    @hssdiv 4 месяца назад

    You can actually customise that calendar lib to allow selecting date-ranges, I remember finding somebodys solution for that in their github issues

    • @galaxies_dev
      @galaxies_dev  4 месяца назад

      Nice, thanks for pointing out!

  • @ahmedmehana7690
    @ahmedmehana7690 7 месяцев назад +1

    Awesome ❤❤❤ can you make more videos about components 🔥🔥🔥🔥🔥🔥🔥
    And i need how to build great carousel....
    And i need also how can I build login with Google in easy way ...
    And some videos about animation...
    And i want make search bar linked with flatlist ....
    ❤❤❤❤❤❤❤
    I'll wait for these videos 🔥 becoz Y can explain everything in easy way ❤️❤️🔥

  • @samuelabidoye6642
    @samuelabidoye6642 4 месяца назад

    I'm just new to react native development and want to buy a macbook for development. Pls any recommendations on a good laptop that will perform the tasks smoothly, also am on a tight budget

  • @chrishernandez8914
    @chrishernandez8914 4 дня назад +1

    I'm big fan this video 👌

    • @galaxies_dev
      @galaxies_dev  9 часов назад +1

      If you enjoyed it, maybe you can share the channel with your RN colleagues ✌️

  • @tobisamuel8940
    @tobisamuel8940 2 месяца назад +1

    Awesome

  • @AmOfGod
    @AmOfGod 7 месяцев назад

    Liked and subscribed

    • @galaxies_dev
      @galaxies_dev  6 месяцев назад

      Happy to hear that - would be awesome if you could share my channel with others 🙌

  • @peterkaranja60
    @peterkaranja60 7 месяцев назад

    A question on the last tool Flashlist. I see you have give your data a flex direction of row but your list is still displayed in a column is that a bug or does flashlist not support horizontal view

    • @kodraa
      @kodraa 7 месяцев назад +1

      each rendered item has a flex direction of row, not the list component. notice that the image and text are next to each other, not vertically laid out

  • @the_ashhar
    @the_ashhar 5 месяцев назад +1

    DANMNMNM. thats great!!

  • @matthewtesimale6434
    @matthewtesimale6434 7 месяцев назад

    What are your thoughts on the components in Ark UI? Made by same creators as ChakraUI

  • @domthefounder
    @domthefounder 7 месяцев назад +1

    Wish the Skelton view was just a wrapper, maybe they’ll do that in future

    • @galaxies_dev
      @galaxies_dev  7 месяцев назад

      Maybe ask the creators on the Github repo about it?

  • @SonAyoD
    @SonAyoD 4 месяца назад +1

    More please

  • @davidattah1629
    @davidattah1629 7 месяцев назад

    Hello Simon, For gorhom bottom Sheet How do you darken the background when the bottom sheet is active? ... Also with the toast pkg. I tried calling the toast from my context file but it keeps failing.. Any way around this?

    • @galaxies_dev
      @galaxies_dev  7 месяцев назад

      You can use the backdrop component and simply specify your own colors, check out my tutorial here as well: galaxies.dev/react-native-bottom-sheet
      For the toast, you need to add at the root of your layout and then call it from anywhere inside your app!

  • @ricko13
    @ricko13 2 месяца назад

    i know this is an old video, but what up with all those bandages Simon?

    • @galaxies_dev
      @galaxies_dev  2 месяца назад

      Pain in the left elbow and right hand - luckily both have improved a lot (now dealing with back pain instead) 😂

  • @yeasinarafat3895
    @yeasinarafat3895 5 месяцев назад +1

    I like gifted chat

  • @malekimam1444
    @malekimam1444 7 месяцев назад

    Which is better, using these kinds of Components or using a UI library (e.g. react-native-paper)?

    • @galaxies_dev
      @galaxies_dev  7 месяцев назад +1

      I think you can do both, they usually offer some great features while a styling library is more a general "theme" for your app and standard components like buttons!

  • @hafeezshaikh8189
    @hafeezshaikh8189 4 месяца назад

    These work on Expo too?

  • @marcbentoy
    @marcbentoy 4 месяца назад

    Is it also possible to build desktop application with React Native?

    • @galaxies_dev
      @galaxies_dev  4 месяца назад +1

      Yes, might have to create a video about that!

    • @marcbentoy
      @marcbentoy 4 месяца назад

      @@galaxies_dev Awesome! Would love to see that video soon..

  • @beane777
    @beane777 5 месяцев назад

    Please Do they all work in expo ?

    • @galaxies_dev
      @galaxies_dev  5 месяцев назад

      I'm not sure, but you can easily do a prebuild nowadays!

  • @Roman_Kuts
    @Roman_Kuts 4 месяца назад

    I can not successfully install the 'Bottom sheet', I keep getting errors and the app stopped assembling

    • @Space.Man.X
      @Space.Man.X 3 месяца назад

      Hey I can do that very very easily I can share you the code if you want! It's really easy!

  • @dev_jun
    @dev_jun 2 месяца назад

    Are they compatibility with expo go

    • @galaxies_dev
      @galaxies_dev  2 месяца назад +1

      That's not a criteria anymore, just do a prebuild and you are fine.

    • @dev_jun
      @dev_jun 2 месяца назад

      @@galaxies_dev please make a dedicated video on fully explaining expo prebuild

  • @davidattah1629
    @davidattah1629 7 месяцев назад

    Hey Simon.. whats wrong with your hand?

    • @galaxies_dev
      @galaxies_dev  7 месяцев назад

      IDK some inflammation, been having problems for months now but working on it 💪

  • @bharath2508
    @bharath2508 7 месяцев назад

    React native vs flutter,
    Which is best?
    What are the pros and cons of each?

    • @galaxies_dev
      @galaxies_dev  6 месяцев назад

      RN is most likely a better choice, working on a new video about that!

  • @Boogeyman300
    @Boogeyman300 5 месяцев назад

    Can we get the code for these components, instead of adding them as packages

  • @JkeyKong
    @JkeyKong 7 месяцев назад

    1st

  • @usmanmarkaz
    @usmanmarkaz 7 месяцев назад

    why you prefer Expo there is Future of expo.Everyone is use CLI so plz make video on CLI next time

    • @galaxies_dev
      @galaxies_dev  7 месяцев назад

      Expo is the future of React Native.