Introduction
Authentication
Core
A selection of React Native Card components built with Tailwind CSS
These examples require the Tailwind React Native Classnames package.
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> );};
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