useThemedStyles
Build a style table from the theme once per theme and dependency list instead of on every render.
createThemedStyles is the module-level variant: a style factory cached per theme and argument list, for tables keyed by size, variant and the like.useThemedStyles(factory, deps?) calls factory(theme) and memoizes whatever it returns (a plain style object or a StyleSheet.create table) on the theme object plus deps, so the card's styles are rebuilt only when the color scheme switches or compact changes. List everything the factory closes over in deps; the factory itself is not a dependency, so an inline arrow is fine. For styles shared across instances, createThemedStyles((theme, ...args) => styles) returns a function cached per theme and per argument list; the extra arguments must be primitives.Loading demo…
import { useState } from 'react';
import { Text, View } from 'react-native';
import { Block, Switch, resolveRadius, resolveSpacing, useThemedStyles } from '@plocks/ui';
export function Demo() {
const [compact, setCompact] = useState(false);
const styles = useThemedStyles(
(theme) => ({
card: {
padding: resolveSpacing(theme, compact ? 'sm' : 'lg'),
borderRadius: resolveRadius(theme, 'md'),
borderWidth: 1,
borderColor: theme.backgrounds.border,
backgroundColor: theme.backgrounds.subtle,
},
title: { color: theme.text.primary, fontSize: 16 },
meta: { color: theme.text.muted, fontSize: 13 },
}),
[compact]
);
return (
<Block fullWidth maw={360}>
<Switch label="Compact" checked={compact} onChange={setCompact} />
<View style={styles.card}>
<Text style={styles.title}>Weekly report</Text>
<Text style={styles.meta}>Updated 2 hours ago</Text>
</View>
</Block>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources