Skip to main content
Version: 1.1

Hooks

OsmiCSX provide custom hooks to make styling more easier inside functional component.

useStyles

import { useStyles } from "osmicsx";

export const Button = () => {
const { apply } = useStyles();

return (
<TouchableOpacity
activeOpacity={0.8}
style={apply("py-2 px-5 rounded-lg bg-blue-500")}
>
<Text style={apply("text-sm font-semibold text-white")}>Click Me</Text>
</TouchableOpacity>
);
};

Return Type

NameTypeDescription
apply(...args: string[]) => anyreturn an object styles or string (if only apply color-name)
switchTheme(mode: keyof typeof ThemeMode) => voidmode can be dark, light, or system
scaleWidth(width: number) => numberreturn width in number depends on screen resolution
scaleHeight(height: number) => numberreturn height in number depends on screen resolution