# Screen > Organism — orn-ui > ⚠️ Requiere : Este componente (como todos los de orn-ui) debe renderizarse dentro de un ancestro , o lanza un error en runtime. See https://orn-ui-docs.vercel.app/getting-started.md > Corre en Expo SDK 54, 55, 56 y 57, y en React Native puro >=0.81 con react >=19.1. Sin módulos nativos — funciona en Expo Go, sin prebuild. ## Instalación Instala solo este componente (copia el código fuente a tu proyecto, sin dependencia npm) ```bash npx orn-ui add screen ``` O instala el paquete completo e impórtalo ```tsx pnpm add orn-ui import { Screen } from 'orn-ui/screen'; ``` Depende de: core (theme + icons) ## Variantes ### A typical screen — scrolls, respects the top safe area ```tsx Recent activity Invoice #4821 was paid. Invoice #4820 is due in 3 days. Invoice #4819 was paid. ``` ### scrollable={false} — for content that brings its own list ```tsx Turn scrolling off so it doesn’t fight with a nested List or Wizard. ``` ## Código completo del demo ```tsx const variants: VariantDef[] = [ { label: 'A typical screen — scrolls, respects the top safe area', content: ( Recent activity Invoice #4821 was paid. Invoice #4820 is due in 3 days. Invoice #4819 was paid. ), }, { label: 'scrollable={false} — for content that brings its own list', content: ( Turn scrolling off so it doesn’t fight with a nested List or Wizard. ), }, ]; return ; ``` ## 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. |