After refreshing the FlatList, always set the contentOffset to 0

🐛 Bug Report

I’m using the FlatList with contentInset and contentOffset prop to guarantee the content doesn’t be hidden by header things. However, if I invoke some pull-to-refresh on the FlatList, contentOffset always goes to 0 after refreshing is finished. I think contentOffset should not be always zero if contentInset is already set.

I think that this might be the same as #20610 and I tested this is reproduced on the latest RN version.

To Reproduce

In the RNTester/js/FlatListExample.js, I added some code for refreshing, contnetInset, contentOffset` like below.

  [...] 
  componentDidMount() {
    // To make refreshing, I set the refreshing to be true right after componentDidMount
    // and set to false again after 3 secs
    this.setState({ refreshing: true });
    setTimeout(() => this.setState({ refreshing: false }), 3000);
  }
  [...]
  render() {
        [...]          
        <Animated.FlatList
           [...]
            contentInset={{ top: 50 }}
            contentOffset={{ y: -50 }}
            refreshing={this.state.refreshing} 
        />
  }
[...]

Expected Behavior

Here’s a screenshot when I only set the contentInset and contentOffset and didn’t call refreshing(just gave refreshing prop as false). I drew a red box which indicates contentInset and contentOffset works well.

In this case, I think after refreshing that the same contentOffset should be maintained. However, contentOffset always goes to 0 as shown in below gif.

Code Example

Please see the To Reproduce section.

Environment

info React Native Environment Info: System: OS: macOS 10.14.3 CPU: (4) x64 Intel® Core™ i5-7267U CPU @ 3.10GHz Memory: 137.07 MB / 16.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 8.15.1 - ~/.nvm/versions/node/v8.15.1/bin/node Yarn: 1.12.3 - /usr/local/bin/yarn npm: 6.4.1 - ~/.nvm/versions/node/v8.15.1/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman SDKs: iOS SDK: Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1 Android SDK: API Levels: 27, 28 Build Tools: 27.0.3, 28.0.2, 28.0.3 System Images: android-27 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom IDEs: Android Studio: 3.2 AI-181.5540.7.32.5056338 Xcode: 10.1/10B61 - /usr/bin/xcodebuild npmPackages: react: 16.8.3 => 16.8.3 react-native: 0.59.2 => 0.59.2 npmGlobalPackages: react-native-cli: 2.0.1

[acro5piano]

Maybe this issue is related to #17734.

Now #17734 is closed, so I will post my solution here.

<FlatList
  contentOffset={{ y: this.props.loading ? -60 : 0, x: 0 }}  // <-- if loading, set offset
  // ...

Hope #24170 will fix it.

[acro5piano]

For me, upgrading to latest v0.59 and removing all offset value fixed the issue.

And I gave up to use loading props by always set it false, and place my original loading component over the FlatList while loading as the current workaround.