React Native Shadcn Ui Installation With React Native Reusables

You can also watch the YouTube video:

React Native ShadCN UI Installation with React Native Reusables

1. Let's clone the react native reusables repository first:

git clone https://github.com/mrzachnugent/react-native-reusables.git

2. Then copy the starter base and rename it:

cp -R react-native-reusables/packages/templates/starter-base/ ./react-native-shadcnui

3. install the dependencies, and fix packages if needed.

cd react-native-shadcnui && yarn install && npx expo install --fix

4. Enable new arch support in app.json to avoid future warnings.

{
    "expo": {
        "newArchEnabled": true,
        ...
    }
}

5. Run the project

yarn android

Let's make a simple e-commerce example to see how we can use ShadCN UI components:

Create ProductItem.tsx in your components folder:

import { Image } from "react-native";
import Cart from "./Cart";
import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
} from "./ui/card";
import { Text } from "./ui/text";

const ProductItem = () => {
  return (
    <Card className="pt-8">
      <CardHeader className="items-center">
        <Image
          className="w-64 h-64 rounded"
          source={require("assets/images/iphone-16-pro-max.webp")}
        />

        <CardTitle className="mt-8">iPhone 16 Pro Max</CardTitle>
      </CardHeader>

      <CardContent className="px-8">
        <Text className="text-sm text-gray-700 dark:text-gray-50">
          The iPhone 16 Pro Max display has rounded corners that follow a
          beautiful curved design, and these corners are within a standard
          rectangle.
        </Text>
      </CardContent>

      <CardFooter className="flex items-center justify-between">
        <Text className="text-black dark:text-white font-bold">$999 USD</Text>

        <Cart />
      </CardFooter>
    </Card>
  );
};

export default ProductItem;

Edit your /app/index.tsx file:

import * as React from "react";
import { ScrollView, View } from "react-native";
import ProductItem from "~/components/ProductItem";

export default function Screen() {
  return (
    <View className="flex-1 p-6 bg-secondary/30">
      <ScrollView contentContainerClassName="gap-8">
        <ProductItem />
        <ProductItem />
        <ProductItem />
        <ProductItem />
      </ScrollView>
    </View>
  );
}

Let's create a CartItem.tsx component in our components folder:

import { Image, View } from "react-native";
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
import { Text } from "./ui/text";

const CartItem = () => {
  return (
    <Card className="p-4 flex flex-row">
      <CardHeader className="flex items-center justify-center">
        <Image
          className="w-24 h-24 rounded shadow"
          source={require("assets/images/iphone-16-pro-max.webp")}
        />

        <CardTitle className="mt-8 text-md font-bold">
          iPhone 16 Pro Max
        </CardTitle>
      </CardHeader>

      <CardContent className="max-w-[180px] flex justify-between">
        <View className="flex items-center justify-center mt-8">
          <Text className="text-sm text-gray-700 dark:text-gray-50">
            The iPhone 16 Pro Max display has rounded corners that follow a
            beautiful curved design.
          </Text>
        </View>

        <Text className="mt-4 text-black dark:text-white font-medium text-sm">
          $999 USD
        </Text>
      </CardContent>
    </Card>
  );
};

export default CartItem;

Create Cart.tsx component in your components folder:

import { ScrollView } from "react-native";
import { Button } from "~/components/ui/button";
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "~/components/ui/dialog";
import { Text } from "~/components/ui/text";
import CartItem from "./CartItem";

const Cart = () => {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="default" className="bg-blue-500 dark:bg-blue-600">
          <Text className="text-white">Add to Cart</Text>
        </Button>
      </DialogTrigger>

      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>Cart (3)</DialogTitle>
        </DialogHeader>

        <ScrollView className="mt-8 gap-8">
          <CartItem />
          <CartItem />
          <CartItem />
        </ScrollView>

        <DialogFooter className="mt-4">
          <DialogClose asChild>
            <Button className="bg-blue-500 dark:bg-blue-600">
              <Text className="text-white">Checkout</Text>
            </Button>
          </DialogClose>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};

export default Cart;