Don’t Reinvent the Wheel or the Modal. Use React Native Reusables Instead.

Let’s face it — React Native development can be repetitive. How often have you built the same modal, toast notification, or bottom sheet from scratch? And let’s not even talk about copy-pasting those buttons that seem to turn out slightly different in every project. Enter React Native Reusables — a lifesaving toolkit that lets you instantly add pre-built, customizable, and time-tested components to your React Native app.

And the best part? It comes with a CLI that does a lot of the heavy lifting for you.

Step 1: Setting Up Your React Native Reusables Project

First, make sure you have a React Native project set up. Now install the React Native Reusables CLI globally or use npx for one-time execution using npx @react-native-reusables/cli init. Boom! You now have RNR installed in your project, along with its CLI commands for quickly adding powerful UI building blocks.

Step 2: Adding Pre-Built Tools with the CLI

One of the best features of @react-native-reusables/cli is its ability to generate and configure reusable components without manually setting them up.

For example, do you need a bottom sheet? Just type npx @react-native-reusables/cli@latest add button. This automatically installs, initializes, and adds a reusable button to your project that you can easily configure to meet your styling needs. No need to deep-dive into dependencies or scroll through Stack Overflow. With one-liner convenience like this, you might actually finish your project before your coffee gets cold.

Step 3: Configuring Your New Reusables

Using these new reusables is as simple as using any other component. Some React Native reusable components have default props like size, variant, and className. (It’s built off of NativeWind and uses those same shorthand styles.)

import { Button } from "~/components/ui/button";

  Log In

When the components are generated using the CLI, they’ll often have a configurable portion within the component file. They look something like this.

const buttonVariants = cva(
  "group flex items-center justify-center",
  {
    variants: {
      variant: {
        default: "bg-primary web:hover:opacity-90 active:opacity-90",
        destructive: "bg-destructive web:hover:opacity-90 active:opacity-90",
        secondary: "bg-secondary web:hover:opacity-80 active:opacity-80",
        ghost: "active:bg-primary active:opacity-50",
        link: "web:underline-offset-4 web:hover:underline web:focus:underline ",
      },
      size: {
        default: "h-10 px-4 py-2 native:h-12 native:px-5 native:py-3",
        sm: "h-9 rounded-md px-3",
        lg: "h-11 rounded-md px-8 native:h-14",
        xl: "h-12 rounded-md rounded-xl px-10 native:h-16",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
);

There are a few important things to call out: the variant and size objects within variants. These two values are passed in as props, as mentioned above. If we wanted to use a large ghost button we’d pass these props to the Button component like this: size={"lg"} variant={"ghost"}. Each variant is configurable to meet your style needs, and you can add more variants as needed.

Takeaways

React Native Reusables is intended to simplify components you’re used to creating with every new project. It’s not a grab-and-go solution, but it’s pretty close. You can configure each component to follow your style guides, and there’s a large assortment of reusables to choose from. This has some advantages of other component libraries because it’s more flexible, but takes a little more work. Let me know if you use it!