iOS-iPAD ScrollView centerContent with maximumZoomScale and minimumZoomScale renders content with an offset on top on first render

[kimulus]

Is this a bug report?

yes

Have you read the Contributing Guidelines?

yes

Environment

OS: macOS Sierra 10.12.6
Node: 7.7.1
Yarn: Not Found
npm: 4.1.2
Watchman: 4.7.0
Xcode: Xcode 9.0.1 Build version 9A1004
Android Studio: Not Found

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

Steps to Reproduce

On a iOS IPAD :

1. Create a ScrollView with following props : scrollEnabled centerContent maximumZoomScale={15} minimumZoomScale={0.01}
2. Render inside the ScrollView a view that is as large as the screen and twice the device screen height.
   <View style={{ width: '100%', height: Dimensions.get('window').height * 2, backgroundColor: 'green' }} />

Expected Behavior

The scrollview renders the green view with no offset on top. So what we see is a screen entirely green.

Actual Behavior

The scrollview renders is content with a top offset that is half of the height of the screen. It's refreshed correctly as soon as you touch the screen. If we don't set the centerContent props, we don't get this bug. This occurs only on IPAD-IOS. On iPhone, we don't get this bug

Reproducible Demo

Start with basic App and render this code under iPAD.
Tested both on simulator and device : https://screencast.com/t/agiYJw1Ws
Red is the root view and green is the view rendered within the scrollview, that would as no scroll off set at all.

import {
  View,
  ScrollView,
  Dimensions
} from 'react-native';

export default class App extends Component<{}> {
  render() {
    return (
      <View style={{flex: 1, backgroundColor: '#FF0000'}}>
        <ScrollView scrollEnabled zoomScale={0.01} centerContent maximumZoomScale={15} minimumZoomScale={0.01}>
          <View style={{ width: '100%', height: Dimensions.get('window').height * 2, backgroundColor: 'green' }} />
        </ScrollView>
      </View>
    );
  }
}`

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

[adrienbataille]

This problem is real. Can you investigate and not just close it?

[msageryd]

Same problem.

• RN 0.50
• iOS Simulator

I see the same bug in the iPhone simulator when using centerContent on a horizontal scrollview. As soon as the content is larger than the screen the content is offset halt the screen width.

If the content is smaller thar the screen the content is centered as it should.

I'm guessint that "half-the-screen-offset" is because somehow the needed measurements are not in place at the first render. The centering behaves as if the content width is zero.

As soon as I touch the scrollview it snaps into place, i.e. the offset goes away.

Because of this bug I don't use centerContent and, thus, haven't tried it on an actual device. I'd be happy to do some more tests to help out if someone want's to take a look at the problem.

[react-native-bot]

Thanks for posting this! It looks like you may not be using the latest version of React Native, v0.53.0, released on January 2018. Can you make sure this issue can still be reproduced in the latest version?

I am going to close this, but please feel free to open a new issue if you are able to confirm that this is still a problem in v0.53.0 or newer.

_{How to Contribute • What to Expect from Maintainers}