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;