‹ Switching roots

Types

Types

The types of switching roots.

SectionSwitching rootsDraftDocumented, not reviewed yet: the API can change.

RootParam

Type

The param a root takes: none for a layout or a function without one.

type RootParam<Value> = Value extends () => RootLayout
  ? []
  : Value extends (param: infer Param) => RootLayout
    ? [param: Param]
    : []

Defined in src/api/app/roots.ts ↗

RootTarget

Type

A root to show: its name, or [name, param] for a root that takes a param.

type RootTarget<Roots extends RootsMap> = {
  [Name in keyof Roots & string]: RootParam<Roots[Name]> extends []
    ? Name
    : readonly [Name, ...RootParam<Roots[Name]>];
}[keyof Roots & string]

Defined in src/api/app/roots.ts ↗

RootValue

Type

A root of the app: its layout, or a function making it from a param.

type RootValue = RootLayout | (() => RootLayout) | ((param: any) => RootLayout)

Member	Type	Description
component	LayoutComponent	A React Native screen.
externalComponent	ExternalComponent	A screen created in native code.
stack	LayoutStack	A stack of screens.
bottomTabs	LayoutBottomTabs	Bottom tabs.
sideMenu	LayoutSideMenu	A side menu.
splitView	LayoutSplitView	A split view.
modal	modal<const Content extends LayoutContent>(modal: Content): RootElement<Uses | UsesOf<Content>>	A modal over the root once it is in place, such as the screen a notification opens at a cold start. It comes with its animation; each one goes over the one before, and the ones under the last come at once.
transition	transition(transition: RootTransition): RootElement<Uses>	How the root replaces the one before: 'platform' (the default), 'fade', 'slideUp', 'slideFromEnd' or 'scale' (250 ms), 'none' at once, or { enter, exit } of its own. 'platform' is the platform's transition: a cross dissolve on iOS, the fade through on Android. The first root of the app comes in place of the splash screen: at once with 'platform' and 'none', over the splash with a preset or { enter, exit }.
overlays	Layout[]	The overlays to show after the modals, one by one. Overlays shown before the new root stay. Without it, none.

Defined in src/api/app/roots.ts ↗

RootsMap

Type

type RootsMap = Record<string, RootValue>

Defined in src/api/app/roots.ts ↗

RootElement

Class

A root with the modals shown over it, and how it replaces the one before.

class RootElement

Member	Type	Description
modal	modal<const Content extends LayoutContent>(modal: Content): RootElement<Uses | UsesOf<Content>>	A modal over the root once it is in place, such as the screen a notification opens at a cold start. It comes with its animation; each one goes over the one before, and the ones under the last come at once.
transition	transition(transition: RootTransition): RootElement<Uses>	How the root replaces the one before: 'platform' (the default), 'fade', 'slideUp', 'slideFromEnd' or 'scale' (250 ms), 'none' at once, or { enter, exit } of its own. 'platform' is the platform's transition: a cross dissolve on iOS, the fade through on Android. The first root of the app comes in place of the splash screen: at once with 'platform' and 'none', over the splash with a preset or { enter, exit }.

Defined in src/api/layout/Root.ts ↗

RootLayout

Type

What root, roots and switchTo take: content, Root(…), or a root as JSON.

type RootLayout = LayoutContent | RootElement<any> | LayoutRoot

Member	Type	Description
component	LayoutComponent	A React Native screen.
externalComponent	ExternalComponent	A screen created in native code.
stack	LayoutStack	A stack of screens.
bottomTabs	LayoutBottomTabs	Bottom tabs.
sideMenu	LayoutSideMenu	A side menu.
splitView	LayoutSplitView	A split view.
modal	modal<const Content extends LayoutContent>(modal: Content): RootElement<Uses | UsesOf<Content>>	A modal over the root once it is in place, such as the screen a notification opens at a cold start. It comes with its animation; each one goes over the one before, and the ones under the last come at once.
transition	transition(transition: RootTransition): RootElement<Uses>	How the root replaces the one before: 'platform' (the default), 'fade', 'slideUp', 'slideFromEnd' or 'scale' (250 ms), 'none' at once, or { enter, exit } of its own. 'platform' is the platform's transition: a cross dissolve on iOS, the fade through on Android. The first root of the app comes in place of the splash screen: at once with 'platform' and 'none', over the splash with a preset or { enter, exit }.
overlays	Layout[]	The overlays to show after the modals, one by one. Overlays shown before the new root stay. Without it, none.

Defined in src/api/layout/Root.ts ↗

RootTransition

Type

How a root replaces the one before: a preset the new root comes in with, or its own enter and exit. 'platform' is the platform's own transition, 'none' shows the new root at once, once its content is drawn, whatever setRoot animation the app's options set.

type RootTransition = TransitionPreset | EnterExitAnimationOptions

Member	Type	Description
enter	Side	The animation of the side that comes: the new screen, the modal, the new root.
exit	Side	The animation of the side that goes: the screen that is covered or left, the modal, the old root.

Defined in src/api/layout/Root.ts ↗