# View

> A foundational View component with transparent background and ref forwarding support.

**BNA UI** — a React Native / Expo component library.
These components render through `react-native`, not the DOM: there are no HTML
elements, no Tailwind classes and no Radix primitives. Source is copied into your
project and imported through `@/components/ui/*`, `@/components/charts/*`,
`@/hooks/*` and `@/theme/*`. Colours come from the `useColor` hook rather than
hardcoded hex; sizing tokens (`HEIGHT`, `FONT_SIZE`, `BORDER_RADIUS`, `CORNERS`)
come from `@/theme/globals`.

- Docs: https://ui.ahmedbna.com/docs/components/view
- Markdown: https://ui.ahmedbna.com/docs/components/view.md
- Structured JSON (props, usage, source, examples): https://ui.ahmedbna.com/r/ai/view.json
- Install payload (source plus every file it imports): https://ui.ahmedbna.com/r/view.json
- Install: `npx bna-ui add view`
- Preview recording: https://demo.ahmedbna.com/0329-view-demo.PNG

---

**Example:** Basic view container with content

```tsx
// components/demo/view/view-demo.tsx
import { View } from '@/components/ui/view';
import { BORDER_RADIUS } from '@/theme/globals';

export function ViewDemo() {
  return (
    <View
      style={{
        backgroundColor: 'red',
        alignItems: 'center',
        justifyContent: 'center',
        height: 200,
        width: 200,
        borderRadius: BORDER_RADIUS,
      }}
    />
  );
}
```

## Installation

### CLI

```bash
npx bna-ui add view
```

### Manual

**1.** This component uses React Native's built-in View.

**2.** Copy and paste the following code into your project.

```tsx
// components/ui/view.tsx
import { forwardRef, memo } from 'react';
import { View as RNView, type ViewProps } from 'react-native';

export const View = memo(
  forwardRef<RNView, ViewProps>(({ style, ...otherProps }, ref) => {
    return (
      <RNView
        ref={ref}
        style={[{ backgroundColor: 'transparent' }, style]}
        {...otherProps}
      />
    );
  })
);

View.displayName = 'View';
```

**3.** Update the import paths to match your project setup.

## Usage

```tsx
import { View } from '@/components/ui/view';
```

```tsx
<View style={{ padding: 16 }}>
  <Text>Content inside view</Text>
</View>
```

## Examples

#### Default

**Example:** Basic view container with content

```tsx
// components/demo/view/view-demo.tsx
import { View } from '@/components/ui/view';
import { BORDER_RADIUS } from '@/theme/globals';

export function ViewDemo() {
  return (
    <View
      style={{
        backgroundColor: 'red',
        alignItems: 'center',
        justifyContent: 'center',
        height: 200,
        width: 200,
        borderRadius: BORDER_RADIUS,
      }}
    />
  );
}
```

## API Reference

### View

A wrapper around React Native's View with consistent styling defaults and ref forwarding.

| Prop       | Type                | Default                              | Description                              |
| ---------- | ------------------- | ------------------------------------ | ---------------------------------------- |
| `style`    | `ViewStyle`         | `{ backgroundColor: 'transparent' }` | Styles for the view container.           |
| `children` | `ReactNode`         | -                                    | Content to display inside the view.      |
| `ref`      | `React.Ref<RNView>` | -                                    | Ref to the underlying React Native View. |

### Additional Props

The View component accepts all props from React Native's `View` component.

## Ref Forwarding

The component uses `forwardRef` to provide access to the underlying View: