Can I use RNPaper together with NativeWind in a React Native project?

[kabeza]

Hi
I've been using RNPaper for some days and am enjoying its components
Now I had to create a globalStyles module/component so I can use (for example) a marginBottom:10 style between all the cards in a FlatList without giving style={{}} to each one and having TypeScript complain

...
<Card mode="outlined" theme={{roundness: 4}} style={globalStyles.mb10}>
  <Card.Content>
    <View>
      <Text variant="titleLarge">My Title</Text>
    </View>
  </Card.Content>
</Card>
...

So now I'm considering something like NativeWind to speed-up the layout/ui creation
https://www.nativewind.dev/

Would there be any problem if I mix both libraries? Specially the border, opacity, color classes?
Thanks for any tip you can give me

[lukewalczak]

Hey @kabeza, actually I was not mixing both libraries, so it's hard for me to give you a clear answer. I guess it should, but I would suggest doing some PoC and confirming it.

[sangameshsomawar]

@kabeza This is how we made styling easy in our projects with styled components and styled systems.

Card.tsx

import * as React from 'react';
import {
  flexbox,
  space,
  border,
  color,
  layout,
  FlexboxProps,
  SpaceProps,
  BorderProps,
  ColorProps,
  LayoutProps,
  position,
  PositionProps,
} from 'styled-system';
import styled from 'styled-components/native';
import {Card as C} from 'react-native-paper';

interface CardStyledProps
  extends FlexboxProps,
    SpaceProps,
    BorderProps,
    ColorProps,
    LayoutProps,
    PositionProps {
  children: React.ReactNode;
}

export const Card = styled(C).attrs<CardStyledProps>(props => ({}))`
  ${flexbox}
  ${space}
  ${border}
  ${color}
  ${layout}
  ${position}
`;

Usage:

 <Card mb={8} alignItems="center" height={160} p={24}>
          <Image
            resizeMode="contain"
            height="100%"
            width="100"
            source={{uri: 'https://picsum.photos/202'}}
          />
        </Card>

[kabeza]

Thanks for the suggestion @sangameshsomawar

[VesperQuartz]

So what is the answer, yes or no?

[kabeza]

So what is the answer, yes or no?

I didn't try it. Just went the Styled Components alternative suggested by @sangameshsomawar