RN 0.57.3 breaks CSS triangles on iOS

[lfkwtz]

Environment

  React Native Environment Info:
    System:
      OS: macOS 10.14.2
      CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
      Memory: 191.33 MB / 16.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 8.12.0 - ~/.nvm/versions/node/v8.12.0/bin/node
      Yarn: 1.12.3 - ~/.yarn/bin/yarn
      npm: 6.4.1 - ~/.nvm/versions/node/v8.12.0/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
      Android SDK:
        API Levels: 28
        Build Tools: 28.0.3
        System Images: android-28 | Google APIs Intel x86 Atom
    IDEs:
      Android Studio: 3.2 AI-181.5540.7.32.5014246
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.6.3 => 16.6.3 
      react-native: 0.57.8 => 0.57.8 
    npmGlobalPackages:
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7

Description

#21208 breaks CSS triangles created via borders in iOS

RN 0.57.3

RN 0.57.2

Reproducible Demo

        <View
          style={{
            backgroundColor: "transparent",
            borderBottomWidth: 80,
            borderBottomColor: "gray",
            borderRightWidth: 80,
            borderRightColor: "transparent",
            borderLeftWidth: 80,
            borderLeftColor: "transparent",
            width: 0,
            height: 0
          }}
        />
        <View
          style={{
            backgroundColor: "transparent",
            borderLeftWidth: 80,
            borderLeftColor: "gray",
            borderTopWidth: 80,
            borderTopColor: "transparent",
            borderBottomWidth: 80,
            borderBottomColor: "transparent",
            width: 0,
            height: 0
          }}
        />
        <View
          style={{
            backgroundColor: "transparent",
            borderTopWidth: 80,
            borderTopColor: "gray",
            borderRightWidth: 80,
            borderRightColor: "transparent",
            borderLeftWidth: 80,
            borderLeftColor: "transparent",
            width: 0,
            height: 0
          }}
        />
        <View
          style={{
            backgroundColor: "transparent",
            borderRightWidth: 80,
            borderRightColor: "gray",
            borderTopWidth: 80,
            borderTopColor: "transparent",
            borderBottomWidth: 80,
            borderBottomColor: "transparent",
            width: 0,
            height: 0
          }}
        />

[simform-solutions]

https://codedaily.io/tutorials/22/The-Shapes-of-React-Native

[lfkwtz]

That guide was probably created pre-0.57.3

[fbartho]

@lfkwtz -- Which style of triangle is correct? It looks to me like this is a regression in 0.57.3?

[lfkwtz]

@fbartho yup it's a regression in 0.57.3 - the left style is "correct", the right style is how 0.57.3 now shows that same triangle.