React Native Reusables

Get started with the React Native Reusables component library.

The template you are using right now is generated from the React Native Reusables CLI using the minimal-uniwind template, and then we added all UI components, so you can use them immediately without extra setup.

You can explore the full component catalog at the official docs:
https://reactnativereusables.com/docs/components/accordion

How components are wired into the template

The CLI has already copied the reusable components into the project and wired them up with Uniwind (this is tailwind for react native and also manages the global theme state) and the app theme.

• RNR Components live in the@/components/ui/ directory. You can import them like: @/components/ui/<component_name>
• They are styled with Tailwind-like classes via Uniwind, so you pass className instead of style and the design stays consistent across the app.
• They automatically respect the current light / dark theme set by Uniwind.

ButtonExample.tsx

import { Button } from "@/components/ui/button"
import { Icon } from "@/components/ui/icon"
import { SunIcon } from "lucide-react-native"

export function ExampleButton() {
  return (
    <Button
      variant="ghost" // RNR is ui.shadcn.com based. You can check out different button variants here: https://reactnativereusables.com/docs/components/button#examples
      className="rounded-full" // you can use tailwindcss syntax now to style your component
      onPressIn={() => console.log("Pressed")}
    >
      <Icon as={SunIcon} className="size-5" /> {/* Icons are a little special. There is a Icon Component, where you have to pass the actual icon in the `as` prop. The Icons you can import from lucide-react-native which is https://lucide.dev under the hood*/}
    </Button>
  )
}

Here, Button and Icon are React Native Reusables components that accept Tailwind-like className props and pick up the active theme automatically.

Task 3: Modify the Home tab with RNR

Modify the Home screen that there is a card with an input and a select element and on button/submit click the content should be displayed below the card in a Text element.

You can use almost all react hooks in react native too! For example the useState.