Skip to main content
Version: Next

HoC

HoC or Higher-Order Components can be used if you are still using Class Components. This function will add props called apply that can be used for styling.

withStyles

import { withStyles } from "osmicsx";

class Button extends React.Component {
render() {
const { apply } = this.props;

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>
);
}
}

export default withStyles(Button);

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