Skip to main content

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 React Native 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#

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 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#

Props#

Supported style props#

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

Additional props#

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

  • refresh
  • scrollEnabled
  • showsHorizontalScrollIndicator
  • showsVerticalScrollIndicator

Finally, the following additional props are supported as well:

NameRequiredTypeDefaultDescription
sizefalsePearlTheme.components.Screen["sizes"]The size of the screen.
variantfalsePearlTheme.components.Screen["variants"]The variant of the screen.
scrollablefalsebooleantrueWhether the screen is scrollable.
showScrollBarfalsebooleanfalseWhether to show the vertical scrollbar if the Screen is scrollable.
onPullToRefreshfalseFunctionMethod to execute when a pull-to-refresh action is performed.
refreshIndicatorColorsfalsestring[]The colors (at least one) that will be used to draw the refresh indicator (Android only).
refreshProgressBackgroundColorfalsestringProgress view top offset.
refreshProgressViewOffsetfalsenumber0The background color of the refresh indicator.
refreshIndicatorSizefalse"default" | "large""default"Size of the refresh indicator (Android only).
refreshTintColorfalsestring"default"The color of the refresh indicator (iOS only).
refreshTitlefalsestring"default"The title displayed under the refresh indicator (iOS only).
refreshTitleColorfalsestring"default"The color of the refresh indicator title (iOS only).

Default Component Config#

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