React Native + Tailwind CSS Card

A selection of React Native Card components built with Tailwind CSS

These examples require the Tailwind React Native Classnames package.

Basic Card

Basic Card
import React from "react";
import { View, Text, Image } from "react-native";
import tailwind from "twrnc";
export const WithImage = () => {
return (
<View style={tailwind`bg-white rounded-xl w-full max-w-xs`}>
<Image
source={{ uri: "https://source.unsplash.com/random" }}
style={tailwind`w-full h-64 rounded-t-xl`}
resizeMode="cover"
/>
<View style={tailwind`p-6`}>
<Text style={tailwind`text-slate-900 text-lg font-bold`}>
With Image
</Text>
</View>
</View>
);
};

Card with Drop Shadow

Card with Drop Shadow
import React from "react";
import { View, Text, Image } from "react-native";
import tailwind from "twrnc";
export const WithImageShadow = () => {
return (
<View
style={[
tailwind`bg-white rounded-xl w-full max-w-xs`,
{
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
},
]}
>
<Image
source={{ uri: "https://source.unsplash.com/random" }}
style={tailwind`w-full h-64 rounded-t-xl`}
resizeMode="cover"
/>
<View style={tailwind`p-6`}>
<Text style={tailwind`text-slate-900 text-lg font-bold`}>
With Image
</Text>
</View>
</View>
);
};

Copyright 2022 - Atom Lab | Privacy Policy | Terms and Conditions