React-native: [SectionList - Android] scrollToLocation scrolls extra ( working perfect on iOS )

[jayan2019]

🐛 Bug Report

I would like to create an app like contact list with an alphabet list on right side. I used SectionList for that and used scrollToLocation method for that. It's working perfectly on iOS, but not in android

iOS example

Android example

To Reproduce

this.sectionList.scrollToLocation({
            animated: true,
            itemIndex: 0,
            sectionIndex: index,
            viewOffset: 0,
        });

Expected Behavior

It scrolls to the correct section when user touch the letter as same like iOS.

Code Example

<SectionList
  sections={sections}
  renderItem={this.renderItem}
  ref={s => (this.sectionList = s)}
  keyExtractor={this.renderKeyExtractor}
  renderSectionHeader={this.renderSectionHeader}
  getItemLayout={(data, index) => ({length: height, offset: height * index, index })}
/>

moveToSection(index) {
        this.sectionList.scrollToLocation({
            animated: true,
            itemIndex: 0,
            sectionIndex: index,
            viewOffset: 0,
        });
    }

Environment

React Native Environment Info:
System:
OS: macOS 10.14.4
CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
Memory: 341.11 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.11.2 - /usr/local/bin/node
Yarn: 1.12.3 - ~/.yarn/bin/yarn
npm: 5.6.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
Android SDK:
API Levels: 19, 22, 23, 24, 25, 27, 28
Build Tools: 23.0.1, 25.0.2, 27.0.3, 28.0.2, 28.0.3
System Images: android-19 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom
IDEs:
Android Studio: 3.3 AI-182.5107.16.33.5314842
Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
npmPackages:
react: 16.8.3 => 16.8.3
react-native: 0.59.5 => 0.59.5

[react-native-bot]

Can you run react-native info and edit your issue to include these results under the Environment section?

If you believe this information is irrelevant to the reported issue, you may write [skip envinfo] alongside an explanation in your Environment: section.

[jsamr]

I could reproduce on android, RN 59.5.

[joris1995]

I am experiencing a similar issue, also on android only.

In an app I’m working on, I’m trying to develop a feature in which users can add entries to a list, with the list scrolling down to the latest entry if it is currently out of the screen. On Android, however, it doesn’t scroll further than the second last item after updating the state, as can be seen in this snack.

I was going to add a new issue for this, but my problem seems related to this so I thought I’d add it here first.

[joris1995]

I made a separate issue for my problem as well: #25202

[tothvoj-gl]

Changing the itemIndex from 0 to -1 on Android fixed the issue for me.

[juananime]

Changing the itemIndex from 0 to -1 on Android fixed the issue for me.

that worked perfectly for me. Thanks!

[tothvoj-gl]

Works fine with react native 0.61.4, no need to change the index to -1 anymore.

[Bailei]

Looks like the issue has been fixed in react native 0.61

[jayan2019]

Thank you @Bailei & @tothvoj-gl. I will close this issue since it working perfectly on
react-native 0.61

[pranavanmaru]

using scrollToLocation to scroll to a particular item within a section is still not working as expected.
it's not predictable to find a work around with an apt offset as every time the sectionList picks a target of its choosing to scroll to 🤷🏽‍♂️

sectionListRef.current?.scrollToLocation({
        sectionIndex: 0,
        viewPosition: 0,
        itemIndex: itemIdx,
        viewOffset: stickyHeaderHeight,
        animated: false,
      });

itemIdx is 0 based index of the item in the section list.

[pranavanmaru]

If you add a ListHeaderComponent don't forget to offset itemIndex by 1. SectionList counts the header as an item too.
https://snack.expo.io/@pranavanmaru/sectionlist-heck-up.