BorderRadius doesn't overwrite borderXxxXxxRadius properties
Description
Passing the following style object: {[{borderTopLeftRadius: 30}, {borderRadius: 16 }]} will result in the borderRadius instruction being ignored on the top-left corner. If each corner is defined, the borderRadius instruction is completely ignored, which is probably not the expected behavior.
React Native version:
info Fetching system and libraries information...
System:
OS: Linux 5.8 Ubuntu 20.04.2 LTS (Focal Fossa)
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Memory: 704.06 MB / 15.41 GB
Shell: 5.0.17 - /bin/bash
Binaries:
Node: 12.22.1 - /usr/bin/node
Yarn: 1.22.10 - ~/.npm-global/bin/yarn
npm: 6.14.12 - ~/.npm-global/bin/npm
Watchman: Not Found
SDKs:
Android SDK: Not Found
IDEs:
Android Studio: Not Found
Languages:
Java: Not Found
npmPackages:
@react-native-community/cli: Not Found
react: ^17.0.2 => 17.0.2
react-native: ^0.64.2 => 0.64.2
npmGlobalPackages:
*react-native*: Not Found
Steps To Reproduce
- Create a View
- Pass the following style:
{[{borderTopLeftRadius: 30}, {borderRadius: 16 }]}
Expected Results
The borderRadius style should overwrite the previous instructions relative to the border radius, such as borderTopLeftRadius. Otherwise, the borderRadius instruction might end up being toatlly ignored, which is quite hard to understand and seems very unnatural.
Snack, code example, screenshot, or link to a repository:

import * as React from 'react';
import { View } from 'react-native';
export default function App() {
return (
<View
style={[
{
borderTopLeftRadius: 30,
borderWidth: 2,
borderColor: 'black',
width: 200,
height: 200,
},
{ borderRadius: 16 },
]}></View>
);
}
This issue 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.
This issue was closed because it has been stalled for 7 days with no activity.