react-native-screens

react-native-screens

Version 4.10.0
Published 28 days ago
1.72 MB
2 dependencies
MIT license

Install

npm i react-native-screens

yarn add react-native-screens

pnpm add react-native-screens

Overview

Native navigation primitives for your React Native app.

Index

Variables

variable compatibilityFlags

const compatibilityFlags: {
    isNewBackTitleImplementation: boolean;
    usesHeaderFlexboxImplementation: boolean;
};

Exposes information useful for downstream navigation library implementers, so they can keep reasonable backward compatibility, if desired.
We don't mean for this object to only grow in number of fields, however at the same time we won't be very hasty to reduce it. Expect gradual changes.

variable InnerScreen

const InnerScreen: React.ForwardRefExoticComponent<any>;

variable isSearchBarAvailableForCurrentPlatform

const isSearchBarAvailableForCurrentPlatform: boolean;

variable Screen

const Screen: React.ForwardRefExoticComponent<any>;

variable ScreenContext

const ScreenContext: React.Context<React.ForwardRefExoticComponent<any>>;

variable ScreenStackHeaderConfig

const ScreenStackHeaderConfig: React.ForwardRefExoticComponent<any>;

variable ScreenStackHeaderSubview

const ScreenStackHeaderSubview: React.ComponentType<React.PropsWithChildren<any>>;

variable ScreenStackItem

const ScreenStackItem: React.ForwardRefExoticComponent<any>;

variable SearchBar

const SearchBar: React.ForwardRefExoticComponent<any>;

Functions

function enableFreeze

enableFreeze: (shouldEnableReactFreeze?: boolean) => void;

function enableScreens

enableScreens: (shouldEnableScreens?: boolean) => void;

function executeNativeBackPress

executeNativeBackPress: () => boolean;

function freezeEnabled

freezeEnabled: () => boolean;

function FullWindowOverlay

FullWindowOverlay: (props: { children: ReactNode }) => React.JSX.Element;

function ScreenContainer

ScreenContainer: (props: ScreenContainerProps) => React.JSX.Element;

function ScreenContentWrapper

ScreenContentWrapper: (props: ViewProps) => React.JSX.Element;

function ScreenFooter

ScreenFooter: (props: ViewProps) => React.JSX.Element;

Unstable API

function screensEnabled

screensEnabled: () => boolean;

function ScreenStack

ScreenStack: (props: ScreenStackProps) => React.JSX.Element;

function ScreenStackHeaderBackButtonImage

ScreenStackHeaderBackButtonImage: (props: ImageProps) => JSX.Element;

function ScreenStackHeaderCenterView

ScreenStackHeaderCenterView: (
    props: React.PropsWithChildren<ViewProps>
) => JSX.Element;

function ScreenStackHeaderLeftView

ScreenStackHeaderLeftView: (
    props: React.PropsWithChildren<ViewProps>
) => JSX.Element;

function ScreenStackHeaderRightView

ScreenStackHeaderRightView: (
    props: React.PropsWithChildren<ViewProps>
) => JSX.Element;

function ScreenStackHeaderSearchBarView

ScreenStackHeaderSearchBarView: (
    props: React.PropsWithChildren<SearchBarProps>
) => JSX.Element;

function useTransitionProgress

useTransitionProgress: () => {
    progress: import('react-native').Animated.Value;
    closing: import('react-native').Animated.Value;
    goingForward: import('react-native').Animated.Value;
};

Interfaces

interface GestureDetectorBridge

interface GestureDetectorBridge {}

property stackUseEffectCallback

stackUseEffectCallback: (
    stackRef: React.MutableRefObject<React.Ref<NativeStackNavigatorProps>>
) => void;

interface GestureProps

interface GestureProps {}

property currentScreenId

currentScreenId?: string;

property goBackGesture

goBackGesture?: GoBackGesture;

property screenEdgeGesture

screenEdgeGesture?: boolean;

property screensRefs

screensRefs?: React.MutableRefObject<ScreensRefsHolder>;

property transitionAnimation

transitionAnimation?: AnimatedScreenTransition;

interface GestureProviderProps

interface GestureProviderProps extends GestureProps {}

property children

children?: React.ReactNode;

property gestureDetectorBridge

gestureDetectorBridge: React.MutableRefObject<GestureDetectorBridge>;

interface MeasuredDimensions

interface MeasuredDimensions {}

