Styled Component multiple props (React Native)

Question

I am using Styled Components with my React Native app and I am trying to figure out how to use multiple props.

My Component :

<SelectedPill active={true} color={'red'}>Text Here</SelectedPill>

My Styled Component :

const SelectedPill = styled.TouchableOpacity`
  ${({active}) => active && `
    background: ${props => (props.color ? props.color : '#292929')};
  `};
`

What I'm trying to do in the styled component is that if the prop "active" is set to true, then get the "color" props int he components and apply it.

Answer 1

This should work:

const SelectedPill = styled.TouchableOpacity`
   ${({active, color}) => active && `
      background: ${color ? color : 'red'};
   `};
`