Warning: In next release empty section headers will be rendered.

[neogeno]

With latest version of React Native 0.55 this yellow box appears.

[Ahagan]

I receive this too and I am using react 0.55 as well. Previously, the timeline rendered fine.

Visually, it doesn't render at all and get the following message:

Stack strace:

Warning: In next release empty section headers will be rendered. In this release you can use 'enableEmptySections' flag to render empty section headers.

• node_modules/fbjs/lib/warning.js:33:20 in printWarning
• node_modules/fbjs/lib/warning.js:57:25 in warning
• node_modules/react-native/Libraries/Lists/ListView/ListView.js:432:12 in ListView_render
• node_modules/react-native/Libraries/Renderer/ReactNativeRenderer-dev.js:8811:23 in finishClassComponent
• node_modules/react-native/Libraries/Renderer/ReactNativeRenderer-dev.js:12924:25 in performUnitOfWork

[Ahagan]

@neogeno, how was you passing data to the 'data' prop? Previously I passed it a function which mapped my data into the structure required by the component.

I have since moved that logic out to a separate function and invoked it and works fine for me now without the warning messages.

Old way that no longer works for me:
<Timeline data={() => { return [{ title: 'example', description: 'example }] }} />

Extracted way which works:

getData() { return [{ title: 'example', description: 'example }] } render() { <Timeline data={this.getData()} /> }

[alz10]

UPDATE: The easiest way is to use options.

<Timeline options={{ enableEmptySections: true }} />

===================================================================

In your project folder find node_modules and then scroll down to find react-native-timeline-listview open that folder and find lib open that too and click on index.js

On the render() find the code below and put enableEmptySections. Check documentation here React-Native ListView

        <ListView
          enableEmptySections
          ref="listView"
          style={[styles.listview, this.props.listViewStyle]}
          dataSource={this.state.dataSource}
          renderRow={this._renderRow}
          showsHorizontalScrollIndicator={false}
          showsVerticalScrollIndicator={false}
          automaticallyAdjustContentInsets={false}
          {...this.props.options}
        />

After that the yellow warning will be gone