Introduction
Components
- Accordion
- Action Sheet
- Alert
- Audio Player
- Audio Recorder
- Audio Waveform
- Avatar
- Badge
- BottomSheet
- Button
- Camera
- Camera Preview
- Card
- Carousel
- Checkbox
- Collapsible
- Color Picker
- Combobox
- Date Picker
- File Picker
- Gallery
- Hello Wave
- Icon
- Image
- Input
- Input OTP
- Link
- MediaPicker
- Mode Toggle
- Onboarding
- ParallaxScrollView
- Picker
- Popover
- Progress
- Radio
- ScrollView
- SearchBar
- Separator
- Share
- Sheet
- Skeleton
- Spinner
- Switch
- Table
- Tabs
- Text
- Toast
- Toggle
- Video
- View
Charts
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
pnpm dlx bna-ui add view
Usage
import { View } from '@/components/ui/view';<View style={{ padding: 16 }}>
<Text>Content inside view</Text>
</View>Examples
Default
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: