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:
transform
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.