Estoy tratando de encontrar una forma de utilizar el botón de Native Base, pero solo quiero que el fondo sea degradado. Parece que no puedo encontrar la opción ni puedo encontrar un buen punto de inyección en el código.

https://github.com/GeekyAnts/NativeBase/issues/37

Mi implementación actual se parece a esto, pero tiene el problema de que el botón es el texto y no el área completa.

 import { Box, Button, IButtonProps, useThemeProps } from "native-base"; import React, { useCallback, useMemo, useState } from "react"; import type { GestureResponderEvent, LayoutChangeEvent } from "react-native"; export const GradientButton = ({ children, colorScheme = "primary", ...buttonProps }: IButtonProps): JSX.Element => { const buttonThemeProps = useThemeProps("Button", buttonProps); const [pressed, setPressed] = useState(false); const handlePressIn = useCallback( (e: GestureResponderEvent) => { setPressed(true); if (buttonProps.onPressIn) { buttonProps.onPressIn(e); } }, [buttonProps] ); const handlePressOut = useCallback( (e: GestureResponderEvent) => { setPressed(false); if (buttonProps.onPressOut) { buttonProps.onPressOut(e); } }, [buttonProps] ); const colors = useMemo( () => pressed ? [`${colorScheme}.500`, `${colorScheme}.600`] : [`${colorScheme}.400`, `${colorScheme}.500`], [pressed] ); return ( <Box {...buttonThemeProps} overflow="hidden" bg={{ linearGradient: { start: [0, 0], end: [0, 1], colors, }, }} onLayout={handleLayout} > <Button {...buttonProps} p="0" onLayout={handleLayout} bg="transparent" colorScheme={colorScheme} _pressed={{ bgColor: "transparent" }} onPressIn={handlePressIn} onPressOut={handlePressOut} > {children} </Button> </Box> ); };