React Native Tailwind-esque Styles

component.js

import React from "react";
import { View, Text, TouchableHighlight } from "react-native";
import { styles as s } from "../../Styles";
import { colors } from "../../Colors";

function OrderHeader() {
  return (
    <View>
      <TouchableHighlight
        style={s("py-16", "items-center")}
        underlayColor={colors["grey-200"]}
      >
        <View style={s("items-center")}>
          <Text style={s("text-lg", "mb-4")}>Bud Abbott</Text>
          <Text style={s("text-sm", "text-grey-300")}>Order # 1234567890</Text>
        </View>
      </TouchableHighlight>
    </View>
  );
}

export default OrderHeader;

Styles.js

import React from "react";
import { StyleSheet } from "react-native";
import { colors } from "./Colors";

let stylesheet = StyleSheet.create({
  "flex-1": { flex: 1 },
  "flex-row": { flexDirection: "row" },
  "justify-around": { justifyContent: "space-around" },
  "justify-between": { justifyContent: "space-between" },
  "items-center": { alignItems: "center" },
  "text-center": { textAlign: "center" },
  "font-bold": { fontWeight: "bold" },
  "text-base": { fontSize: 14 },
  "text-md": { fontSize: 16 },
  "text-lg": { fontSize: 18 },
  "text-xl": { fontSize: 24 },
  "w-half": { width: "50%" },
  "w-one-third": { width: "33%" },
  "w-two-thirds": { width: "66%" },
  "w-full": { width: "100%" }
});

for (let colorKey of Object.keys(colors)) {
  stylesheet[`bg-${colorKey}`] = { backgroundColor: colors[colorKey] };
  stylesheet[`text-${colorKey}`] = { color: colors[colorKey] };
  stylesheet[`border-${colorKey}`] = { borderColor: colors[colorKey] };
}

for (let size of [1, 2, 4, 8, 16, 24, 32, 48, 64, 96, 128, 256]) {
  stylesheet[`m-${size}`] = { margin: size };
  stylesheet[`mt-${size}`] = { marginTop: size };
  stylesheet[`mr-${size}`] = { marginRight: size };
  stylesheet[`mb-${size}`] = { marginBottom: size };
  stylesheet[`ml-${size}`] = { marginLeft: size };
  stylesheet[`mx-${size}`] = { marginLeft: size, marginRight: size };
  stylesheet[`my-${size}`] = { marginTop: size, marginBottom: size };
  stylesheet[`p-${size}`] = { padding: size };
  stylesheet[`pt-${size}`] = { paddingTop: size };
  stylesheet[`pr-${size}`] = { paddingRight: size };
  stylesheet[`pb-${size}`] = { paddingBottom: size };
  stylesheet[`pl-${size}`] = { paddingLeft: size };
  stylesheet[`px-${size}`] = { paddingLeft: size, paddingRight: size };
  stylesheet[`py-${size}`] = { paddingTop: size, paddingBottom: size };
  stylesheet[`border-${size}`] = { borderWidth: size };
  stylesheet[`border-t-${size}`] = { borderTopWidth: size };
  stylesheet[`border-r-${size}`] = { borderRightWidth: size };
  stylesheet[`border-b-${size}`] = { borderBottomWidth: size };
  stylesheet[`border-l-${size}`] = { borderLeftWidth: size };
  stylesheet[`w-${size}`] = { width: size };
  stylesheet[`h-${size}`] = { height: size };
}

let styles = (...styleNames) => {
  let reactStyles = {};

  styleNames.forEach(name => {
    if (Object.keys(stylesheet).includes(name)) {
      let keys = Object.keys(stylesheet[name]);
      keys.forEach(key => {
        reactStyles[key] = stylesheet[name][key];
      });
    }
  });

  return reactStyles;
};

export { styles };