[ScrollView] contentInset bug if content height on initial mount is larger than the viewport

[orktes]

It seems that contentInset only works properly if the ScrollView is first mounted without content (or with less content than the viewport height). If content height overflows the scrollview viewport height the contentInset only takes effect after first scroll.

Example of the issue (using ListView)
https://rnplay.org/apps/SdfSNw

• Two identical ListView
• ListView on the left receives items on initial mount. (contentInset only works after scrolling)
• ListView on the right receives items one frame after initial mount. (contentInset works like it should)

[orktes]

Most likely related #1641

[brentvatne]

thanks for the report @orktes, cc @tadeuzagallo @nicklockwood

[felixakiragreen]

👍

[MikaelCarpenter]

@orktes have you found a way to make this work yet? I'm still seeing this issue for ScrollView

[ide]

As a workaround I've just been scrolling to -topInset on mount.

[MikaelCarpenter]

To clarify ide's comment, if you have a contentInset of -10, then you can do

_insetWorkaround: function(scrollView) {
  if(scrollView) {
    return scrollView.scrollWithoutAnimationTo(10);
  }
},
render: function() {
  return(
    <ScrollView
      ref={@_insetWorkaround}
      contentInset={top: -10}>
  )
}

[ide]

If you do it in the ref handler, define a separate autobound function so that the same function is passed into <ScrollView> after each render. Otherwise every time ScrollView is rendered, it will compare the old and new ref functions, see that they are not equal, and call the new function.

[mkonicek]

Hi there! This issue is being closed because it has been inactive for a while.

But don't worry, it will live on with ProductPains! Check out its new home: https://productpains.com/post/react-native/scrollview-contentinset-bug-if-content-height-on-initial-mount-is-larger-than-the-viewport-

ProductPains helps the community prioritize the most important issues thanks to its voting feature.
It is easy to use - just login with GitHub.

Also, if this issue is a bug, please consider sending a PR with a fix. We rely on the community to provide
bugfixes as the core team is heavily focused working on performance.

[jfilter]

Here my workaround to scroll up on initial render for a FlatList.

  componentDidUpdate() {
    if (this.props.requests.length <= 20) {
      this.listRef.getNode().scrollToOffset({
        offset: -LIST_HEADER_HEIGHT,
        animated: false,
      });
    }
  }

[..]
<FlastList
  ref={ref => (this.listRef = ref)}
/>

[jesseditson]

This is a legitimate bug, and as far as I can tell is still unresolved. Why are legit bugs being moved to some feature request app? @mkonicek this should be re-opened as far as I can tell.

[mazing]

How can this bug be more than 2 years old and still not resolved

[airato]

I have a SectionList with sticky headers, and I need to use contentInset since I have native top and bottom nav bars.
On iOS, when using contentInset prop with both top and bottom values, SectionList was rendering the header for top section lower than needed with the section items in the correct position, OR not applying top offset at all. So when I reload the app in a simulator with Cmd+R, randomly I get one or the other case...

I managed to find a solution with both working sticky headers and insets. This is RN v0.55.4

class MyScreen extends Component<AllProps> {
  listEl: SectionList<Item>;
  componentDidMount() {
    if (__IOS__) {
      (this.listEl as any).setNativeProps({
        style: {
          paddingTop: getOffsets(this.props).topOffset,
        },
      });
    }
  }

  render() {
    const sections: { title: string; data: Item[] }[] = whateverData;

    return (
      <SectionList
        style={{ flex: 1 }}
        automaticallyAdjustContentInsets={false}
        ref={view => (this.listEl = view as any)}
        contentContainerStyle={{
          paddingBottom: __IOS__ ? getOffsets(this.props).topOffset : 0,
        }}
        stickySectionHeadersEnabled
        contentInset={__IOS__? { bottom: getOffsets(this.props).bottomOffset } : undefined}
        sections={sections}
        keyExtractor={(item: Item) => item.data.id}
        renderSectionHeader={({ section: { title } }) => <MyHeader title={title} />}
        renderItem={({ item }) => <MyItem item={item} />}
        ItemSeparatorComponent={() => <Box borderBottom borderColor="transparent" />}
      />
    );
  }
}