Screen

Source

Theme Source

The Screen component is a versatile layout tool designed to wrap all views in your application. It is built on top of the Box element and implements a React Native SafeAreaView, ensuring that your content is always within the safe areas of the device. This is particularly useful for maintaining accessibility on devices with rounded corners or camera notches.

Import#

import { Screen } from "pearl-ui";

Usage#

<Screen>This is the screen</Screen>

Scrolling Behaviour#

If the content inside your screen exceeds the device height, the Screen component allows you to add scrolling support using the scrollable prop. By default, this prop is set to true.

<Screen scrollable={true}>This is a scrollable screen</Screen>
<Screen scrollable={false}>This is a static screen</Screen>

Pull to Refresh#

caution

The Pull-to-Refresh functionality is not supported on web.

The pull-to-refresh (or swipe-to-refresh) pattern lets a user pull down on a list of data using touch in order to retrieve more data. This can be added using the onPullToRefresh prop which expects a function/Promise to be executed when a pull-to-refresh action has occurred.

(Note: The screen needs to be scrollable to allow this behaviour to work on iOS devices).

<Screen  onPullToRefresh={() => {    new Promise<void>((res, rej) =>      setTimeout(() => {        console.log("I got executed!");        res();      }, 2000)    );  }}>  Pull me!</Screen>

Example Usage#

Here are examples of the Screen component in both light and dark themes:

Embed not loading? Click here

Component Properties#

Supported Style Properties#

The Screen component is built upon the Box component, and as such, it inherits all the properties related to Box.

Additional Properties#

In addition to the Box properties, the Screen component also integrates a KeyboardAwareScrollView, and supports all of its properties with the exception of:

refresh
scrollEnabled
showsHorizontalScrollIndicator
showsVerticalScrollIndicator

The Screen component also supports the following additional properties:

Property Name	Mandatory	Data Type	Default	Description
`size`	No	PearlTheme.components.Screen["sizes"]		Defines the size of the screen.
`variant`	No	PearlTheme.components.Screen["variants"]		Defines the variant of the screen.
`scrollable`	No	boolean	`true`	Determines if the screen is scrollable.
`showScrollBar`	No	boolean	`false`	Determines if the vertical scrollbar is visible when the Screen is scrollable.
`onPullToRefresh`	No	Function		Function to execute when a pull-to-refresh action is performed.
`refreshIndicatorColors`	No	string[]		Defines the colors used to draw the refresh indicator (Android only).
`refreshProgressBackgroundColor`	No	string		Defines the background color of the refresh indicator.
`refreshProgressViewOffset`	No	number	`0`	Sets the top offset for the progress view.
`refreshIndicatorSize`	No	"default" \| "large"	`"default"`	Sets the size of the refresh indicator (Android only).
`refreshTintColor`	No	string	`"default"`	Sets the color of the refresh indicator (iOS only).
`refreshTitle`	No	string	`"default"`	Sets the title displayed under the refresh indicator (iOS only).
`refreshTitleColor`	No	string	`"default"`	Sets the color of the refresh indicator title (iOS only).