Error on setState and re-render when using Cell

[rmdort]

setState and re-rendering works when you use <Item></Item> but when i use <Cell> , i get the following error

Exception thrown while executing UI block: removedChildren count (0) was not what we expected (7)

2015-10-10 13:37:43.753 AppName[1670:38654] *** Assertion failure in -[RCTUIManager _childrenToRemoveFromContainer:atIndices:](), /Users/Username/Sites/AppName/node_modules/react-native/React/Modules/RCTUIManager.m:622
2015-10-10 13:37:43.761 [error][tid:main][RCTUIManager.m:887] Exception thrown while executing UI block: removedChildren count (0) was not what we expected (7)
2015-10-10 13:37:43.824 AppName[1670:38654] *** Terminating app due to uncaught exception 'NSRangeException', reason: '*** -[__NSArrayM objectAtIndex:]: index 13 beyond bounds [0 .. 12]'
*** First throw call stack:
(
    0   CoreFoundation                      0x014e3a94 __exceptionPreprocess + 180
    1   libobjc.A.dylib                     0x00730e02 objc_exception_throw + 50
    2   CoreFoundation                      0x013afeb3 -[__NSArrayM objectAtIndex:] + 243
    3   CoreFoundation                      0x01428958 -[NSArray objectAtIndexedSubscript:] + 40
    4   AppName                  0x000505af -[RNTableView dataForRow:section:] + 159
    5   AppName                  0x0004fef2 -[RNTableView tableView:cellForRowAtIndexPath:] + 226
    6   UIKit                               0x02ea2b91 -[UITableView _createPreparedCellForGlobalRow:withIndexPath:willDisplay:] + 782
    7   UIKit                               0x02ea2cbf -[UITableView _createPreparedCellForGlobalRow:willDisplay:] + 90
    8   UIKit                               0x02e72518 -[UITableView _updateVisibleCellsNow:isRecursive:] + 3317
    9   UIKit                               0x02e92716 __29-[UITableView layoutSubviews]_block_invoke + 52
    10  UIKit                               0x02eaca18 -[UITableView _performWithCachedTraitCollection:] + 88
    11  UIKit                               0x02e92684 -[UITableView layoutSubviews] + 214
    12  UIKit                               0x02dea16b -[UIView(CALayerDelegate) layoutSublayersOfLayer:] + 813
    13  libobjc.A.dylib                     0x00745059 -[NSObject performSelector:withObject:] + 70
    14  QuartzCore                          0x02a1460c -[CALayer layoutSublayers] + 144
    15  QuartzCore                          0x02a0828e _ZN2CA5Layer16layout_if_neededEPNS_11TransactionE + 388
    16  QuartzCore                          0x02a080f2 _ZN2CA5Layer28layout_and_display_if_neededEPNS_11TransactionE + 26
    17  QuartzCore                          0x029fac2b _ZN2CA7Context18commit_transactionEPNS_11TransactionE + 317
    18  QuartzCore                          0x02a2ec23 _ZN2CA11Transaction6commitEv + 589
    19  QuartzCore                          0x02a2f4d6 _ZN2CA11Transaction17observer_callbackEP19__CFRunLoopObservermPv + 92
    20  CoreFoundation                      0x013fd77e __CFRUNLOOP_IS_CALLING_OUT_TO_AN_OBSERVER_CALLBACK_FUNCTION__ + 30
    21  CoreFoundation                      0x013fd6de __CFRunLoopDoObservers + 398
    22  CoreFoundation                      0x013f305c __CFRunLoopRun + 1340
    23  CoreFoundation                      0x013f2866 CFRunLoopRunSpecific + 470
    24  CoreFoundation                      0x013f267b CFRunLoopRunInMode + 123
    25  GraphicsServices                    0x05177664 GSEventRunModal + 192
    26  GraphicsServices                    0x051774a1 GSEventRun + 104
    27  UIKit                               0x02d24cc1 UIApplicationMain + 160
    28  AppName                  0x00034c4a main + 138
    29  libdyld.dylib                       0x049e9a21 start + 1
    30  ???                                 0x00000001 0x0 + 1
)
libc++abi.dylib: terminating with uncaught exception of type NSException
(lldb) 

