Estoy tratando de agregar componentes con estilo a mi proyecto, pero tengo algunos problemas para cambiar el estilo en función de los accesorios del componente con estilo. Cada vez que trato de hacer esto - ancho: ${(props) => (props.wide ? '100%' : undefined)}; Obtengo una Property 'wide' does not exist on type 'ThemedStyledProps<PressableProps & RefAttributes<View>, DefaultTheme>'. error.

Estoy pasando variant , wide y style al componente con estilo y tengo el tipo de accesorios definido así:

 type StyledPressableProps = { variant?: ButtonVariant; wide?: boolean; } & PressableProps;

Pero sigo recibiendo un error de TS.

Mi código:

 import React, { FunctionComponent } from 'react'; import { PressableProps, ViewStyle, StyleProp } from 'react-native'; import styled from 'styled-components/native'; import colors from '@src/core/colors'; import HeaderText from '../Text/HeaderText'; type ButtonVariant = 'primary' | 'secondary' | 'tertiary'; type Props = { title: string; variant?: ButtonVariant; wide?: boolean; style?: StyleProp<ViewStyle>; } & Omit<PressableProps, 'style'>; type StyledPressableProps = { variant?: ButtonVariant; wide?: boolean; } & PressableProps; const PrimaryButton: FunctionComponent<Props> = ({ title, variant = 'primary', wide = false, ...rest }) => { const textColor = variant === 'primary' ? colors.white : colors.primary600; return ( <StyledPressable variant={variant} wide={wide} style={({ pressed: isPressed }) => [{ elevation: isPressed ? 5 : 0 }]} {...rest} > <StyledHeaderText variant="h4" style={{ color: textColor }}> {title} </StyledHeaderText> </StyledPressable> ); }; const StyledPressable: FunctionComponent<StyledPressableProps> = styled.Pressable` padding: 12px 24px; border-radius: 100px; border-width: 1.5px; justify-content: center; align-items: center; align-self: center; width: ${(props) => (props.wide ? '100%' : undefined)}; background-color: ${(props) => styles[props.variant].backgroundColor}; border-color: ${(props) => styles[props.variant].borderColor}; `; const StyledHeaderText = styled(HeaderText)` text-align: center; `; const styles = { primary: { backgroundColor: colors.primary600, borderColor: colors.primary600, }, secondary: { backgroundColor: colors.white, borderColor: colors.primary600, }, tertiary: { backgroundColor: 'transparent', borderColor: 'transparent', }, }; export default PrimaryButton;