PositionedView

Beta

Absolutely positions its child within a relative parent container.

Installation

npm install @xaui/native

Import

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

Basic Usage

Minimal example showing the component with its default configuration.

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

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

Badge Overlay

Position a badge absolutely over a parent element.

import { PositionedView } from '@xaui/native/view'
import { Typography } from '@xaui/native/typography'
import { View } from 'react-native'

export function BadgeOverlayExample() {
  return (
    <View style={{ width: 48, height: 48, position: 'relative' }}>
      <View style={{ width: 48, height: 48, backgroundColor: '#e2e8f0', borderRadius: 8 }} />
      <PositionedView top={-4} right={-4} zIndex={1}>
        <View style={{ width: 16, height: 16, backgroundColor: '#ef4444', borderRadius: 8 }} />
      </PositionedView>
    </View>
  )
}

Bottom Label

Anchor a label to the bottom of a container.

import { PositionedView } from '@xaui/native/view'
import { Typography } from '@xaui/native/typography'
import { View } from 'react-native'

export function BottomLabelExample() {
  return (
    <View style={{ height: 120, position: 'relative', backgroundColor: '#1e293b', borderRadius: 12 }}>
      <PositionedView bottom={8} left={12} right={12}>
        <Typography style={{ color: '#fff', fontWeight: 'bold' }}>Overlay label</Typography>
      </PositionedView>
    </View>
  )
}