The <Border> primitive is designed to circumvent a couple of issues that could be source of headaches developing on a broad cross-platform system.

Usage

import React from 'react'
import { Border } from '@primitives/border'
import { Block } from '@primitives/border'
import { Text } from '@primitives/text'

const HelloWorld = () => (
  <Block>
    <Border
      topWidth={2}
      rightWidth={2}
      bottomWidth={2}
      leftWidth={2}
      color={[240, 0, 230, 1]}
    />
    <Text>Hello World!!</Text>
  </Block>
)

Properties

| Property | Type | Description | Required | | ----------------- | -------- | --------------------------------- | -------- | | Color | TColor | * | yes | | topLeftRadius | number | px to top left radius | | | topRightRadius | number | px to top right radius | | | bottomRightRadius | number | px to bottom right radius | | | bottomLeftRadius | number | px to bottom left radius | | | topWidth | number | px top width | | | rightWidth | number | px right width | | | bottomWidth | number | px bottom width | | | leftWidth | number | px left width | | | overflowBottom | number | px offset from bottom container | | | overflowLeft | number | px offset from left container | | | overflowRight | number | px offset from right container | | | overflowTop | number | px offset from top container | |

*TColor: a tuple that will translate to rgba format, comes Colorido

Borders in Native vs Borders in the Web

CSS box-model offers an alternative in the web which approximates the bounding area to the one designers are more used to think. So, for web it‘s now a widespread good practice to work with box-sizing: border-box set at the top of an application global styles.

Though in React Native it‘s a different story. There is no alternative and the box-model is always content-box. In addition, there aren‘t many display types, being flex the norm there.

This is likely to cause slight discrepancies in the layout that are perceivable to every user and could disrupt the experience when setting borders or using any of the popular border hacks (with wrapping elements).