React Native + Tailwind CSS Image

A selection of React Native Image components built with Tailwind CSS

These examples require the Tailwind React Native Classnames package.

Basic Image

Basic Image
import React from "react";
import { View, Image } from "react-native";
import tailwind from "twrnc";
export default function () {
return (
<Image
source={{
uri: "https://source.unsplash.com/random",
}}
style={tailwind`w-64 h-64`}
/>
);
}

Rounded Image

Rounded Image
import React from "react";
import { View, Image } from "react-native";
import tailwind from "twrnc";
export default function () {
return (
<Image
source={{
uri: "https://source.unsplash.com/random",
}}
style={tailwind`w-64 h-64 rounded-lg`}
/>
);
}

Circle Image

Circle Image
import React from "react";
import { View, Text, Image } from "react-native";
import tailwind from "twrnc";
export default function () {
return (
<Image
source={{
uri: "https://source.unsplash.com/random",
}}
style={tailwind`w-64 h-64 rounded-full`}
/>
);
}

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