Simplify Your React Native Style with OsmiCSX

Styling on react native is still quite long if we still use the full jsx object as is normal in react native. What if there is a framework for react native styling easily?

OsmiCSX is here to make styling in React Native even simpler. We no longer need to create objects for the style component. Just call style namespaces and boom, your components will look good.

here's the example of making reusable button component with OsmiCSX style

import React from 'react
import { TouchableOpacity, Text } from 'react-native'
import { apply } from 'osmicsx'

const button = props => {
  const { ...restProps } = props

  return (
    <TouchableOpacity
    {...restProps}
    style={apply(
      "bg-blue-500",
      "p-3",
      "px-5",
      "rounded-md"
    )}>
      <Text style={apply("text-white", "text-center", "text-sm")}>{restProps.title}</Text>
    </TouchableOpacity>
  )
}

export default button

or you prefer to split the styling code to another file, you also can use OsmiCSX to simplify it!

import { connect } from '../lib/OsmiConfig' // your osmi config path

export default connect({
  container: [
    "bg-blue-500",
    "p-2",
    "pl-5",
    "pr-5",
    "rounded"
  ],
  text: [
    "text-white",
    "text-base",
    "font-bold",
    "text-center"
  ]
})

Introducing OsmiCSX v0.4.0 🎉🎉🎉
in this version, we're more simplify the ability to styling in React Native. For inline style, you don't need to use an array anymore on apply() method helper.

What is OsmiCSX ?
OsmiCSX is a utility React Native style framework for rapidly building custom user interfaces. We adopted the Tailwind concept and implement it for styling in React Native. OsmiCSX designed for customizing UI in React Native and makes a reusable component with the style as you want with very simple code.

Why OsmiCSX ?
Most Style/UI framework in React Native only focused on the UI Component and not really customizable. They come with all sorts of predesigned components like buttons, cards, and alerts that might help you move quickly at first, but cause more pain than they cure when it comes time to make your site stand out with a custom design.

OsmiCSX is different.

Instead of opinionated predesigned components, OsmiCSX provides a low-level utility style that lets you build completely custom designs.

GitHub => github.com/OsmiCSX/osmicsx
Docs => osmicsx.github.io/docs