Search code examples
reactjsreact-nativecss-selectorsstyled-components

Is there any way to use nth-child or :last-child in react-native styled components?

I just figured out that it is not possible to use nth-child or last-child, first-child in react-native styled components.

what I want to do is :

const InputWrapper = styled.View`
  margin-bottom: ${wp(43)}px;
  &:last-child { // I want to do this
    background : red; 
  }
`;

Is there any way to use pseudo selector in react native styled components ?

I think I can handle this by passing some props like isLast : boolean but I'm still curious about pseudo selector in react native environment .

Thank you for your time :)

Solution

  • I hope this will help you to achieve this. Use the component https://github.com/vitalets/react-native-extended-stylesheet

    const styles = EStyleSheet.create({
  p: {
   marginRight: 5
  },
 'p:last-child': {
   marginRight: 0
  }
 });

    Source: https://stackoverflow.com/a/55761808/13680835