property height

height: number;

property pageX

pageX: number;

property pageY

pageY: number;

property width

width: number;

property x

x: number;

property y

y: number;

interface ScreenContainerProps

interface ScreenContainerProps extends ViewProps {}

property children

children?: React.ReactNode;

property enabled

enabled?: boolean;

A prop that gives users an option to switch between using Screens for the navigator (container). All children screens should have the same value of their "enabled" prop as their container.

property hasTwoStates

hasTwoStates?: boolean;

A prop to be used in navigators always showing only one screen (providing only 0 or 2 activityState values) for better implementation of ScreenContainer on iOS.

interface ScreenProps

interface ScreenProps extends ViewProps {}

property active

active?: 0 | 1 | Animated.AnimatedInterpolation<number>;

property activityState

activityState?: 0 | 1 | 2 | Animated.AnimatedInterpolation<number>;

property children

children?: React.ReactNode;

property customAnimationOnSwipe

customAnimationOnSwipe?: boolean;

Boolean indicating that swipe dismissal should trigger animation provided by stackAnimation. Defaults to false.
ios

property enabled

enabled?: boolean;

All children screens should have the same value of their "enabled" prop as their container.

property freezeOnBlur

freezeOnBlur?: boolean;

Whether inactive screens should be suspended from re-rendering. Defaults to false. When enableFreeze() is run at the top of the application defaults to true.

property fullScreenSwipeEnabled

fullScreenSwipeEnabled?: boolean;

Boolean indicating whether the swipe gesture should work on whole screen. Swiping with this option results in the same transition animation as simple_push by default. It can be changed to other custom animations with customAnimationOnSwipe prop, but default iOS swipe animation is not achievable due to usage of custom recognizer. Defaults to false.
ios

property fullScreenSwipeShadowEnabled

fullScreenSwipeShadowEnabled?: boolean;

Whether the full screen dismiss gesture has shadow under view during transition. When enabled, a custom shadow view is added during the transition which tries to mimic the default iOS shadow. Defaults to true.
This does not affect the behavior of transitions that don't use gestures, enabled by fullScreenGestureEnabled prop.
ios

property gestureEnabled

gestureEnabled?: boolean;

Whether you can use gestures to dismiss this screen. Defaults to true.
ios

property gestureResponseDistance

gestureResponseDistance?: GestureResponseDistanceType;

Use it to restrict the distance from the edges of screen in which the gesture should be recognized. To be used alongside fullScreenSwipeEnabled.
ios

property hasLargeHeader

hasLargeHeader?: boolean;

Internal boolean used to detect if current header has large title on iOS.

property hideKeyboardOnSwipe

hideKeyboardOnSwipe?: boolean;

Whether the keyboard should hide when swiping to the previous screen. Defaults to false.
ios

property homeIndicatorHidden

homeIndicatorHidden?: boolean;

Whether the home indicator should be hidden on this screen. Defaults to false.
ios

property isNativeStack

isNativeStack?: boolean;

Internal boolean used to not attach events used only by native-stack. It prevents non native-stack navigators from sending transition progress from their Screen components.

property nativeBackButtonDismissalEnabled

nativeBackButtonDismissalEnabled?: boolean;

Boolean indicating whether, when the Android default back button is clicked, the pop action should be performed on the native side or on the JS side to be able to prevent it. Unfortunately the same behavior is not available on iOS since the behavior of native back button cannot be changed there. Defaults to false.
android

property navigationBarColor

navigationBarColor?: ColorValue;

Sets the navigation bar color. Defaults to initial status bar color.
android
Deprecated
For all apps targeting Android SDK 35 or above this prop has no effect and is subject to removal in the future. For SDK below 35 this works only with specific app setup. This props is subject to removal in the future. See: https://developer.android.com/reference/android/view/Window#setNavigationBarColor(int)

property navigationBarHidden

navigationBarHidden?: boolean;

Sets the visibility of the navigation bar. Defaults to false.
android

property navigationBarTranslucent

navigationBarTranslucent?: boolean;

Boolean indicating whether the content should be visible behind the navigation bar. Defaults to false.
android
Deprecated
For all apps targeting Android SDK 35 or above edge-to-edge is enabled by default. We expect that in future SDKs this option will be enforced. This prop is subject to removal in the future. See: https://developer.android.com/about/versions/15/behavior-changes-15#window-insets

