Theme.js

Theme.js

const theme = {
  colors: {
    textPrimary: '#24292e',
    textSecondary: '#297',
    primary: '#0366d6',
  },
  fontSizes: {
    body: 14,
    subheading: 16,
  },
  fonts: {
    main: 'System',
  },
  fontWeights: {
    normal: '400',
    bold: '700',
  },
  paddingSahil: {
    padding: 50,
    fontSize: 40,
  },
  strikedTextLine: {
    textDecorationLine: "line-through"
  },
  underlinedTextLine: {
    textDecorationLine: "underline",
  },
  bold: {
    fontWeight: 'bold'
  },
  italics: {
    fontStyle: 'italic'
  },
  fontSize20: {
    fontSize: 20,
  },
  // Always refactor the property names with F2, so it would change it everywhere used.
  fontSize30: {
    fontSize: 30,
  },
  centerAlignContent: {
    alignContent: "center"
  },
  centerTextAlign: {
    padding: 50,
    textAlign: 'center',
  },
  backgroundYellow: {
    backgroundColor: 'yellow',
  },
  roundBorder: {
    borderRadius: 20
  },
  padding: {
    padding: 2
  },
  margin30: {
    margin: 30
  },
  margin60: {
    margin: 60
  },
};
export default theme;
// ────────────────────────────────────────────────────────
// const styleObject = StyleSheet.flatten([
//   theme.bold,
//   theme.backgroundYellow,
//   { // Here comes custom styling. Yikess!!
//     padding: 30,
//     margin: 40
//   }
// ])
// ────────────────────────────────────────────────────────