Create a List of Items with a React Native ListView

Share this video with your friends

Send Tweet

In this lesson we'll use the ListView component to render a list of items that were entered. We'll show how to setup a ListView.DataSource and how to render custom rows with performance in mind.

orassr
orassr
~ 7 years ago

Hi ! stuck at the same point You can review my code : https://github.com/orassr/ReactNative

Jason Brown
Jason Brown(instructor)
~ 7 years ago

I've gone ahead and added in syntax fixes as a PR https://github.com/orassr/ReactNative/pull/1

Jason Brown
Jason Brown(instructor)
~ 7 years ago

For those watching, it appears I misspelled Keyboard.dismiss as Keyboard.dimiss.

This is no longer needed either as you can pass keyboardDismissMode="on-drag" as found in the React Native ScrollView documentation here https://facebook.github.io/react-native/docs/scrollview.html#props

orassr
orassr
~ 7 years ago

Thank you for the quick respond !

orassr
orassr
~ 7 years ago

still not working after changes setState(...):Expected the last optional callback arguments be a function. instead received: Array(keys:0).

Jason Brown
Jason Brown(instructor)
~ 7 years ago

You are calling setState here https://github.com/orassr/ReactNative/blob/master/app.js#L51 instead of setSource.

Also here https://github.com/orassr/ReactNative/blob/master/row.js#L8 you are referencing style.text and it should be styles.text. If you fix those it will work.

orassr
orassr
~ 7 years ago

Fixed ! thank you for your patience.

sinewave440hz
sinewave440hz
~ 7 years ago

Nice tutorial! Could you explain why/how you are showing that three-tiered symbol instead of !== in your datasource snippet? It may not be immediately obvious to all that they are equivalent...

G. Tyler Sustare
G. Tyler Sustare
~ 7 years ago

I'm using the create-react-native-app, and since there is no tutorial on egghead using this tool I decided to follow along with this one. The course was going great until I ran into an issue with this video. The error is:


ScrollView has no propType for native prop RCTScrollView.contenInsetAdjustmentBehavior of native type UIScrollViewContentInsetAdjustmentBehavior If you haven't changed this prop yourself, this usually means that your versions of the native code and JavaScript code are out of sync. Updating both should make this error go away.


However, my Xcode is up to date and I'm using node v6.11.5. Any ideas on where I might be able to go from here?

Alex Booker
Alex Booker
~ 7 years ago

Seems as though ListView is deprecated https://facebook.github.io/react-native/docs/listview.html