property onAppear

onAppear?: (e: NativeSyntheticEvent<TargetedEvent>) => void;

A callback that gets called when the current screen appears.

property onComponentRef

onComponentRef?: (view: unknown) => void;

property onDisappear

onDisappear?: (e: NativeSyntheticEvent<TargetedEvent>) => void;

A callback that gets called when the current screen disappears.

property onDismissed

onDismissed?: (
    e: NativeSyntheticEvent<{
        dismissCount: number;
    }>
) => void;

A callback that gets called when the current screen is dismissed by hardware back (on Android) or dismiss gesture (swipe back or down). The callback takes the number of dismissed screens as an argument since iOS 14 native header back button can pop more than 1 screen at a time.

property onGestureCancel

onGestureCancel?: (e: NativeSyntheticEvent<null>) => void;

A callback that gets called after swipe back is canceled.

property onHeaderBackButtonClicked

onHeaderBackButtonClicked?: () => void;

An internal callback that gets called when the native header back button is clicked on Android and enableNativeBackButtonDismissal is set to false. It dismises the screen using navigation.pop().
android

property onHeaderHeightChange

onHeaderHeightChange?: (
    e: NativeSyntheticEvent<HeaderHeightChangeEventType>
) => void;

A callback that gets called when the header height has changed.

property onNativeDismissCancelled

onNativeDismissCancelled?: (
    e: NativeSyntheticEvent<{
        dismissCount: number;
    }>
) => void;

An internal callback called when screen is dismissed by gesture or by native header back button and preventNativeDismiss is set to true.
ios

property onSheetDetentChanged

onSheetDetentChanged?: (
    e: NativeSyntheticEvent<{
        index: number;
        isStable: boolean;
    }>
) => void;

A callback that gets called when the current screen is in formSheet presentation and its detent has changed.

property onTransitionProgress

onTransitionProgress?: (
    e: NativeSyntheticEvent<TransitionProgressEventType>
) => void;

An internal callback called every frame during the transition of screens of native-stack, used to feed transition context.

property onWillAppear

onWillAppear?: (e: NativeSyntheticEvent<TargetedEvent>) => void;

A callback that gets called when the current screen will appear. This is called as soon as the transition begins.

property onWillDisappear

onWillDisappear?: (e: NativeSyntheticEvent<TargetedEvent>) => void;

A callback that gets called when the current screen will disappear. This is called as soon as the transition begins.

property preventNativeDismiss

preventNativeDismiss?: boolean;

Boolean indicating whether to prevent current screen from being dismissed. Defaults to false.
ios

property ref

ref?: React.Ref<View>;

property replaceAnimation

replaceAnimation?: ScreenReplaceTypes;

How should the screen replacing another screen animate. Defaults to pop. The following values are currently supported: - "push" – the new screen will perform push animation. - "pop" – the new screen will perform pop animation.

property screenOrientation

screenOrientation?: ScreenOrientationTypes;

In which orientation should the screen appear. The following values are currently supported: - "default" - resolves to "all" without "portrait_down" on iOS. On Android, this lets the system decide the best orientation. - "all" – all orientations are permitted - "portrait" – portrait orientations are permitted - "portrait_up" – right-side portrait orientation is permitted - "portrait_down" – upside-down portrait orientation is permitted - "landscape" – landscape orientations are permitted - "landscape_left" – landscape-left orientation is permitted - "landscape_right" – landscape-right orientation is permitted

property sheetAllowedDetents

sheetAllowedDetents?: number[] | 'fitToContents' | 'medium' | 'large' | 'all';

Describes heights where a sheet can rest. Works only when presentation is set to formSheet.
Heights should be described as fraction (a number from [0, 1] interval) of screen height / maximum detent height. You can pass an array of ascending values each defining allowed sheet detent. iOS accepts any number of detents, while **Android is limited to three**.
There is also possibility to specify fitToContents literal, which intents to set the sheet height to the height of its contents. On iOS fitToContents currently also includes small padding accounting for bottom inset.
Please note that the array **must** be sorted in ascending order. This invariant is verified only in developement mode, where violation results in error.
**Android is limited to up 3 values in the array** -- any surplus values, beside first three are ignored.
There are also legacy & **deprecated** options available:
* 'medium' - corresponds to [0.5] detent value, around half of the screen height, * 'large' - corresponds to [1.0] detent value, maximum height, * 'all' - corresponds to [0.5, 1.0] value, the name is deceiving due to compatibility reasons.
These are provided solely for **temporary** backward compatibility and are destined for removal in future versions.
Defaults to [1.0].

