Guides/

Installation

Get started with Hyena in your React Native or Expo project.

Prerequisites

React Native 0.70+ or Expo SDK 47+
TypeScript (recommended) — all components include full type definitions

Quick Start

Install the Hyena package in your project:

Quick Start

Install the core package with npm

npm install @hyena-studio/react-native@latest

Or with other package managers:

# yarn
yarn add @hyena-studio/react-native

# pnpm
pnpm add @hyena-studio/react-native

# bun
bun add @hyena-studio/react-native

Usage

Import and use components directly:

import { Button, Text, Card } from '@hyena-studio/react-native'

export default function App() {
  return (
    <Card>
      <Text variant="heading">Welcome to Hyena</Text>
      <Button onPress={() => console.log('Hello!')}>
        Get Started
      </Button>
    </Card>
  )
}

Theme Setup

For full theming support (dark/light/oatmeal modes and glassmorphism effects), wrap your app with the ThemeProvider:

import { ThemeProvider } from '@hyena-studio/react-native'

export default function App() {
  return (
    <ThemeProvider defaultTheme="system">
      {/* Your app content */}
    </ThemeProvider>
  )
}

ThemeProvider Props

Prop	Type	Default	Description
`defaultTheme`	`'light' \| 'dark' \| 'oatmeal' \| 'system'`	`'system'`	Initial theme
`storageKey`	`string`	`'hyena-theme'`	AsyncStorage key for persistence

Components work without the provider, but theming features require it.

Web Support

Hyena works with React Native Web out of the box. For Next.js or other web frameworks, ensure you have react-native-web configured:

npm install react-native-web

Expo

For Expo projects, Hyena works without additional configuration:

Quick Start

Use the Expo CLI for automatic peer dependency resolution

npx expo install @hyena-studio/react-native

What's Next?

Browse Components

See the Button component to get a feel for Hyena's design language.

Explore All Components

Browse the full component library in the sidebar.

Learn Theming

Customize colors, spacing, and typography to match your brand.

Customization

Learn how to extend and customize components.