Screen — componente React Native

Instalación

Instala solo este componente (copia el código fuente a tu proyecto, sin dependencia npm)

npx orn-ui add screen

O instala el paquete completo e impórtalo

pnpm add orn-ui
import { Screen } from 'orn-ui/screen';

Depende de:core (theme + icons)

Uso

cuándo usarlo — La raíz de toda pantalla: aplica safe area, scroll y manejo de teclado en un solo lugar.
edges — `['top','bottom']` por defecto. Se saca `bottom` cuando un tab bar ya lo cubre.
scrollable — En `false` cuando el contenido es una lista — anidar una lista dentro de un scroll rompe la virtualización.
keyboardAvoiding — En `false` cuando el contenido ya maneja el teclado (List, SearchList, Wizard): las dos compensaciones se suman.

Clip del demo todavía sin grabar — ver MEDIA.md

Variantes

A typical screen — scrolls, respects the top safe area

<View style={{ height: 160, borderRadius: 12, overflow: 'hidden' }}>
  <Screen edges={['top']}>
    <View style={{ gap: 8 }}>
      <Subtitle>Recent activity</Subtitle>
      <Body>Invoice #4821 was paid.</Body>
      <Body>Invoice #4820 is due in 3 days.</Body>
      <Body>Invoice #4819 was paid.</Body>
    </View>
  </Screen>
</View>

scrollable={false} — for content that brings its own list

<View style={{ height: 80, borderRadius: 12, overflow: 'hidden' }}>
  <Screen scrollable={false} edges={[]}>
    <Body>Turn scrolling off so it doesn’t fight with a nested List or Wizard.</Body>
  </Screen>
</View>

Código completo del demo

const variants: VariantDef[] = [
  {
    label: 'A typical screen — scrolls, respects the top safe area',
    content: (
      <View style={{ height: 160, borderRadius: 12, overflow: 'hidden' }}>
        <Screen edges={['top']}>
          <View style={{ gap: 8 }}>
            <Subtitle>Recent activity</Subtitle>
            <Body>Invoice #4821 was paid.</Body>
            <Body>Invoice #4820 is due in 3 days.</Body>
            <Body>Invoice #4819 was paid.</Body>
          </View>
        </Screen>
      </View>
    ),
  },
  {
    label: 'scrollable={false} — for content that brings its own list',
    content: (
      <View style={{ height: 80, borderRadius: 12, overflow: 'hidden' }}>
        <Screen scrollable={false} edges={[]}>
          <Body>Turn scrolling off so it doesn’t fight with a nested List or Wizard.</Body>
        </Screen>
      </View>
    ),
  },
];
return <VariantList variants={variants} />;

Props

Nombre	Tipo	Por defecto	Descripción
`style?`	`ViewStyle`	—	—
`scrollable?`	`boolean`	true	—
`contentContainerStyle?`	`ViewStyle`	—	—
`edges?`	`ScreenEdge[]`	['top', 'bottom']	Qué insets de safe area aplicar.
`keyboardAvoiding?`	`boolean`	true	Compensa el teclado: en iOS con scroll lo hace el propio ScrollView, en otros casos un KeyboardAvoidingView. Ponelo en false cuando el contenido ya trae su propio scroller que maneja el teclado (Wizard, List, SearchList): las dos compensaciones se suman y el campo enfocado termina empujado fuera de pantalla.