1px gap between triangle arrow and parent container on some Android devices (Xiaomi K80)

[ddx533534]

Description

Description

To achieve the effect of the inverted triangle closely adhering to the bottom of the parent container, I set the layout type of the inverted triangle to "Absolute" and the height of the inverted triangle and the margin-bottom property to opposite numbers. Theoretically, the inverted triangle should be closely adhering to the bottom of the parent container, but on the Redmi K80 model, there is a certain blank gap between the two.

Note

This issue currently only occurs on some models of Xiaomi, such as Redmi K80. Other models like Samsung and Huawei have not been found to have this problem for the time being.

Expected Behavior

There should be no gap between the top and bottom of the parent-child view; it should be closely attached.

Actual Behavior

There is a slit at the top and bottom of the parent-child view.

Steps to reproduce

1. Use the demo code in MANDATORY Reproducer.
2. Run the Android App on XiaoMi K80 model

demo code in MANDATORY Reproducer

import React, { FC } from 'react';
import { View, Text, StyleSheet, ViewStyle, TextStyle } from 'react-native';

const rem = (v: number): number => v;

const TestApp: FC = () => {
  return (
    <View style={styles.root}>
      <View style={styles.toastContent}>
        <View style={styles.toastArrow} />
        <Text style={styles.toastText}>Toast Content</Text>
      </View>
    </View>
  );
};

export default TestApp;

interface Styles {
  root: ViewStyle;
  toastContent: ViewStyle;
  toastText: TextStyle;
  toastArrow: ViewStyle;
}

const styles = StyleSheet.create<Styles>({
  root: {
    marginTop: 200,
    alignItems: 'center',
  },

  toastContent: {
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FF0000',
    borderRadius: rem(4),
    paddingLeft: rem(6),
    paddingRight: rem(6),
    height: rem(17),
    position: 'relative',
  },

  toastText: {
    color: '#FFFFFF',
    fontSize: rem(10),
    fontWeight: '400',
    textAlign: 'center',
  },

  toastArrow: {
    position: 'absolute',
    right: rem(10),
    bottom: 0,
    marginBottom: -4, // here
    width: 8,
    height: 4, // here
    borderLeftWidth: rem(4),
    borderLeftColor: 'transparent',
    borderRightWidth: rem(4),
    borderRightColor: 'transparent',
    borderTopWidth: rem(4),
    borderTopColor: '#191919E6',
    borderBottomWidth: 0,
    borderBottomColor: 'transparent',
    borderStyle: 'solid',
  },
});

React Native Version

0.83.0

Affected Platforms

Runtime - Android

Output of npx @react-native-community/cli info

System:
  OS: macOS 15.4.1
  CPU: (12) arm64 Apple M3 Pro
  Memory: 134.89 MB / 18.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 24.7.0
    path: /opt/homebrew/bin/node
  Yarn:
    version: 1.22.22
    path: /opt/homebrew/bin/yarn
  npm:
    version: 11.5.1
    path: /opt/homebrew/bin/npm
  Watchman:
    version: 2025.10.06.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods: Not Found
SDKs:
  iOS SDK: Not Found
  Android SDK:
    API Levels:
      - "26"
      - "28"
      - "29"
      - "30"
      - "32"
      - "33"
      - "34"
      - "35"
      - "36"
    Build Tools:
      - 28.0.3
      - 29.0.3
      - 30.0.3
      - 33.0.0
      - 33.0.2
      - 34.0.0
      - 35.0.0
      - 35.0.1
      - 36.0.0
    System Images:
      - android-36 | Google Play ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2024.3 AI-243.26053.27.2432.13536105
  Xcode:
    version: /undefined
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.16
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 20.0.0
    wanted: 20.0.0
  react:
    installed: 19.2.0
    wanted: 19.2.0
  react-native:
    installed: 0.83.0
    wanted: 0.83.0
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: Not found
  newArchEnabled: false

Stacktrace or Logs

none its ui bug

MANDATORY Reproducer

https://github.com/ddx533534/1px-reproducer

Screenshots and Videos