I just finished adding the threaded border around my app cards. Though it looks simple, it was surprisingly difficult to add. React Native seems to have a longterm bug (an issue for it is present on github) where rounded corners alongside a dashed pattern for the border css property of an element breaks. It just becomes a solid-lined square.

So the only solution and workaround, as this was vital to its look, was to use svgs. So I used an svg rect with all the attributes I needed and molded it to the shape. I spent a solid few hours debugging this, as it wouldn’t show. Finally, I found out that Tamagui’s view element does not seem to initialize with a width nor height, meaning it would initialize an element holder with those attributes set to undefined. I also had incorrectly reffered the attributes as .w and .h instead of their lengthier counterparts.

In summary, it was a hard, but very crucial experience, learning to be careful with mixing on library elements and workarounds for things that don’t exist.