Reasons Why You Should Use OsmiCSX in Your React Native Project

OsmiCSX v0.6.5 has came out, new features has been added along with new documentation website. In this article I will tell you why OsmiCSX so worth it to be used in your React Native project.

What is OsmiCSX ?

OsmiCSX is a utility React Native style framework for rapidly building custom user interfaces. OsmiCSX adopts the TailwindCSS concept. We want to implement the same coding style in React Native, styling the component just by calling the style name. But, because React Native does not use CSS browser, tailwind is not directly compatible with React Native. That's the problem OsmiCSX is trying to solve.

Simple Inline Style

The default code style in React Native require as an object. It will make the line code long, but with OsmiCSX it can be simplify. For example we want to create a container with flex, background white, and the content is center. Here's the code:

import React from "react"
import { View, Text } from "react-native"
import { apply } from "./OsmiProvider"

const App = () => {
  return (
    <View style={apply("flex items-center justify-center bg-white")}>
      <Text style={apply("text-2xl font-bold text-center")}>Hello World</Text>
    </View>
  )
}

Simple Right?

Separate Styling Code from Render Code

Don't like inline style? No worries, you can separate your styling from render logic. Let's say we gonna create a Button reusable component

Button.js

import React, { memo } from "react"
import { TouchableOpacity, Text } from "react-native"

// styles
import styles from "./ButtonStyle"

const Button = props => {
  const { buttonStyle, labelStyle, title } = props

  return (
    <TouchableOpacity activeOpacity={0.8} {...props} style={[styles.container, buttonStyle]}>
      {props?.children ?? (
        <Text style={[styles.label, labelStyle]}>{title}</Text>
      )}
    </TouchableOpacity>
  )
}

export default memo(Button)

ButtonStyle.js

import { connect } from "./OsmiProvider"

export default connect({
  container: "py-2 px-5 bg-blue-500 rounded-md",
  label: "text-white text-base font-bold"
})

With this pattern, you and your team can maintain the project more easier.

Fully Customize

Does your company have a Design System or Design Guidelines? If yes, you should consider using OsmiCSX in your React Native Project. Why? Because OsmiCSX is fully customized, you can write a design system or design pattern for your project.

OsmiCSX provides you with OsmiProvider that allows you to customize a theme for your app project, implement a design system or design pattern.

CustomTheme.js

export default {
  colors: {
    // custom colors
  },
  spacing: {
    // custom spacing
  },
  border: {
    width: {
        // border width
    },
    radius: {
        // border radius
    }
  },
  font: {
    family: {
        // font family
    },
    size: {
        // font size
    }
  }
}

Dark Theme

Ok, this is new feature that just came out in v0.6.5. OsmiCSX now support dark theme, and it's also provide switcher. So, you can switch your app theme to light, dark, or use system appearance based on user device.

First, to use dark theme you need to add prefix dark: to your style. Example:

apply("flex bg-white dark:bg-gray-900")

It will use bg-white on light mode, and bg-gray-900 on dark mode. Next step, step if you want add switch theme button in your app, the whole code will be like this:

import React, { useState } from "react"
import { TouchableOpacity, View, Text } from "react-native"

import { apply } from "./OsmiProvider"
import { appearanceHook } from "osmicsx"

const Settings = props => {
  const [currentTheme, setCurrentTheme] = useState(appearanceHook.theme)

  const switchTheme = (value) => {
    appearanceHook.switch(value)
    setCurrentTheme(value)
  }

  return (
    <View style={apply("flex bg-white dark:bg-gray-900 items-center justify-center")}>
      <Text style={apply("text-gray-900 dark:text-white text-center text-2xl font-bold")} onPress={() => switchTheme("light")}>Switch to Light</Text>
      <Text style={apply("text-gray-900 dark:text-white text-center text-2xl font-bold")} onPress={() => switchTheme("dark")}>Switch to Dark</Text>
    </View>
  )
}