React Native Atomic Style

Make your react native style more easier

Install

# Install using yarn
yarn add @saintno/react-native-atomic-style
# Or prefer npm way
npm install @saintno/react-native-atomic-style

Usage

  // Use with `useStyleBuilder`
  const {s, style, isDarkMode, setDarkMode} = useStyleBuilder();

What included:

s(query: string | TemplateStringArray, ...args: PropStyle[])

Use for tranform style string into react native style

Can be use as two way:

 s('h-100% w-100%', {backgroundColor: "#123321"}) // Function style
 s`h-100% w-100% ${{backgroundColor: "#123321"}}` // Template string style
 // Output => {height: 100%, width: 100%, backgroundColor: "#123321"}

isDarkMode: boolean and setDarkMode(state: boolean)

Use for set app dark mode and get current darkmode value

style: IAppStyles

Current style of app, for getting style value

Support breaks point

For switching style between OS and screens

const defaultBreakpoint = {
    i: Platform.OS === 'ios',
    a: Platform.OS === 'android',
    web: Platform.OS === 'web',
    win: Platform.OS === 'windows',
    mac: Platform.OS === 'macos',
    l: (dark) => !dark,
    d: (dark) => dark,
    pad: SCREEN_TYPE === 'pad',
    lg: SCREEN_TYPE === 'lg',
    sm: SCREEN_TYPE === 'sm',
};
// Example
s`bg-white-i bg-purple-a pa3 br-pill br1-a pl4 pr4 shadow-3`
// => Android will have purple background and ios will have white background

Example

import {useStyleBuilder} from '@saintno/react-native-atomic-style';
/**COMPONENT**/
const {s} = useStyleBuilder();

return <View style={s`flex pa4 br3 ba bc-light bw-3 shadow-6 bg-blue w100 mb2`}>
  <View style={s`flex flex-row center-items`}>
    <Text style={s`white f1 flex-1`}>Hello World</Text>
  </View>
  <Text style={s`mt4 f3 gray white bold`}>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Totam,
    perferendis nulla quod odit aliquam temporibus sed iusto a, sit
    ratione modi et eius? Laboriosam molestiae vero, explicabo quas porro
    aliquid.
  </Text>
  <View style={s`w100 mt4 items-end`}>
    <TouchableOpacity
      style={s`bg-white-i bg-purple-a pa3 br-pill br1-a pl4 pr4 shadow-3`}>
      <Text style={s`bold black-i white-a`}>Click Me</Text>
    </TouchableOpacity>
  </View>
</View>

Make your own builder with makeCustomBuilder

You can make an custom builder for your app style

const {useStyleBuilder} = makeCustomBuilder({
  light: {
    COLORS: {BLUE: '#445599', PINK: '#ff4499'},
    SOLID: {
      l1: 4,
      l2: 8,
      l3: 12,
      l4: 18,
      l5: 32,
      l6: 48,
      l7: 64,
    },
  },
  dark: {
    COLORS: {BLUE: '#445599', PINK: '#ff4499'},
    SOLID: {
      l1: 4,
      l2: 8,
      l3: 12,
      l4: 18,
      l5: 32,
      l6: 48,
      l7: 64,
    },
  },
  // w-100%-lol => only in IOS and Darkmode is turned on
  breakpoints: {lol: (isDark: boolean) => isDark && Platform.OS === 'ios'},
  builder: style => ({
    wow: {
      fontSize: 24 * style.SOLID.l1,
      fontWeight: "600",
      color: style.COLORS.PINK,
    },
    wow2: {
      fontSize: 24 * style.SOLID.l2,
      fontWeight: "600",
      color: style.COLORS.PINK,
    },
    // wow3-value1-value2...
    wow3: (value1: number, value2: string) =>({
      fontSize: 24 * value1,
      fontWeight: "600",
      color: value2,
    })
  }),
});
// IMPORT YOUR useStyleBuilder into COMPONENT
const {s} = useStyleBuilder();
// Try it
s`wow-lol wow3-3-#123321`

