Reason Why you Should use OsmiCSX for React Native Styling

Most react native developer know that styling in react native will take up a lot of space especially inline style, for example:

<View style={{
  flex: 1,
  alignItems: 'center',
  justifyContent: 'center'
}}>
  <Text style={{textAlign:'center', fontWeight:'bold', fontSize:18}}>Hello World!</Text>
</View>

Imagine if you can make it more simple by doing this:

<View style={apply('flex items-center justify-center')}>
  <Text style={apply('text-center text-lg font-bold')}>Hello World!</Text>
</View>

It's more simple right? and if you came from web development and using TailwindCSS, you probably don't need to learn much about OsmiCSX because the pre-defined style is almost the same as TailwindCSS.

Simple External Style File

It will be too much space if you put your style in a view file (e.g. Screen files or Component files). My suggestion for you is to put your style in a different file / external style.
But if you use the default external style file in React Native like this:

import { StyleSheet } from 'react-native'

export default StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'blue'
  },
  text: {
    color: 'white',
    fontSize: 18,
    textAlign: 'center'
  }
})

too many spaces, not simple, I don't like it. It takes 15 lines. Why we don't make it like this?

import { connect } from 'osmicsx'

export default connect({
  container: 'flex items-center justify-center bg-blue-500',
  text: 'text-white text-lg text-center'
})

more simple right? it only takes 6 lines. Let's move on

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
  "primary": "#46B5A7",

  // background colors
  "bg-primary": { backgroundColor: "#46B5A7" },
}

then you can call it with something like this:

apply('primary') // call the colors
apply('bg-primary') // use primary background

You can check more about OsmiProvider Here

Responsive Design

Alright, if you ask me is there any responsive design module? The answer is absolutely yes. OsmiCSX also provides Responsive Width, Height, and Font Size based on Dimensions Window.

Here's some example:

import { apply } from 'osmicsx'

apply('w/50') // return 50% width of window width
apply('h/50') // return 50% height of window height
apply('text/5') // return 5% font size based on window width

So, what do you think? Consider using OsmiCSX in your React Native Project? I highly recommend it. FYI, for the next OsmiCSX Major Update. It will give a new method of styling in React Native.

Something like this:

<View class="flex items-center justify-center" />

Check more about OsmiCSX here

• OsmiCSX Repo
• OsmiCSX Docs