Margin

Beta

Wraps content with configurable margin on any or all sides.

Installation

npm install @xaui/native

Import

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

Basic Usage

Minimal example showing the component with its default configuration.

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

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

Uniform margin

16px margin on all sides.

import { Margin } from '@xaui/native/view'
import { View } from 'react-native'

export function UniformMarginExample() {
  return (
    <Margin margin={16}>
      <View style={{ backgroundColor: '#6366f1', borderRadius: 8, height: 60 }} />
    </Margin>
  )
}

Vertical margin

Top and bottom margin only.

import { Margin } from '@xaui/native/view'
import { View } from 'react-native'

export function VerticalMarginExample() {
  return (
    <Margin margin={{ vertical: 20 }}>
      <View style={{ backgroundColor: '#0ea5e9', borderRadius: 8, height: 60 }} />
    </Margin>
  )
}