Want to make a higher/lower order component based on NativeBase but don't want to change a whole bunch of shit or register your component via NativeBase? Cba to register a variant? Or a theme? Or some other nuance? native-base v.3.4.19 - heres a dumb reusable ContactUsButton component

ContactUsButton.js

import { FontAwesome5 } from "@expo/vector-icons";
import Constants from "expo-constants";
import useIconSizeInPixels from "useIconSizeInPixels";
import useNativeBaseProps from "useNativeBaseProps";
import { Box, Button, useToken } from "native-base";
import { Linking } from "react-native";

const defaultProps = {
	bg: "transparent",
	size: "lg",
	variant: "outline",
	_stack: {
		space: 2,
	},
	_text: {
		fontWeight: "bold",
	},
	_hover: {
		bg: "transparent",
	},
};

const ContactUsButton = (_props) => {
	const props = useNativeBaseProps("Button", _props, defaultProps);
	const iconSize = useIconSizeInPixels(props._icon.size);
	const iconColor = useToken("colors", props._icon.color);

	return (
		<Box alignItems="center">
			<Button
				{...props}
				onPress={() => {
					Linking.openURL(`mailto:${Constants.expoConfig.extra.supportEmail}`).catch(
						console.error
					);
				}}
				rightIcon={
					<FontAwesome5 name={"envelope"} color={iconColor} solid size={iconSize} />
				}
			>
				Need to contact us?
			</Button>
		</Box>
	);
};

export default ContactUsButton;

useIconSizeInPixels.js

import { useToken } from "native-base";

export default function useIconSizeInPixels(nativeBaseIconSize) {
	const iconSize = useToken("components.Icon.sizes", nativeBaseIconSize);
	const pxSize = useToken("sizes", iconSize);

	return pxSize;
}

useNativeBaseProps.js

import defaultsDeep from "lodash.defaultsdeep";
import { useThemeProps } from "native-base";

export default function useNativeBaseProps(component, inheritedProps = {}, defaultProps = {}) {
	return useThemeProps(component, defaultsDeep({}, inheritedProps, defaultProps));
}