property sheetCornerRadius

sheetCornerRadius?: number;

The corner radius that the sheet will try to render with. Works only when stackPresentation is set to formSheet.
If set to non-negative value it will try to render sheet with provided radius, else it will apply system default.
If left unset system default is used.
ios

property sheetElevation

sheetElevation?: number;

Integer value describing elevation of the sheet, impacting shadow on the top edge of the sheet.
Not dynamic - changing it after the component is rendered won't have an effect.
Defaults to 24.
Android

property sheetExpandsWhenScrolledToEdge

sheetExpandsWhenScrolledToEdge?: boolean;

Whether the sheet should expand to larger detent when scrolling. Works only when stackPresentation is set to formSheet. Defaults to true.
ios

property sheetGrabberVisible

sheetGrabberVisible?: boolean;

Boolean indicating whether the sheet shows a grabber at the top. Works only when stackPresentation is set to formSheet. Defaults to false.
ios

property sheetInitialDetentIndex

sheetInitialDetentIndex?: number | 'last';

Index of the detent the sheet should expand to after being opened. Works only when stackPresentation is set to formSheet.
If the specified index is out of bounds of sheetAllowedDetents array, in dev environment more error will be thrown, in production the value will be reset to default value.
Additionaly there is last value available, when set the sheet will expand initially to last (largest) detent.
Defaults to 0 - which represents first detent in the detents array.

property sheetLargestUndimmedDetentIndex

sheetLargestUndimmedDetentIndex?:
    | number
    | 'none'
    | 'last'
    | 'medium'
    | 'large'
    | 'all';

