react-native icon indicating copy to clipboard operation
react-native copied to clipboard

BorderRadius doesn't overwrite borderXxxXxxRadius properties

Open Sharcoux opened this issue 4 years ago • 1 comments

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

  1. Create a View
  2. 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:

Snack

image

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>
  );
}

Sharcoux avatar Jun 28 '21 18:06 Sharcoux

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.

github-actions[bot] avatar Feb 19 '24 05:02 github-actions[bot]

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

github-actions[bot] avatar Feb 26 '24 05:02 github-actions[bot]