React Native Tutorial #6 - Lists & ScrollView
Vložit
- čas přidán 7. 08. 2024
- Hey gang, in this React Native tutorial we'll talk about how to display lists of data in our apps. To do this we also need to look at a component called ScrollView, which allows us to scroll through long lists that are bigger than the area available on the screen
----------------------------------------
🐱💻 🐱💻 Course Links:
Course files - github.com/iamshaunjp/react-n...
🐱💻 🐱💻 Other Related Courses:
+ Complete React Tutorial - • Complete React Tutoria...
+ React Hooks & Context Tutorial - • React Context & Hooks ...
+ Modern JavaScript Tutorial - • Modern JavaScript Tuto...
I sincerely want to take a minute here and thank you for your videos. They are truly informative and easy to comprehend. You simplify and make web development fun to such an extent that its started to become an addiction!
Thanks so much :)
I started learning react not long ago and I got into problems pretty quickly and every time I got on your video I've understood everything. Thank you so much!
easy to see how much programming experience you have - your approach is evidence enough for that. very good and straight forward.
After learning the react and getting the job as a React Dev, It's time again from our very own shaun to get started with Native
I love how you explain every video. thank you for your kindness :)
Thank you so much...! Your videos helped me catch up with react native very fast.
As always awesome explanation 💥
thank youuuuuuu i was stuck on somthing for 2 weeks this video helped me finaly all the love for you
Awesome tutorial. Very concise and well for newcomers to React and devs with React experience who want to learn Native.
this playlist is supreme!
Thank you so much!
Thanks for the series, really helpful
Thanks for sharing the return shortcut!
thank you , it's very clearly and very cool for me. Cheers! from indonesia
ay thx bruh this helped me no cap
This tutorial is really top notch. Signed up to your Patreon as well, (but would have preferred a more direct way to support). Thank you!
Amazing as usual 😊
Very good tutorial
very simple best teacher
Thank you for doing this
Thank you so much..please jaldi upload kro sir
Thanks for this video
Absolutely awesome 😎 I would suggest an advanced paid course for react native 🤞
Nice tutorial, How can i do this for dynamic data like data in array to useState and then use it for scrollview
Could you make a video comparing Flutter and React Native? Thanks always!
Very good tutorial thank you for this))
You are welcome!
Hi, as always this is a very nice video. But May I ask, what is the name of your theme on your vscode. Cause I Like The Colors ! Thanks
You're good teacher :)) Btw, what's your theme? I like it too
How does this work if you already have a component made? I'm trying to put components within a scrollview however keep a text input at the top outside of it. When I do this it distorts the styling of the component and says I can't alter the style unless the entire page is within the scroll view
How can I make the ScrollView start in the bottom? Like a Chat App for example
why we need {} wrapped around people.map() and whats dynamic code?
🔥🔥🔥
please please please a request create a vide explaining how to add google fonts i create and added font but when i run the app it says openSans font is not found in the system but when i check edit exists in the system
good
I just want to add something:
Adding the key to every object (person) is not necessary; when you call the map function, you can pass a second argument: index; this index totally works as a key and you can use it.
Idk if that's clarified in the next videos but just in case.
Also, thank you very much for your time
You are partially correct here, what you stated above can lead to issues.
According to react docs:
"The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. Most often you would use IDs from your data as keys. When you don’t have stable IDs for rendered items, you may use the item index as a key as a last resort. We don’t recommend using indexes for keys if the order of items may change. This can negatively impact performance and may cause issues with the component state."
Reference: reactjs.org/docs/lists-and-keys.html#keys
@@ankurkumar4552 thank you very much!
Can't we make the outer View as ScrollView directly?. This will also the same results I believe
I think in this case, they are the same because there is no any other view in the outer view besides this list, but if you have some other views on the top of this list and you don't want them to be scrollable, you have to add ScrollView onto the list..
how do we cancel the project when we are taking a break or going to bed?
what's setPeople in there ?
Flutter is good or React native in 2020
Is anyone having an issue where if you press one of the touchable Components, all of them disappear ?
I get the key error even after adding key prop to returned View
$ git checkout lesson-6
error: pathspec 'lesson-6' did not match any file(s) known to git
how can i add a search bar to this list?
very good bro
but 1 thing it also giving me child error in list i use item.key but it not work
Please make an e commerce application on React Native !
I am having problem in downloading expo guide us through ninja it showing invalid regular expression
Try this github.com/expo/expo-cli/issues/1074#issuecomment-546167583 or downgrade node.js to 12.9 or older.
github.com/facebook/react-native/issues/26598
Is it only me or JavaScript's Functional Programming syntaxes are exactly like Scala? Fortunately I learnt Scala before Node so I had minimum problems with the lambdas and whatnot.
strange, for me the ScrollView is not working
Please connect backend
No lesson 6 on github
Who are you who are so wise in the ways of science?
6 months ago I use map like you but now I changed. it is not for me to say master but you dont have to add key to the list in the state. here is another aproach:
(list is the same without key property)
{people.map((item, index) => {
return (
{item.name}
)
})}
This is not a recommended method for the keys. Check out the React documentation
@@ArtVandelayIncIt is totally fine in certain conditions. It says:
"When you don’t have stable IDs for rendered items, you may use the item index as a key as a last resort:"
usually I dont have stable ids. because if i have stable ids, i use the id as key.
@@yapayzeka hi thank you for this tip. I have a question if you dont mind. How do I output the data if each item has a dirfferent variable name? For example, instead of having name for each item. It has this
{name: "John"},
{name2: "Mike"},
{name3: "Tom"}
@@rajairfan2768 dude quit react asap! come to svelte 👌🏻
@@yapayzeka I've heard about Svelte, but I'm already progress too far in my final year project. So I cant change at this point
quick side note : use shift + RR (2 Rs) to refresh the emulator. or command + M.
Ctrl + S works for me
Cmd + R in Mac
Hi ninja!
i complete javascrpt for beg.. , PHP for beg ,i know how create responsable web site
but what are after ?? give me the ordre of your playlists;
i need learn all about javascript
plz answer me fastly
*//i have bad english i know :(
//*
Hello, I'd say learn react or angular.
Doesn't map function return a new array???
I was expecting we would use forEach.
your channels name should the react native ninja
this lesson was a bit difficult ngl