CODEWITHSUNDEEP
reactjsreact-nativestyled-components
Nathan Belete
Nathan Belete

Reputation: 21

Styled Component multiple props (React Native)

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.

Upvotes: 0

Views: 364

Answers (1)

DoneDeal0
DoneDeal0

Reputation: 6257

This should work:

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

Upvotes: 0

Related Questions