react-native-free-template/template/src/styles/commonStyle.js

React Native template for a quick start with javascript

// Utility styles

// row
export const row = {
  flexDirection: 'row',
};

// margin
export const m5 = {
  margin: 5,
};
export const m10 = {
  margin: 10,
};

// margin top
export const mt5 = {
  marginTop: 5,
};
export const mt10 = {
  marginTop: 10,
};
export const mt15 = {
  marginTop: 15,
};
export const mt20 = {
  marginTop: 20,
};
export const mt30 = {
  marginTop: 30,
};
export const mt40 = {
  marginTop: 40,
};

// margin bottom
export const mb0 = {
  marginBottom: 0,
};
export const mb5 = {
  marginBottom: 5,
};
export const mb10 = {
  marginBottom: 10,
};
export const mb15 = {
  marginBottom: 15,
};
export const mb20 = {
  marginBottom: 20,
};
export const mb30 = {
  marginBottom: 30,
};
export const mb40 = {
  marginBottom: 40,
};

// margin left
export const ml5 = {
  marginLeft: 5,
};
export const ml10 = {
  marginLeft: 10,
};
export const ml15 = {
  marginLeft: 15,
};

// margin right
export const mr5 = {
  marginRight: 5,
};
export const mr10 = {
  marginRight: 10,
};
export const mr15 = {
  marginRight: 15,
};

// padding
export const p10 = {
  padding: 10,
};
export const p15 = {
  padding: 15,
};

// padding top
export const pt10 = {
  paddingTop: 10,
};
export const pt15 = {
  paddingTop: 15,
};
export const pt20 = {
  paddingTop: 20,
};

// padding left
export const pl15 = {
  paddingLeft: 15,
};

// padding right
export const pr15 = {
  paddingRight: 15,
};

// paddingHorizontal
export const ph10 = {
  paddingHorizontal: 10,
};
export const ph15 = {
  paddingHorizontal: 15,
};

// paddingHorizontal
export const pv10 = {
  paddingVertical: 10,
};
export const pv15 = {
  paddingVertical: 15,
};

export const flex1 = {
  flex: 1,
};

// width
export const w50 = {
  width: '50%',
};

export const w100 = {
  width: '100%',
};