ScrollView with centerContent={true} renders non-deterministically on iPhone X simulator

[m-pol]

🐛 Bug Report

When a ScrollView has property centerContent={true}, a contained item can sometimes appear not centered. I've only verified this on an iPhone X v12.2 simulator, but I think it happens on devices too. The orange square on the left sometimes is centered properly, and sometimes is centered on the right edge of the green rectangle. Refresh the simulator multiple times and it non-deterministically changes.

To Reproduce

• Start a fresh project with react-native init. I have react-native-cli: 2.0.1.
• Replace your App.js code with the App.js code below
• Run on an iPhone X simulator
• Refresh (Command + R) a few times to see non-deterministic rendering behavior

Expected Behavior

The render should not be non-deterministic. It should always be centered. And it should not play differently on iPhone X simulator vs. other simulators.

See video where I refresh the code and see the positioning sometimes changes:

Code Example

Paste this into a fresh "react-native init" project's App.js:

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

export default class App extends Component {
    render() {
        return (
            <View
                style={{
                    flex: 1,
                    backgroundColor: "blue",
                    justifyContent: "center",
                    alignItems: "center",
                    flexDirection: "row"
                }}
            >
                <View style={{width: 100,
                    backgroundColor: "red",
                    height: 400}}>
                    <ScrollView
                        contentContainerStyle={{justifyContent: "center", alignItems: "center"}}
                        style={{backgroundColor: "green"}}
                        centerContent={true}
                    >
                        <View style={{backgroundColor: "orange", width: 50, height: 50}} />
                    </ScrollView>
                </View>
                <View style={{width: 100,
                    backgroundColor: "indigo",
                    height: 400}}>
                    <ScrollView
                        contentContainerStyle={{justifyContent: "center", alignItems: "center"}}
                        style={{backgroundColor: "purple"}}
                        centerContent={true}
                    >
                        <View style={{backgroundColor: "violet", width: 50, height: 50}} />
                    </ScrollView>
                </View>
            </View>
        );
    }
}

Environment

React Native Environment Info:
System:
  OS: macOS 10.14.4
  CPU: (8) x64 Intel(R) Core(TM) i7-4980HQ CPU @ 2.80GHz
  Memory: 57.92 MB / 16.00 GB
  Shell: 3.2.57 - /bin/bash
Binaries:
  Node: 11.11.0 - /usr/local/bin/node
  Yarn: 1.15.2 - /usr/local/bin/yarn
  npm: 6.7.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: 26, 27, 28
    Build Tools: 27.0.3, 28.0.3
    System Images: android-22 | Google APIs Intel x86 Atom, android-24 | Google APIs Intel x86 Atom, android-26 | Google APIs Intel x86 Atom, android-27 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom, android-Q | Google APIs Intel x86 Atom
IDEs:
  Android Studio: 3.4 AI-183.5429.30.34.5452501
  Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
npmPackages:
  react: 16.8.3 => 16.8.3
  react-native: 0.59.5 => 0.59.5
npmGlobalPackages:
  react-native-cli: 2.0.1

[zhongwuzw]

@m-pol Hi, can you please check #24817, is it works for you?

[m-pol]

@zhongwuzw Yeah, that fixed it. Thanks.

[zhongwuzw]

cc. @cpojer @kelset .

[kelset]

Thanks @zhongwuzw