Screen

Layout

A SafeAreaView wrapper that handles safe area insets, keyboard avoidance, and optional scroll behaviour for full-screen layouts.

GitHub

Installation

bash

npx native-mate add screen

Examples

#FAFAFA

Radius100%

Usage

tsx

import { Screen } from '~/components/ui/screen'

// Basic full-screen wrapper
<Screen>
  <YourContent />
</Screen>

// Scrollable screen
<Screen scroll>
  <LongFormContent />
</Screen>

// Custom edges (e.g. tab screen — no top inset)
<Screen edges={['bottom']} style={{ paddingHorizontal: 16 }}>
  <TabContent />
</Screen>

Props

Prop	Type	Default	Description
children	React.ReactNode	—	Screen content.
scroll	boolean	false	Wraps content in a ScrollView for scrollable screens.
keyboardAware	boolean	true	Adjusts layout when the software keyboard appears.
style	ViewStyle	—	Additional styles applied to the inner content container.
edges	Array<"top" \| "bottom" \| "left" \| "right">	["top","bottom"]	Which safe area edges to apply insets for.

Example

tsx

import { Screen } from '~/components/ui/screen'
import { Text } from '@native-mate/core'
import { View } from 'react-native'

export function ProfileScreen() {
  return (
    <Screen scroll style={{ paddingHorizontal: 16 }}>
      <View style={{ paddingTop: 24, gap: 16 }}>
        <Text size="2xl" weight="bold">Profile</Text>
        <Text color="muted">Manage your account settings and preferences.</Text>
        {/* profile fields */}
      </View>
    </Screen>
  )
}

Text