@saintno/react-native-atomic-style v2.0.3-rc2

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

| > 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} |