Android border rendering regression in 0.66

[oblador]

Description

Since 0.66 the rendering of borders on Android has moved from being completely inside the view, to be half outside, half inside. This is inconsistent with iOS, web/css and previous versions of react native. Potentially caused by #29099.

React Native version:

Details

info Fetching system and libraries information... System: OS: macOS 11.6 CPU: (8) arm64 Apple M1 Memory: 241.44 MB / 16.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 16.10.0 - ~/.volta/tools/image/node/16.10.0/bin/node Yarn: 1.22.11 - ~/.volta/tools/image/yarn/1.22.11/bin/yarn npm: 7.24.0 - ~/.volta/tools/image/node/16.10.0/bin/npm Watchman: 2021.09.06.00 - /opt/homebrew/bin/watchman Managers: CocoaPods: 1.11.2 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: iOS 15.0, DriverKit 20.4, macOS 11.3, tvOS 15.0, watchOS 8.0 Android SDK: Not Found IDEs: Android Studio: 4.2 AI-202.7660.26.42.7351085 Xcode: 13.0/13A233 - /usr/bin/xcodebuild Languages: Java: 11.0.10 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: 17.0.2 => 17.0.2 react-native: 0.66.0 => 0.66.0 react-native-macos: Not Found npmGlobalPackages: *react-native*: Not Found

Steps To Reproduce

1. Add a borderWidth: 20 on a component.
2. Observe that border now expands beyond the view itself.

Expected Results

Border is rendered completely inside the view bounds.

Snack, code example, screenshot, or link to a repository:

This code produces different results on iOS (left) and Android (right)

import React from 'react';
import {View} from 'react-native';

const App = () => {
 return (
 <View style={{flex: 1, justifyContent: 'center', padding: 20}}>
 <View
 style={{
 aspectRatio: 1,
 backgroundColor: 'green',
 borderWidth: 8,
 borderColor: 'black',
 borderStyle: 'dashed',
 }}
 />
 </View>
 );
};