Column of elements is not always rendered correctly on Android

Description

On Android, when rendering simple colored rectangles in a column (behind one another) using View components with given height, they are not rendered correctly when the margin of the containing SafeAreaView is changed. Some of the rectangles seem to be displaced in y-direction, leading to overlaps on one end and gaps on the other. How it looks with no margin: Adding margin leads to erroneous rendering: Margin of one:

Used Emulator:

Emulator version: 30.6.5-7324830 (KVM 12.0.0) Android version: 10.0 (Q) - API 29 AVD configuration: Pixel_2_API_29

React Native version:

System: OS: Linux 5.8 Ubuntu 20.04.2 LTS (Focal Fossa) CPU: (4) x64 Intel® Core™ i7-8565U CPU @ 1.80GHz Memory: 826.55 MB / 15.30 GB Shell: 5.0.17 - /bin/bash Binaries: Node: 14.17.0 - /tmp/yarn–1622118726559-0.15310791279573355/node Yarn: 1.22.5 - /tmp/yarn–1622118726559-0.15310791279573355/yarn npm: Not Found Watchman: 20210523.214641.0 - /usr/local/bin/watchman SDKs: Android SDK: Not Found IDEs: Android Studio: Not Found Languages: Java: 14.0.2 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: 17.0.1 => 17.0.1 react-native: 0.64.1 => 0.64.1 npmGlobalPackages: react-native: Not Found

Steps To Reproduce

1. Create a new react-native project
2. Start an Android emulator
3. Run the given code in App.js
4. See the (correct) rendering of the boxes without overlaps or gaps
5. Change the margin of the SafeAreaView to different values (e.g. 15)
6. Save and reload to see the changes

Expected Results

Intersection or gap lines appear between the rendered boxes

Code example:

Simply put the following code to your App.js file:

import React from 'react';
import { SafeAreaView, StyleSheet, View } from 'react-native';

const App = () => {
  return (
    <SafeAreaView style={{flexDirection: 'column', margin: 0 }}>
      <View style={styles.box} />
      <View style={styles.box} />
      <View style={styles.box} />
      <View style={styles.box} />
      <View style={styles.box} />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  box: {
    height: 50,
    backgroundColor: 'blue',
    opacity: 0.5,
  },
});

[matyihub]

@raphaelPloomes trying around with overlapping the different involved objects (by including minimal x-/y-offsets) was actually helpful. But of course this depends on your exact use case.

[mjeri]

The issue is still very relevant. Stale bot: please do not close 😄

@raphaelPloomes: we haven’t had a workaround, except trying a plethora of different ways of creating the element structures and finally reaching something that worked. But it’s not a “do this and it’s solved” solution I could share like that 😕