#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:

BreakpointWidthCommon devices
xs320pxiPhone 5
sm375pxiPhone 6/6s, Samsung Galaxy S7-9
md414pxiPhone 7-8, Pixel 1-4, Nexus 5X & 6P
lg768pxiPad Mini, iPad Air, iPad 3rd & 4th Gen, Nexus 9
xl1024pxiPad Pro
min-xs0px and above
max-xs319px and below
min-sm320px and above
max-sm374px and below
min-md375px and above
max-md413px and below
min-lg414px and above
max-lg767px and below
min-xl768px and above
max-xl1024px and below

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

BreakpointWidth
mobile480px
tablet768px
desktop1024px
widescreen1200px
fullHD1440px
min-mobile0px and above
max-mobile479px and below
min-tablet480px and above
max-tablet767px and below
min-desktop768px and above
max-desktop1023px and below
min-widescreen1024px and above
max-widescreen1199px and below
min-fullHD1200px and above
max-fullHD1440px and below

#Height breakpoints

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

BreakpointWidthCommon devices
xs568pxiPhone 5, iPod Touch
sm667pxiPhone 6-8, Galaxy S7
md736pxiPhone 6-8 Plus, Pixel 1-2, Nexus 5X, Nexus 6P, Galaxy S8-9
lg896pxiPhone X, iPhone X Max, iPhone 11, iPhone 11 Max, Samsung Galaxy Note 10, Pixel 3-4
xl1024pxiPad, Nexus 9
2xl1366pxiPad Pro, Pixel C, Samsung Galaxy Tab 10
min-xs0px and above
max-xs567px and below
min-sm568px and above
max-sm666px and below
min-md667px and above
max-md735px and below
min-lg736px and above
max-lg895px and below
min-xl896px and above
max-xl1023px and below
min-2xl1024px and below
max-2xl1366px and below

#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:

Editable example

#With applyTheme

You can also use the breakpoint function with applyTheme:

Editable 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: ...
}
}
On this page
Copyright © 2021 Jake Moxey