Common styles declares for React Native

styles.js

import ratio from './ratio';
import colors from './colors';
// FontWeight - Bold
const bold = { fontWeight: 'bold' };
// border bottom - 1, color - lightGray
const borderBottomLightGray = { borderBottomWidth: 1, borderColor: colors.lightGray };
// fontSize
const size10 = { fontSize: ratio.fontScale(10) };
const size11 = { fontSize: ratio.fontScale(11) };
const size12 = { fontSize: ratio.fontScale(12) };
const size13 = { fontSize: ratio.fontScale(13) };
const size14 = { fontSize: ratio.fontScale(14) };
const size15 = { fontSize: ratio.fontScale(15) };
const size16 = { fontSize: ratio.fontScale(16) };
const size17 = { fontSize: ratio.fontScale(17) };
const size18 = { fontSize: ratio.fontScale(18) };
const size19 = { fontSize: ratio.fontScale(19) };
const size20 = { fontSize: ratio.fontScale(20) };
// backgroundColor
const bgPink = { backgroundColor: colors.pink };
const bgLightGray = { backgroundColor: colors.lightGray };
const bgTextGray = { backgroundColor: colors.textGray };
const bgHeaderColor = { backgroundColor: colors.headerColor };
const bgInputColor = { backgroundColor: colors.inputColor };
const bgPlaceholderColor = { backgroundColor: colors.placeholder };
const bgWhite = { backgroundColor: colors.white };
const bgButtonShadowColor = { backgroundColor: colors.buttonShadow };
const bgSwitchPassive = { backgroundColor: colors.switchPassive };
const bgBlack = { backgroundColor: colors.black };
const bgTransparent = { backgroundColor: colors.transparent };
const bgGhostWhite = { backgroundColor: colors.ghostWhite };
const bgFullColor = { backgroundColor: colors.fullColor };

// color
const tcPink = { color: colors.pink };
const tcLightGray = { color: colors.lightGray };
const tcTextGray = { color: colors.textGray };
const tcHeaderColor = { color: colors.headerColor };
const tcInputColor = { color: colors.inputColor };
const tcPlaceholderColor = { color: colors.placeholder };
const tcWhite = { color: colors.white };
const tcButtonShadowColor = { color: colors.buttonShadow };
const tcSwitchPassive = { color: colors.switchPassive };
const tcBlack = { color: colors.black };
const tcTransparent = { color: colors.transparent };
const tcGhostWhite = { color: colors.ghostWhite };
const tcFullColor = { color: colors.fullColor };

export {
  bold,
  borderBottomLightGray,
  size10,
  size11,
  size12,
  size13,
  size14,
  size15,
  size16,
  size17,
  size18,
  size19,
  size20,
  tcPink,
  tcLightGray,
  tcTextGray,
  tcHeaderColor,
  tcInputColor,
  tcPlaceholderColor,
  tcWhite,
  tcButtonShadowColor,
  tcSwitchPassive,
  tcBlack,
  tcTransparent,
  tcGhostWhite,
  tcFullColor,
  bgPink,
  bgLightGray,
  bgTextGray,
  bgHeaderColor,
  bgInputColor,
  bgPlaceholderColor,
  bgWhite,
  bgButtonShadowColor,
  bgSwitchPassive,
  bgBlack,
  bgTransparent,
  bgGhostWhite,
  bgFullColor
};