Settings

Theme

Better List Views in React Native

facebook.github.io

57 points by HectorRamos 9 years ago · 7 comments

Reader

amelius 9 years ago

I'm not a React user, but I'm a little surprised that they are offering well-performing list-views only now. Is this specific to React Native? And if so, why is there a distinction with React in the browser?

  • banashark 9 years ago

    To my knowledge, making cross-platform performant listviews is quite the challenge. I remember listening to a lot of xamarin engineers talk about the fickle performance gotchas with using them.

    The platforms have different ways of exposing various attributes about list and list-items. The API designers then must focus on the trade-off of user friendliness vs control and performance. Thus far it's been about user friendliness, but now they are wading in the waters of control/performance.

    That's the reason why there are multiple list views being added, instead of just a single one.

  • hboon 9 years ago

    React Native doesn't render UI in a web view as a webpage, instead it uses native components. Some are direct wrappers around their native counterparts, but some components while native are "emulated", eg. ListView is built on top of a native plain view.

    Lists (e.g. UITableView on iOS) are one of the most complex UI components on mobile and might be hard to wrap nicely across iOS and Android, so my guess is they just didn't have time to do it right.

    • nostrademons 9 years ago

      Ironically, there's now a backport of React Native back to the web, which renders the stock React Native components using vanilla <divs> and <spans>.

      https://github.com/necolas/react-native-web

      If you're doing cross-platform prototyping, it can actually be easier than writing the app in React (or vanilla JS) and then porting to React Native, because the React Native elements are at a slightly higher semantic level of abstraction than stock DOM elements. The markup it generates is pretty atrocious, but if you just want to get something up on the screen, you can work out your design compromises first and then optimize it.

      • hboon 9 years ago

        Wow. Thanks for sharing. This is quite nice. If done well, maybe it can enable some kind of playground, cross-platform editing. E.g. an editor on iPad.

  • elastic_church 9 years ago

    No React Native is the awesome future right now and this shall go unquestioned!

    But yeah seriously, some pretty basic stuff is neglected and this is a reassurance that there are people at Facebook who are working on it. Listviews are complicated, but pretty much a prerequisite for mobile apps.

Keyboard Shortcuts

j
Next item
k
Previous item
o / Enter
Open selected item
?
Show this help
Esc
Close modal / clear selection