Sidebar

Collapsible side navigation panel with a toggle trigger, animated with Reanimated.

import { View } from "react-native";
import { SidebarProvider, Sidebar, SidebarTrigger } from "@/components/ui/sidebar";
import { Text } from "@/components/ui/text";

export function MyScreen() {
return (
  <SidebarProvider defaultOpen>
    <Sidebar width={256}>
      <Text>Dashboard</Text>
      <Text>Projects</Text>
      <Text>Settings</Text>
    </Sidebar>
    <View className="flex-1 p-3">
      <SidebarTrigger />
      <Text>Content area</Text>
    </View>
  </SidebarProvider>
);
}

Installation

npx @aniui/cli add sidebar

Usage

import { View } from "react-native";
import { SidebarProvider, Sidebar, SidebarTrigger } from "@/components/ui/sidebar";
import { Text } from "@/components/ui/text";

export function MyScreen() {
  return (
    <SidebarProvider defaultOpen>
      <Sidebar width={256}>
        <Text>Dashboard</Text>
        <Text>Settings</Text>
      </Sidebar>
      <View className="flex-1 p-3">
        <SidebarTrigger />
        <Text>Content area</Text>
      </View>
    </SidebarProvider>
  );
}

The useSidebar() hook exposes the sidebar state (open, setOpen, toggle) to any descendant of SidebarProvider.

Props

SidebarProvider

Sidebar

Also accepts all View props from React Native.

SidebarTrigger

Also accepts all Pressable props from React Native.

useSidebar()

Returns { open: boolean; setOpen: (open: boolean) => void; toggle: () => void }. Must be called within a SidebarProvider.

Accessibility

• Sidebar uses accessibilityRole="menu".
• SidebarTrigger uses accessibilityRole="button" with a 48dp minimum touch target.