[Request: TableViewIOS] directly wrap UITableView with a TableViewIOS component #332
Comments
gabro
changed the title
|
This was brought up a few times during the private beta. @vjeux , have you guys given any more thought into this? |
|
We're unlikely going to provide it ourself as I don't forsee any use case for it in the apps we're going to build. But this would be a fantastic component to be built by someone in the open source community :) |
|
Unfortunately we don't have any news here. We originally had a UITableView wrapper, but the UITableView API is not well suited for the asynchronous nature of ReactNative, and the resulting code was pretty gross, especially when trying to do smooth animations to grow the heights of rows, which we do in the groups app. We might revisit this and provide a separate TableViewIOS component that is a wrapper for the use cases you want, but we don't have a concrete plan at this point.
|
|
Thanks for the feedback. My point was also to raise a warning: the drill-down application where you add/delete/sort rows and see details of each one is for iOS development what a ToDo app is for JS, i.e. it's pretty much the first non-trivial app anyone approaching native development will try to build. Right now this is slightly cumbersome, hence my concern. @sahrens, any chance to take a look at the original Thank you again guys for the great work! |
|
I think collection views addition would be awesome and it is easily deprecating table views on ios. — On Fri, Mar 27, 2015 at 7:20 PM, Gabriele Petronella
|
|
@yosit As for now, table views are way more powerful for one-dimensional lists than collection views. Editing, reordering, etc. There's no comparison. |
|
Conclusion: The more difficult things is the only that facebook don't want to do it xD Facebook engineers could do it in 1 hour :D @salutis For an API to develop mobile apps to have a list is required. |
|
I also think this would be a must-have component for a lot of applications out there |
|
👍for implementing table view. |
|
What's not feeling right with your styling? I'm using pretty minimal "tableview" styles and I can't tell the difference. |
|
What I thought was actually the native table cell view. Reimplementing the table view seems not necessary. |
|
Ping me if you implement this, I'm very interested in seeing the result! But given that there are no plans to implement this in the core at the moment I'm going to close the issue! |
|
@brentvatne Should this have been closed? I still think that UITableView is an important feature of iOS that users are accustomed to (swiping to delete, re-ordering, etc), and at the moment ListView just isn't the same thing. This would definitely be a nice feature to have. |
|
Of course not @kevindeleon . The ListView doesn't looks native! It is an horrible implementation! You know the official response. It is open source. Up to you xD |
|
@kevindeleon - let's move discussions about features that aren't on the roadmap for core into here: https://discuss.reactjs.org/t/react-native-components-that-you-want-to-see/523 |
|
On second thought, this seems to be pretty important to a lot of people so let's just keep it open here |
brentvatne
changed the title
|
@danicomas: besides missing features, what makes you think ListView doesn't feel native? |
|
@sahrens I had problems in performance with a lot of rows. I have to try the latest version to verify again. |
|
Perf is something we're actively working on and isn't as simple as just using UITableView - we need to properly support view recycling at a low level. Did you try playing with removeClippedSubviews and the various tunable props on ListView like pageSize? Those were critical optimizations for getting good scroll perf in the Facebook Groups app.
|
|
@brentvatne thanks. @sahrens For me, the need is less about performance issues in ListView and more about being able to provide features that are available in UITableView that aren't readily available in ListView (like swipe to delete, reordering, etc...). ListView is nice, but it's just not the same thing, and it would be nice to have the ability to use either. |
|
I agree with @kevindeleon. |
|
Yup, totally agree on more features being needed, just wanted to make sure there wasn't anything else broken ;)
|
|
@sahrens - it looks like removeClippedSubviews on ScrollView does nothing, only on |
|
|
look at this guys, another react-native like hybrid UI solution for iOS, written in Objective-C/C. https://github.com/hackers-painters/samurai-native here is an UICollectionView example (also support UITableView and all the other UIKit native components), it's amazing and really can works on your phone and iOS-simulator: <!DOCTYPE html>
<html class="no-js no-scroll" lang="">
<head>
<title>Shot</title>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="description" content=""/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="navbar-bg-color" content="#e5508c"/>
<meta name="navbar-tint-color" content="white"/>
<meta name="navbar-text-color" content="white"/>
<link rel="stylesheet" type="text/css" href="../../css/reset.css"/>
<link rel="stylesheet" type="text/css" href="../../css/main.css"/>
</head>
<body>
<RefreshCollectionView id="list" name="shot" class="list" columns="1" is-vertical>
<UICollectionViewCell name="author" is-static is-row>
<div class="author-wrapper" onclick="@selector(viewProfile:)">
<img class="author-avatar" name="avatar"/>
<div class="author-attribution">
<div class="author-title" name="title">Portfolio concept</div>
<div class="author-subtitle">by <span class="author-name" name="name">Vadim Sherbakov</span></div>
</div>
</div>
</UICollectionViewCell>
<UICollectionViewCell name="shot" is-static is-row>
<div class="shot-wrapper">
<img name="img" class="shot-img" src="http://img.hb.aicdn.com/90b96d207b752453ca2cef1d29af382637342086f507-9rHNhW_fw658"
onclick="@selector(viewPhoto:)" />
</div>
</UICollectionViewCell>
<UICollectionViewCell name="attr" is-static is-row stick-top>
<div class="shot-attribution-wrapper">
<div class="shot-attribution">
<div class="shot-segment">
<div class="shot-segment-wrapper">
<!-- <img class="shot-segment-icon" src="icon-views.png"/> -->
<span class="shot-segment-count" name="views">6770</span>
<span class="shot-segment-suffix">Views</span>
</div>
</div>
<div class="shot-segment">
<div class="shot-segment-wrapper">
<!-- <img class="shot-segment-icon" src="icon-views.png"/> -->
<span class="shot-segment-count" name="comments">19</span>
<span class="shot-segment-suffix">Comments</span>
</div>
</div>
<div class="shot-segment">
<div class="shot-segment-wrapper">
<!-- <img class="shot-segment-icon" src="icon-views.png"/> -->
<span class="shot-segment-count" name="likes">591</span>
<span class="shot-segment-suffix">Likes</span>
</div>
</div>
</div>
</div>
</UICollectionViewCell>
<!--
<UICollectionViewCell is-row stick-top>
<div class="comment-header">
<img class="comment-icon" src="icon-views.png"/>
<span class="comment-text">COMMENTS</span>
</div>
</UICollectionViewCell>
-->
<UICollectionViewCell name="comments" class="comment-cell" is-row onclick="@selector(viewComments:)">
<img class="comment-avatar-img" name="avatar"/>
<div class="comment-attribution">
<p class="comment-name" name="name">Eddy Gann</p>
<p class="comment-body" name="text">Just a suggestion for a feature that means a lot to me: In-app web browser (so we can add the shot to buckets and like it.) Just adding a button to show it as it would appear in a mobile browser so we have access to the like button.</p>
</div>
</UICollectionViewCell>
</RefreshCollectionView>
<style>
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-color: #e5508c;
}
.list {
display: block;
width: 100%;
height: 100%;
}
.author-wrapper {
display: block;
width: 100%;
height: 54px;
}
.author-avatar {
display: block;
margin-top: 8px;
margin-left: 12px;
float: left;
width: 32px;
height: 32px;
border-radius: 18px;
border-width: 2px;
border-color: white;
background-color: #999;
}
.author-attribution {
display: block;
margin-top: 10px;
margin-left: 12px;
float: left;
width: auto;
height: 32px;
}
.author-title {
display: block;
width: auto;
height: 50%;
line-height: 16px;
color: #fff;
text-align: left;
font-size: 14px;
font-weight: lighter;
}
.author-subtitle {
display: block;
width: auto;
height: 50%;
line-height: 22px;
color: rgba( 255, 255, 255, 0.5 );
text-align: left;
font-size: 12px;
font-weight: lighter;
}
.author-name {
margin-left: 4px;
height: 100%;
line-height: 22px;
color: #fff;
font-size: 14px;
font-weight: lighter;
}
.shot-wrapper {
display: block;
width: 100%;
height: auto;
margin-bottom: 2px;
}
.shot-img {
display: block;
margin: 0 auto;
width: 98%;
height: equals(width);
background-color: #eee;
border-radius: 2px;
border-width: 2px;
border-color: white;
content-mode: fill;
}
.shot-attribution-wrapper {
display: block;
width: 100%;
height: auto;
margin-bottom: 5px;
}
.shot-attribution {
display: block;
width: 100%;
height: 34px;
background-color: #e34383;
}
.shot-segment {
display: inline-block;
float: left;
width: 33.3%;
height: 100%;
}
.shot-segment-wrapper {
display: block;
margin-left: auto;
margin-right: auto;
width: 100px;
height: 100%;
}
.shot-segment-icon {
display: inline-block;
margin-top: 6px;
width: 18px;
height: 18px;
content-mode: center;
}
.shot-segment-count {
display: inline-block;
margin-left: 4px;
width: auto;
height: 100%;
line-height: 34px;
color: #fff;
text-align: center;
font-size: 14px;
font-weight: lighter;
}
.shot-segment-suffix {
display: inline-block;
margin-left: 4px;
width: auto;
height: 100%;
line-height: 34px;
color: rgba( 255, 255, 255, 0.6 );
text-align: center;
font-size: 12px;
font-weight: lighter;
}
.comment-header {
display: block;
width: 100%;
height: 30px;
background-color: #fff;
/*box-shadow: 0px 1px 2px #eee;*/
}
.comment-icon {
display: inline-block;
margin-top: 6px;
margin-left: 15px;
width: 18px;
height: 18px;
content-mode: center;
}
.comment-text {
display: inline-block;
margin-top: 6px;
margin-left: 6px;
width: auto;
height: 18px;
line-height: 18px;
color: #666;
text-align: center;
font-size: 10px;
font-weight: bold;
}
.comment-cell {
display: block;
width: 100%;
height: auto;
}
.comment-avatar-img {
display: block;
float: left;
margin-top: 4px;
margin-left: 12px;
width: 30%;
max-width: 32px;
height: 32px;
border-radius: 18px;
border-width: 2px;
border-color: #f0f0f0;
background-color: #999;
}
.comment-attribution {
display: block;
margin-left: 12px;
margin-top: 4px;
margin-bottom: 10px;
width: 60%;
height: auto;
}
.comment-name {
width: 100%;
height: auto;
font-weight: lighter;
font-size: 14px;
color: rgba( 255, 255, 255, 0.5 );
}
.comment-body {
width: 100%;
height: auto;
font-size: 12px;
color: #fff;
}
</style>
</body>
</html> |
|
This thread is going nowhere. Definitely does not belong in the core, which is this repo. Maybe somebody can build a UITableView wrapper and share with the community. Let's close this issue? |
|
Chiming in here based on my experience with ASTableView -- I think it may be a good source of ideas but I would be cautious about porting the architecture straight over to react. I found ASTableView fundamentally hard to use when dealing with asynchronous events, and its implementation had/has some complex locking. It's certainly non-trivial and at the end of the day it doesn't run on Android. |
|
Hi guys, just want to share my proof of concept of react native wrapping a UITableView: https://github.com/mannyvergel/ReactNativeMVTableView To reiterate, this is just a proof of concept, so many things do not function yet. I was able to generate the table from a list of dummy data. The main issue is that there's a flicker when the table cells are refreshing. This is caused by the bridge between the native and the javascript because every cell will call javascript. My knowledge in react native is very limited, I only rely on few documentation and reading the examples and source codes. So I was wondering if it's possible to take a React class, pass it directly to Objective C and generate it there directly? Or another way maybe is to cache it to avoid calling javascript for every UITableView cell. Contributors are certainly welcome. |
|
TBH, if I look at the current inventory of open issues with ListView, i still come to the conclusion that there are problems with that component or an education issue with usage of that component. My specific problem seems to revolve around performance. I have a list of items that need to be rendered and no matter how i try to tweak the three performance parameters, there is always a problem. For example, if i want the list view to render quickly, i set a low number for initialListSize. However, when scrolling, things always catch up, which ends up in an abrupt stop, and rendering taking place. I have yet to find the magic combination of "initialListSize, pageSize and scrollRenderAheadDistance". These issues are exhibited on a fast macbook pro using the iOS simulator, an iPhone 6 and an iPhone 5. |
|
@jaygarcia I love the video on twitter! Is that list view issue the one you showed in the video, where it seems to stop when you drag it? I haven't seen anything like that and I wonder if it has something to do with the gestures getting canceled by some modal dismiss.
|
|
@jaygarcia - Check out my comment at: #499 (comment) Depending on where your performance issues are stemming from - it could help |
|
@sahrens I tried using the |
|
@paramaggarwal it mostly doesn't affect memory consumption, it just helps with scroll performance. However, if your cells contain images or text, the backing stores for those are released when the views are removed from the screen, so that could help to reduce memory (that's a recent optimization though, and may not be in the github trunk yet). |
|
Thanks @nicklockwood. So how is the Groups app currently running on iPhone 4/4s? In my app, I face crashes when scrolling further down on a long feed as the memory just keeps growing! (The fix I have in place currently is to use |
|
@paramaggarwal Groups is using the unloading images feature. If that's not yet implemented on your version, that might explain why you're running out of memory when Groups doesn't. |
|
Makes sense. Thanks @nicklockwood. |
|
I've got big performance problems to display large sets of data - like countries list with ListView. It is terrible. If I want to scroll to last country (like previous user selection) i should set enough timeout, because rendering takes significant time. I don't understand why UITableViewIOS wrapper cannot be included into React distribution. Anyway, for a while, i've created UITableView-wrapper component by myself, maybe it could be useful for community. It also supports JSON sources so data could be loaded directly to iOS, not via JS (otherwise data will be part of generated JS and could significantly affect loading time!): |
|
@aksonov this looks great! It's not a good idea to use the RCT prefix for your classes though. When we eventually introduce our own RCTTableView it will conflict with yours. |
|
Thanks, got it. So is built-in RCTTableView planned for release? Any ETA? |
|
We don't have a specific schedule for it at this time. |
|
I think anyone interesting in working with UITableView should take a look at @aksonov https://github.com/aksonov/react-native-tableview There are some kinks but if enough people are interested we can all work on it as a community. |
|
Wow! Great work @aksonov -- Will have to play around with this when I get a chance. Just curious, does it support swipe actions such as swipe to delete? I believe it's commitEditStyling |
|
No at this moment. If enough people will be interesting, i will include it to the roadmap. If you want to implement it, PR is welcome.
|
|
@aksonov How is the perfomance in an iOS 7.1 iPhone 4? |
|
@danicomas Sorry, don't have any idea, maybe you could check. The component supports JSON from app bundle, in this case performance will be the same as in native UITableView (actually that is main use case of the component - to display long lists effectively, like list of countries - ListView cannot do it now). Potentially it could support any 'native (objective-c) datasources, but it requires objective-c / swift programming. One problem I want to solve now, maybe FB team could advise something - implement real 'factory' for UITableiView cells from JS code. For now i can only pass concrete view for concrete cell - so performance will be not good for large lists because cells will be not reused. I guess it is almost impossible to implement because objective-c code could call JS method only in async way... |
|
This thread should be closed. The FB team has almost unanimously said that they feel that such a component does not belong in RN Core. ListView is a fine UI component and is extremely flexible, sans some bugs that could be worked out. @ide @brentvatne, this should be closed. |
|
@jaygarcia I don't think this thread should be closed, UITableView in core would go along way in increasing the utility and longevity of the project. Its simply tricky and probably a bit time consuming to do @nicklockwood said back in Aug. there's simply no set schedule for this. That said, the suggested components area is most definitely not the place for UITableView discussion |
|
+1 |
|
Please use https://productpains.com/product/react-native/ to report requests. |
|
Given the lack of activity on this, and the success of Product Pains, I'm closing this issue to help with cleanup. |
and others
According to #143,
ListViewis a thin wrapper around aUIScrollView.I'm totally ok with that, however, after trying React Native for a simple app, I really miss a real
UITableView, which is probably one of the most pervasive components in any iOS app.The most unsettling thing so far (I didn't explore much) is the look and feel. In order to achieve a default iOS7-looking table view (with line separators and disclosure indicators on cells, for instance) it's kind of a lot of customization work on top of
ListView.What I ended up with after a few experimenting still doesn't feel like native. Of course one could go through the effort of carefully providing style for the underlying
UIScrollView, but honestly, what's the point? :)Here's a list of features - from the top of my head - we would get "for free" by providing a native wrapper for
UITableView(andUITableViewCell):Bottom line, what we have so far is an extremely cool and powerful framework for building native apps, which fails at providing a native look&feel for one of (the?) the most common iOS views.
tl; dr I can't imagine iOS native development without
UITableView. Please provide aTableViewIOScomponent :)The text was updated successfully, but these errors were encountered: