Button that uses native colors and symbols

Button.tsx

import { Color } from "expo-router";
import { SymbolView, SymbolViewProps } from "expo-symbols";
import React from "react";
import {
  Platform,
  Pressable,
  PressableProps,
  StyleSheet,
  Text,
} from "react-native";

type ButtonVariant = "primary" | "secondary";

interface ButtonProps extends Omit<PressableProps, "style"> {
  variant?: ButtonVariant;
  icon: SymbolViewProps["name"];
  children: string;
}

const getVariantColors = (variant: ButtonVariant) => {
  const isAndroid = Platform.OS === "android";

  if (variant === "primary") {
    return isAndroid
      ? {
          background: Color.android.dynamic.primary,
          text: Color.android.dynamic.onPrimary,
          icon: Color.android.dynamic.onPrimary,
        }
      : {
          background: Color.ios.systemGray6,
          text: Color.ios.label,
          icon: Color.ios.label,
        };
  }

  // secondary
  return isAndroid
    ? {
        background: Color.android.dynamic.surfaceVariant,
        text: Color.android.dynamic.onSurfaceVariant,
        icon: Color.android.dynamic.onSurfaceVariant,
      }
    : {
        background: Color.ios.systemBlue,
        text: "white",
        icon: "white",
      };
};

export const Button: React.FC<ButtonProps> = ({
  variant = "primary",
  icon,
  children,
  ...pressableProps
}) => {
  const colors = getVariantColors(variant);

  return (
    <Pressable
      style={[styles.container, { backgroundColor: colors.background }]}
      {...pressableProps}
    >
      <SymbolView name={icon} size={30} tintColor={colors.icon} />
      <Text style={[styles.text, { color: colors.text }]}>{children}</Text>
    </Pressable>
  );
};

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: 16,
    paddingVertical: 8,
    borderRadius: 100,
    flexDirection: "row",
    alignItems: "center",
    gap: 8,
  },
  text: {
    fontSize: 16,
  },
});