Multiple React Native style sheets, for example:
const styles: ReactNativeStyles = {
container: {
padding: 10
},
title: {
color: "red"
}
}Single Reflect style sheet.
A Reflect style sheet follows the same structure of a React Native style sheet. However, values are extended with arrays, for responsive behaviour and with themed values for theme-based behaviour. For example:
const reflectStyle : ReflectStyle = {
padding: [0, 1, 3], // responive values
color: "primary" // themed value
}Multiple Reflect style sheets.
A Reflect style sheet follows the same structure of a React Native style sheet. However, values are extended with arrays, for responsive behaviour and with themed values for theme-based behaviour. For example:
const reflectStyles : ReflectStyles = {
container : {
padding: [0, 1, 3], // responive values
},
title : {
color: "primary" // themed value
}
}The theme object is based on the System UI Theme Specification and it is used to store design system values and scales. Full explanation with examples: Reflect Guide / Theme
The ThemeProvider component is used to set a global theme. Full explanation with examples: Reflect Guide / ThemeProvider
The os() utility lets you succinctly define platform specific values. Full explanation with examples: Reflect Guide / os()
Use styled() to create theme-based, responsive components. Full explanation with examples: Reflect Guide / styled()
React hook for creating responsive, theme-based style sheets and props. Full explanation with examples: Reflect Guide / useStyled()
React hook for keeping track of window's dimensions and window resize changes.
Generated using TypeDoc
Single react native style sheet, for example:
const style: ReactNativeStyle = { padding: 10, backgroundColor: "blue", };