Breakpoints

Any style can change based on breakpoints. To do this, change a value to an object:

const stylesheet = createStyleSheet(theme => ({
    container: {
       flex: 1,
       justifyContent: 'center',
       alignItems: 'center',
       backgroundColor: {
         // your breakpoints
         xs: theme.colors.background,
         sm: theme.colors.barbie
       }
    },
    text: {
       color: theme.colors.typography
    }
}))

You can even use it with nested objects like transform or shadowOffset:

const stylesheet = createStyleSheet(theme => ({
    container: {
       flex: 1,
       justifyContent: 'center',
       alignItems: 'center',
       backgroundColor: {
         xs: theme.colors.background,
         sm: theme.colors.barbie
       },
       transform: [
           {
               translateX: 100
           },
           {
               scale: {
                   xs: 1.5,
                   ':w[500]': 1
               }
           }
       ]
    }
}))

Library will choose the correct value (based on screen width) in the runtime.

There are two predefined breakpoints for mobile: landscape and portrait. If you register your own breakpoints, these will be overridden.