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

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

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

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`}
      />
  );
}