Default config

Default value if use useStyleBuilder directly from library

EARLY_DEVICE_RATIO_POINT: 1.8,
THEME_MODE: 'light',
THEME_AUTO: true,
SCALE_BASE: 0.95,
SOLID_SIZE: {
  l1: 4,
  l2: 8,
  l3: 12,
  l4: 18,
  l5: 32,
  l6: 48,
  l7: 64,
},
FONT_SIZE: {
  f1: 26,
  f2: 22,
  f3: 18,
  f4: 14,
  f5: 12,
  f6: 10,
  f7: 8,
},
COLORS_LIGHT: {
  PRIME: '#389bff',
  PURPLE: '#9b71de',
  BLUE: 'blue',
  RED: '#de2f2f',
  ORANGE: 'orange',
  GREEN: 'green',
  WHITE: 'white',
  FONT_LIGHT: '#717171',
  FONT_HARD: '#2b2b2b',
  BACKGROUND_LIGHT: '#f6f6f6',
  BACKGROUND_MED: 'white',
  BACKGROUND_HARD: 'white',
  BLACK: '#000',
  GRAY: '#b6c0cc',
},
COLORS_DARK: {
  PRIME: '#389bff',
  PURPLE: '#9b71de',
  BLUE: 'blue',
  RED: '#ff0266',
  ORANGE: 'orange',
  GREEN: 'green',
  WHITE: 'white',
  FONT_LIGHT: '#5D5D5D',
  FONT_HARD: '#D7D7D7',
  BACKGROUND_LIGHT: '#585858',
  BACKGROUND_MED: '#464646',
  BACKGROUND_HARD: '#333333',
  BLACK: '#000',
  GRAY: '#b6c0cc',
},
LIGHT_FONT_WEIGHT: { thin: '200', bold: 'bold', default: 'normal' },
DARK_FONT_WEIGHT: { thin: '300', bold: 'bold', default: 'normal' },

Support command

Read more at style folder

