react-native-screens

  • Version 3.32.0
  • Published
  • 1.3 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

Functions

Interfaces

Type Aliases

Variables

variable GHContext

const GHContext: React.Context<
(
props: PropsWithChildren<
PropsWithChildren<{
gestureDetectorBridge: React.MutableRefObject<GestureDetectorBridge>;
screensRefs: React.MutableRefObject<
Record<string, React.MutableRefObject<React.Ref<any>>>
>;
currentRouteKey: string;
goBackGesture: GoBackGesture;
transitionAnimation: AnimatedScreenTransition;
screenEdgeGesture: boolean;
}>
>
) => React.JSX.Element
>;

    variable InnerScreen

    const InnerScreen: React.ForwardRefExoticComponent<any>;

      variable isNewBackTitleImplementation

      const isNewBackTitleImplementation: boolean;

        variable isSearchBarAvailableForCurrentPlatform

        const isSearchBarAvailableForCurrentPlatform: boolean;

          variable NativeScreen

          const NativeScreen: React.ComponentType<ScreenProps>;

            variable NativeScreenContainer

            const NativeScreenContainer: React.ComponentType<ScreenContainerProps>;

              variable NativeScreenNavigationContainer

              const NativeScreenNavigationContainer: React.ComponentType<ScreenContainerProps>;

                variable NativeScreensModule

                const NativeScreensModule: Spec;

                  variable NativeSearchBar

                  const NativeSearchBar: any;

                    variable NativeSearchBarCommands

                    const NativeSearchBarCommands: SearchBarCommandsType;

                      variable Screen

                      const Screen: React.FC<ScreenProps>;

                        variable ScreenContext

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

                          variable ScreenStackHeaderConfig

                          const ScreenStackHeaderConfig: React.ComponentType<ScreenStackHeaderConfigProps>;

                            variable ScreenStackHeaderSubview

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

                                variable shouldUseActivityState

                                const shouldUseActivityState: boolean;

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

                                                                              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

                                                                              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 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?: SheetDetentTypes;
                                                                                  • Describes heights where a sheet can rest. Works only when stackPresentation is set to formSheet. Defaults to large.

                                                                                    Available values:

                                                                                    - large - only large detent level will be allowed - medium - only medium detent level will be allowed - all - all detent levels will be allowed

                                                                                    ios

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

                                                                                  sheetLargestUndimmedDetent?: SheetDetentTypes;
                                                                                  • The largest sheet detent for which a view underneath won't be dimmed. Works only when stackPresentation is set to formSheet.

                                                                                    If this prop is set to:

                                                                                    - large - the view underneath won't be dimmed at any detent level - medium - the view underneath will be dimmed only when detent level is large - all - the view underneath will be dimmed for any detent level

                                                                                    Defaults to all.

                                                                                    ios

                                                                                  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 shadow and 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" - iOS like slide in animation (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. - "modal" – the new screen will be presented modally. In addition this allow for a nested stack to be rendered inside such screens. - "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 and will fallback to "modal" on Android.

                                                                                  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

                                                                                  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

                                                                                  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 350. The duration of default and flip transitions isn't customizable.

                                                                                    ios

                                                                                  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

                                                                                    property translucent

                                                                                    translucent?: boolean;
                                                                                    • Boolean indicating whether the navigation bar is translucent.

                                                                                    interface ScreenStackProps

                                                                                    interface ScreenStackProps extends ViewProps {}

                                                                                      property children

                                                                                      children?: React.ReactNode;

                                                                                        property gestureDetectorBridge

                                                                                        gestureDetectorBridge?: React.MutableRefObject<GestureDetectorBridge>;

                                                                                          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 BackButtonDisplayMode

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

                                                                                                type BlurEffectTypes

                                                                                                type BlurEffectTypes =
                                                                                                | '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 HeaderHeightChangeEventType

                                                                                                    type HeaderHeightChangeEventType = {
                                                                                                    headerHeight: number;
                                                                                                    };

                                                                                                      type HeaderSubviewTypes

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

                                                                                                        type ScreenOrientationTypes

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

                                                                                                          type ScreenReplaceTypes

                                                                                                          type ScreenReplaceTypes = 'push' | 'pop';

                                                                                                            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 SheetDetentTypes

                                                                                                                type SheetDetentTypes = 'medium' | 'large' | 'all';

                                                                                                                  type StackAnimationTypes

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

                                                                                                                    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 (13)

                                                                                                                          Dependencies (2)

                                                                                                                          Dev Dependencies (40)

                                                                                                                          Peer Dependencies (2)

                                                                                                                          Badge

                                                                                                                          To add a badge like this onejsDocs.io badgeto 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>