Closed
Description
🐛 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