Skip to content

Dynamic functions

Dynamic functions
All platforms
2.0.0

If you need to pass a value from JSX to your stylesheet you can do so using a concept called dynamic function.

Usage

To use a dynamic function, change your stylesheet’s value from an object to a function:

const stylesheet = createStyleSheet(theme => ({
container: {
container: () => ({
backgroundColor: theme.colors.background,
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}
})
}))

Now, you can pass any number of arguments, and all with TypeScript hints:

export const Example = ({ maxWidth, isOdd, children }) => {
const { styles } = useStyles(stylesheet)
return (
<View style={styles.container(maxWidth, isOdd)}>
{children}
</View>
)
}
const stylesheet = createStyleSheet(theme => ({
container: (maxWidth: number, isOdd: boolean) => ({
backgroundColor: theme.colors.background,
flex: 1,
justifyContent: 'center,
alignItems: 'center',
maxWidth,
borderBottomWidth: isOdd ? 1 : undefined
})
}))