iOS ScrollView contentInset sometimes not applied

🐛 Bug Report

I’m using the contentInset prop to offset the ScrollView so that it starts lower but still scrolls behind a fixed header. When the component gets displayed the content starts from the top instead of the position defined in contentInset. As soon as I touch the ScrollView just a little bit, it instantly jumps to the position I expect it to be.

I don’t use paddingTop or something different because I need the RefreshControl to be below the header

To Reproduce

To reproduce create ScrollView with a RefreshControl and a contentInset.

Expected Behavior

When the component is displayed it should start at the defined contentInset.

Code Example

Here is a snack that demonstrates the issue: https://snack.expo.io/@mxmtsk/contentinset-bug

Environment

React Native Environment Info: System: OS: macOS 10.14 CPU: (16) x64 Intel® Xeon® W-2140B CPU @ 3.20GHz Memory: 65.72 MB / 32.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 10.1.0 - ~/.nvm/versions/node/v10.1.0/bin/node Yarn: 1.13.0 - /usr/local/bin/yarn npm: 6.3.0 - ~/.nvm/versions/node/v10.1.0/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: 25, 26, 27, 28 Build Tools: 27.0.3, 28.0.1 System Images: android-24 | Google Play Intel x86 Atom, android-27 | Google APIs Intel x86 Atom IDEs: Android Studio: 3.1 AI-173.4819257 Xcode: 10.1/10B61 - /usr/bin/xcodebuild npmPackages: react: 16.8.3 => 16.8.3 react-native: 0.59.1 => 0.59.1 npmGlobalPackages: react-native-cli: 2.0.1 react-native-create-library: 3.1.2 react-native-git-upgrade: 0.2.7

[mxmtsk]

@shergin Thanks for looking into that. And sadly no, it wouldn’t work, because in that case the RefreshControl component from the refreshControl prop would still be at the top of the ScrollView, as shown in the image. As far as I know contentInset is the only way to achieve this result at the moment.

[osamaaamer95]

Still a problem here too. I managed to fix it by setting contentOffset={{ x: 0, y: -OFFSET }} in my particular use case. Here is a diff for a cross platform solution with correct insets, hope it helps!

My use case: I have an absolutely positioned header on top of the screen, and animate it on scroll. Initial offsets are needed to move the refresh control, since padding does not move it’s position.

Here is how it was before: