Components
import React from "react";
import { View, ViewProps, StyleSheet } from "react-native";
type CardProps = ViewProps & {
className?: string;
};
type CardHeaderProps = ViewProps & {
className?: string;
};
type CardContentProps = ViewProps & {
className?: string;
};
export const Card = ({ className, children, ...props }: CardProps) => (
<View className={className} {...props} style={[style.card , props.style]}>
{children}
</View>
);
export const CardHeader = ({
className,
children,
...props
}: CardHeaderProps) => (
<View className={className} {...props} style={[style.cardHeader , props.style]}>
{children}
</View>
);
export const CardContent = ({
className,
children,
...props
}: CardContentProps) => (
<View className={className} {...props} style={[style.cardContent , props.style ]}>
{children}
</View>
);
const style = StyleSheet.create({
card: {
paddingVertical: 10,
paddingHorizontal: 10,
},
cardHeader: {
paddingVertical: 10,
paddingHorizontal: 5,
},
cardContent:{
marginVertical: 5,
paddingVertical: 5,
paddingHorizontal: 5,
}
});
Installation
npx solui@latest add card1Install dependencies
pnpm add nativewind react-native-reanimated@~3.17.4 react-native-safe-area-context@5.4.0 --dev tailwindcss@^3.4.17 prettier-plugin-tailwindcss@^0.5.11 react-native-vector-icons Copy the code
Copy the code from the Code tab above into components/ui/card.tsx .
Update imports
Update the imports to match your project structure.
Usage
Simple card
import { SimpleCard } from '@/components/ui/card1';
export default function CardDemo() {
return <SimpleCard/>
}Card with image
import { CardWithImage } from '@/components/ui/card2';
export default function CardDemo() {
return <CardWithImage/>
}npx solui@latest add card2Feature card
import { FeatureCard } from '@/components/ui/card3';
export default function CardDemo() {
return <FeatureCard/>
}npx solui@latest add card3Artist card
import { ArtistCard } from '@/components/ui/card4';
export default function CardDemo() {
return <ArtistCard/>
}npx solui@latest add card4