How to customize button in React Native?

[brunowilliang]

Hi guys, I have this component in React Native:

I wanted to know if this is right, or if I can improve this code?
because in react native you can't pass the styling to the child... so, I thought this way

import { ComponentProps } from "react";
import { Text, Pressable } from "react-native";
import { VariantProps, tv } from "tailwind-variants";

const button = tv({
  base: ["h-14 rounded-md items-center justify-center"],
  variants: {
    variant: {
      primary: "bg-blue-500",
      secondary: "bg-transparent",
    },
  },
});

const text = tv({
  base: ["text-lg font-semibold"],
  variants: {
    variant: {
      primary: "text-white",
      secondary: "text-blue-500",
    },
  },
});

export type ButtonProps = ComponentProps<typeof Pressable> &
  VariantProps<typeof button> & {
    children: React.ReactNode;
  };

export const Button = ({ variant, children, ...props }: ButtonProps) => {
  return (
    <Pressable {...props} className={button({ variant })}>
      <Text className={text({ variant })}>{children}</Text>
    </Pressable>
  );
};