FlatList - initialscrollindex not working

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment: OS: macOS Sierra 10.12.6 Node: 6.11.4 Yarn: 1.3.2 npm: 5.5.1 Watchman: 4.9.0 Xcode: Xcode 9.1 Build version 9B55 Android Studio: 2.3 AI-162.4069837

Packages: (wanted => installed) react: 16.0.0 => 16.0.0 react-native: 0.49.5 => 0.49.5

Steps to Reproduce

I am currently trying to build a chat application and one thing it needs to do is to position the phone screen onto last item because that is the latest message. I figured the best property to utilize here would be initialscrollIndex and I would have to pass in the last index here. In addition to that, the documentation also says that you would need to utilize the getItemLayout property when working with the initialscrollIndex. With that being said, I integrated both of those properties but I am still not getting the desired results.

1. Create a Flatlist with N number of items
2. Pass in a number to initialScrollIndex prop
3. The FlatList will now position itself at that initial index for a split second before snapping back to the first item.

Expected Behavior

I expect the FlatList view to be positioned at that index

Actual Behavior

The screen actually positions itself to the last item in the collection for a quarter of a second. It then immediately snaps back to the first item in the list.

Reproducible Demo

const HEIGHT = Dimensions.get('window').height;

  itemLayout = (data, index) => ({
    index,
    length: HEIGHT,
    offset: HEIGHT * index,
  });


<ScreenWrapper>
   <FlatList
      data={messages}
      style={{
         width: WIDTH,
          marginLeft: -20,
      }}
      renderItem={this.renderItem}
      keyExtractor={item => item.id}
      initialScrollIndex={messages.length - 1}          
      getItemLayout={this.itemLayout}
      onRefresh={onRefresh}
      refreshing={refreshing}
   />
</ScreenWrapper>

[maartenschumacher]

getItemLayout needs to be implemented correctly for it to work. Your implementation suggests that each row is exactly the window height, is that correct? Please add the implementation (including style) of this.renderItem to your demo.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.