Logical border properties (and probably others) are broken on IOS

[istarkov]

What happened?

The simple code

export default function Radius() {
  return (
    <View className="flex-1 bg-background pt-safe">
      <View className="m-14 h-40 w-40 items-center justify-center rounded-es-[44px] bg-primary">
        <Text>rounded-es-[44px]</Text>
      </View>

      <View className="m-14 h-40 w-40 items-center justify-center rounded-ee-[44px] bg-primary">
        <Text>rounded-ee-[44px]</Text>
      </View>
    </View>
  );
}

Shows fully different results on IOS and Android (Android is at right and shows the right picture IOS doesn't) (rounded-es-*)

That's not all

border-s-* border-e-* are working
border-bs-* border-be-* are not

Steps to Reproduce

export default function Radius() {
  return (
    <View className="flex-1 bg-background pt-safe">
      <View className="m-14 h-40 w-40 items-center justify-center rounded-es-[44px] bg-primary">
        <Text>rounded-es-[44px]</Text>
      </View>

      <View className="m-14 h-40 w-40 items-center justify-center rounded-ee-[44px] bg-primary">
        <Text>rounded-ee-[44px]</Text>
      </View>
    </View>
  );
}

Open on android and IOS

Snack or Repository Link (Optional)

No response

Uniwind version

1.4.0

React Native Version

0.85.0

Platforms

Android, iOS

Expo

Yes

Additional information

• I've searched for similar issues in this repository and found none
• I am a Uniwind Pro user

[Brentlok]

We're simply converting classNames/CSS to RN's object styles, we're not responsible for how it's rendered. It works the same way when you pass inline borderEndStartRadius

This also applies to

That's not all

border-s-* border-e-* are working
border-bs-* border-be-* are not

There's no borderBlockStartWidth style in RN

[istarkov]

Sorry, Im not getting your answer.
Are u agree that its definitely error or what?

rounded-es-* is definitely an error, but it's like is not uniwind error?

[istarkov]

Basically as tailwind equivalent Im expecting at least working styles to behave the same as on web.

And on android they are. On IOS something happens with rounded-es-*
For me it looks like bug. Why no issues with rounded-ee-*?

"We are just converting" is not solving the issue ;-) It exists.

PS: On IOS ok, on Android is not ;-)

[istarkov]

Seems like https://github.com/react/react-native/blob/a113a9260875f72b1f4c7c5f9c12ef4e56c14f52/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/style/BorderRadiusStyle.kt#L156-L155

topLeft     = (startStart ?: topStart   ?: topLeft     ?: uniform)   // ✅ correct
topRight    = (endStart   ?: topEnd     ?: topRight    ?: uniform)   // ❌ uses endStart, should be startEnd
bottomLeft  = (startEnd   ?: bottomStart?: bottomLeft  ?: uniform)   // ❌ uses startEnd, should be endStart
bottomRight = (endEnd     ?: bottomEnd  ?: bottomRight ?: uniform)   // ✅ correct

[istarkov]

Created issue here react/react-native#57202
But until it resolved, released, published, years will gone.

Having knowledge above, can uniwind fix this under flag, or like?

[Brentlok]

What I mean is: uniwind does not control how React Native/Yoga interprets or renders the final style object.

Uniwind only converts Tailwind-like class names into React Native object styles. So for example:

className="rounded-es-[44px]"

is converted to the corresponding React Native style, e.g. something like:

borderEndStartRadius: 44

If that same style does not render correctly when passed directly as an inline React Native style, then the class name version will not render correctly either.

This is similar to grid: uniwind can parse a class name, but if React Native itself does not support an equivalent layout feature, cannot make it work. The same applies to styles like borderBlockStartWidth, which simply do not exist in React Native.

So yes, I agree there may be a bug, but it looks like the bug is in React Native core / Yoga style resolution, not in uniwind.

[istarkov]

Its not similar to grid, RN supports that just has a bug.
See above, I reported this to RN.

And even it's not uniwind, most of frontend libraries are fixing some underlying architecture bugs to make users happy ;-)

It would be really good to not wait forever until react would fix this, expo will start use it etc. I think 1-2 years or so.

[jpudysz]

You need to understand it's on RN/Yoga layer. We can't fix it in easy way.
You can build your own fork of Yoga in the meantime/ patch it, but it's out of scope of the Uniwind.

[istarkov]

For me it feels like 2 props swap on Android for you. Not sure I can patch Pro version.

Just feel the pain of people who needs to use logical props. Im filling issues everywhere :-) To make my code look and work well :-)