Custom Named Predefined Styles

[DeVoresyah]

Background

I found an interesting case from this repo => https://github.com/hanyang7427/SpaceX/blob/main/src/preDefine.ts
It's kinda painful when someone wants to create a custom-named predefined style and use it in some file. They need to define first, then export, and import. It takes effort.

So, let's improve by making a behavior similar to the web CSS. We can assume this custom predefined looks like a class name in web CSS.

Approach

Adding new props on OsmiProvider

let's store all the custom-named predefined style into provider to make it easy to access later.

const styleUtilities = {
  container: 'flex items-center justify-center'
}
<OsmiProvider utilities={styleUtilities}>
</OsmiProvider>

Usage

<View style={apply("container")}>
  <Text>Hello World</Text>
</View>

notice that we can use container from style utilities directly on apply method. This will be easier other than you defined and import manually like below:

import globalStyles from '/globalStyles.ts'

apply(globalStyles.container)