rn-base-components/src/coreComponents/Key.js

Easy to create a component

const KEY_WORD_SPACE = {
  mr: 'margin-right',
  ml: 'margin-left',
  mt: 'margin-top',
  mb: 'margin-bottom',

  mh: 'margin-horizontal',
  mv: 'margin-vertical',

  pr: 'padding-right',
  pl: 'padding-left',
  pt: 'padding-top',
  pb: 'padding-bottom',

  ph: 'padding-horizontal',
  pv: 'padding-vertical',
};

const KEY_WORD_STYLE = {
  // -------------------------- COLUMN --------------------------

  column: {
    'flex-direction': 'column',
  },
  columnCenter: {
    'justify-content': 'center',
    'align-items': 'center',
  },
  columnCenterTop: {
    'align-items': 'center',
  },
  columnCenterBottom: {
    'justify-content': 'flex-end',
    'align-items': 'center',
  },
  columnCenterLeft: {
    'justify-content': 'center',
    'align-items': 'flex-start',
  },
  columnCenterRight: {
    'justify-content': 'center',
    'align-items': 'flex-end',
  },
  columnLeftBetween: {
    'flex-direction': 'column',
    'justify-content': 'space-between',
  },

  // -------------------------- ROW --------------------------

  row: {
    'flex-direction': 'row',
  },
  rowCenter: {
    'flex-direction': 'row',
    'align-items': 'center',
    'justify-content': 'center',
  },
  rowCenterTop: {
    'flex-direction': 'row',
    'justify-content': 'center',
  },
  rowCenterBottom: {
    'flex-direction': 'row',
    'align-items': 'flex-end',
    'justify-content': 'center',
  },
  rowCenterLeft: {
    'flex-direction': 'row',
    'align-items': 'center',
  },
  rowBottomLeft: {
    'flex-direction': 'row',
    'align-items': 'flex-end',
  },
  rowCenterRight: {
    'flex-direction': 'row',
    'align-items': 'center',
    'justify-content': 'flex-end',
  },
  rowCenterBetween: {
    'flex-direction': 'row',
    'align-items': 'center',
    'justify-content': 'space-between',
  },
  rowBottomBetween: {
    'flex-direction': 'row',
    'align-items': 'flex-end',
    'justify-content': 'space-between',
  },
  rowTopBetween: {
    'flex-direction': 'row',
    'align-items': 'flex-start',
    'justify-content': 'space-between',
  },
  rowStartRight: {
    'flex-direction': 'row',
    'align-items': 'flex-start',
    'justify-content': 'flex-end',
  },

  // -------------------------- CENTER --------------------------
  center: {
    alignItems: 'center',
    justifyContent: 'center',
  },

  // -------------------------- CUSTOM VIEW --------------------------

  flex1: {flex: 1},

  hitSlop: {
    left: 20,
    right: 20,
    bottom: 20,
    top: 20,
  },
};

export default {KEY_WORD_SPACE, KEY_WORD_STYLE};