Reasons Why You Should Use OsmiCSX in Your React Native Project
Tags: javascript, reactnative, styling
Published: 2021-07-07 14:55:12

---
title: Reasons Why You Should Use OsmiCSX in Your React Native Project
published: true
description: Reasons Why You Should Use OsmiCSX in Your React Native Project
tags: javascript, reactnative, styling
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7a14223di425dbg60brq.jpg
---
![Reasons Why You Should Use OsmiCSX in Your React Native Project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7a14223di425dbg60brq.jpg)

**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:
```jsx
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`**
```jsx
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`**
```jsx
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`**
```javascript
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:
```javascript
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:
```jsx
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>
  )
}
```

There're 3 option that you can be used for `.switch()` method. `light`, `dark`, and `system`. For more details check [Documentation](https://osmicsx.dev/docs/appearance/dark-theme)

---

There're many more that I can't explain 1 by 1, go and explore OsmiCSX with yourself ;)
- [OsmiCSX Repo](https://github.com/OsmiCSX/osmicsx)
- [OsmiCSX Docs](https://osmicsx.dev)