border-radius does not work with newer react-native

[voydz]

Hey folks,

first of all thank you for your great work! 👍

In the current react-native releases (0.73.6 at the time of writing) there is an issue with translating border-radius. It generates the borderTopLeftRadius, borderTopRightRadius, etc. style properties. This does not work for Image and Text anymore.

Maybe its better to translate the border-radius css without a directionFactory and let the user decide how he want's to specify the attributes?

so instead of writing

border-radius: 10px;

I could just do, if I wanted

border-top-left-radius: 10px;

[voydz]

If anyone else is running into this issue.

My current workaround is to use patch-package with the following patch.

diff --git a/node_modules/css-to-react-native/index.js b/node_modules/css-to-react-native/index.js
index 36200b3..5a0b42b 100644
--- a/node_modules/css-to-react-native/index.js
+++ b/node_modules/css-to-react-native/index.js
@@ -650,11 +650,6 @@ var borderColor = directionFactory({
   prefix: 'border',
   suffix: 'Color'
 });
-var borderRadius = directionFactory({
-  directions: ['TopLeft', 'TopRight', 'BottomRight', 'BottomLeft'],
-  prefix: 'border',
-  suffix: 'Radius'
-});
 var borderWidth = directionFactory({
   prefix: 'border',
   suffix: 'Width'
@@ -691,7 +686,6 @@ var transforms = {
   background: background,
   border: border,
   borderColor: borderColor,
-  borderRadius: borderRadius,
   borderWidth: borderWidth,
   boxShadow: boxShadow,
   flex: flex,
diff --git a/node_modules/css-to-react-native/src/transforms/index.js b/node_modules/css-to-react-native/src/transforms/index.js
index 8474556..228f3e4 100644
--- a/node_modules/css-to-react-native/src/transforms/index.js
+++ b/node_modules/css-to-react-native/src/transforms/index.js
@@ -29,11 +29,6 @@ const borderColor = directionFactory({
   prefix: 'border',
   suffix: 'Color',
 })
-const borderRadius = directionFactory({
-  directions: ['TopLeft', 'TopRight', 'BottomRight', 'BottomLeft'],
-  prefix: 'border',
-  suffix: 'Radius',
-})
 const borderWidth = directionFactory({ prefix: 'border', suffix: 'Width' })
 const margin = directionFactory({
   types: [LENGTH, UNSUPPORTED_LENGTH_UNIT, PERCENT, AUTO],
@@ -56,7 +51,6 @@ export default {
   background,
   border,
   borderColor,
-  borderRadius,
   borderWidth,
   boxShadow,
   flex,

best regards

[jacobp100]

You can filter out properties from the transform

https://github.com/styled-components/css-to-react-native?tab=readme-ov-file#api

[duyleekun]

@jacobp100 What if I'm using styled components, is there a way to config this?