Padding

Beta

Wraps content with configurable padding on any or all sides.

Installation

npm install @xaui/native

Import

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

Basic Usage

Minimal example showing the component with its default configuration.

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

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

Uniform padding

16px padding on all sides.

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

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

Asymmetric padding

Different padding on each axis.

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

export function AsymmetricPaddingExample() {
  return (
    <Padding padding={{ horizontal: 24, vertical: 12 }}>
      <View style={{ backgroundColor: '#0ea5e9', borderRadius: 8, height: 60 }} />
    </Padding>
  )
}