RoundedView

Beta

Wraps content with configurable border radius on any corner.

Installation

npm install @xaui/native

Import

import { RoundedView } from '@xaui/native/view'

Basic Usage

Minimal example showing the component with its default configuration.

import { RoundedView } from '@xaui/native/view'

export function Example() {
  return (
    <RoundedView>
      {/* children */}
    </RoundedView>
  )
}

Uniform Radius

Round all corners equally.

import { RoundedView } from '@xaui/native/view'
import { Typography } from '@xaui/native/typography'

export function UniformRadiusExample() {
  return (
    <RoundedView all={16} backgroundColor="#4f46e5">
      <Typography style={{ color: '#fff', padding: 12 }}>Rounded card</Typography>
    </RoundedView>
  )
}

Asymmetric Radius

Round only specific corners for a custom shape.

import { RoundedView } from '@xaui/native/view'
import { Typography } from '@xaui/native/typography'

export function AsymmetricRadiusExample() {
  return (
    <RoundedView topLeft={24} topRight={24} bottomLeft={4} bottomRight={4} backgroundColor="#0ea5e9">
      <Typography style={{ color: '#fff', padding: 12 }}>Custom shape</Typography>
    </RoundedView>
  )
}