Breakpoints#

In Bumbag Native, breakpoints are defined in two directions: width breakpoints & height breakpoints.

Width breakpoints#

Bumbag Native comes with 5 defined width breakpoints & their ranges:

Bumbag Native also inherits the web width breakpoints for you to optionally use:

Height breakpoints#

Bumbag Native comes with 6 defined height breakpoints & their ranges:

Adding breakpoints to the theme#

You are able to add your own breakpoints to the global theme.

You must specify the breakpoints for each platform (web, ios & android):

import { Provider } from 'bumbag-native';
const breakpoints = {
  width: {
    customWidth: 1000
  },
  height: {
    customHeight: 2000
  }
}
const theme = {
  breakpoints: {
    web: breakpoints,
    ios: breakpoints,
    android: breakpoints,
  }
}
<Provider theme={theme}>Hello world!</Provider>

Using breakpoints#

Note: Unfortunately, breakpoints in Bumbag Native on the web are currently not dynamically responsive. This means that changing your browser width will not trigger the breakpoint value to change. You will need to first refresh your browser.

With style props#

You can add responsive style props via the breakpoint function:

<Box
  backgroundColor={breakpoint('width', { default: 'red', 'max-tablet': 'blue' })}
  height="100px"
  width="100px"
/>

With applyTheme#

You can also use the breakpoint function with applyTheme:

const FancyBox = applyTheme(Box, {
  styles: {
    base: props => ({
      backgroundColor: breakpoint('width', { default: 'red', 'max-tablet': 'blue' })(props),
      width: '100px',
      height: '100px'
    })
  }
})

function Example() {
  return (
    <FancyBox />
  );
}

render(Example)

Theming#

Schema#

const theme = {
  breakpoints: {
    ios: {
      height: {
        xs: number,
        sm: number,
        md: number,
        lg: number,
        xl: number,
        2xl: number,
      },
      width: {
        xs: number,
        sm: number,
        md: number,
        lg: number,
        xl: number,
      }
    },
    android: ...,
    web: ...
  }
}