Screen

Screen is a layout component that you can use to wrap all the views in your app. By default, it renders a Box element.

The Screen component also implements a SafeAreaView under the hood. This allows the content wrapped by the Screen component to always be within the safe areas of the device. (This is especially helpful for keeping your app accessible on devices with rounded corners or camera notches)

Import#

import { Screen } from "pearl-ui";

Usage#

<Screen>This is the screen</Screen>

Scrolling behaviour#

More often than not the contents inside your screen would exceed the device height, thus Screen allows you to add scrolling support to all your screens using the scrollable prop. By default, it's value 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#

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 which should be executed if a pull-to-refresh action has occured.

(Note: The screen needs to 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#

Light
Dark

Embed not loading? Click here

Props#

Supported style props#

Screen composes Box so you can pass all Box related props.

Additional props#

Screen also composes a KeyboardAwareScrollView, there it supports all of it's props excluding:

refresh
scrollEnabled
showsHorizontalScrollIndicator
showsVerticalScrollIndicator

Finally, the following additional props are supported as well:

Name	Required	Type	Default	Description
size	false	PearlTheme.components.Screen["sizes"]		The size of the screen.
variant	false	PearlTheme.components.Screen["variants"]		The variant of the screen.
scrollable	false	boolean	`true`	Whether the screen is scrollable.
showScrollBar	false	boolean	`false`	Whether to show the vertical scrollbar if the Screen is scrollable.
onPullToRefresh	false	Function		Method to execute when a pull-to-refresh action is performed.
refreshIndicatorColors	false	string[]		The colors (at least one) that will be used to draw the refresh indicator (Android only).
refreshProgressBackgroundColor	false	string		Progress view top offset.
refreshProgressViewOffset	false	number	`0`	The background color of the refresh indicator.
refreshIndicatorSize	false	"default" \| "large"	`"default"`	Size of the refresh indicator (Android only).
refreshTintColor	false	string	`"default"`	The color of the refresh indicator (iOS only).
refreshTitle	false	string	`"default"`	The title displayed under the refresh indicator (iOS only).
refreshTitleColor	false	string	`"default"`	The color of the refresh indicator title (iOS only).

Default Component Style#

export default {  baseStyle: {    scrollable: true,    showScrollBar: false,    backgroundColor: {      light: "neutral.50",      dark: "neutral.800",    },    padding: "m",  },};