| Command | About | Note | | :----------------------- | :----------------------------------------------------------------------------- | :------------------------------------------------------------------------------ | | View Size | | | | vw-{size} | Width base on screen's width | value as percent | | vw{percent} | Width base on screen's width | value as percent, 10 each step | | vh-{size} | Height base on screen's height | value as percent | | vh{percent} | Height base on screen's height | value as percent, 10 each step | | vh{solidLevel} | Height = Width = min screen's dimentions (Square view) | Solid level, from 1 - 7 | | wh-{size} | Height = Width = min screen's dimentions (Square view) | value as percent | | wh{solidLevel} | Height = Width = min screen's dimentions (Square view) | Solid level, from 1 - 7 | | h-{size} | height of view, base on parent size for percent or pixel | can be h-100% for 100% or h-100 for 100px | | h{solidLevel} | height of view, base on parent size for percent or pixel | Solid level, from 1 - 7 | | w-{size} | width of view, base on parent size for percent or pixel | can be w-100% for 100% or w-100 for 100px | | w{solidLevel} | width of view, base on parent size for percent or pixel | Solid level, from 1 - 7 | | mh-{size} | maxHeight of view, base on parent size for percent or pixel | can be mh-100% for 100% or mh-100 for 100px | | mh{solidLevel} | maxHeight of view, base on parent size for percent or pixel | Solid level, from 1 - 7 | | mw-{size} | maxWidth of view, base on parent size for percent or pixel | can be mw-100% for 100% or mw-100 for 100px | | mw{solidLevel} | maxWidth of view, base on parent size for percent or pixel | Solid level, from 1 - 7 | | mvh-{size} | maxHeight of view, base on phone's height | value as percent | | mvw-{size} | maxWidth of view, base on phone's width | value as percent | | flex-{size} | define flex size of view | value as number, default is 1 | | Text styles | | | tc | textAlign: center | | | tl | textAlign: left | | | tr | textAlign: right | | | f{fontLevel} | fontSize: ${fontLevel} | With font level from 1-7 | | fw-{weightLevel} | fontWeight: ${weightLevel} | This is font weight level | | bold | fontWeight: ${boldSize} | | | thin | fontWeight: ${thinSize} | | | Object position | | | absolute | position: absolute | | | relative | position: relative | | | top-{pos} | set top position | can be top-10 for 10px or top-10% for 10% from top | | bottom-{pos} | set bottom position | can be bottom-10 for 10px or bottom-10% for 10% from bottom | | left-{pos} | set left position | can be left-10 for 10px or left-10% for 10% from left | | right-{pos} | set right position | can be right-10 for 10px or right-10% for 10% from right | | z-{index} | set zIndex of view | value as number > 0 only | | z100 | set 100 zIndex of view | | | z999 | set 999 zIndex of view | | | z9999 | set 9999 zIndex of view || | pa-{size} | padding view by size | size can be 10% for percent or 10 for pixel | | pt-{size} | paddingTop view by size | size can be 10% for percent or 10 for pixel | | pb-{size} | paddingBottom view by size | size can be 10% for percent or 10 for pixel | | pl-{size} | paddingLeft view by size | size can be 10% for percent or 10 for pixel | | pr-{size} | paddingRight view by size | size can be 10% for percent or 10 for pixel | | ma-{size} | margin view by size | size can be 10% for percent or 10 for pixel | | mt-{size} | marginTop view by size | size can be 10% for percent or 10 for pixel | | mb-{size} | marginBottom view by size | size can be 10% for percent or 10 for pixel | | ml-{size} | marginLeft view by size | size can be 10% for percent or 10 for pixel | | mr-{size} | marginRight view by size | size can be 10% for percent or 10 for pixel | | > All object position have solid size by {prefix}{solidLevel} with solid level from 1 - 7 | Border properties | | | ba | borderStyle solid | | | bat-{width} | borderStyle solid, borderTopWidth | | | bab-{width} | borderStyle solid, borderBottomWidth | | | bar-{width} | borderStyle solid, borderRightWidth | | | bal-{width} | borderStyle solid, borderLeftWidth | | | b--dot | borderStyle dotted | | | b--dash | borderStyle dashed | | | bw-{size} | borderWidth size | size can be 10% for percent or 10 for pixel | | br{solidSize} | borderRadius with solid size | solid size from 1 - 7 level | | br-pill | borderRadius ${pill radius} | | | br--bottom | borderRadius only bottom | | | br--top | borderRadius only top | | | br--left | borderRadius only left | | | br--right | borderRadius only right | | | Utils properties | | | center-items | center all items in view | | | justify-{center,start,end} | justifyContent | | | items-{center,start,end} | alignItems | | | flex-row | flexDirection: row | | | flex-column | flexDirection: column | | | flex-{wrap,nowrap} | flexWrap | | | overflow-{visible,hidden,scroll} | overflow | | | shadow-${depth}-${color} | Drop shadow to view | depth as number default 3, color default #000, depth and color only work on ios | | Color properties | | | o-{alpha} | opacity: alpha size | alpha size from 0-100 as percent | | white | color: ${white} | | prime | color: ${prime} | | purble | color: ${purble} | | blue | color: ${blue} | | orange | color: ${orange} | | red | color: ${red} | | green | color: ${green} | | black | color: ${black} | | light | color: ${fontLight} | | hard | color: ${fontHard} | | {color}-{alphaPercent} | color: ${color} with alpha percent | alphaPercent Should in range (0-100)| | bg-{color}-{alphaPercent} | backgroundColor: color, support all above color, default as ${backgroundHard} | light and hard color with changed to flight and fhard | | bg-med | color: ${backgroundMedium} | | bg-light | color: ${backgroundLight} |