Platform styles#

Bumbag Native enables you to specify platform-specific styling on any component.

In the example below, the Box will appear blue on the web, green on iOS, and red on Android.

<Box
  backgroundColor={{
    web: 'blue',
    ios: 'green',
    android: 'red'
  }}
  width="50px"
  height="50px"
/>

You can also use the native attribute to target the native environment (iOS or Android).

<Box
  backgroundColor={{
    web: 'blue',
    native: 'green'
  }}
  width="50px"
  height="50px"
/>

Grouping by platform#

It is also possible to group style props by platform if the props are mutually exclusive:

<Box
  _web={{
    backgroundColor: 'red'
  }}
  _native={{
    padding: 'major-2'
  }}
  width="50px"
  height="50px"
/>