My render function looks like this

<TableView style={{flex:1}}                       
       tableViewCellStyle={TableView.Consts.CellStyle.Default}
       onPress={this._onPress}                       
    >
    <Section 
        arrow={true}
        >
        {this.state.DocumentStore.docs.map(function(doc){
            return (
                <Cell>
                    <Text>{doc.name}</Text>
                </Cell>
            )
        })}
    </Section>

</TableView>

[aksonov]

I can't reproduce. Are you sure that you are not submitting empty cell array? Anyway, i've updated demos for custom cells in Example1 with setState usage while trying to reproduce the error, so you may send me PR to reproduce the problem.

[rmdort]

Hi there, This only happens when the cell size changes on setState. I can reproduce it in the following example

var Example = React.createClass({
    getInitialState: function(){

        return {
            cells: ['Cell 1', 'Cell 2', 'Cell 3']
        }
    },
    componentDidMount: function(){

        setTimeout(() => {

            this.setState({
                cells: ['Cell 1']
            })
        })
    }
    render: function(){

        return (
            <TableView>
                <Section>
                    {this.state.cells.map((cell) => {

                        return <Cell><Text>{cell}</Text></Cell>
                    })}
                </Section>
            </TableView>
        )
    }
})

[aksonov]

I'm trying to fix this issues, but without success - unfortunately RN doesn't call 'removeReactView' when some cells are deleted, so i can't handle it properly - i.e. remove cells from table view. One possible way is to override setReactFrame - it is recalled when cells are changed, but when I'm deleting cells there, some weird race-condition occurs - so it is not good idea..

If you could fix it, PR is welcome.

[radford-for-smpte]

I too am having this problem, while implementing a simple search/filter feature. Once a search is in place that would reduce the number of Cells, I get the above error.

[PaulBGD]

Error still occurring :( is there a chance for a fix?

[nyura123]

@PaulBGD, did you try reactModuleForCell? (see #52)

[PaulBGD]

@nyura123 I completely forgot about that. I'm using it now, however I can't figure out how to make the height any bigger.

[PaulBGD]

As well there seem to be some weird height rendering issues if you render it (reactModuleForCell) inside of another scrollview

[nyura123]

are you setting the height prop on the Item? Unfortunately there's no way
to have it auto-size the height right now as far as I know.

On Mon, Aug 8, 2016 at 9:50 PM, Paul Sauve notifications@github.com wrote:

As well there seem to be some weird height rendering issues if you render
it (reactModuleForCell) inside of another scrollview
[image: Image]
https://camo.githubusercontent.com/2a1e9d9d50424fc08ad7946cf74ede83a6871b34/687474703a2f2f692e696d6775722e636f6d2f327262555656472e706e67

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#19 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AGv5T1v5xi5alG8mfBNPisBJkNzoovC8ks5qd4hxgaJpZM4GMigu
.

[PaulBGD]

@nyura123 Thanks! Setting the height manually works perfectly. I'm still getting the TableView cut off, but it happens with other components too now so I'm thinking it's an issue with my code. Thanks for the help.

[msand]

This is likely to happen if you're using some native components, where some ViewManager returns a LayoutShadowNode in createShadowNodeInstance of ViewGroupManager or something extending ReactShadowNode in createShadowNodeInstance of ViewManager on Android, and a RCTShadowView in the shadowView method of RCTViewManager on iOS. But, returns null/nil for some other View in some other ViewManager.

Then, if you combine children of both types in the same parent, and any of the elements without shadowViews/Nodes come before the changing number of elements which do have shadowViews/Nodes, then the indices won't match up, and the RCTUIManager on iOS and NativeViewHierarchyManager on Android will choke and produce these exceptions.

I solved a similar issue in react-native-svg recently, by making all the ViewManagers return values rather than null/nil. facebook/react-native#23350