useStyleProps
Turn the library's style props (
m, p, w, h, bg, opacity, …) into a React Native style resolved against the current theme, so your own components can accept them like the built-in ones do.Tag accepts every style prop by typing its props as StyleProps, splitting them off with extractStyleProps(props) (which returns { styleProps, otherProps }) and resolving them with useStyleProps(styleProps). Spacing tokens resolve through theme.spacing, bg accepts background tokens ('surface', 'subtle'), palette names (a subtle tint) or 'primary.5' shade syntax, and 'full' sizes become '100%'. Horizontal spacing uses logical start/end properties so it mirrors in right-to-left layouts, and edge props win over the shorthands covering them (pt over py over p). The result is memoized on the prop values; resolveStyleProps(props, theme?) is the non-hook version.Loading demo…
import type { ReactNode } from 'react';
import { StyleSheet, View } from 'react-native';
import { Row, Text, extractStyleProps, useStyleProps } from '@plocks/ui';
import type { StyleProps } from '@plocks/ui';
type TagProps = StyleProps & { children: ReactNode };
function Tag(props: TagProps) {
const { styleProps, otherProps } = extractStyleProps(props);
const style = useStyleProps(styleProps);
return (
<View style={[styles.tag, style]}>
<Text>{otherProps.children}</Text>
</View>
);
}
const styles = StyleSheet.create({
tag: { borderRadius: 8 },
});
export function Demo() {
return (
<Row gap="sm" align="center">
<Tag p="xs" bg="primary">xs</Tag>
<Tag p="md" bg="success">md</Tag>
<Tag px="xl" py="sm" bg="warning">xl</Tag>
</Row>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources