Fix 1-pixel height horizontal line disappear by laotian · Pull Request #30481 · react/react-native

laotian · 2020-11-26T09:14:28Z

Summary

On Android devices with a non integer DPI (for example, 2.75), View layoutX/Y may be decimal (for example, 3.25). Using integer type in recursive calculation may cause 1 pixel margin or 1 pixel overlap between adjacent views. The dividing line of 1 pixel (StyleSheet.hairlineWidth) may disappear.

Fixes #22927

Changelog

[Android] [Fixed] - Fix 1-pixel height horizontal line disappear.

Test Plan

manual test
first repeats the problem according to the demo code, and verifies after repair

reproduce steps

APP don't use FabricUIManager
Dividing line, width/height set to 1 pixel(StyleSheet.hairlineWidth)
Adjacent view opaque
Android devices with a non integer DPI (for example, 2.75)

demo code

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

export default class App extends Component{
  // some line disappear on decimal dpi Android device
  render() {
    return (
        <View>
          {['1','2','3','4','5','6'].map((row, index) => (
              <View>
                <View style={{height: 54, flexDirection: 'row', alignItems: 'center', backgroundColor: '#ffffff' }}>
                    {['1','2','3','4','5','6'].map(column=>{
                        return(
                            <View style={{flexDirection: 'row'}}>
                                <View style={{width: 61, backgroundColor: '#ffffff', justifyContent: 'center', alignItems: 'center'}}>
                                    <Text>{`R${row}C${column}`}</Text>
                                </View>
                                <View style={{width: StyleSheet.hairlineWidth,backgroundColor: '#ff0000' }} />
                            </View>)
                    })}
                </View>
                <View style={{height: StyleSheet.hairlineWidth,backgroundColor: '#ff0000'}} />
              </View>
          ))}
        </View>);
  }
};

Screenshot

Before Fix

device : Android MI8SE (dpi 2.75)

Fixed

Without FabricUIManager, On Android devices with a non integer DPI (for example, 2.75), View layoutX/Y may be decimal (for example, 3.25). Using integer type in recursive calculation may cause 1 pixel margin or 1 pixel overlap between adjacent views. The horizontal dividing line of 1 pixel (height: StyleSheet.hairlineWidth) may disappear.

facebook-github-bot · 2020-11-26T09:14:37Z

Hi @laotian!

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file.

In order for us to review and merge your code, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

If you have received this in error or have any questions, please contact us at cla@fb.com. Thanks!

facebook-github-bot · 2020-11-26T09:30:42Z

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

facebook-github-bot · 2020-11-26T09:35:28Z

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

ecreeth · 2020-11-26T12:18:17Z

    // We use screenX/screenY (which round to integer pixels) at each node in the hierarchy to
    // emulate what the layout would look like if it were actually built with native views which
    // have to have integral top/left/bottom/right values
-    int x = node.getScreenX();
-    int y = node.getScreenY();
+    float x = node.getLayoutX();
+    float y = node.getLayoutY();


You should update the comment as well

I have update the comment, thank you

@ecreeth I have update the comment and I submitted in the original branch. Do I need to launch a new PR?

@ecreeth Can you review my commit again?

ecreeth · 2020-11-28T03:03:14Z

cc @safaiyeh

laotian · 2020-11-30T02:04:03Z

@safaiyeh Can you review my PR?

kelset · 2020-11-30T09:41:30Z

Based on file history, looks like @mdvacca is the most relevant FB dev to check/review this PR out.

cc @dulmandakh

mdvacca · 2020-12-01T05:53:03Z

Thanks for working on this @laotian, I'm importing to review internally.

facebook-github-bot

@mdvacca has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

github-actions · 2023-09-21T05:13:13Z

This PR is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

github-actions · 2023-09-28T05:23:28Z

This PR was closed because it has been stalled for 7 days with no activity.

ddikodroid · 2024-10-09T13:02:50Z

Thanks for working on this @laotian, I'm importing to review internally.

any update on this pull request?

react-native-bot · 2024-10-09T17:50:50Z

	Fails
🚫	📋 Missing Changelog - Please add a Changelog to your PR description. See Changelog format

Generated by 🚫 dangerJS against 6289a2e

ddikodroid · 2024-10-11T15:41:29Z

@kelset could you take a look at this pr?

react-native-bot · 2025-08-13T05:02:07Z

This PR is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

diegolmello · 2025-08-13T13:43:52Z

This bug still exists

react-native-bot · 2026-02-10T05:28:18Z

This PR is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Nov 26, 2020

react-native-bot added Bug Platform: Android Android applications. labels Nov 26, 2020

ecreeth reviewed Nov 26, 2020

View reviewed changes

laotian added 2 commits November 27, 2020 10:07

Merge branch 'master' into master

bc9ca23

update comment

6289a2e

kelset requested a review from mdvacca November 30, 2020 09:40

facebook-github-bot reviewed Dec 1, 2020

View reviewed changes

github-actions Bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Sep 21, 2023

github-actions Bot closed this Sep 28, 2023

jamonholmgren reopened this Oct 9, 2024

react-native-bot removed the Stale There has been a lack of activity on this issue and it may be closed soon. label Oct 10, 2024

react-native-bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Aug 13, 2025

react-native-bot removed the Stale There has been a lack of activity on this issue and it may be closed soon. label Aug 14, 2025

react-native-bot added Stale There has been a lack of activity on this issue and it may be closed soon. and removed Stale There has been a lack of activity on this issue and it may be closed soon. labels Feb 10, 2026

Uh oh!

Conversation

laotian commented Nov 26, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changelog

Test Plan

reproduce steps

demo code

Screenshot

Before Fix

device : Android MI8SE (dpi 2.75)

Fixed

Uh oh!

facebook-github-bot commented Nov 26, 2020

Uh oh!

facebook-github-bot commented Nov 26, 2020

Uh oh!

facebook-github-bot commented Nov 26, 2020

Uh oh!

ecreeth Nov 26, 2020

Choose a reason for hiding this comment

Uh oh!

laotian Nov 27, 2020

Choose a reason for hiding this comment

Uh oh!

laotian Nov 27, 2020

Choose a reason for hiding this comment

Uh oh!

laotian Nov 28, 2020

Choose a reason for hiding this comment

Uh oh!

ecreeth commented Nov 28, 2020

Uh oh!

laotian commented Nov 30, 2020

Uh oh!

kelset commented Nov 30, 2020

Uh oh!

mdvacca commented Dec 1, 2020

Uh oh!

facebook-github-bot left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Sep 21, 2023

Uh oh!

github-actions Bot commented Sep 28, 2023

Uh oh!

ddikodroid commented Oct 9, 2024

Uh oh!

react-native-bot commented Oct 9, 2024

Uh oh!

ddikodroid commented Oct 11, 2024

Uh oh!

react-native-bot commented Aug 13, 2025

Uh oh!

diegolmello commented Aug 13, 2025

Uh oh!

react-native-bot commented Feb 10, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

10 participants

laotian commented Nov 26, 2020 •

edited

Loading