Price

import { Price } from "@/components/ui/price";

export function MyScreen() {
  return (
    <View className="gap-3">
      {/* Basic price */}
      <Price amount={29.99} />

      {/* With strikethrough (original price) */}
      <View className="flex-row items-center gap-2">
        <Price amount={49.99} strikethrough />
        <Price amount={29.99} />
      </View>

      {/* Different currency */}
      <Price amount={24.99} currency="EUR" locale="de-DE" />

      {/* With prefix */}
      <Price amount={9.99} prefix="From" />
    </View>
  );
}

import React from "react";
import { View, Text } from "react-native";
import { cn } from "@/lib/utils";

export interface PriceProps extends React.ComponentPropsWithoutRef<typeof View> {
  className?: string;
  amount: number;
  currency?: string;
  locale?: string;
  strikethrough?: boolean;
  prefix?: string;
  textClassName?: string;
}

export function Price({
  className,
  amount,
  currency = "USD",
  locale = "en-US",
  strikethrough,
  prefix,
  textClassName,
  ...props
}: PriceProps) {
  const formatted = new Intl.NumberFormat(locale, { style: "currency", currency }).format(amount);

  return (
    <View className={cn("flex-row items-baseline", className)} {...props}>
      {prefix && <Text className={cn("text-sm text-muted-foreground mr-1", textClassName)}>{prefix}</Text>}
      <Text
        className={cn(
          "text-lg font-semibold text-foreground",
          strikethrough && "line-through text-muted-foreground",
          textClassName
        )}
      >
        {formatted}
      </Text>
    </View>
  );
}