# Screen > Organism — orn-ui > ⚠️ Requires : This component (like every orn-ui component) must render inside a ancestor, or it throws at runtime. See https://orn-ui-docs.vercel.app/getting-started.md > Runs on Expo SDK 54, 55, 56 and 57, and on bare React Native >=0.81 with react >=19.1. No native modules — works in Expo Go, no prebuild. ## Installation Install just this component (copies the source into your project, no npm dependency) ```bash npx orn-ui add screen ``` Or install the whole package and import it ```tsx pnpm add orn-ui import { Screen } from 'orn-ui/screen'; ``` Depends on: core (theme + icons) ## Variants ### 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. ``` ## Full demo source ```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 | Name | Type | Default | Description | |---|---|---|---| | `style?` | `ViewStyle` | — | — | | `scrollable?` | `boolean` | true | — | | `contentContainerStyle?` | `ViewStyle` | — | — | | `edges?` | `ScreenEdge[]` | ['top', 'bottom'] | Which safe area insets to apply. | | `keyboardAvoiding?` | `boolean` | true | Offsets the keyboard with a KeyboardAvoidingView. Set it to false when the content already brings its own scroller that handles the keyboard (Wizard, List, SearchList): both offsets add up and the focused field ends up pushed off screen. |