The largest sheet detent for which a view underneath won't be dimmed. Works only when stackPresentation is set to formSheet.
This prop can be set to an number, which indicates index of detent in sheetAllowedDetents array for which there won't be a dimming view beneath the sheet.
If the specified index is out of bounds of sheetAllowedDetents array, in dev environment mode error will be thrown, in production the value will be reset to default value.
Additionaly there are following options available:
* none - there will be dimming view for all detents levels, * last - there won't be a dimming view for any detent level.
There also legacy & **deprecated** prop values available: medium, large (don't confuse with largest), all, which work in tandem with corresponding legacy prop values for sheetAllowedDetents prop.
These are provided solely for **temporary** backward compatibility and are destined for removal in future versions.
Defaults to none, indicating that the dimming view should be always present.

property shouldFreeze

shouldFreeze?: boolean;

Boolean indicating that the screen should be frozen with react-freeze.

property stackAnimation

stackAnimation?: StackAnimationTypes;

How the screen should appear/disappear when pushed or popped at the top of the stack. The following values are currently supported: - "default" – uses a platform default animation - "fade" – fades screen in or out - "fade_from_bottom" – performs a fade from bottom animation - "flip" – flips the screen, requires stackPresentation: "modal" (iOS only) - "simple_push" – performs a default animation, but without native header transition (iOS only) - slide_from_bottom – performs a slide from bottom animation - "slide_from_right" - slide in the new screen from right to left (Android only, resolves to default transition on iOS) - "slide_from_left" - slide in the new screen from left to right - "ios_from_right" - iOS like slide in animation. pushes in the new screen from right to left (Android only, resolves to default transition on iOS) - "ios_from_left" - iOS like slide in animation. pushes in the new screen from left to right (Android only, resolves to default transition on iOS) - "none" – the screen appears/dissapears without an animation

property stackPresentation

stackPresentation?: StackPresentationTypes;

How should the screen be presented. The following values are currently supported: - "push" – the new screen will be pushed onto a stack which on iOS means that the default animation will be slide from the side, the animation on Android may vary depending on the OS version and theme. Supports nested stack rendering. - "modal" – the new screen will be presented modally. On iOS it'll use UIModalPresentationStyleAutomatic. On Android this is equivalent to push presentation type. Supports nested stack rendering. - "transparentModal" – the new screen will be presented modally but in addition the second to last screen will remain attached to the stack container such that if the top screen is non opaque the content below can still be seen. If "modal" is used instead the below screen will get unmounted as soon as the transition ends. - "containedModal" – will use "UIModalPresentationCurrentContext" modal style on iOS and will fallback to "modal" on Android. - "containedTransparentModal" – will use "UIModalPresentationOverCurrentContext" modal style on iOS and will fallback to "transparentModal" on Android. - "fullScreenModal" – will use "UIModalPresentationFullScreen" modal style on iOS and will fallback to "modal" on Android. - "formSheet" – will use "UIModalPresentationFormSheet" modal style on iOS, on Android this will use Material BottomSheetBehaviour. On Android neested stack rendering is not yet supported.

property statusBarAnimation

statusBarAnimation?: 'none' | 'fade' | 'slide';

Sets the status bar animation (similar to the StatusBar component). Requires enabling (or deleting) View controller-based status bar appearance in your Info.plist file on iOS.

property statusBarColor

statusBarColor?: ColorValue;

Sets the status bar color (similar to the StatusBar component). Defaults to initial status bar color.
android
Deprecated
For all apps targeting Android SDK 35 or above this prop has no effect. For SDK below 35 this works only with specific app setup. This prop is subject to removal in the future. See: https://developer.android.com/reference/android/view/Window#setStatusBarColor(int)

property statusBarHidden

statusBarHidden?: boolean;

Whether the status bar should be hidden on this screen. Requires enabling (or deleting) View controller-based status bar appearance in your Info.plist file on iOS. Defaults to false.

property statusBarStyle

statusBarStyle?: 'inverted' | 'auto' | 'light' | 'dark';

Sets the status bar color (similar to the StatusBar component). Requires enabling (or deleting) View controller-based status bar appearance in your Info.plist file on iOS. Defaults to auto.

property statusBarTranslucent

statusBarTranslucent?: boolean;

Sets the translucency of the status bar. Defaults to false.
android
Deprecated
For all apps targeting Android SDK 35 or above edge-to-edge mode on Android is enabled by default and this point loses relevance. It is expected that the edge-to-edge will be enforced in future SDKs: https://developer.android.com/about/versions/15/behavior-changes-15#ux.

property swipeDirection

swipeDirection?: SwipeDirectionTypes;

Sets the direction in which you should swipe to dismiss the screen. When using vertical option, options fullScreenSwipeEnabled: true, customAnimationOnSwipe: true and stackAnimation: 'slide_from_bottom' are set by default. The following values are supported: - vertical – dismiss screen vertically - horizontal – dismiss screen horizontally (default)
ios

property transitionDuration

transitionDuration?: number;

Changes the duration (in milliseconds) of slide_from_bottom, fade_from_bottom, fade and simple_push transitions on iOS. Defaults to 500. The duration of default and flip transitions isn't customizable.
ios

property unstable_sheetFooter

unstable_sheetFooter?: () => React.ReactNode;

Footer component that can be used alongside formSheet stack presentation style.
This option is provided, because due to implementation details it might be problematic to implement such layout with JS-only code.
Please note that this prop is marked as unstable and might be subject of breaking changes, including removal, in particular when we find solution that will make implementing it with JS straightforward.
android

interface ScreenStackHeaderConfigProps

interface ScreenStackHeaderConfigProps extends ViewProps {}

property backButtonDisplayMode

backButtonDisplayMode?: BackButtonDisplayMode;

How the back button behaves by default (when not customized). Available on iOS>=14, and is used only when none of: backTitleFontFamily, backTitleFontSize, disableBackButtonMenu or backTitle is set. The following values are currently supported (they correspond to https://developer.apple.com/documentation/uikit/uinavigationitembackbuttondisplaymode?language=objc): - "default" – show given back button previous controller title, system generic or just icon based on available space - "generic" – show given system generic or just icon based on available space - "minimal" – show just an icon ios

property backButtonInCustomView

backButtonInCustomView?: boolean;

Whether to show the back button with custom left side of the header.

property backgroundColor

backgroundColor?: ColorValue;

Controls the color of the navigation header.

property backTitle

backTitle?: string;

Title to display in the back button. ios.

property backTitleFontFamily

backTitleFontFamily?: string;

Allows for customizing font family to be used for back button title on iOS. ios

property backTitleFontSize

backTitleFontSize?: number;

Allows for customizing font size to be used for back button title on iOS. ios

property backTitleVisible

backTitleVisible?: boolean;

Whether the back button title should be visible or not. Defaults to true. ios

property blurEffect

blurEffect?: BlurEffectTypes;

Blur effect to be applied to the header. Works with backgroundColor's alpha < 1. ios

property children

children?: React.ReactNode;

Pass HeaderLeft, HeaderRight and HeaderTitle

property color

color?: ColorValue;

Controls the color of items rendered on the header. This includes back icon, back text (iOS only) and title text. If you want the title to have different color use titleColor property.

property direction

direction?: 'rtl' | 'ltr';

Whether the stack should be in rtl or ltr form.

property disableBackButtonMenu

disableBackButtonMenu?: boolean;

Boolean indicating whether to show the menu on longPress of iOS >= 14 back button. ios

property hidden

hidden?: boolean;

When set to true the header will be hidden while the parent Screen is on the top of the stack. The default value is false.

property hideBackButton

hideBackButton?: boolean;

Boolean indicating whether to hide the back button in header.

property hideShadow

hideShadow?: boolean;

Boolean indicating whether to hide the elevation shadow or the bottom border on the header.

property largeTitle

largeTitle?: boolean;

Boolean to set native property to prefer large title header (like in iOS setting). For large title to collapse on scroll, the content of the screen should be wrapped in a scrollable view such as ScrollView or FlatList. If the scrollable area doesn't fill the screen, the large title won't collapse on scroll. Only supported on iOS.
ios

property largeTitleBackgroundColor

largeTitleBackgroundColor?: ColorValue;

Controls the color of the navigation header when the edge of any scrollable content reaches the matching edge of the navigation bar.

property largeTitleColor

largeTitleColor?: ColorValue;

Customize the color to be used for the large title. By default uses the titleColor property. ios

property largeTitleFontFamily

largeTitleFontFamily?: string;

Customize font family to be used for the large title. ios

property largeTitleFontSize

largeTitleFontSize?: number;

Customize the size of the font to be used for the large title. ios

property largeTitleFontWeight

largeTitleFontWeight?: string;

Customize the weight of the font to be used for the large title. ios

property largeTitleHideShadow

largeTitleHideShadow?: boolean;

Boolean that allows for disabling drop shadow under navigation header when the edge of any scrollable content reaches the matching edge of the navigation bar.

property onAttached

onAttached?: () => void;

Callback which is executed when screen header is attached

property onDetached

onDetached?: () => void;

Callback which is executed when screen header is detached

property title

title?: string;

String that can be displayed in the header as a fallback for headerTitle.

property titleColor

titleColor?: ColorValue;

Allows for setting text color of the title.

property titleFontFamily

titleFontFamily?: string;

Customize font family to be used for the title.

property titleFontSize

titleFontSize?: number;

Customize the size of the font to be used for the title.

property titleFontWeight

titleFontWeight?: string;

Customize the weight of the font to be used for the title.

property topInsetEnabled

topInsetEnabled?: boolean;

A flag to that lets you opt out of insetting the header. You may want to set this to false if you use an opaque status bar. Defaults to true. Only supported on Android. Insets are always applied on iOS because the header cannot be opaque.
android
Deprecated
For apps targeting Android SDK 35 or above edge-to-edge mode is enabled by default and it is expected that the edge-to-edge will be enforced in future SDKs - therefore this prop loses its relevance and will be removed at some point in the future.

property translucent

translucent?: boolean;

Boolean indicating whether the navigation bar is translucent.

interface ScreenStackProps

interface ScreenStackProps extends ViewProps, GestureProps {}

property children

children?: React.ReactNode;

property onFinishTransitioning

onFinishTransitioning?: (e: NativeSyntheticEvent<TargetedEvent>) => void;

A callback that gets called when the current screen finishes its transition.

property ref

ref?: React.MutableRefObject<React.Ref<View>>;

interface SearchBarProps

interface SearchBarProps {}

property autoCapitalize

autoCapitalize?: 'none' | 'words' | 'sentences' | 'characters';

The auto-capitalization behavior

property autoFocus

autoFocus?: boolean;

Automatically focuses search bar on mount
android

property barTintColor

barTintColor?: ColorValue;

The search field background color

property cancelButtonText

cancelButtonText?: string;

The text to be used instead of default Cancel button text
ios

property disableBackButtonOverride

disableBackButtonOverride?: boolean;

Specifies whether the back button should close search bar's text input or not.
android

property headerIconColor

headerIconColor?: ColorValue;

The search and close icon color shown in the header
android

property hideNavigationBar

hideNavigationBar?: boolean;

Indicates whether to hide the navigation bar
ios

property hideWhenScrolling

hideWhenScrolling?: boolean;

Indicates whether to hide the search bar when scrolling
ios

property hintTextColor

hintTextColor?: ColorValue;

The search hint text color
android

property inputType

inputType?: 'text' | 'phone' | 'number' | 'email';

Sets type of the input. Defaults to text.
android

property obscureBackground

obscureBackground?: boolean;

Indicates whether to obscure the underlying content

property onBlur

onBlur?: (e: NativeSyntheticEvent<TargetedEvent>) => void;

A callback that gets called when search bar has lost focus

property onCancelButtonPress

onCancelButtonPress?: (e: NativeSyntheticEvent<TargetedEvent>) => void;

A callback that gets called when the cancel button is pressed
ios

property onChangeText

onChangeText?: (e: NativeSyntheticEvent<TextInputFocusEventData>) => void;

A callback that gets called when the text changes. It receives the current text value of the search bar.

property onClose

onClose?: () => void;

A callback that gets called when search bar is closed
android

property onFocus

onFocus?: (e: NativeSyntheticEvent<TargetedEvent>) => void;

A callback that gets called when search bar has received focus

property onOpen

onOpen?: () => void;

A callback that gets called when search bar is opened
android

property onSearchButtonPress

onSearchButtonPress?: (e: NativeSyntheticEvent<TextInputFocusEventData>) => void;

A callback that gets called when the search button is pressed. It receives the current text value of the search bar.

property placeholder

placeholder?: string;

Text displayed when search field is empty

property placement

placement?: SearchBarPlacement;

Position of the search bar
Supported values:
* automatic - the search bar is placed according to current layout * inline - the search bar is placed on the trailing edge of navigation bar * stacked - the search bar is placed below the other content in navigation bar
Defaults to stacked
iOS (>= 16.0)

property ref

ref?: React.RefObject<SearchBarCommands>;

Reference to imperatively modify search bar.
Currently supported operations are:
* focus - focuses the search bar * blur - removes focus from the search bar * clearText - removes any text present in the search bar input field * setText - sets the search bar's content to given value * cancelSearch - cancel search in search bar. * toggleCancelButton - depending on passed boolean value, hides or shows cancel button (iOS only)

property shouldShowHintSearchIcon

shouldShowHintSearchIcon?: boolean;

Show the search hint icon when search bar is focused
android true

property textColor

textColor?: ColorValue;

The search field text color

property tintColor

tintColor?: ColorValue;

The color for the cursor caret and cancel button text.
ios

Type Aliases

type AnimatedScreenTransition

type AnimatedScreenTransition = {
    topScreenStyle: (
        event: PanGestureHandlerEventPayload,
        screenSize: MeasuredDimensions
    ) => Record<string, unknown>;
    belowTopScreenStyle: (
        event: PanGestureHandlerEventPayload,
        screenSize: MeasuredDimensions
    ) => Record<string, unknown>;
};

type BackButtonDisplayMode

type BackButtonDisplayMode = 'default' | 'generic' | 'minimal';

type BlurEffectTypes

type BlurEffectTypes =
    | 'none'
    | 'extraLight'
    | 'light'
    | 'dark'
    | 'regular'
    | 'prominent'
    | 'systemUltraThinMaterial'
    | 'systemThinMaterial'
    | 'systemMaterial'
    | 'systemThickMaterial'
    | 'systemChromeMaterial'
    | 'systemUltraThinMaterialLight'
    | 'systemThinMaterialLight'
    | 'systemMaterialLight'
    | 'systemThickMaterialLight'
    | 'systemChromeMaterialLight'
    | 'systemUltraThinMaterialDark'
    | 'systemThinMaterialDark'
    | 'systemMaterialDark'
    | 'systemThickMaterialDark'
    | 'systemChromeMaterialDark';

type GestureResponseDistanceType

type GestureResponseDistanceType = {
    start?: number;
    end?: number;
    top?: number;
    bottom?: number;
};

type GoBackGesture

type GoBackGesture =
    | 'swipeRight'
    | 'swipeLeft'
    | 'swipeUp'
    | 'swipeDown'
    | 'verticalSwipe'
    | 'horizontalSwipe'
    | 'twoDimensionalSwipe';

copy from Reanimated to avoid strong dependency

type HeaderHeightChangeEventType

type HeaderHeightChangeEventType = {
    headerHeight: number;
};

type HeaderSubviewTypes

type HeaderSubviewTypes = 'back' | 'right' | 'left' | 'center' | 'searchBar';

type PanGestureHandlerEventPayload

type PanGestureHandlerEventPayload = {
    x: number;
    y: number;
    absoluteX: number;
    absoluteY: number;
    translationX: number;
    translationY: number;
    velocityX: number;
    velocityY: number;
};

copy from GestureHandler to avoid strong dependency

type ScreenOrientationTypes

type ScreenOrientationTypes =
    | 'default'
    | 'all'
    | 'portrait'
    | 'portrait_up'
    | 'portrait_down'
    | 'landscape'
    | 'landscape_left'
    | 'landscape_right';

type ScreenReplaceTypes

type ScreenReplaceTypes = 'push' | 'pop';

type ScreensRefsHolder

type ScreensRefsHolder = Record<string, React.RefObject<View>>;

type SearchBarCommands

type SearchBarCommands = {
    focus: () => void;
    blur: () => void;
    clearText: () => void;
    toggleCancelButton: (show: boolean) => void;
    setText: (text: string) => void;
    cancelSearch: () => void;
};

type SearchBarPlacement

type SearchBarPlacement = 'automatic' | 'inline' | 'stacked';

type StackAnimationTypes

type StackAnimationTypes =
    | 'default'
    | 'fade'
    | 'fade_from_bottom'
    | 'flip'
    | 'none'
    | 'simple_push'
    | 'slide_from_bottom'
    | 'slide_from_right'
    | 'slide_from_left'
    | 'ios_from_right'
    | 'ios_from_left';

type StackPresentationTypes

type StackPresentationTypes =
    | 'push'
    | 'modal'
    | 'transparentModal'
    | 'containedModal'
    | 'containedTransparentModal'
    | 'fullScreenModal'
    | 'formSheet';

type SwipeDirectionTypes

type SwipeDirectionTypes = 'vertical' | 'horizontal';

type TransitionProgressEventType

type TransitionProgressEventType = {
    progress: number;
    closing: number;
    goingForward: number;
};

Package Files (14)

Dependencies (2)

Peer Dependencies (2)

Badge

To add a badge like this oneto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/react-native-screens.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/react-native-screens)

HTML

<a href="https://www.jsdocs.io/package/react-native-screens"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 27 days ago.
Package analyzed in 4749 ms.
Missing or incorrect documentation? Open an issue for this package.

react-native-screens

Install

Overview

Index

Variables

Functions

Interfaces

Type Aliases

Variables

variable compatibilityFlags

variable InnerScreen

variable isSearchBarAvailableForCurrentPlatform

variable Screen

variable ScreenContext

variable ScreenStackHeaderConfig

variable ScreenStackHeaderSubview

variable ScreenStackItem

variable SearchBar

Functions

function enableFreeze

function enableScreens

function executeNativeBackPress

function freezeEnabled

function FullWindowOverlay

function ScreenContainer

function ScreenContentWrapper

function ScreenFooter

function screensEnabled

function ScreenStack

function ScreenStackHeaderBackButtonImage

function ScreenStackHeaderCenterView

function ScreenStackHeaderLeftView

function ScreenStackHeaderRightView

function ScreenStackHeaderSearchBarView

function useTransitionProgress

Interfaces

interface GestureDetectorBridge

property stackUseEffectCallback

interface GestureProps

property currentScreenId

property goBackGesture

property screenEdgeGesture

property screensRefs

property transitionAnimation

interface GestureProviderProps

property children

property gestureDetectorBridge

interface MeasuredDimensions

property height

property pageX

property pageY

property width

property x

property y

interface ScreenContainerProps

property children

property enabled

property hasTwoStates

interface ScreenProps

property active

property activityState

property children

property customAnimationOnSwipe

property enabled

property freezeOnBlur

property fullScreenSwipeEnabled

property fullScreenSwipeShadowEnabled

property gestureEnabled

property gestureResponseDistance

property hasLargeHeader

property hideKeyboardOnSwipe

property homeIndicatorHidden

property isNativeStack

property nativeBackButtonDismissalEnabled

property navigationBarColor

Deprecated

property navigationBarHidden

property navigationBarTranslucent

Deprecated

property onAppear