Custom Component, simple version

custom-component.tsx

import { PropsWithChildren } from "react";
import { StyleSheet } from "react-native";
import {
  TouchableOpacity,
  TouchableOpacityProps,
} from "~/components/overrides";
import { createStyleSheet, useStyles } from "~/utils/theme-utils";

interface Props extends PropsWithChildren, TouchableOpacityProps {
  variant?: "blue" | "purple" | "default";
}

export const CustomButton: React.FC<Props> = ({ children, ...props }) => {
  const { styles } = useStyles(styleSheet);

  return (
    <TouchableOpacity
      {...props}
      style={StyleSheet.flatten([styles.default, props.style])}
    >
      {children}
    </TouchableOpacity>
  );
};

const styleSheet = createStyleSheet((theme) => ({
  default: {
    paddingHorizontal: 2,
    paddingVertical: 2,
    alignItems: "center",
    justifyContent: "center",
    borderRadius: 8,
    backgroundColor: theme.colors.buttonSecondaryEnabled,
  },
}));