React Native Mapped Style Generation

createMappedStyle.ts

import { StyleSheet, ViewStyle } from "react-native";

type ValueOf<T> = T[keyof T];

type mapFunc<V extends ValueOf<ViewStyle>> = (
  key: string,
  value: V
) => ViewStyle;

/**
 * Creates a style object from a map of key-value pairs.
 * @example
 * const horizontalPaddingStyles = 
 *   createMappedStyle("horizontalPadding", { sm: 2, md: 4 });
 */
export function createMappedStyle<
  T extends keyof ViewStyle,
  V extends ViewStyle[T],
  M extends { [key: string]: V }
>(style: T | mapFunc<ValueOf<M>>, map: M) {
  return StyleSheet.create(
    Object.entries(map).reduceRight(
      (acc, [key, value]) => ({
        ...acc,
        [key]:
          typeof style === "string"
            ? {
                [style]: value,
              }
            : style(key, value as ValueOf<M>),
      }),
      {}
    ) as { [key in keyof M]: ViewStyle }
  );
}