How to pass props to an imported component in styled-components

Question

a challenge has arisen here, I'm using React Native and I need to pass props to RectButton , does anyone know how?

Because it is not a standard React Native feature, it is imported from react-native-gesture-handler , so I don't have access to it through styled-components , I would like something 'like this':

export const CheckBoxInput = styled(RectButton)<CheckBoxInputProps>`
  border: 1px solid ${h4_app_color};
  width: 20px;
  height: 20px;
  border-radius: 20px;

  ${(props) =>
    props.filled
      ? css`
          background-color: ${h4_app_color};
        `
      : css`
          background-color: white;
        `}
`;

My props are like this:

interface CheckBoxInputProps {
  filled?: boolean;
}

Answer 1

I don't understand why you have a problem checking the filled prop here. Apply it to the component by:

<CheckBoxInputProps filled={yourValueHere} />


export const CheckBoxInput = styled(RectButton)<CheckBoxInputProps>`
  border: 1px solid ${h4_app_color};
  width: 20px;
  height: 20px;
  border-radius: 20px;

  ${(props) =>
    props.filled
      ? css`
          background-color: ${h4_app_color};
        `
      : css`
          background-color: white;
        `}
`;

If you specifically want to pass the prop along to the component <RectButton /> without applying it to its style, then you could do this:

export const CheckBoxInput = styled(RectButton).attrs((
 {filledValue}: {filledValue: boolean}
) => {
 filled: filledValue   <-- This will pass the value to RectButtons 'filled' prop
}))<CheckBoxInputProps>`

`;

And use it like so:

<CheckBoxInputProps filledValue={yourValueHere} />