Breakpoints

Breakpoints extend Media Queries. THey are points where the app content responds according to the device width, allowing you to write cleaner code without repeatedly rewriting the same Media Query strings.

// Examples
StyleSheet.create((o) => ({
  [o.sm]: {
    backgroundColor: 'blue';
  },
  [o.mdUp]: {
    backgroundColor: 'pink';
  }
}))

Default Breakpoints: 360, 576, 768, 1280, 1920 Configure

Breakpoint	Default Width (px)
sm	<360
sm	361 - 576
md	577 - 768
lg	769 - 1280
xl	>1281

smDown	<576
mdDown	<768
lgDown	<1280

smUp	>576
mdUp	>768
lgUp	>1280

Hook#

const isLarge = useBreakpoint('lg');

Function#

const sm = getBreakpoint('sm');

// Output
{
  name: 'sm',
  media: '(min-width: 360) and (max-width: 576)',
  active: true | false,
  value: 576,
}

Configure#

import Skyle from 'skyle';

Skyle.configure({
  breakpoints: {
    xs: 360,
    sm: 576,
    ...
  },
});