Skip to main content
Version: Next

Usage

Inline Style

Use osmicsx as inline style via style attribute

import { View } from "react-native";
import { useStyles } from "osmicsx";

const Rectangle = () => {
const { apply } = useStyles();

return <View style={apply("w-100 h-100 bg-blue-500 rounded")} />;
};

export default Rectangle;

Separate Style File

Create your styling file

export default {
container: "flex items-center justify-center",
rectangle: "w-100 h-100 bg-blue-500 rounded",
};

Import style file in your screen/component file

import { View } from "react-native";

// styles
import { useStyles } from "osmicsx";
import styles from "./HomeScreenStyle.js";

const HomeScreen = () => {
const { apply } = useStyles();

return (
<View style={apply(styles.container)}>
<View style={apply(styles.rectangle)} />
</View>
);
};

export default HomeScreen;

Multiple Style

Example

import { Pressable, View } from "react-native";

// styles
import { useStyles } from "osmicsx";
import styles from "./HomeScreenStyle.js";

const HomeScreen = () => {
const { apply } = useStyles();

return (
<View style={apply(styles.container)}>
<Pressable
style={apply(
styles.button,
"bg-primary-500",
disabled && "bg-opacity-50"
)}
/>
</View>
);
};

export default HomeScreen;