ReactNative ListView setting initial scroll position after data loaded

Question

I have an events section which has section headings containing the date. I need to be able to jump to specific dates, as well as have the initial scroll position set to the first date in the future.

In order to jump to specific dates I have tried storing their y positions in state.

renderSectionHeader= (sectionData, sectionID) => (
      <View
        onLayout={(event) => {
          const { y } = event.nativeEvent.layout;
          const sectionPosition = { [sectionID]: y };
          const sectionPositions = Object.assign({}, this.state.sectionPositions, sectionPosition);
          this.setState({ sectionPositions });
        }}
       ...

I ran into problems with this approach though as renderSectionHeader is not called on elements which are further down the list (due to the lazy rendering).

I have then tried calculating the position mathematically , but this then causes the rendering of each section to show on screen while it is moving closer to the given date.

Is there a way of achieving what I need?

RELATED

React Native ListView: How to scroll to a particular row

https://github.com/facebook/react-native/issues/499

UPDATE

In my app I know all the rows are the exact same height.

Using contentOffset={{ y: offsetY }} rather than setScroll does not work, since it still needs to render all items up to the given item to work.

Using initialListSize={99999999} does work, but makes the page very slow, and I have been warned against using it.

UPDATE 2

Is it possible to provide my initial content to datasource, and then update the data to add extra items in before and after the elements currently on screen?

Or is there a library I haven't found which does what I need?

Answer 1

It looks like this may soon be solved by FlatList which is currently in the experimental folder in the React-Native repo.

https://github.com/facebook/react-native/blob/a3457486e39dc752799b1103ebe606224a8e8d32/Libraries/Experimental/FlatList.js

Better ListView - FlatList Summary: We really need a better list view - so here it is!

Main changes from existing ListView:

• Items are "virtualized" to limit memory - that is, items outside of the render window are unmounted and their memory is reclaimed. This means that instance state is not preserved when items scroll out of the render window.
• No DataSource - just a simple data prop of shape Array<any>. By default, they are expected to be of the shape {key: string} but a custom rowExtractor function can be provided for different shapes, e.g. graphql data where you want to map id to key. Note the underlying VirtualizedList is much more flexible.
• Fancy scrollTo functionality: scrollToEnd, scrollToIndex, and scrollToItem in addition to the normal scrollToOffset.
• Built-in pull to refresh support - set set the onRefresh and refreshing props.
• Rendering additional rows is usually done with low priority, after any interactions/animations complete, unless we're about to run out of rendered content. This should help apps feel more responsive.
• Component props replace render functions, e.g. ItemComponent: ReactClass<{item: Item, index: number}> replaces renderRow: (...) => React.Element<*>
• Supports dynamic items automatically by using onLayout, or getItemLayout can be provided for a perf boost and smoother scrollToIndex and scroll bar behavior.
• Visibility callback replaced with more powerful viewability callback and works in vertical and horizontal mode on at least Android and iOS, but probably other platforms as well. Extra power comes from the viewablePercentThreshold that lets the client decide when an item should be considered viewable.

Demo: