react-native

react-native

Version 0.77.0
Published 13 days ago
73.9 MB
37 dependencies
MIT license

Install

npm i react-native

yarn add react-native

pnpm add react-native

Overview

A framework for building native apps using React

Index

Variables

variable AccessibilityInfo

const AccessibilityInfo: AccessibilityInfoStatic;

variable ActionSheetIOS

const ActionSheetIOS: ActionSheetIOSStatic;

variable ActivityIndicatorBase

const ActivityIndicatorBase: Constructor<NativeMethods> &
    typeof ActivityIndicatorComponent;

variable Alert

const Alert: AlertStatic;

variable AppState

const AppState: AppStateStatic;

variable BackHandler

const BackHandler: BackHandlerStatic;

variable Clipboard

const Clipboard: ClipboardStatic;

Clipboard has been extracted from react-native core and will be removed in a future release. It can now be installed and imported from @react-native-clipboard/clipboard instead of 'react-native'.
See Also
- https://github.com/react-native-clipboard/clipboard
Deprecated

variable DeviceEventEmitter

const DeviceEventEmitter: DeviceEventEmitterStatic;

variable DevMenu

const DevMenu: DevMenuStatic;

variable DevSettings

const DevSettings: DevSettingsStatic;

variable Dimensions

const Dimensions: Dimensions;

variable DrawerLayoutAndroidBase

const DrawerLayoutAndroidBase: Constructor<NativeMethods> &
    typeof DrawerLayoutAndroidComponent;

variable Easing

const Easing: EasingStatic;

variable I18nManager

const I18nManager: I18nManagerStatic;

https://reactnative.dev/blog/2016/08/19/right-to-left-support-for-react-native-apps

variable ImageBackgroundBase

const ImageBackgroundBase: Constructor<NativeMethods> &
    typeof ImageBackgroundComponent;

variable ImageBase

const ImageBase: Constructor<NativeMethods> & typeof ImageComponent;

variable InteractionManager

const InteractionManager: InteractionManagerStatic;

variable Keyboard

const Keyboard: KeyboardStatic;

variable KeyboardAvoidingViewBase

const KeyboardAvoidingViewBase: Constructor<TimerMixin> &
    typeof KeyboardAvoidingViewComponent;

variable LayoutAnimation

const LayoutAnimation: LayoutAnimationStatic;

variable Linking

const Linking: LinkingStatic;

variable LogBox

const LogBox: LogBoxStatic;

variable NativeAppEventEmitter

const NativeAppEventEmitter: DeviceEventEmitterStatic;

Deprecated - subclass NativeEventEmitter to create granular event modules instead of adding all event listeners directly to RCTNativeAppEventEmitter.

variable NativeModules

const NativeModules: NativeModulesStatic;

Native Modules written in ObjectiveC/Swift/Java exposed via the RCTBridge Define lazy getters for each module. These will return the module if already loaded, or load it if not. See https://reactnative.dev/docs/native-modules-ios
Example 1
const MyModule = NativeModules.ModuleName

variable PanResponder

const PanResponder: PanResponderStatic;

variable PermissionsAndroid

const PermissionsAndroid: PermissionsAndroidStatic;

variable PixelRatio

const PixelRatio: PixelRatioStatic;

variable Platform

const Platform: Platform;

variable Pressable

const Pressable: React.ForwardRefExoticComponent<any>;

variable ProgressBarAndroidBase

const ProgressBarAndroidBase: Constructor<NativeMethods> &
    typeof ProgressBarAndroidComponent;

variable PushNotificationIOS

const PushNotificationIOS: PushNotificationIOSStatic;

PushNotificationIOS has been extracted from react-native core and will be removed in a future release. It can now be installed and imported from @react-native-community/push-notification-ios instead of 'react-native'.
See Also
- https://github.com/react-native-community/react-native-push-notification-ios
Deprecated

variable RefreshControlBase

const RefreshControlBase: Constructor<NativeMethods> &
    typeof RefreshControlComponent;

variable registerCallableModule

const registerCallableModule: RegisterCallableModule;

variable RootTagContext

const RootTagContext: React.Context<number>;

variable SafeAreaViewBase

const SafeAreaViewBase: Constructor<NativeMethods> & typeof SafeAreaViewComponent;

variable ScrollViewBase

const ScrollViewBase: Constructor<ScrollResponderMixin> & typeof ScrollViewComponent;

variable Settings

const Settings: SettingsStatic;

const Share: ShareStatic;

variable SwitchBase

const SwitchBase: Constructor<NativeMethods> & typeof SwitchComponent;

variable TextBase

const TextBase: Constructor<NativeMethods> & typeof TextComponent;

variable TextInputBase

const TextInputBase: Constructor<NativeMethods> &
    Constructor<TimerMixin> &
    typeof TextInputComponent;

variable ToastAndroid

const ToastAndroid: ToastAndroidStatic;

variable Touchable

const Touchable: {
    TOUCH_TARGET_DEBUG: boolean;
    renderDebugView: (config: {
        color: string | number;
        hitSlop?: Insets | undefined;
    }) => React.ReactElement | null;
};

variable TouchableHighlight

const TouchableHighlight: React.ForwardRefExoticComponent<any>;

A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, which allows the underlay color to show through, darkening or tinting the view. The underlay comes from adding a view to the view hierarchy, which can sometimes cause unwanted visual artifacts if not used correctly, for example if the backgroundColor of the wrapped view isn't explicitly set to an opaque color.
NOTE: TouchableHighlight supports only one child If you wish to have several child components, wrap them in a View.
See Also
- https://reactnative.dev/docs/touchablehighlight

variable TouchableNativeFeedbackBase

const TouchableNativeFeedbackBase: Constructor<TouchableMixin> &
    typeof TouchableNativeFeedbackComponent;

variable TouchableOpacity

const TouchableOpacity: React.ForwardRefExoticComponent<any>;

A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, dimming it. This is done without actually changing the view hierarchy, and in general is easy to add to an app without weird side-effects.
See Also
- https://reactnative.dev/docs/touchableopacity

variable TouchableWithoutFeedbackBase

const TouchableWithoutFeedbackBase: Constructor<TimerMixin> &
    Constructor<TouchableMixin> &
    typeof TouchableWithoutFeedbackComponent;

variable UIManager

const UIManager: UIManagerStatic;

variable Vibration

const Vibration: VibrationStatic;

variable ViewBase

const ViewBase: Constructor<NativeMethods> & typeof ViewComponent;

variable YellowBox

const YellowBox: any;

YellowBox has been replaced with LogBox.
See Also
- LogBox
Deprecated

Functions

function DynamicColorIOS

DynamicColorIOS: (tuple: DynamicColorIOSTuple) => OpaqueColorValue;

Specify color to display depending on the current system appearance settings
Parameter tuple
Colors you want to use for "light mode" and "dark mode" ios

function findNodeHandle

findNodeHandle: (
    componentOrHandle:
        | null
        | number
        | React.Component<any, any>
        | React.ComponentClass<any>
) => null | NodeHandle;

function PlatformColor

PlatformColor: (...colors: string[]) => OpaqueColorValue;

Select native platform color The color must match the string that exists on the native platform
See Also
- https://reactnative.dev/docs/platformcolor#example

function processColor

processColor: (
    color?: number | ColorValue
) => ProcessedColorValue | null | undefined;

function requireNativeComponent

requireNativeComponent: <T>(viewName: string) => HostComponent<T>;

Creates values that can be used like React components which represent native view managers. You should create JavaScript modules that wrap these values so that the results are memoized. Example:
const View = requireNativeComponent('RCTView');
The concrete return type of requireNativeComponent is a string, but the declared type is HostComponent because TypeScript assumes anonymous JSX intrinsics (e.g. a string) not to have any props.

function unstable_batchedUpdates

unstable_batchedUpdates: {
    <A, R>(callback: (a: A) => R, a: A): R;
    <R>(callback: () => R): R;
};

React Native also implements unstable_batchedUpdates

function useAnimatedValue

useAnimatedValue: (
    initialValue: number,
    config?: Animated.AnimatedConfig
) => Animated.Value;

function useColorScheme

useColorScheme: () => ColorSchemeName;

A new useColorScheme hook is provided as the preferred way of accessing the user's preferred color scheme (e.g. Dark Mode).

function useWindowDimensions

useWindowDimensions: () => ScaledSize;

Classes

class ActivityIndicator

class ActivityIndicator extends ActivityIndicatorBase {}

class ActivityIndicatorComponent

class ActivityIndicatorComponent extends React.Component<ActivityIndicatorProps> {}

class Button

class Button extends React.Component<ButtonProps> {}

class DrawerLayoutAndroid

class DrawerLayoutAndroid extends DrawerLayoutAndroidBase {}

property positions

positions: DrawerPosition;

drawer's positions.

method closeDrawer

closeDrawer: () => void;

Closes the drawer.

method openDrawer

openDrawer: () => void;

Opens the drawer.

class DrawerLayoutAndroidComponent

class DrawerLayoutAndroidComponent extends React.Component<DrawerLayoutAndroidProps> {}

class FlatList

class FlatList<ItemT = any> extends FlatListComponent<ItemT, FlatListProps<ItemT>> {}

class FlatListComponent

abstract class FlatListComponent<ItemT, Props> extends React.Component<Props> {}

property flashScrollIndicators

flashScrollIndicators: () => void;

Displays the scroll indicators momentarily.

property getNativeScrollRef

getNativeScrollRef: () =>
    | React.ElementRef<typeof View>
    | React.ElementRef<typeof ScrollViewComponent>
    | null
    | undefined;

Provides a reference to the underlying host component

property getScrollableNode

getScrollableNode: () => any;

property getScrollResponder

getScrollResponder: () => JSX.Element | null | undefined;

Provides a handle to the underlying scroll responder.

property recordInteraction

recordInteraction: () => void;

Tells the list an interaction has occurred, which should trigger viewability calculations, e.g. if waitForInteractions is true and the user has not scrolled. This is typically called by taps on items or by navigation actions.

property scrollToEnd

scrollToEnd: (params?: { animated?: boolean | null | undefined }) => void;

Scrolls to the end of the content. May be janky without getItemLayout prop.

property scrollToIndex

scrollToIndex: (params: {
    animated?: boolean | null | undefined;
    index: number;
    viewOffset?: number | undefined;
    viewPosition?: number | undefined;
}) => void;

Scrolls to the item at the specified index such that it is positioned in the viewable area such that viewPosition 0 places it at the top, 1 at the bottom, and 0.5 centered in the middle. Cannot scroll to locations outside the render window without specifying the getItemLayout prop.

property scrollToItem

scrollToItem: (params: {
    animated?: boolean | null | undefined;
    item: ItemT;
    viewOffset?: number | undefined;
    viewPosition?: number | undefined;
}) => void;

Requires linear scan through data - use scrollToIndex instead if possible. May be janky without getItemLayout prop.

property scrollToOffset

scrollToOffset: (params: {
    animated?: boolean | null | undefined;
    offset: number;
}) => void;

Scroll to a specific content pixel offset, like a normal ScrollView.

property setNativeProps

setNativeProps: (props: { [key: string]: unknown }) => void;

class Image

class Image extends ImageBase {}

method abortPrefetch

static abortPrefetch: (requestId: number) => void;

method getSize

static getSize: {
    (uri: string): Promise<ImageSize>;
    (
        uri: string,
        success: (width: number, height: number) => void,
        failure?: (error: any) => void
    ): void;
};

method getSizeWithHeaders

static getSizeWithHeaders: {
    (uri: string, headers: { [index: string]: string }): Promise<ImageSize>;
    (
        uri: string,
        headers: { [index: string]: string },
        success: (width: number, height: number) => void,
        failure?: (error: any) => void
    ): void;
};

method prefetch

static prefetch: (url: string) => Promise<boolean>;

method prefetchWithMetadata

static prefetchWithMetadata: (
    url: string,
    queryRootName: string,
    rootTag?: number
) => Promise<boolean>;

method queryCache

static queryCache: (
    urls: string[]
) => Promise<{ [url: string]: 'memory' | 'disk' | 'disk/memory' }>;

method resolveAssetSource

static resolveAssetSource: (
    source: ImageSourcePropType
) => ImageResolvedAssetSource;

See Also
- https://reactnative.dev/docs/image#resolveassetsource

class ImageBackground

class ImageBackground extends ImageBackgroundBase {}

class ImageBackgroundComponent

class ImageBackgroundComponent extends React.Component<ImageBackgroundProps> {}

class ImageComponent

class ImageComponent extends React.Component<ImageProps> {}

class InputAccessoryView

class InputAccessoryView extends React.Component<InputAccessoryViewProps> {}

A component which enables customization of the keyboard input accessory view on iOS. The input accessory view is displayed above the keyboard whenever a TextInput has focus. This component can be used to create custom toolbars.
To use this component wrap your custom toolbar with the InputAccessoryView component, and set a nativeID. Then, pass that nativeID as the inputAccessoryViewID of whatever TextInput you desire.

class KeyboardAvoidingView

class KeyboardAvoidingView extends KeyboardAvoidingViewBase {}

class KeyboardAvoidingViewComponent

class KeyboardAvoidingViewComponent extends React.Component<KeyboardAvoidingViewProps> {}

It is a component to solve the common problem of views that need to move out of the way of the virtual keyboard. It can automatically adjust either its position or bottom padding based on the position of the keyboard.

class Modal extends React.Component<ModalProps> {}

class NativeEventEmitter

class NativeEventEmitter extends EventEmitter {}

Abstract base class for implementing event-emitting modules. This implements a subset of the standard EventEmitter node module API.

constructor

constructor(nativeModule?: NativeModule);

Parameter nativeModule
the NativeModule implementation. This is required on IOS and will throw an invariant error if undefined.

method addListener

addListener: (
    eventType: string,
    listener: (event: any) => void,
    context?: Object
) => EmitterSubscription;

Add the specified listener, this call passes through to the NativeModule addListener
Parameter eventType
name of the event for which we are registering listener
Parameter listener
the listener function
Parameter context
context of the listener

method removeAllListeners

removeAllListeners: (eventType: string) => void;

Parameter eventType
name of the event whose registered listeners to remove

class ProgressBarAndroid

class ProgressBarAndroid extends ProgressBarAndroidBase {}

ProgressBarAndroid has been extracted from react-native core and will be removed in a future release. It can now be installed and imported from @react-native-community/progress-bar-android instead of 'react-native'.
See Also
- https://github.com/react-native-progress-view/progress-bar-android
Deprecated

class ProgressBarAndroidComponent

class ProgressBarAndroidComponent extends React.Component<ProgressBarAndroidProps> {}

React component that wraps the Android-only ProgressBar. This component is used to indicate that the app is loading or there is some activity in the app.

class RefreshControl

class RefreshControl extends RefreshControlBase {}

property SIZE

static SIZE: Object;

class RefreshControlComponent

class RefreshControlComponent extends React.Component<RefreshControlProps> {}

This component is used inside a ScrollView or ListView to add pull to refresh functionality. When the ScrollView is at scrollY: 0, swiping down triggers an onRefresh event.
__Note:__ refreshing is a controlled prop, this is why it needs to be set to true in the onRefresh function otherwise the refresh indicator will stop immediately.

class SafeAreaView

class SafeAreaView extends SafeAreaViewBase {}

class SafeAreaViewComponent

class SafeAreaViewComponent extends React.Component<ViewProps> {}

Renders nested content and automatically applies paddings reflect the portion of the view that is not covered by navigation bars, tab bars, toolbars, and other ancestor views. Moreover, and most importantly, Safe Area's paddings reflect physical limitation of the screen, such as rounded corners or camera notches (aka sensor housing area on iPhone X).

class ScrollView

class ScrollView extends ScrollViewBase {}

property scrollWithoutAnimationTo

scrollWithoutAnimationTo?: (y: number, x: number) => void;

Deprecated
Use scrollTo instead

method flashScrollIndicators

flashScrollIndicators: () => void;

Displays the scroll indicators momentarily.

method getInnerViewNode

getInnerViewNode: () => any;

method getScrollableNode

getScrollableNode: () => any;

method getScrollResponder

getScrollResponder: () => ScrollResponderMixin;

Returns a reference to the underlying scroll responder, which supports operations like scrollTo. All ScrollView-like components should implement this method so that they can be composed while providing access to the underlying scroll responder's methods.

method scrollTo

scrollTo: (
    y?:
        | number
        | {
              x?: number | undefined;
              y?: number | undefined;
              animated?: boolean | undefined;
          },
    deprecatedX?: number,
    deprecatedAnimated?: boolean
) => void;

Scrolls to a given x, y offset, either immediately or with a smooth animation. Syntax:
scrollTo(options: {x: number = 0; y: number = 0; animated: boolean = true})
Note: The weird argument signature is due to the fact that, for historical reasons, the function also accepts separate arguments as an alternative to the options object. This is deprecated due to ambiguity (y before x), and SHOULD NOT BE USED.

method scrollToEnd

scrollToEnd: (options?: { animated?: boolean | undefined }) => void;

A helper function that scrolls to the end of the scrollview; If this is a vertical ScrollView, it scrolls to the bottom. If this is a horizontal ScrollView scrolls to the right.
The options object has an animated prop, that enables the scrolling animation or not. The animated prop defaults to true

method setNativeProps

setNativeProps: (nativeProps: object) => void;

This function sends props straight to native. They will not participate in future diff process - this means that if you do not include them in the next render, they will remain active (see [Direct Manipulation](https://reactnative.dev/docs/direct-manipulation)).

class ScrollViewComponent

class ScrollViewComponent extends React.Component<ScrollViewProps> {}

class SectionList

class SectionList<
    ItemT = any,
    SectionT = DefaultSectionT
> extends SectionListComponent<SectionListProps<ItemT, SectionT>> {}

class SectionListComponent

abstract class SectionListComponent<Props> extends React.Component<Props> {}

method flashScrollIndicators

flashScrollIndicators: () => void;

Displays the scroll indicators momentarily.
ios

method getScrollableNode

getScrollableNode: () => NodeHandle | undefined;

Provides a handle to the underlying scroll node.

method getScrollResponder

getScrollResponder: () => ScrollView | undefined;

Provides a handle to the underlying scroll responder.

method recordInteraction

recordInteraction: () => void;

Tells the list an interaction has occurred, which should trigger viewability calculations, e.g. if waitForInteractions is true and the user has not scrolled. This is typically called by taps on items or by navigation actions.

method scrollToLocation

scrollToLocation: (params: SectionListScrollParams) => void;

Scrolls to the item at the specified sectionIndex and itemIndex (within the section) positioned in the viewable area such that viewPosition 0 places it at the top (and may be covered by a sticky header), 1 at the bottom, and 0.5 centered in the middle.

class StatusBar

class StatusBar extends React.Component<StatusBarProps> {}

property currentHeight

static currentHeight?: number;

The current height of the status bar on the device. android

property popStackEntry

static popStackEntry: (entry: StatusBarProps) => void;

Pop a StatusBar entry from the stack.
Parameter entry
Entry returned from pushStackEntry.

property pushStackEntry

static pushStackEntry: (props: StatusBarProps) => StatusBarProps;

Push a StatusBar entry onto the stack. The return value should be passed to popStackEntry when complete.
Parameter props
Object containing the StatusBar props to use in the stack entry.

property replaceStackEntry

static replaceStackEntry: (
    entry: StatusBarProps,
    props: StatusBarProps
) => StatusBarProps;

Replace an existing StatusBar stack entry with new props.
Parameter entry
Entry returned from pushStackEntry to replace.
Parameter props
Object containing the StatusBar props to use in the replacement stack entry.

property setBackgroundColor

static setBackgroundColor: (color: ColorValue, animated?: boolean) => void;

Set the background color for the status bar
Parameter color
Background color.
Parameter animated
Animate the style change.

property setBarStyle

static setBarStyle: (style: StatusBarStyle, animated?: boolean) => void;

Set the status bar style
Parameter style
Status bar style to set
Parameter animated
Animate the style change.

property setHidden

static setHidden: (hidden: boolean, animation?: StatusBarAnimation) => void;

Show or hide the status bar
Parameter hidden
The dialog's title.
Parameter animation
Optional animation when changing the status bar hidden property.

property setNetworkActivityIndicatorVisible

static setNetworkActivityIndicatorVisible: (visible: boolean) => void;

Control the visibility of the network activity indicator
Parameter visible
Show the indicator.

property setTranslucent

static setTranslucent: (translucent: boolean) => void;

Control the translucency of the status bar
Parameter translucent
Set as translucent.

class Switch

class Switch extends SwitchBase {}

class SwitchComponent

class SwitchComponent extends React.Component<SwitchProps> {}

Renders a boolean input.
This is a controlled component that requires an onValueChange callback that updates the value prop in order for the component to reflect user actions. If the value prop is not updated, the component will continue to render the supplied value prop instead of the expected result of any user actions.

class Text

class Text extends TextBase {}

class TextComponent

class TextComponent extends React.Component<TextProps> {}

A React component for displaying text which supports nesting, styling, and touch handling.

class TextInput

class TextInput extends TextInputBase {}

property clear

clear: () => void;

Removes all text from the input.

property isFocused

isFocused: () => boolean;

Returns if the input is currently focused.

property setSelection

setSelection: (start: number, end: number) => void;

Sets the start and end positions of text selection.

property State

static State: TextInputState;

Access the current focus state.

class TextInputComponent

class TextInputComponent extends React.Component<TextInputProps> {}

See Also
- https://reactnative.dev/docs/textinput#methods

class TouchableNativeFeedback

class TouchableNativeFeedback extends TouchableNativeFeedbackBase {}

method canUseNativeForeground

static canUseNativeForeground: () => boolean;

method Ripple

static Ripple: (
    color: ColorValue,
    borderless: boolean,
    rippleRadius?: number | null
) => RippleBackgroundPropType;

Creates an object that represents ripple drawable with specified color (as a string). If property borderless evaluates to true the ripple will render outside of the view bounds (see native actionbar buttons as an example of that behavior). This background type is available on Android API level 21+.
Parameter color
The ripple color
Parameter borderless
If the ripple can render outside it's bounds
Parameter rippleRadius
The radius of ripple effect

method SelectableBackground

static SelectableBackground: (
    rippleRadius?: number | null
) => ThemeAttributeBackgroundPropType;

Creates an object that represents android theme's default background for selectable elements (?android:attr/selectableItemBackground).
Parameter rippleRadius
The radius of ripple effect

method SelectableBackgroundBorderless

static SelectableBackgroundBorderless: (
    rippleRadius?: number | null
) => ThemeAttributeBackgroundPropType;

Creates an object that represent android theme's default background for borderless selectable elements (?android:attr/selectableItemBackgroundBorderless). Available on android API level 21+.
Parameter rippleRadius
The radius of ripple effect

class TouchableNativeFeedbackComponent

class TouchableNativeFeedbackComponent extends React.Component<TouchableNativeFeedbackProps> {}

A wrapper for making views respond properly to touches (Android only). On Android this component uses native state drawable to display touch feedback. At the moment it only supports having a single View instance as a child node, as it's implemented by replacing that View with another instance of RCTView node with some additional properties set.
Background drawable of native feedback touchable can be customized with background property.
See Also
- https://reactnative.dev/docs/touchablenativefeedback#content

class TouchableWithoutFeedback

class TouchableWithoutFeedback extends TouchableWithoutFeedbackBase {}

class TouchableWithoutFeedbackComponent

class TouchableWithoutFeedbackComponent extends React.Component<TouchableWithoutFeedbackProps> {}

Do not use unless you have a very good reason. All the elements that respond to press should have a visual feedback when touched. This is one of the primary reason a "web" app doesn't feel "native".
See Also
- https://reactnative.dev/docs/touchablewithoutfeedback

class View

class View extends ViewBase {}

property forceTouchAvailable

static forceTouchAvailable: boolean;

Is 3D Touch / Force Touch available (i.e. will touch events include force) ios

class ViewComponent

class ViewComponent extends React.Component<ViewProps> {}

The most fundamental component for building UI, View is a container that supports layout with flexbox, style, some touch handling, and accessibility controls, and is designed to be nested inside other views and to have 0 to many children of any type. View maps directly to the native view equivalent on whatever platform React is running on, whether that is a UIView, , android.view, etc.

Interfaces

interface AccessibilityInfoStatic

interface AccessibilityInfoStatic {}

See Also
- https://reactnative.dev/docs/accessibilityinfo

property announceForAccessibility

announceForAccessibility: (announcement: string) => void;

Post a string to be announced by the screen reader.

property getRecommendedTimeoutMillis

getRecommendedTimeoutMillis: (originalTimeout: number) => Promise<number>;

Gets the timeout in millisecond that the user needs. This value is set in "Time to take action (Accessibility timeout)" of "Accessibility" settings.
android

property isBoldTextEnabled

isBoldTextEnabled: () => Promise<boolean>;

Query whether bold text is currently enabled.
ios

property isDarkerSystemColorsEnabled

isDarkerSystemColorsEnabled: () => Promise<boolean>;

Query whether darker system colors is currently enabled.
ios

property isGrayscaleEnabled

isGrayscaleEnabled: () => Promise<boolean>;

Query whether grayscale is currently enabled.
ios

property isHighTextContrastEnabled

isHighTextContrastEnabled: () => Promise<boolean>;

Query whether high text contrast is currently enabled.
android

property isInvertColorsEnabled

isInvertColorsEnabled: () => Promise<boolean>;

Query whether invert colors is currently enabled.
ios

property isReduceMotionEnabled

isReduceMotionEnabled: () => Promise<boolean>;

Query whether reduce motion is currently enabled.

property isReduceTransparencyEnabled

isReduceTransparencyEnabled: () => Promise<boolean>;

Query whether reduce transparency is currently enabled.
ios

property isScreenReaderEnabled

isScreenReaderEnabled: () => Promise<boolean>;

Query whether a screen reader is currently enabled.

property sendAccessibilityEvent

sendAccessibilityEvent: (
    handle: HostInstance,
    eventType: AccessibilityEventTypes
) => void;

property setAccessibilityFocus

setAccessibilityFocus: (reactTag: number) => void;

Set accessibility focus to a react component.

method addEventListener

addEventListener: {
    (
        eventName: AccessibilityChangeEventName,
        handler: AccessibilityChangeEventHandler
    ): EmitterSubscription;
    (
        eventName: 'announcementFinished',
        handler: AccessibilityAnnouncementFinishedEventHandler
    ): EmitterSubscription;
};

Add an event handler. Supported events: - announcementFinished: iOS-only event. Fires when the screen reader has finished making an announcement. The argument to the event handler is a dictionary with these keys: - announcement: The string announced by the screen reader. - success: A boolean indicating whether the announcement was successfully made. - AccessibilityEventName constants other than announcementFinished: Fires on accessibility feature change. The argument to the event handler is a boolean. The boolean is true when the related event's feature is enabled and false otherwise.

method announceForAccessibilityWithOptions

announceForAccessibilityWithOptions: (
    announcement: string,
    options: { queue?: boolean | undefined }
) => void;

Post a string to be announced by the screen reader. - announcement: The string announced by the screen reader. - options: An object that configures the reading options. - queue: The announcement will be queued behind existing announcements. iOS only.

method isAccessibilityServiceEnabled

isAccessibilityServiceEnabled: () => Promise<boolean>;

Query whether Accessibility Service is currently enabled.
Returns a promise which resolves to a boolean. The result is true when any service is enabled and false otherwise.
android

method prefersCrossFadeTransitions

prefersCrossFadeTransitions: () => Promise<boolean>;

Query whether reduce motion and prefer cross-fade transitions settings are currently enabled.
Returns a promise which resolves to a boolean. The result is true when prefer cross-fade transitions is enabled and false otherwise.

interface AccessibilityProps

interface AccessibilityProps
    extends AccessibilityPropsAndroid,
        AccessibilityPropsIOS {}

See Also
- https://reactnative.dev/docs/accessibility#accessibility-properties

property 'aria-busy'

'aria-busy'?: boolean | undefined;

alias for accessibilityState
see https://reactnative.dev/docs/accessibility#accessibilitystate

property 'aria-checked'

'aria-checked'?: boolean | 'mixed' | undefined;

property 'aria-disabled'

'aria-disabled'?: boolean | undefined;

property 'aria-expanded'

'aria-expanded'?: boolean | undefined;

property 'aria-hidden'

'aria-hidden'?: boolean | undefined;

A value indicating whether the accessibility elements contained within this accessibility element are hidden.

property 'aria-label'

'aria-label'?: string | undefined;

Alias for accessibilityLabel https://reactnative.dev/docs/view#accessibilitylabel https://github.com/facebook/react-native/issues/34424

'aria-modal'?: boolean | undefined;

property 'aria-selected'

'aria-selected'?: boolean | undefined;

property 'aria-valuemax'

'aria-valuemax'?: AccessibilityValue['max'] | undefined;

property 'aria-valuemin'

'aria-valuemin'?: AccessibilityValue['min'] | undefined;

property 'aria-valuenow'

'aria-valuenow'?: AccessibilityValue['now'] | undefined;

property 'aria-valuetext'

'aria-valuetext'?: AccessibilityValue['text'] | undefined;

property accessibilityActions

accessibilityActions?: ReadonlyArray<AccessibilityActionInfo> | undefined;

Provides an array of custom actions available for accessibility.

property accessibilityHint

accessibilityHint?: string | undefined;

An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not obvious from the accessibility label.

property accessibilityLabel

accessibilityLabel?: string | undefined;

Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label is constructed by traversing all the children and accumulating all the Text nodes separated by space.

property accessibilityRole

accessibilityRole?: AccessibilityRole | undefined;

Accessibility Role tells a person using either VoiceOver on iOS or TalkBack on Android the type of element that is focused on.

property accessibilityState

accessibilityState?: AccessibilityState | undefined;

Accessibility State tells a person using either VoiceOver on iOS or TalkBack on Android the state of the element currently focused on.

property accessibilityValue

accessibilityValue?: AccessibilityValue | undefined;

Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum).

property accessible

accessible?: boolean | undefined;

When true, indicates that the view is an accessibility element. By default, all the touchable elements are accessible.

property importantForAccessibility

importantForAccessibility?:
    | ('auto' | 'yes' | 'no' | 'no-hide-descendants')
    | undefined;

[Android] Controlling if a view fires accessibility events and if it is reported to accessibility services.

property onAccessibilityAction

onAccessibilityAction?: ((event: AccessibilityActionEvent) => void) | undefined;

When accessible is true, the system will try to invoke this function when the user performs an accessibility custom action.

property role

role?: Role | undefined;

Indicates to accessibility services to treat UI component like a specific role.

interface AccessibilityPropsAndroid

interface AccessibilityPropsAndroid {}

property 'aria-labelledby'

'aria-labelledby'?: string | undefined;

Identifies the element that labels the element it is applied to. When the assistive technology focuses on the component with this props, the text is read aloud. The value should should match the nativeID of the related element.
android

property 'aria-live'

'aria-live'?: ('polite' | 'assertive' | 'off') | undefined;

Indicates to accessibility services whether the user should be notified when this view changes. Works for Android API >= 19 only.
android
See https://reactnative.dev/docs/view#accessibilityliveregion

property accessibilityLabelledBy

accessibilityLabelledBy?: string | string[] | undefined;

Identifies the element that labels the element it is applied to. When the assistive technology focuses on the component with this props, the text is read aloud. The value should should match the nativeID of the related element.
android

property accessibilityLiveRegion

accessibilityLiveRegion?: 'none' | 'polite' | 'assertive' | undefined;

Indicates to accessibility services whether the user should be notified when this view changes. Works for Android API >= 19 only.
android
See https://reactnative.dev/docs/view#accessibilityliveregion

property importantForAccessibility

importantForAccessibility?:
    | 'auto'
    | 'yes'
    | 'no'
    | 'no-hide-descendants'
    | undefined;

Controls how view is important for accessibility which is if it fires accessibility events and if it is reported to accessibility services that query the screen. Works for Android only. See http://developer.android.com/reference/android/R.attr.html#importantForAccessibility for references.
Possible values: 'auto' - The system determines whether the view is important for accessibility - default (recommended). 'yes' - The view is important for accessibility. 'no' - The view is not important for accessibility. 'no-hide-descendants' - The view is not important for accessibility, nor are any of its descendant views.
android

interface AccessibilityPropsIOS

interface AccessibilityPropsIOS {}

property accessibilityElementsHidden

accessibilityElementsHidden?: boolean | undefined;

A Boolean value indicating whether the accessibility elements contained within this accessibility element are hidden to the screen reader. ios

property accessibilityIgnoresInvertColors

accessibilityIgnoresInvertColors?: boolean | undefined;

https://reactnative.dev/docs/accessibility#accessibilityignoresinvertcolorsios ios

property accessibilityLanguage

accessibilityLanguage?: string | undefined;

By using the accessibilityLanguage property, the screen reader will understand which language to use while reading the element's label, value and hint. The provided string value must follow the BCP 47 specification (https://www.rfc-editor.org/info/bcp47). https://reactnative.dev/docs/accessibility#accessibilitylanguage-ios ios

property accessibilityLargeContentTitle

accessibilityLargeContentTitle?: string | undefined;

When accessibilityShowsLargeContentViewer is set, this string will be used as title for the large content viewer. https://reactnative.dev/docs/accessibility#accessibilitylargecontenttitle ios

property accessibilityShowsLargeContentViewer

accessibilityShowsLargeContentViewer?: boolean | undefined;

A Boolean value that indicates whether or not to show the item in the large content viewer. Available on iOS 13.0+ https://reactnative.dev/docs/accessibility#accessibilityshowslargecontentviewer ios

property accessibilityViewIsModal

accessibilityViewIsModal?: boolean | undefined;

A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver. ios

property onAccessibilityEscape

onAccessibilityEscape?: (() => void) | undefined;

When accessible is true, the system will invoke this function when the user performs the escape gesture (scrub with two fingers). ios

property onAccessibilityTap

onAccessibilityTap?: (() => void) | undefined;

When accessible is true, the system will try to invoke this function when the user performs accessibility tap gesture. ios

property onMagicTap

onMagicTap?: (() => void) | undefined;

When accessible is true, the system will invoke this function when the user performs the magic tap gesture. ios

interface AccessibilityState

interface AccessibilityState {}

property busy

busy?: boolean | undefined;

When present, informs accessible tools if the element is busy

property checked

checked?: boolean | 'mixed' | undefined;

For items like Checkboxes and Toggle switches, reports their state to accessible tools

property disabled

disabled?: boolean | undefined;

When true, informs accessible tools if the element is disabled

property expanded

expanded?: boolean | undefined;

When present, informs accessible tools the element is expanded or collapsed

property selected

selected?: boolean | undefined;

When true, informs accessible tools if the element is selected

interface AccessibilityValue

interface AccessibilityValue {}

property max

max?: number | undefined;

The maximum value of this component's range. (should be an integer)

property min

min?: number | undefined;

The minimum value of this component's range. (should be an integer)

property now

now?: number | undefined;

The current value of this component's range. (should be an integer)

property text

text?: string | undefined;

A textual description of this component's value. (will override minimum, current, and maximum if set)

interface ActionSheetIOSOptions

interface ActionSheetIOSOptions {}

@see: https://reactnative.dev/docs/actionsheetios#content

property anchor

anchor?: number | undefined;

property cancelButtonIndex

cancelButtonIndex?: number | undefined;

property cancelButtonTintColor

cancelButtonTintColor?: ColorValue | ProcessedColorValue | undefined;

property destructiveButtonIndex

destructiveButtonIndex?: number | number[] | undefined | null;

property disabledButtonIndices

disabledButtonIndices?: number[] | undefined;

property disabledButtonTintColor

disabledButtonTintColor?: ColorValue | ProcessedColorValue | undefined;

property message

message?: string | undefined;

property options

options: string[];

property tintColor

tintColor?: ColorValue | ProcessedColorValue | undefined;

property title

title?: string | undefined;

property userInterfaceStyle

userInterfaceStyle?: 'light' | 'dark' | undefined;

interface ActionSheetIOSStatic

interface ActionSheetIOSStatic {}

See Also
- https://reactnative.dev/docs/actionsheetios#content

property dismissActionSheet

dismissActionSheet: () => void;

Dismisses the most upper iOS action sheet presented, if no action sheet is present a warning is displayed.

property showActionSheetWithOptions

showActionSheetWithOptions: (
    options: ActionSheetIOSOptions,
    callback: (buttonIndex: number) => void
) => void;

Display an iOS action sheet. The options object must contain one or more of: - options (array of strings) - a list of button titles (required) - cancelButtonIndex (int) - index of cancel button in options - destructiveButtonIndex (int) - index of destructive button in options - title (string) - a title to show above the action sheet - message (string) - a message to show below the title

property showShareActionSheetWithOptions

showShareActionSheetWithOptions: (
    options: ShareActionSheetIOSOptions,
    failureCallback: (error: Error) => void,
    successCallback: (success: boolean, method: string) => void
) => void;

Display the iOS share sheet. The options object should contain one or both of message and url and can additionally have a subject or excludedActivityTypes:
- url (string) - a URL to share - message (string) - a message to share - subject (string) - a subject for the message - excludedActivityTypes (array) - the activities to exclude from the ActionSheet
NOTE: if url points to a local file, or is a base64-encoded uri, the file it points to will be loaded and shared directly. In this way, you can share images, videos, PDF files, etc.

interface ActivityIndicatorIOSProps

interface ActivityIndicatorIOSProps extends ViewProps {}

See Also
- https://reactnative.dev/docs/activityindicatorios#props

property animating

animating?: boolean | undefined;

Whether to show the indicator (true, the default) or hide it (false).

property color

color?: ColorValue | undefined;

The foreground color of the spinner (default is gray).

property hidesWhenStopped

hidesWhenStopped?: boolean | undefined;

Whether the indicator should hide when not animating (true by default).

property onLayout

onLayout?: ((event: LayoutChangeEvent) => void) | undefined;

Invoked on mount and layout changes with

property size

size?: 'small' | 'large' | undefined;

Size of the indicator. Small has a height of 20, large has a height of 36.
enum('small', 'large')

property style

style?: StyleProp<ViewStyle> | undefined;

interface ActivityIndicatorProps

interface ActivityIndicatorProps extends ViewProps {}

See Also
- https://reactnative.dev/docs/activityindicator#props

property animating

animating?: boolean | undefined;

Whether to show the indicator (true, the default) or hide it (false).

property color

color?: ColorValue | undefined;

The foreground color of the spinner (default is gray).

property hidesWhenStopped

hidesWhenStopped?: boolean | undefined;

Whether the indicator should hide when not animating (true by default).

property size

size?: number | 'small' | 'large' | undefined;

Size of the indicator. Small has a height of 20, large has a height of 36.
enum('small', 'large')

property style

style?: StyleProp<ViewStyle> | undefined;

interface AlertButton

interface AlertButton {}

See Also
- https://reactnative.dev/docs/alert#content

property isPreferred

isPreferred?: boolean | undefined;

property onPress

onPress?: ((value?: string) => void) | undefined;

property style

style?: 'default' | 'cancel' | 'destructive' | undefined;

property text

text?: string | undefined;

interface AlertOptions

interface AlertOptions {}

property cancelable

cancelable?: boolean | undefined;

android

property onDismiss

onDismiss?: (() => void) | undefined;

android

property userInterfaceStyle

userInterfaceStyle?: 'unspecified' | 'light' | 'dark' | undefined;

interface AlertStatic

interface AlertStatic {}

Launches an alert dialog with the specified title and message.
Optionally provide a list of buttons. Tapping any button will fire the respective onPress callback and dismiss the alert. By default, the only button will be an 'OK' button.
This is an API that works both on iOS and Android and can show static alerts. On iOS, you can show an alert that prompts the user to enter some information.
## iOS
On iOS you can specify any number of buttons. Each button can optionally specify a style, which is one of 'default', 'cancel' or 'destructive'.
## Android
On Android at most three buttons can be specified. Android has a concept of a neutral, negative and a positive button:
- If you specify one button, it will be the 'positive' one (such as 'OK') - Two buttons mean 'negative', 'positive' (such as 'Cancel', 'OK') - Three buttons mean 'neutral', 'negative', 'positive' (such as 'Later', 'Cancel', 'OK')
// Works on both iOS and Android Alert.alert( 'Alert Title', 'My Alert Msg', [ {text: 'Ask me later', onPress: () => console.log('Ask me later pressed')}, {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'}, {text: 'OK', onPress: () => console.log('OK Pressed')}, ] )

property alert

alert: (
    title: string,
    message?: string,
    buttons?: AlertButton[],
    options?: AlertOptions
) => void;

property prompt

prompt: (
    title: string,
    message?: string,
    callbackOrButtons?: ((text: string) => void) | AlertButton[],
    type?: AlertType,
    defaultValue?: string,
    keyboardType?: string,
    options?: AlertOptions
) => void;

interface AppStateStatic

interface AppStateStatic {}

property currentState

currentState: AppStateStatus;

property isAvailable

isAvailable: boolean;

method addEventListener

addEventListener: (
    type: AppStateEvent,
    listener: (state: AppStateStatus) => void
) => NativeEventSubscription;

Add a handler to AppState changes by listening to the change event type and providing the handler

interface BackHandlerStatic

interface BackHandlerStatic {}

Detect hardware back button presses, and programmatically invoke the default back button functionality to exit the app if there are no listeners or if none of the listeners return true. The event subscriptions are called in reverse order (i.e. last registered subscription first), and if one subscription returns true then subscriptions registered earlier will not be called.
See Also
- https://reactnative.dev/docs/backhandler

method addEventListener

addEventListener: (
    eventName: BackPressEventName,
    handler: () => boolean | null | undefined
) => NativeEventSubscription;

method exitApp

exitApp: () => void;

interface BaseBackgroundPropType

interface BaseBackgroundPropType {}

property rippleRadius

rippleRadius?: number | null | undefined;

property type

type: string;

interface ButtonProps

interface ButtonProps
    extends Pick<
        TouchableNativeFeedbackProps & TouchableOpacityProps,
        | 'accessibilityLabel'
        | 'accessibilityState'
        | 'hasTVPreferredFocus'
        | 'nextFocusDown'
        | 'nextFocusForward'
        | 'nextFocusLeft'
        | 'nextFocusRight'
        | 'nextFocusUp'
        | 'testID'
        | 'disabled'
        | 'onPress'
        | 'touchSoundDisabled'
    > {}

property color

color?: ColorValue | undefined;

Color of the text (iOS), or background color of the button (Android).

property title

title: string;

Text to display inside the button. On Android the given title will be converted to the uppercased form.

interface ClipboardStatic

interface ClipboardStatic {}

Copyright (c) Meta Platforms, Inc. and affiliates.
This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree.

method getString

getString: () => Promise<string>;

method setString

setString: (content: string) => void;

interface DeviceEventEmitterStatic

interface DeviceEventEmitterStatic extends EventEmitter {}

Deprecated - subclass NativeEventEmitter to create granular event modules instead of adding all event listeners directly to RCTDeviceEventEmitter.

property sharedSubscriber

sharedSubscriber: EventSubscriptionVendor;

method addListener

addListener: (
    type: string,
    listener: (data: any) => void,
    context?: any
) => EmitterSubscription;

construct signature

new (): DeviceEventEmitterStatic;

interface DevMenuStatic

interface DevMenuStatic {}

The DevMenu module exposes methods for interacting with the Dev Menu in development.

method show

show: () => void;

Show the Dev Menu.

interface DevSettingsStatic

interface DevSettingsStatic extends NativeEventEmitter {}

The DevSettings module exposes methods for customizing settings for developers in development.

method addMenuItem

addMenuItem: (title: string, handler: () => any) => void;

Adds a custom menu item to the developer menu.
Parameter title
The title of the menu item. Is internally used as id and should therefore be unique.
Parameter handler
The callback invoked when pressing the menu item.

method reload

reload: (reason?: string) => void;

Reload the application.
Parameter reason

interface Dimensions

interface Dimensions {}

Initial dimensions are set before runApplication is called so they should be available before any other require's are run, but may be updated later.
Note: Although dimensions are available immediately, they may change (e.g due to device rotation) so any rendering logic or styles that depend on these constants should try to call this function on every render, rather than caching the value (for example, using inline styles rather than setting a value in a StyleSheet).
Example: const {height, width} = Dimensions.get('window');
Parameter dim
Name of dimension as defined when calling set.
Returns
Value for the dimension.
See Also
- https://reactnative.dev/docs/dimensions#content

method addEventListener

addEventListener: (
    type: 'change',
    handler: ({
        window,
        screen,
    }: {
        window: ScaledSize;
        screen: ScaledSize;
    }) => void
) => EmitterSubscription;

Add an event listener for dimension changes
Parameter type
the type of event to listen to
Parameter handler
the event handler

method get

get: (dim: 'window' | 'screen') => ScaledSize;

Initial dimensions are set before runApplication is called so they should be available before any other require's are run, but may be updated later. Note: Although dimensions are available immediately, they may change (e.g due to device rotation) so any rendering logic or styles that depend on these constants should try to call this function on every render, rather than caching the value (for example, using inline styles rather than setting a value in a StyleSheet). Example: const {height, width} = Dimensions.get('window');
Parameter dim
Name of dimension as defined when calling set.
Returns
Value for the dimension.

method set

set: (dims: { [key: string]: any }) => void;

This should only be called from native code by sending the didUpdateDimensions event.
Parameter dims
Simple string-keyed object of dimensions to set

interface DocumentSelectionState

interface DocumentSelectionState extends EventEmitter {}

DocumentSelectionState is responsible for maintaining selection information for a document.
It is intended for use by AbstractTextEditor-based components for identifying the appropriate start/end positions to modify the DocumentContent, and for programmatically setting browser selection when components re-render.

method blur

blur: () => void;

method constrainLength

constrainLength: (maxLength: number) => void;

Given a max text length, constrain our selection offsets to ensure that the selection remains strictly within the text range.

method focus

focus: () => void;

method getAnchorOffset

getAnchorOffset: () => number;

method getEndOffset

getEndOffset: () => number;

method getFocusOffset

getFocusOffset: () => number;

method getStartOffset

getStartOffset: () => number;

method hasFocus

hasFocus: () => boolean;

method isBackward

isBackward: () => boolean;

method isCollapsed

isCollapsed: () => boolean;

method overlaps

overlaps: (start: number, end: number) => boolean;

method update

update: (anchor: number, focus: number) => void;

Apply an update to the state. If either offset value has changed, set the values and emit the change event. Otherwise no-op.

construct signature

new (anchor: number, focus: number): DocumentSelectionState;

interface DrawerLayoutAndroidProps

interface DrawerLayoutAndroidProps extends ViewProps {}

See Also
- DrawerLayoutAndroid.android.js

property drawerBackgroundColor

drawerBackgroundColor?: ColorValue | undefined;

Specifies the background color of the drawer. The default value is white. If you want to set the opacity of the drawer, use rgba. Example: return ( );

property drawerLockMode

drawerLockMode?: 'unlocked' | 'locked-closed' | 'locked-open' | undefined;

Specifies the lock mode of the drawer. The drawer can be locked in 3 states:
- unlocked (default), meaning that the drawer will respond (open/close) to touch gestures.
- locked-closed, meaning that the drawer will stay closed and not respond to gestures.
- locked-open, meaning that the drawer will stay opened and not respond to gestures. The drawer may still be opened and closed programmatically (openDrawer/closeDrawer).

property drawerPosition

drawerPosition?: 'left' | 'right' | undefined;

Specifies the side of the screen from which the drawer will slide in. - 'left' (the default) - 'right'

property drawerWidth

drawerWidth?: number | undefined;

Specifies the width of the drawer, more precisely the width of the view that be pulled in from the edge of the window.

property keyboardDismissMode

keyboardDismissMode?: 'none' | 'on-drag' | undefined;

Determines whether the keyboard gets dismissed in response to a drag. - 'none' (the default), drags do not dismiss the keyboard. - 'on-drag', the keyboard is dismissed when a drag begins.

property onDrawerClose

onDrawerClose?: (() => void) | undefined;

Function called whenever the navigation view has been closed.

property onDrawerOpen

onDrawerOpen?: (() => void) | undefined;

Function called whenever the navigation view has been opened.

property onDrawerSlide

onDrawerSlide?: ((event: DrawerSlideEvent) => void) | undefined;

Function called whenever there is an interaction with the navigation view.

property onDrawerStateChanged

onDrawerStateChanged?:
    | ((event: 'Idle' | 'Dragging' | 'Settling') => void)
    | undefined;

Function called when the drawer state has changed. The drawer can be in 3 states: - idle, meaning there is no interaction with the navigation view happening at the time - dragging, meaning there is currently an interaction with the navigation view - settling, meaning that there was an interaction with the navigation view, and the navigation view is now finishing it's closing or opening animation

property renderNavigationView

renderNavigationView: () => JSX.Element;

The navigation view that will be rendered to the side of the screen and can be pulled in.

property statusBarBackgroundColor

statusBarBackgroundColor?: ColorValue | undefined;

Make the drawer take the entire screen and draw the background of the status bar to allow it to open over the status bar. It will only have an effect on API 21+.

interface DrawerPosition

interface DrawerPosition {}

property Left

Left: number;

property Right

Right: number;

interface DrawerSlideEvent

interface DrawerSlideEvent extends NativeSyntheticEvent<NativeTouchEvent> {}

interface EasingStatic

interface EasingStatic {}

property bounce

bounce: EasingFunction;

property circle

circle: EasingFunction;

property cubic

cubic: EasingFunction;

property ease

ease: EasingFunction;

property exp

exp: EasingFunction;

property linear

linear: EasingFunction;

property quad

quad: EasingFunction;

property sin

sin: EasingFunction;

property step0

step0: EasingFunction;

property step1

step1: EasingFunction;

method back

back: (s: number) => EasingFunction;

method bezier

bezier: (x1: number, y1: number, x2: number, y2: number) => EasingFunction;

method elastic

elastic: (bounciness: number) => EasingFunction;

method in

in: (easing: EasingFunction) => EasingFunction;

method inOut

inOut: (easing: EasingFunction) => EasingFunction;

method out

out: (easing: EasingFunction) => EasingFunction;

method poly

poly: (n: number) => EasingFunction;

interface EmitterSubscription

interface EmitterSubscription extends EventSubscription {}

EmitterSubscription represents a subscription with listener and context data.

property context

context: any;

property emitter

emitter: EventEmitter;

property listener

listener: () => any;

method remove

remove: () => void;

Removes this subscription from the emitter that registered it. Note: we're overriding the remove() method of EventSubscription here but deliberately not calling super.remove() as the responsibility for removing the subscription lies with the EventEmitter.

construct signature

new (
    emitter: EventEmitter,
    subscriber: EventSubscriptionVendor,
    listener: () => any,
    context: any
): EmitterSubscription;

Parameter emitter
The event emitter that registered this subscription
Parameter subscriber
The subscriber that controls this subscription
Parameter listener
Function to invoke when the specified event is emitted
Parameter context
Optional context object to use when invoking the listener

interface ErrorUtils

interface ErrorUtils {}

property getGlobalHandler

getGlobalHandler: () => ErrorHandlerCallback;

property setGlobalHandler

setGlobalHandler: (callback: ErrorHandlerCallback) => void;

interface EventSubscription

interface EventSubscription {}

EventSubscription represents a subscription to a particular event. It can remove its own subscription.

property eventType

eventType: string;

property key

key: number;

property subscriber

subscriber: EventSubscriptionVendor;

method remove

remove: () => void;

Removes this subscription from the subscriber that controls it.

construct signature

new (subscriber: EventSubscriptionVendor): EventSubscription;

Parameter subscriber
the subscriber that controls this subscription.

interface FlatListProps

interface FlatListProps<ItemT> extends VirtualizedListProps<ItemT> {}

property columnWrapperStyle

columnWrapperStyle?: StyleProp<ViewStyle> | undefined;

Optional custom style for multi-item rows generated when numColumns > 1

property data

data: ArrayLike<ItemT> | null | undefined;

An array (or array-like list) of items to render. Other data types can be used by targeting VirtualizedList directly.

property extraData

extraData?: any | undefined;

A marker property for telling the list to re-render (since it implements PureComponent). If any of your renderItem, Header, Footer, etc. functions depend on anything outside of the data prop, stick it here and treat it immutably.

property fadingEdgeLength

fadingEdgeLength?: number | undefined;

Fades out the edges of the scroll content.
If the value is greater than 0, the fading edges will be set accordingly to the current scroll direction and position, indicating if there is more content to show.
The default value is 0. android

property getItemLayout

getItemLayout?:
    | ((
          data: ArrayLike<ItemT> | null | undefined,
          index: number
      ) => { length: number; offset: number; index: number })
    | undefined;

getItemLayout is an optional optimization that lets us skip measurement of dynamic content if you know the height of items a priori. getItemLayout is the most efficient, and is easy to use if you have fixed height items, for example:
getItemLayout={(data, index) => ( {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index} )}
Remember to include separator length (height or width) in your offset calculation if you specify ItemSeparatorComponent.

property horizontal

horizontal?: boolean | null | undefined;

If true, renders items next to each other horizontally instead of stacked vertically.

property initialNumToRender

initialNumToRender?: number | undefined;

How many items to render in the initial batch

property initialScrollIndex

initialScrollIndex?: number | null | undefined;

Instead of starting at the top with the first item, start at initialScrollIndex

property keyboardShouldPersistTaps

keyboardShouldPersistTaps?: boolean | 'always' | 'never' | 'handled' | undefined;

Determines when the keyboard should stay visible after a tap. - 'never' (the default), tapping outside of the focused text input when the keyboard is up dismisses the keyboard. When this happens, children won't receive the tap. - 'always', the keyboard will not dismiss automatically, and the scroll view will not catch taps, but children of the scroll view can catch taps. - 'handled', the keyboard will not dismiss automatically when the tap was handled by a children, (or captured by an ancestor). - false, deprecated, use 'never' instead - true, deprecated, use 'always' instead

property keyExtractor

keyExtractor?: ((item: ItemT, index: number) => string) | undefined;

Used to extract a unique key for a given item at the specified index. Key is used for caching and as the react key to track item re-ordering. The default extractor checks item.key, then falls back to using the index, like React does.

property legacyImplementation

legacyImplementation?: boolean | undefined;

Uses legacy MetroListView instead of default VirtualizedSectionList

property numColumns

numColumns?: number | undefined;

Multiple columns can only be rendered with horizontal={false} and will zig-zag like a flexWrap layout. Items should all be the same height - masonry layouts are not supported.

property onRefresh

onRefresh?: (() => void) | null | undefined;

If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make sure to also set the refreshing prop correctly.

property onViewableItemsChanged

onViewableItemsChanged?:
    | ((info: {
          viewableItems: Array<ViewToken<ItemT>>;
          changed: Array<ViewToken<ItemT>>;
      }) => void)
    | null
    | undefined;

Called when the viewability of rows changes, as defined by the viewablePercentThreshold prop.

property refreshing

refreshing?: boolean | null | undefined;

Set this true while waiting for new data from a refresh.

property removeClippedSubviews

removeClippedSubviews?: boolean | undefined;

Note: may have bugs (missing content) in some circumstances - use at your own risk.
This may improve scroll performance for large lists.

property renderItem

renderItem: ListRenderItem<ItemT> | null | undefined;

Takes an item from data and renders it into the list. Typical usage:

_renderItem = ({item}) => (
  <TouchableOpacity onPress={() => this._onPress(item)}>
    <Text>{item.title}</Text>
  </TouchableOpacity>
);
...
<FlatList data={[{title: 'Title Text', key: 'item1'}]} renderItem={this._renderItem} />

Provides additional metadata like index if you need it.

property viewabilityConfig

viewabilityConfig?: ViewabilityConfig | undefined;

See ViewabilityHelper for flow type and further documentation.

interface FlexStyle

interface FlexStyle {}

Flex Prop Types
See Also
- https://reactnative.dev/docs/flexbox
- https://reactnative.dev/docs/layout-props

property alignContent

alignContent?:
    | 'flex-start'
    | 'flex-end'
    | 'center'
    | 'stretch'
    | 'space-between'
    | 'space-around'
    | 'space-evenly'
    | undefined;

property alignItems

alignItems?: FlexAlignType | undefined;

property alignSelf

alignSelf?: 'auto' | FlexAlignType | undefined;

property aspectRatio

aspectRatio?: number | string | undefined;

property borderBottomWidth

borderBottomWidth?: number | undefined;

property borderEndWidth

borderEndWidth?: number | undefined;

property borderLeftWidth

borderLeftWidth?: number | undefined;

property borderRightWidth

borderRightWidth?: number | undefined;

property borderStartWidth

borderStartWidth?: number | undefined;

property borderTopWidth

borderTopWidth?: number | undefined;

property borderWidth

borderWidth?: number | undefined;

property bottom

bottom?: DimensionValue | undefined;

property boxSizing

boxSizing?: 'border-box' | 'content-box' | undefined;

property columnGap

columnGap?: number | string | undefined;

property direction

direction?: 'inherit' | 'ltr' | 'rtl' | undefined;

property display

display?: 'none' | 'flex' | 'contents' | undefined;

property end

end?: DimensionValue | undefined;

property flex

flex?: number | undefined;

property flexBasis

flexBasis?: DimensionValue | undefined;

property flexDirection

flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse' | undefined;

property flexGrow

flexGrow?: number | undefined;

property flexShrink

flexShrink?: number | undefined;

property flexWrap

flexWrap?: 'wrap' | 'nowrap' | 'wrap-reverse' | undefined;

property gap

gap?: number | string | undefined;

property height

height?: DimensionValue | undefined;

property inset

inset?: DimensionValue | undefined;

Equivalent to top, bottom, right and left

property insetBlock

insetBlock?: DimensionValue | undefined;

Equivalent to top, bottom

property insetBlockEnd

insetBlockEnd?: DimensionValue | undefined;

Equivalent to bottom

property insetBlockStart

insetBlockStart?: DimensionValue | undefined;

Equivalent to top

property insetInline

insetInline?: DimensionValue | undefined;

Equivalent to right and left

property insetInlineEnd

insetInlineEnd?: DimensionValue | undefined;

Equivalent to right or left

property insetInlineStart

insetInlineStart?: DimensionValue | undefined;

Equivalent to right or left

property justifyContent

justifyContent?:
    | 'flex-start'
    | 'flex-end'
    | 'center'
    | 'space-between'
    | 'space-around'
    | 'space-evenly'
    | undefined;

property left

left?: DimensionValue | undefined;

property margin

margin?: DimensionValue | undefined;

property marginBlock

marginBlock?: DimensionValue | undefined;

Equivalent to marginVertical

property marginBlockEnd

marginBlockEnd?: DimensionValue | undefined;

Equivalent to marginBottom

property marginBlockStart

marginBlockStart?: DimensionValue | undefined;

Equivalent to marginTop

property marginBottom

marginBottom?: DimensionValue | undefined;

property marginEnd

marginEnd?: DimensionValue | undefined;

property marginHorizontal

marginHorizontal?: DimensionValue | undefined;

property marginInline

marginInline?: DimensionValue | undefined;

Equivalent to marginHorizontal

property marginInlineEnd

marginInlineEnd?: DimensionValue | undefined;

Equivalent to marginEnd

property marginInlineStart

marginInlineStart?: DimensionValue | undefined;

Equivalent to marginStart

property marginLeft

marginLeft?: DimensionValue | undefined;

property marginRight

marginRight?: DimensionValue | undefined;

property marginStart

marginStart?: DimensionValue | undefined;

property marginTop

marginTop?: DimensionValue | undefined;

property marginVertical

marginVertical?: DimensionValue | undefined;

property maxHeight

maxHeight?: DimensionValue | undefined;

property maxWidth

maxWidth?: DimensionValue | undefined;

property minHeight

minHeight?: DimensionValue | undefined;

property minWidth

minWidth?: DimensionValue | undefined;

property overflow

overflow?: 'visible' | 'hidden' | 'scroll' | undefined;

property padding

padding?: DimensionValue | undefined;

property paddingBlock

paddingBlock?: DimensionValue | undefined;

Equivalent to paddingVertical

property paddingBlockEnd

paddingBlockEnd?: DimensionValue | undefined;

Equivalent to paddingBottom

property paddingBlockStart

paddingBlockStart?: DimensionValue | undefined;

Equivalent to paddingTop

property paddingBottom

paddingBottom?: DimensionValue | undefined;

property paddingEnd

paddingEnd?: DimensionValue | undefined;

property paddingHorizontal

paddingHorizontal?: DimensionValue | undefined;

property paddingInline

paddingInline?: DimensionValue | undefined;

Equivalent to paddingHorizontal

property paddingInlineEnd

paddingInlineEnd?: DimensionValue | undefined;

Equivalent to paddingEnd

property paddingInlineStart

paddingInlineStart?: DimensionValue | undefined;

Equivalent to paddingStart

property paddingLeft

paddingLeft?: DimensionValue | undefined;

property paddingRight

paddingRight?: DimensionValue | undefined;

property paddingStart

paddingStart?: DimensionValue | undefined;

property paddingTop

paddingTop?: DimensionValue | undefined;

property paddingVertical

paddingVertical?: DimensionValue | undefined;

property position

position?: 'absolute' | 'relative' | 'static' | undefined;

property right

right?: DimensionValue | undefined;

property rowGap

rowGap?: number | string | undefined;

property start

start?: DimensionValue | undefined;

property top

top?: DimensionValue | undefined;

property width

width?: DimensionValue | undefined;

property zIndex

zIndex?: number | undefined;

interface GestureResponderEvent

interface GestureResponderEvent extends NativeSyntheticEvent<NativeTouchEvent> {}

interface GestureResponderHandlers

interface GestureResponderHandlers {}

Gesture recognition on mobile devices is much more complicated than web. A touch can go through several phases as the app determines what the user's intention is. For example, the app needs to determine if the touch is scrolling, sliding on a widget, or tapping. This can even change during the duration of a touch. There can also be multiple simultaneous touches.
The touch responder system is needed to allow components to negotiate these touch interactions without any additional knowledge about their parent or child components. This system is implemented in ResponderEventPlugin.js, which contains further details and documentation.
Best Practices Users can feel huge differences in the usability of web apps vs. native, and this is one of the big causes. Every action should have the following attributes: Feedback/highlighting- show the user what is handling their touch, and what will happen when they release the gesture Cancel-ability- when making an action, the user should be able to abort it mid-touch by dragging their finger away
These features make users more comfortable while using an app, because it allows people to experiment and interact without fear of making mistakes.
TouchableHighlight and Touchable* The responder system can be complicated to use. So we have provided an abstract Touchable implementation for things that should be "tappable". This uses the responder system and allows you to easily configure tap interactions declaratively. Use TouchableHighlight anywhere where you would use a button or link on web.

property onMoveShouldSetResponder

onMoveShouldSetResponder?:
    | ((event: GestureResponderEvent) => boolean)
    | undefined;

Called for every touch move on the View when it is not the responder: does this view want to "claim" touch responsiveness?

property onMoveShouldSetResponderCapture

onMoveShouldSetResponderCapture?:
    | ((event: GestureResponderEvent) => boolean)
    | undefined;

onStartShouldSetResponder and onMoveShouldSetResponder are called with a bubbling pattern, where the deepest node is called first. That means that the deepest component will become responder when multiple Views return true for *ShouldSetResponder handlers. This is desirable in most cases, because it makes sure all controls and buttons are usable.
However, sometimes a parent will want to make sure that it becomes responder. This can be handled by using the capture phase. Before the responder system bubbles up from the deepest component, it will do a capture phase, firing on*ShouldSetResponderCapture. So if a parent View wants to prevent the child from becoming responder on a touch start, it should have a onStartShouldSetResponderCapture handler which returns true.

property onResponderEnd

onResponderEnd?: ((event: GestureResponderEvent) => void) | undefined;

If the View returns true and attempts to become the responder, one of the following will happen:

property onResponderGrant

onResponderGrant?: ((event: GestureResponderEvent) => void) | undefined;

The View is now responding for touch events. This is the time to highlight and show the user what is happening

property onResponderMove

onResponderMove?: ((event: GestureResponderEvent) => void) | undefined;

The user is moving their finger

property onResponderReject

onResponderReject?: ((event: GestureResponderEvent) => void) | undefined;

Something else is the responder right now and will not release it

property onResponderRelease

onResponderRelease?: ((event: GestureResponderEvent) => void) | undefined;

Fired at the end of the touch, ie "touchUp"

property onResponderStart

onResponderStart?: ((event: GestureResponderEvent) => void) | undefined;

property onResponderTerminate

onResponderTerminate?: ((event: GestureResponderEvent) => void) | undefined;

The responder has been taken from the View. Might be taken by other views after a call to onResponderTerminationRequest, or might be taken by the OS without asking (happens with control center/ notification center on iOS)

property onResponderTerminationRequest

onResponderTerminationRequest?:
    | ((event: GestureResponderEvent) => boolean)
    | undefined;

Something else wants to become responder. Should this view release the responder? Returning true allows release

property onStartShouldSetResponder

onStartShouldSetResponder?:
    | ((event: GestureResponderEvent) => boolean)
    | undefined;

Does this view want to become responder on the start of a touch?

property onStartShouldSetResponderCapture

onStartShouldSetResponderCapture?:
    | ((event: GestureResponderEvent) => boolean)
    | undefined;

onStartShouldSetResponder and onMoveShouldSetResponder are called with a bubbling pattern, where the deepest node is called first. That means that the deepest component will become responder when multiple Views return true for *ShouldSetResponder handlers. This is desirable in most cases, because it makes sure all controls and buttons are usable.
However, sometimes a parent will want to make sure that it becomes responder. This can be handled by using the capture phase. Before the responder system bubbles up from the deepest component, it will do a capture phase, firing on*ShouldSetResponderCapture. So if a parent View wants to prevent the child from becoming responder on a touch start, it should have a onStartShouldSetResponderCapture handler which returns true.

interface HostComponent

interface HostComponent<P>
    extends Pick<
        React.ComponentClass<P>,
        Exclude<keyof React.ComponentClass<P>, 'new'>
    > {}

Represents a native component, such as those returned from requireNativeComponent.
See Also
- https://github.com/facebook/react-native/blob/v0.62.0-rc.5/Libraries/Renderer/shims/ReactNativeTypes.js
  This should eventually be defined as an AbstractComponent, but that should first be introduced in the React typings.

construct signature

new (props: P, context?: any): React.Component<P> & HostInstance;

interface I18nManagerStatic

interface I18nManagerStatic {}

Copyright (c) Meta Platforms, Inc. and affiliates.
This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree.

property allowRTL

allowRTL: (allowRTL: boolean) => void;

property doLeftAndRightSwapInRTL

doLeftAndRightSwapInRTL: boolean;

property forceRTL

forceRTL: (forceRTL: boolean) => void;

property getConstants

getConstants: () => {
    isRTL: boolean;
    doLeftAndRightSwapInRTL: boolean;
    localeIdentifier?: string | null | undefined;
};

property isRTL

isRTL: boolean;

property swapLeftAndRightInRTL

swapLeftAndRightInRTL: (swapLeftAndRight: boolean) => void;

interface ImageBackgroundProps

interface ImageBackgroundProps extends ImagePropsBase {}

property children

children?: React.ReactNode | undefined;

property imageStyle

imageStyle?: StyleProp<ImageStyle> | undefined;

property style

style?: StyleProp<ViewStyle> | undefined;

method imageRef

imageRef: (image: Image) => void;

interface ImageErrorEventData

interface ImageErrorEventData {}

property error

error: any;

interface ImageLoadEventData

interface ImageLoadEventData {}

property source

source: {
    height: number;
    width: number;
    uri: string;
};

interface ImageProgressEventDataIOS

interface ImageProgressEventDataIOS {}

See Also
- ImagePropsIOS.onProgress

property loaded

loaded: number;

property total

total: number;

interface ImageProps

interface ImageProps extends ImagePropsBase {}

property style

style?: StyleProp<ImageStyle> | undefined;

Style

interface ImagePropsAndroid

interface ImagePropsAndroid {}

property fadeDuration

fadeDuration?: number | undefined;

Duration of fade in animation in ms. Defaults to 300
android

property resizeMethod

resizeMethod?: 'auto' | 'resize' | 'scale' | 'none' | undefined;

The mechanism that should be used to resize the image when the image's dimensions differ from the image view's dimensions. Defaults to auto.
- auto: Use heuristics to pick between resize and scale.
- resize: A software operation which changes the encoded image in memory before it gets decoded. This should be used instead of scale when the image is much larger than the view.
- scale: The image gets drawn downscaled or upscaled. Compared to resize, scale is faster (usually hardware accelerated) and produces higher quality images. This should be used if the image is smaller than the view. It should also be used if the image is slightly bigger than the view.
- none: No sampling is performed and the image is displayed in its full resolution. This should only be used in rare circumstances because it is considered unsafe as Android will throw a runtime exception when trying to render images that consume too much memory.
More details about resize and scale can be found at http://frescolib.org/docs/resizing-rotating.html.
android

interface ImagePropsBase

interface ImagePropsBase
    extends ImagePropsIOS,
        ImagePropsAndroid,
        AccessibilityProps {}

See Also
- https://reactnative.dev/docs/image

property alt

alt?: string | undefined;

The text that's read by the screen reader when the user interacts with the image.
See https://reactnative.dev/docs/image#alt

property borderBottomLeftRadius

borderBottomLeftRadius?: number | undefined;

property borderBottomRightRadius

borderBottomRightRadius?: number | undefined;

property borderRadius

borderRadius?: number | undefined;

property borderTopLeftRadius

borderTopLeftRadius?: number | undefined;

property borderTopRightRadius

borderTopRightRadius?: number | undefined;

property crossOrigin

crossOrigin?: 'anonymous' | 'use-credentials' | undefined;

Adds the CORS related header to the request. Similar to crossorigin from HTML.
See https://reactnative.dev/docs/image#crossorigin

property defaultSource

defaultSource?: ImageURISource | ImageRequireSource | undefined;

A static image to display while downloading the final image off the network.

property height

height?: number | undefined;

Height of the image component.
See https://reactnative.dev/docs/image#height

property id

id?: string | undefined;

Used to reference react managed images from native code.

property loadingIndicatorSource

loadingIndicatorSource?: ImageURISource | undefined;

similarly to source, this property represents the resource used to render the loading indicator for the image, displayed until image is ready to be displayed, typically after when it got downloaded from network.

property nativeID

nativeID?: string | undefined;

Used to reference react managed images from native code.

property onError

onError?:
    | ((error: NativeSyntheticEvent<ImageErrorEventData>) => void)
    | undefined;

Invoked on load error with {nativeEvent: {error}}

property onLayout

onLayout?: ((event: LayoutChangeEvent) => void) | undefined;

onLayout function
Invoked on mount and layout changes with
{nativeEvent: { layout: {x, y, width, height} }}.

property onLoad

onLoad?: ((event: NativeSyntheticEvent<ImageLoadEventData>) => void) | undefined;

Invoked when load completes successfully { source: { uri, height, width } }.

property onLoadEnd

onLoadEnd?: (() => void) | undefined;

Invoked when load either succeeds or fails

property onLoadStart

onLoadStart?: (() => void) | undefined;

Invoked on load start

property progressiveRenderingEnabled

progressiveRenderingEnabled?: boolean | undefined;

property referrerPolicy

referrerPolicy?:
    | 'no-referrer'
    | 'no-referrer-when-downgrade'
    | 'origin'
    | 'origin-when-cross-origin'
    | 'same-origin'
    | 'strict-origin'
    | 'strict-origin-when-cross-origin'
    | 'unsafe-url'
    | undefined;

A string indicating which referrer to use when fetching the resource. Similar to referrerpolicy from HTML.
See https://reactnative.dev/docs/image#referrerpolicy

property resizeMode

resizeMode?: ImageResizeMode | undefined;

Determines how to resize the image when the frame doesn't match the raw image dimensions.
'cover': Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).
'contain': Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).
'stretch': Scale width and height independently, This may change the aspect ratio of the src.
'repeat': Repeat the image to cover the frame of the view. The image will keep it's size and aspect ratio. (iOS only)
'center': Scale the image down so that it is completely visible, if bigger than the area of the view. The image will not be scaled up.
'none': Do not resize the image. The image will be displayed at its intrinsic size.

property source

source?: ImageSourcePropType | undefined;

The image source (either a remote URL or a local file resource).
This prop can also contain several remote URLs, specified together with their width and height and potentially with scale/other URI arguments. The native side will then choose the best uri to display based on the measured size of the image container. A cache property can be added to control how networked request interacts with the local cache.
The currently supported formats are png, jpg, jpeg, bmp, gif, webp (Android only), psd (iOS only).

property src

src?: string | undefined;

A string representing the resource identifier for the image. Similar to src from HTML.
See https://reactnative.dev/docs/image#src

property srcSet

srcSet?: string | undefined;

Similar to srcset from HTML.
See https://reactnative.dev/docs/image#srcset

property testID

testID?: string | undefined;

A unique identifier for this element to be used in UI Automation testing scripts.

property tintColor

tintColor?: ColorValue | undefined;

Changes the color of all the non-transparent pixels to the tintColor.
See https://reactnative.dev/docs/image#tintcolor

property width

width?: number | undefined;

Width of the image component.
See https://reactnative.dev/docs/image#width

interface ImagePropsIOS

interface ImagePropsIOS {}

property blurRadius

blurRadius?: number | undefined;

blurRadius: the blur radius of the blur filter added to the image ios

property capInsets

capInsets?: Insets | undefined;

When the image is resized, the corners of the size specified by capInsets will stay a fixed size, but the center content and borders of the image will be stretched. This is useful for creating resizable rounded buttons, shadows, and other resizable assets. More info on Apple documentation

property onPartialLoad

onPartialLoad?: (() => void) | undefined;

Invoked when a partial load of the image is complete. The definition of what constitutes a "partial load" is loader specific though this is meant for progressive JPEG loads. ios

property onProgress

onProgress?:
    | ((event: NativeSyntheticEvent<ImageProgressEventDataIOS>) => void)
    | undefined;

Invoked on download progress with {nativeEvent: {loaded, total}}

interface ImageResizeModeStatic

interface ImageResizeModeStatic {}

See Also
- ImageResizeMode.js

property center

center: ImageResizeMode;

center - The image will be scaled down such that it is completely visible, if bigger than the area of the view. The image will not be scaled up.

property contain

contain: ImageResizeMode;

contain - The image will be resized such that it will be completely visible, contained within the frame of the View.

property cover

cover: ImageResizeMode;

cover - The image will be resized such that the entire area of the view is covered by the image, potentially clipping parts of the image.

property none

none: ImageResizeMode;

none - The image will be displayed at its intrinsic size, which means the image will not be scaled up or down.

property repeat

repeat: ImageResizeMode;

repeat - The image will be repeated to cover the frame of the View. The image will keep it's size and aspect ratio.

property stretch

stretch: ImageResizeMode;

stretch - The image will be stretched to fill the entire frame of the view without clipping. This may change the aspect ratio of the image, distoring it. Only supported on iOS.

interface ImageResolvedAssetSource

interface ImageResolvedAssetSource {}

See Also
- https://reactnative.dev/docs/image#resolveassetsource

property height

height: number;

property scale

scale: number;

property uri

uri: string;

property width

width: number;

interface ImageSize

interface ImageSize {}

property height

height: number;

property width

width: number;

interface ImageStyle

interface ImageStyle extends FlexStyle, ShadowStyleIOS, TransformsStyle {}

Image style
See Also
- https://reactnative.dev/docs/image#style

property backfaceVisibility

backfaceVisibility?: 'visible' | 'hidden' | undefined;

property backgroundColor

backgroundColor?: ColorValue | undefined;

property borderBottomLeftRadius

borderBottomLeftRadius?: AnimatableNumericValue | string | undefined;

property borderBottomRightRadius

borderBottomRightRadius?: AnimatableNumericValue | string | undefined;

property borderColor

borderColor?: ColorValue | undefined;

property borderRadius

borderRadius?: AnimatableNumericValue | string | undefined;

property borderTopLeftRadius

borderTopLeftRadius?: AnimatableNumericValue | string | undefined;

property borderTopRightRadius

borderTopRightRadius?: AnimatableNumericValue | string | undefined;

property cursor

cursor?: CursorValue | undefined;

property objectFit

objectFit?: 'cover' | 'contain' | 'fill' | 'scale-down' | 'none' | undefined;

property opacity

opacity?: AnimatableNumericValue | undefined;

property overflow

overflow?: 'visible' | 'hidden' | undefined;

property overlayColor

overlayColor?: ColorValue | undefined;

property resizeMode

resizeMode?: ImageResizeMode | undefined;

property tintColor

tintColor?: ColorValue | undefined;

interface ImageURISource

interface ImageURISource {}

Copyright (c) Meta Platforms, Inc. and affiliates.
This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree.

property body

body?: string | undefined;

body is the HTTP body to send with the request. This must be a valid UTF-8 string, and will be sent exactly as specified, with no additional encoding (e.g. URL-escaping or base64) applied.

property bundle

bundle?: string | undefined;

bundle is the iOS asset bundle which the image is included in. This will default to [NSBundle mainBundle] if not set. ios

property cache

cache?: 'default' | 'reload' | 'force-cache' | 'only-if-cached' | undefined;

cache determines how the requests handles potentially cached responses.
- default: Use the native platforms default strategy. useProtocolCachePolicy on iOS.
- reload: The data for the URL will be loaded from the originating source. No existing cache data should be used to satisfy a URL load request.
- force-cache: The existing cached data will be used to satisfy the request, regardless of its age or expiration date. If there is no existing data in the cache corresponding the request, the data is loaded from the originating source.
- only-if-cached: The existing cache data will be used to satisfy a request, regardless of its age or expiration date. If there is no existing data in the cache corresponding to a URL load request, no attempt is made to load the data from the originating source, and the load is considered to have failed.

property headers

headers?: { [key: string]: string } | undefined;

headers is an object representing the HTTP headers to send along with the request for a remote image.

property height

height?: number | undefined;

property method

method?: string | undefined;

method is the HTTP Method to use. Defaults to GET if not specified.

property scale

scale?: number | undefined;

scale is used to indicate the scale factor of the image. Defaults to 1.0 if unspecified, meaning that one image pixel equates to one display point / DIP.

property uri

uri?: string | undefined;

uri is a string representing the resource identifier for the image, which could be an http address, a local file path, or the name of a static image resource (which should be wrapped in the require('./path/to/image.png') function).

property width

width?: number | undefined;

width and height can be specified if known at build time, in which case these will be used to set the default <Image/> component dimensions.

interface InputAccessoryViewProps

interface InputAccessoryViewProps {}

property backgroundColor

backgroundColor?: ColorValue | undefined;

property children

children?: React.ReactNode | undefined;

property nativeID

nativeID?: string | undefined;

An ID which is used to associate this InputAccessoryView to specified TextInput(s).

property style

style?: StyleProp<ViewStyle> | undefined;

interface Insets

interface Insets {}

Copyright (c) Meta Platforms, Inc. and affiliates.
This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree.

property bottom

bottom?: number | undefined;

property left

left?: number | undefined;

property right

right?: number | undefined;

property top

top?: number | undefined;

interface InteractionManagerStatic

interface InteractionManagerStatic {}

property Events

Events: {
    interactionStart: string;
    interactionComplete: string;
};

method addListener

addListener: (
    eventType: string,
    listener: (...args: any[]) => any,
    context?: any
) => EmitterSubscription;

Adds a listener to be invoked when events of the specified type are emitted. An optional calling context may be provided. The data arguments emitted will be passed to the listener function.
Parameter eventType
Name of the event to listen to
Parameter listener
Function to invoke when the specified event is emitted
Parameter context
Optional context object to use when invoking the listener

method clearInteractionHandle

clearInteractionHandle: (handle: Handle) => void;

Notify manager that an interaction has completed.

method createInteractionHandle

createInteractionHandle: () => Handle;

Notify manager that an interaction has started.

method runAfterInteractions

runAfterInteractions: (task?: (() => any) | SimpleTask | PromiseTask) => {
    then: (onfulfilled?: () => any, onrejected?: () => any) => Promise<any>;
    done: (...args: any[]) => any;
    cancel: () => void;
};

Schedule a function to run after all interactions have completed. Returns a cancellable

method setDeadline

setDeadline: (deadline: number) => void;

A positive number will use setTimeout to schedule any tasks after the eventLoopRunningTime hits the deadline value, otherwise all tasks will be executed in one setImmediate batch (default).

interface KeyboardAvoidingViewProps

interface KeyboardAvoidingViewProps extends ViewProps {}

property behavior

behavior?: 'height' | 'position' | 'padding' | undefined;

property contentContainerStyle

contentContainerStyle?: StyleProp<ViewStyle> | undefined;

The style of the content container(View) when behavior is 'position'.

property enabled

enabled?: boolean | undefined;

Enables or disables the KeyboardAvoidingView.
Default is true

property keyboardVerticalOffset

keyboardVerticalOffset?: number | undefined;

This is the distance between the top of the user screen and the react native view, may be non-zero in some use cases.

interface KeyboardEvent

interface KeyboardEvent extends Partial<KeyboardEventIOS> {}

property duration

duration: number;

Always set to 0 on Android.

property easing

easing: KeyboardEventEasing;

Always set to "keyboard" on Android.

property endCoordinates

endCoordinates: KeyboardMetrics;

interface KeyboardEventIOS

interface KeyboardEventIOS {}

property isEventFromThisApp

isEventFromThisApp: boolean;

property startCoordinates

startCoordinates: KeyboardMetrics;

interface KeyboardStatic

interface KeyboardStatic extends NativeEventEmitter {}

property addListener

addListener: (
    eventType: KeyboardEventName,
    listener: KeyboardEventListener
) => EmitterSubscription;

The addListener function connects a JavaScript function to an identified native keyboard notification event.
This function then returns the reference to the listener.
{string} eventName The nativeEvent is the string that identifies the event you're listening for. This can be any of the following:
- keyboardWillShow - keyboardDidShow - keyboardWillHide - keyboardDidHide - keyboardWillChangeFrame - keyboardDidChangeFrame
Note that if you set android:windowSoftInputMode to adjustResize or adjustNothing, only keyboardDidShow and keyboardDidHide events will be available on Android. keyboardWillShow as well as keyboardWillHide are generally not available on Android since there is no native corresponding event.
{function} callback function to be called when the event fires.

property dismiss

dismiss: () => void;

Dismisses the active keyboard and removes focus.

property scheduleLayoutAnimation

scheduleLayoutAnimation: (event: KeyboardEvent) => void;

Useful for syncing TextInput (or other keyboard accessory view) size of position changes with keyboard movements.

method isVisible

isVisible: () => boolean;

Whether the keyboard is last known to be visible.

method metrics

metrics: () => KeyboardMetrics | undefined;

Return the metrics of the soft-keyboard if visible.

interface LayoutAnimationAnim

interface LayoutAnimationAnim {}

property delay

delay?: number | undefined;

property duration

duration?: number | undefined;

property initialVelocity

initialVelocity?: number | undefined;

property property

property?: LayoutAnimationProperty | undefined;

property springDamping

springDamping?: number | undefined;

property type

type?: LayoutAnimationType | undefined;

interface LayoutAnimationConfig

interface LayoutAnimationConfig {}

property create

create?: LayoutAnimationAnim | undefined;

property delete

delete?: LayoutAnimationAnim | undefined;

property duration

duration: number;

property update

update?: LayoutAnimationAnim | undefined;

interface LayoutAnimationStatic

interface LayoutAnimationStatic {}

Automatically animates views to their new positions when the next layout happens. A common way to use this API is to call LayoutAnimation.configureNext before calling setState.

property configChecker

configChecker: (shapeTypes: { [key: string]: any }) => any;

property configureNext

configureNext: (
    config: LayoutAnimationConfig,
    onAnimationDidEnd?: () => void,
    onAnimationDidFail?: () => void
) => void;

Schedules an animation to happen on the next layout.
Parameter config
Specifies animation properties: duration in milliseconds create, config for animating in new views (see Anim type) update, config for animating views that have been updated (see Anim type)
Parameter onAnimationDidEnd
Called when the animation finished. Only supported on iOS.

property create

create: (
    duration: number,
    type?: LayoutAnimationType,
    creationProp?: LayoutAnimationProperty
) => LayoutAnimationConfig;

Helper for creating a config for configureNext.

property easeInEaseOut

easeInEaseOut: (onAnimationDidEnd?: () => void) => void;

property linear

linear: (onAnimationDidEnd?: () => void) => void;

property Presets

Presets: {
    easeInEaseOut: LayoutAnimationConfig;
    linear: LayoutAnimationConfig;
    spring: LayoutAnimationConfig;
};

property Properties

Properties: LayoutAnimationProperties;

property spring

spring: (onAnimationDidEnd?: () => void) => void;

property Types

Types: LayoutAnimationTypes;

interface LayoutRectangle

interface LayoutRectangle {}

property height

height: number;

property width

width: number;

property x

x: number;

property y

y: number;

interface LinkingStatic

interface LinkingStatic extends NativeEventEmitter {}

method addEventListener

addEventListener: (
    type: 'url',
    handler: (event: { url: string }) => void
) => EmitterSubscription;

Add a handler to Linking changes by listening to the url event type and providing the handler

method canOpenURL

canOpenURL: (url: string) => Promise<boolean>;

Determine whether or not an installed app can handle a given URL. NOTE: For web URLs, the protocol ("http://", "https://") must be set accordingly! NOTE: As of iOS 9, your app needs to provide the LSApplicationQueriesSchemes key inside Info.plist.
Parameter URL
the URL to open

method getInitialURL

getInitialURL: () => Promise<string | null>;

If the app launch was triggered by an app link with, it will give the link url, otherwise it will give null NOTE: To support deep linking on Android, refer http://developer.android.com/training/app-indexing/deep-linking.html#handling-intents

method openSettings

openSettings: () => Promise<void>;

Open the Settings app and displays the app’s custom settings, if it has any.

method openURL

openURL: (url: string) => Promise<any>;

Try to open the given url with any of the installed apps. You can use other URLs, like a location (e.g. "geo:37.484847,-122.148386"), a contact, or any other URL that can be opened with the installed apps. NOTE: This method will fail if the system doesn't know how to open the specified URL. If you're passing in a non-http(s) URL, it's best to check first. NOTE: For web URLs, the protocol ("http://", "https://") must be set accordingly!

method sendIntent

sendIntent: (
    action: string,
    extras?: Array<{ key: string; value: string | number | boolean }>
) => Promise<void>;

Sends an Android Intent - a broad surface to express Android functions. Useful for deep-linking to settings pages, opening an SMS app with a message draft in place, and more. See https://developer.android.com/reference/kotlin/android/content/Intent?hl=en

interface LogBoxStatic

interface LogBoxStatic {}

Copyright (c) Meta Platforms, Inc. and affiliates.
This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree.

method ignoreAllLogs

ignoreAllLogs: (ignore?: boolean) => void;

Toggle error and warning notifications Note: this only disables notifications, uncaught errors will still open a full screen LogBox.
Parameter ignore
whether to ignore logs or not

method ignoreLogs

ignoreLogs: (patterns: (string | RegExp)[]) => void;

Silence any logs that match the given strings or regexes.

method install

install: () => void;

method uninstall

uninstall: () => void;

interface MatrixTransform

interface MatrixTransform {}

property matrix

matrix: AnimatableNumericValue[];

interface ModalBaseProps

interface ModalBaseProps {}

property animated

animated?: boolean | undefined;

Deprecated
Use animationType instead

property animationType

animationType?: 'none' | 'slide' | 'fade' | undefined;

The animationType prop controls how the modal animates.
- slide slides in from the bottom - fade fades into view - none appears without an animation

property backdropColor

backdropColor?: ColorValue | undefined;

The backdropColor props sets the background color of the modal's container. Defaults to white if not provided and transparent is false. Ignored if transparent is true.

property onRequestClose

onRequestClose?: ((event: NativeSyntheticEvent<any>) => void) | undefined;

The onRequestClose callback is called when the user taps the hardware back button on Android or the menu button on Apple TV.
This is required on Apple TV and Android.

property onShow

onShow?: ((event: NativeSyntheticEvent<any>) => void) | undefined;

The onShow prop allows passing a function that will be called once the modal has been shown.

property transparent

transparent?: boolean | undefined;

The transparent prop determines whether your modal will fill the entire view. Setting this to true will render the modal over a transparent background.

property visible

visible?: boolean | undefined;

The visible prop determines whether your modal is visible.

interface ModalPropsAndroid

interface ModalPropsAndroid {}

property hardwareAccelerated

hardwareAccelerated?: boolean | undefined;

Controls whether to force hardware acceleration for the underlying window.

property navigationBarTranslucent

navigationBarTranslucent?: boolean | undefined;

Determines whether your modal should go under the system navigationbar.

property statusBarTranslucent

statusBarTranslucent?: boolean | undefined;

Determines whether your modal should go under the system statusbar.

interface ModalPropsIOS

interface ModalPropsIOS {}

property onDismiss

onDismiss?: (() => void) | undefined;

The onDismiss prop allows passing a function that will be called once the modal has been dismissed.

property onOrientationChange

onOrientationChange?: ((event: NativeSyntheticEvent<any>) => void) | undefined;

The onOrientationChange callback is called when the orientation changes while the modal is being displayed. The orientation provided is only 'portrait' or 'landscape'. This callback is also called on initial render, regardless of the current orientation.

property presentationStyle

presentationStyle?:
    | 'fullScreen'
    | 'pageSheet'
    | 'formSheet'
    | 'overFullScreen'
    | undefined;

The presentationStyle determines the style of modal to show

property supportedOrientations

supportedOrientations?:
    | Array<
          | 'portrait'
          | 'portrait-upside-down'
          | 'landscape'
          | 'landscape-left'
          | 'landscape-right'
      >
    | undefined;

The supportedOrientations prop allows the modal to be rotated to any of the specified orientations. On iOS, the modal is still restricted by what's specified in your app's Info.plist's UISupportedInterfaceOrientations field.

interface MouseEvent

interface MouseEvent extends NativeSyntheticEvent<NativeMouseEvent> {}

interface NativeEventSubscription

interface NativeEventSubscription {}

method remove

remove: () => void;

Call this method to un-subscribe from a native-event

interface NativeMethods

interface NativeMethods {}

NativeMethods provides methods to access the underlying native component directly. This can be useful in cases when you want to focus a view or measure its on-screen dimensions, for example. The methods described here are available on most of the default components provided by React Native. Note, however, that they are not available on composite components that aren't directly backed by a native view. This will generally include most components that you define in your own app. For more information, see [Direct Manipulation](https://reactnative.dev/docs/direct-manipulation).
See Also
- https://github.com/facebook/react-native/blob/master/Libraries/Renderer/shims/ReactNativeTypes.js#L87

method blur

blur: () => void;

Removes focus from an input or view. This is the opposite of focus().

method focus

focus: () => void;

Requests focus for the given input or view. The exact behavior triggered will depend on the platform and type of view.

method measure

measure: (callback: MeasureOnSuccessCallback) => void;

Determines the location on screen, width, and height of the given view and returns the values via an async callback. If successful, the callback will be called with the following arguments:
- x - y - width - height - pageX - pageY
Note that these measurements are not available until after the rendering has been completed in native. If you need the measurements as soon as possible, consider using the [onLayout prop](docs/view.html#onlayout) instead.

method measureInWindow

measureInWindow: (callback: MeasureInWindowOnSuccessCallback) => void;

Determines the location of the given view in the window and returns the values via an async callback. If the React root view is embedded in another native view, this will give you the absolute coordinates. If successful, the callback will be called with the following arguments:
- x - y - width - height
Note that these measurements are not available until after the rendering has been completed in native.

method measureLayout

measureLayout: (
    relativeToNativeComponentRef: HostInstance | number,
    onSuccess: MeasureLayoutOnSuccessCallback,
    onFail?: () => void
) => void;

Like [measure()](#measure), but measures the view relative an ancestor, specified as relativeToNativeComponentRef. This means that the returned x, y are relative to the origin x, y of the ancestor view. _Can also be called with a relativeNativeNodeHandle but is deprecated._

method setNativeProps

setNativeProps: (nativeProps: object) => void;

This function sends props straight to native. They will not participate in future diff process - this means that if you do not include them in the next render, they will remain active (see [Direct Manipulation](https://reactnative.dev/docs/direct-manipulation)).

interface NativeModulesStatic

interface NativeModulesStatic {}

Interface for NativeModules which allows to augment NativeModules with type information. See react-native-sensor-manager for example.

index signature

[name: string]: any;

interface NativeMouseEvent

interface NativeMouseEvent extends NativeUIEvent {}

https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent

property altKey

readonly altKey: boolean;

Returns true if the alt key was down when the mouse event was fired.

property button

readonly button: number;

The button number that was pressed (if applicable) when the mouse event was fired.

property buttons

readonly buttons: number;

The buttons being depressed (if any) when the mouse event was fired.

property clientX

readonly clientX: number;

The X coordinate of the mouse pointer in local (DOM content) coordinates.

property clientY

readonly clientY: number;

The Y coordinate of the mouse pointer in local (DOM content) coordinates.

property ctrlKey

readonly ctrlKey: boolean;

Returns true if the control key was down when the mouse event was fired.

property metaKey

readonly metaKey: boolean;

Returns true if the meta key was down when the mouse event was fired.

property offsetX

readonly offsetX: number;

The X coordinate of the mouse pointer between that event and the padding edge of the target node

property offsetY

readonly offsetY: number;

The Y coordinate of the mouse pointer between that event and the padding edge of the target node

property pageX

readonly pageX: number;

The X coordinate of the mouse pointer relative to the whole document.

property pageY

readonly pageY: number;

The Y coordinate of the mouse pointer relative to the whole document.

property relatedTarget

readonly relatedTarget: null | number | HostInstance;

The secondary target for the event, if there is one.

property screenX

readonly screenX: number;

The X coordinate of the mouse pointer in global (screen) coordinates.

property screenY

readonly screenY: number;

The Y coordinate of the mouse pointer in global (screen) coordinates.

property shiftKey

readonly shiftKey: boolean;

Returns true if the shift key was down when the mouse event was fired.

property x

readonly x: number;

Alias for NativeMouseEvent.clientX

property y

readonly y: number;

Alias for NativeMouseEvent.clientY

interface NativePointerEvent

interface NativePointerEvent extends NativeMouseEvent {}

https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent

property height

readonly height: number;

The height (magnitude on the Y axis), in CSS pixels, of the contact geometry of the pointer.

property isPrimary

readonly isPrimary: boolean;

Indicates if the pointer represents the primary pointer of this pointer type.

property pointerId

readonly pointerId: number;

A unique identifier for the pointer causing the event.

property pointerType

readonly pointerType: string;

Indicates the device type that caused the event (mouse, pen, touch, etc.)

property pressure

readonly pressure: number;

The normalized pressure of the pointer input in the range 0 to 1, where 0 and 1 represent the minimum and maximum pressure the hardware is capable of detecting, respectively.

property tangentialPressure

readonly tangentialPressure: number;

The normalized tangential pressure of the pointer input (also known as barrel pressure or cylinder stress) in the range -1 to 1, where 0 is the neutral position of the control.

property tiltX

readonly tiltX: number;

The plane angle (in degrees, in the range of -90 to 90) between the Y–Z plane and the plane containing both the pointer (e.g. pen stylus) axis and the Y axis.

property tiltY

readonly tiltY: number;

The plane angle (in degrees, in the range of -90 to 90) between the X–Z plane and the plane containing both the pointer (e.g. pen stylus) axis and the X axis.

property twist

readonly twist: number;

The clockwise rotation of the pointer (e.g. pen stylus) around its major axis in degrees, with a value in the range 0 to 359.

property width

readonly width: number;

The width (magnitude on the X axis), in CSS pixels, of the contact geometry of the pointer

interface NativeScrollEvent

interface NativeScrollEvent {}

property contentInset

contentInset: NativeScrollRectangle;

property contentOffset

contentOffset: NativeScrollPoint;

property contentSize

contentSize: NativeScrollSize;

property layoutMeasurement

layoutMeasurement: NativeScrollSize;

property targetContentOffset

targetContentOffset?: NativeScrollPoint | undefined;

property velocity

velocity?: NativeScrollVelocity | undefined;

property zoomScale

zoomScale: number;

interface NativeScrollPoint

interface NativeScrollPoint {}

property x

x: number;

property y

y: number;

interface NativeScrollRectangle

interface NativeScrollRectangle {}

property bottom

bottom: number;

property left

left: number;

property right

right: number;

property top

top: number;

interface NativeScrollSize

interface NativeScrollSize {}

property height

height: number;

property width

width: number;

interface NativeScrollVelocity

interface NativeScrollVelocity {}

property x

x: number;

property y

y: number;

interface NativeSyntheticEvent

interface NativeSyntheticEvent<T>
    extends React.BaseSyntheticEvent<T, HostInstance, HostInstance> {}

interface NativeTouchEvent

interface NativeTouchEvent {}

property changedTouches

changedTouches: NativeTouchEvent[];

Array of all touch events that have changed since the last event

property force

force?: number | undefined;

3D Touch reported force ios

property identifier

identifier: string;

The ID of the touch

property locationX

locationX: number;

The X position of the touch, relative to the element

property locationY

locationY: number;

The Y position of the touch, relative to the element

property pageX

pageX: number;

The X position of the touch, relative to the screen

property pageY

pageY: number;

The Y position of the touch, relative to the screen

property target

target: string;

The node id of the element receiving the touch event

property timestamp

timestamp: number;

A time identifier for the touch, useful for velocity calculation

property touches

touches: NativeTouchEvent[];

Array of all current touches on the screen

interface NativeUIEvent

interface NativeUIEvent {}

https://developer.mozilla.org/en-US/docs/Web/API/UIEvent

property detail

readonly detail: number;

Returns a long with details about the event, depending on the event type.

interface PanResponderCallbacks

interface PanResponderCallbacks {}

See Also
- documentation of GestureResponderHandlers

property onMoveShouldSetPanResponder

onMoveShouldSetPanResponder?:
    | ((
          e: GestureResponderEvent,
          gestureState: PanResponderGestureState
      ) => boolean)
    | undefined;

property onMoveShouldSetPanResponderCapture

onMoveShouldSetPanResponderCapture?:
    | ((
          e: GestureResponderEvent,
          gestureState: PanResponderGestureState
      ) => boolean)
    | undefined;

property onPanResponderEnd

onPanResponderEnd?:
    | ((
          e: GestureResponderEvent,
          gestureState: PanResponderGestureState
      ) => void)
    | undefined;

property onPanResponderGrant

onPanResponderGrant?:
    | ((
          e: GestureResponderEvent,
          gestureState: PanResponderGestureState
      ) => void)
    | undefined;

property onPanResponderMove

onPanResponderMove?:
    | ((
          e: GestureResponderEvent,
          gestureState: PanResponderGestureState
      ) => void)
    | undefined;

property onPanResponderReject

onPanResponderReject?:
    | ((
          e: GestureResponderEvent,
          gestureState: PanResponderGestureState
      ) => void)
    | undefined;

property onPanResponderRelease

onPanResponderRelease?:
    | ((
          e: GestureResponderEvent,
          gestureState: PanResponderGestureState
      ) => void)
    | undefined;

property onPanResponderStart

onPanResponderStart?:
    | ((
          e: GestureResponderEvent,
          gestureState: PanResponderGestureState
      ) => void)
    | undefined;

property onPanResponderTerminate

onPanResponderTerminate?:
    | ((
          e: GestureResponderEvent,
          gestureState: PanResponderGestureState
      ) => void)
    | undefined;

property onPanResponderTerminationRequest

onPanResponderTerminationRequest?:
    | ((
          e: GestureResponderEvent,
          gestureState: PanResponderGestureState
      ) => boolean)
    | undefined;

property onShouldBlockNativeResponder

onShouldBlockNativeResponder?:
    | ((
          e: GestureResponderEvent,
          gestureState: PanResponderGestureState
      ) => boolean)
    | undefined;

property onStartShouldSetPanResponder

onStartShouldSetPanResponder?:
    | ((
          e: GestureResponderEvent,
          gestureState: PanResponderGestureState
      ) => boolean)
    | undefined;

property onStartShouldSetPanResponderCapture

onStartShouldSetPanResponderCapture?:
    | ((
          e: GestureResponderEvent,
          gestureState: PanResponderGestureState
      ) => boolean)
    | undefined;

interface PanResponderGestureState

interface PanResponderGestureState {}

property dx

dx: number;

accumulated distance of the gesture since the touch started

property dy

dy: number;

accumulated distance of the gesture since the touch started

property moveX

moveX: number;

the latest screen coordinates of the recently-moved touch

property moveY

moveY: number;

the latest screen coordinates of the recently-moved touch

property numberActiveTouches

numberActiveTouches: number;

Number of touches currently on screen

property stateID

stateID: number;

ID of the gestureState- persisted as long as there at least one touch on

property vx

vx: number;

current velocity of the gesture

property vy

vy: number;

current velocity of the gesture

property x0

x0: number;

the screen coordinates of the responder grant

property y0

y0: number;

the screen coordinates of the responder grant

interface PanResponderInstance

interface PanResponderInstance {}

property panHandlers

panHandlers: GestureResponderHandlers;

interface PanResponderStatic

interface PanResponderStatic {}

PanResponder reconciles several touches into a single gesture. It makes single-touch gestures resilient to extra touches, and can be used to recognize simple multi-touch gestures.
It provides a predictable wrapper of the responder handlers provided by the gesture responder system. For each handler, it provides a new gestureState object alongside the normal event.

method create

create: (config: PanResponderCallbacks) => PanResponderInstance;

Parameter config
Enhanced versions of all of the responder callbacks that provide not only the typical ResponderSyntheticEvent, but also the PanResponder gesture state. Simply replace the word Responder with PanResponder in each of the typical onResponder* callbacks. For example, the config object would look like:
- onMoveShouldSetPanResponder: (e, gestureState) => {...} - onMoveShouldSetPanResponderCapture: (e, gestureState) => {...} - onStartShouldSetPanResponder: (e, gestureState) => {...} - onStartShouldSetPanResponderCapture: (e, gestureState) => {...} - onPanResponderReject: (e, gestureState) => {...} - onPanResponderGrant: (e, gestureState) => {...} - onPanResponderStart: (e, gestureState) => {...} - onPanResponderEnd: (e, gestureState) => {...} - onPanResponderRelease: (e, gestureState) => {...} - onPanResponderMove: (e, gestureState) => {...} - onPanResponderTerminate: (e, gestureState) => {...} - onPanResponderTerminationRequest: (e, gestureState) => {...} - onShouldBlockNativeResponder: (e, gestureState) => {...}
In general, for events that have capture equivalents, we update the gestureState once in the capture phase and can use it in the bubble phase as well.
Be careful with onStartShould* callbacks. They only reflect updated gestureState for start/end events that bubble/capture to the Node. Once the node is the responder, you can rely on every start/end event being processed by the gesture and gestureState being updated accordingly. (numberActiveTouches) may not be totally accurate unless you are the responder.

interface PermissionsAndroidStatic

interface PermissionsAndroidStatic {}

property PERMISSIONS

PERMISSIONS: {
    [key in
        | 'READ_CALENDAR'
        | 'WRITE_CALENDAR'
        | 'CAMERA'
        | 'READ_CONTACTS'
        | 'WRITE_CONTACTS'
        | 'GET_ACCOUNTS'
        | 'ACCESS_FINE_LOCATION'
        | 'ACCESS_COARSE_LOCATION'
        | 'ACCESS_BACKGROUND_LOCATION'
        | 'RECORD_AUDIO'
        | 'READ_PHONE_STATE'
        | 'CALL_PHONE'
        | 'READ_CALL_LOG'
        | 'WRITE_CALL_LOG'
        | 'ADD_VOICEMAIL'
        | 'READ_VOICEMAIL'
        | 'WRITE_VOICEMAIL'
        | 'USE_SIP'
        | 'PROCESS_OUTGOING_CALLS'
        | 'BODY_SENSORS'
        | 'BODY_SENSORS_BACKGROUND'
        | 'SEND_SMS'
        | 'RECEIVE_SMS'
        | 'READ_SMS'
        | 'RECEIVE_WAP_PUSH'
        | 'RECEIVE_MMS'
        | 'READ_EXTERNAL_STORAGE'
        | 'READ_MEDIA_IMAGES'
        | 'READ_MEDIA_VIDEO'
        | 'READ_MEDIA_AUDIO'
        | 'READ_MEDIA_VISUAL_USER_SELECTED'
        | 'WRITE_EXTERNAL_STORAGE'
        | 'BLUETOOTH_CONNECT'
        | 'BLUETOOTH_SCAN'
        | 'BLUETOOTH_ADVERTISE'
        | 'ACCESS_MEDIA_LOCATION'
        | 'ACCEPT_HANDOVER'
        | 'ACTIVITY_RECOGNITION'
        | 'ANSWER_PHONE_CALLS'
        | 'READ_PHONE_NUMBERS'
        | 'UWB_RANGING'
        | 'POST_NOTIFICATIONS'
        | 'NEARBY_WIFI_DEVICES']: Permission;
};

A list of specified "dangerous" permissions that require prompting the user

property RESULTS

RESULTS: {
    [key in 'GRANTED' | 'DENIED' | 'NEVER_ASK_AGAIN']: PermissionStatus;
};

A list of permission results that are returned

method check

check: (permission: Permission) => Promise<boolean>;

Returns a promise resolving to a boolean value as to whether the specified permissions has been granted

method checkPermission

checkPermission: (permission: Permission) => Promise<boolean>;

Deprecated
Use check instead

method request

request: (
    permission: Permission,
    rationale?: Rationale
) => Promise<PermissionStatus>;

Prompts the user to enable a permission and returns a promise resolving to a string value indicating whether the user allowed or denied the request
If the optional rationale argument is included (which is an object with a title and message), this function checks with the OS whether it is necessary to show a dialog explaining why the permission is needed (https://developer.android.com/training/permissions/requesting.html#explain) and then shows the system permission dialog

method requestMultiple

requestMultiple: (
    permissions: Array<Permission>
) => Promise<{
    'android.permission.READ_CALENDAR': PermissionStatus;
    'android.permission.WRITE_CALENDAR': PermissionStatus;
    'android.permission.CAMERA': PermissionStatus;
    'android.permission.READ_CONTACTS': PermissionStatus;
    'android.permission.WRITE_CONTACTS': PermissionStatus;
    'android.permission.GET_ACCOUNTS': PermissionStatus;
    'android.permission.ACCESS_BACKGROUND_LOCATION': PermissionStatus;
    'android.permission.ACCESS_FINE_LOCATION': PermissionStatus;
    'android.permission.ACCESS_COARSE_LOCATION': PermissionStatus;
    'android.permission.RECORD_AUDIO': PermissionStatus;
    'android.permission.READ_PHONE_STATE': PermissionStatus;
    'android.permission.CALL_PHONE': PermissionStatus;
    'android.permission.READ_CALL_LOG': PermissionStatus;
    'android.permission.WRITE_CALL_LOG': PermissionStatus;
    'com.android.voicemail.permission.ADD_VOICEMAIL': PermissionStatus;
    'com.android.voicemail.permission.READ_VOICEMAIL': PermissionStatus;
    'com.android.voicemail.permission.WRITE_VOICEMAIL': PermissionStatus;
    'android.permission.USE_SIP': PermissionStatus;
    'android.permission.PROCESS_OUTGOING_CALLS': PermissionStatus;
    'android.permission.BODY_SENSORS': PermissionStatus;
    'android.permission.BODY_SENSORS_BACKGROUND': PermissionStatus;
    'android.permission.SEND_SMS': PermissionStatus;
    'android.permission.RECEIVE_SMS': PermissionStatus;
    'android.permission.READ_SMS': PermissionStatus;
    'android.permission.RECEIVE_WAP_PUSH': PermissionStatus;
    'android.permission.RECEIVE_MMS': PermissionStatus;
    'android.permission.READ_EXTERNAL_STORAGE': PermissionStatus;
    'android.permission.READ_MEDIA_IMAGES': PermissionStatus;
    'android.permission.READ_MEDIA_VIDEO': PermissionStatus;
    'android.permission.READ_MEDIA_AUDIO': PermissionStatus;
    'android.permission.READ_MEDIA_VISUAL_USER_SELECTED': PermissionStatus;
    'android.permission.WRITE_EXTERNAL_STORAGE': PermissionStatus;
    'android.permission.BLUETOOTH_CONNECT': PermissionStatus;
    'android.permission.BLUETOOTH_SCAN': PermissionStatus;
    'android.permission.BLUETOOTH_ADVERTISE': PermissionStatus;
    'android.permission.ACCESS_MEDIA_LOCATION': PermissionStatus;
    'android.permission.ACCEPT_HANDOVER': PermissionStatus;
    'android.permission.ACTIVITY_RECOGNITION': PermissionStatus;
    'android.permission.ANSWER_PHONE_CALLS': PermissionStatus;
    'android.permission.READ_PHONE_NUMBERS': PermissionStatus;
    'android.permission.UWB_RANGING': PermissionStatus;
    'android.permission.POST_NOTIFICATIONS': PermissionStatus;
    'android.permission.NEARBY_WIFI_DEVICES': PermissionStatus;
}>;

Prompts the user to enable multiple permissions in the same dialog and returns an object with the permissions as keys and strings as values indicating whether the user allowed or denied the request

method requestPermission

requestPermission: (
    permission: Permission,
    rationale?: Rationale
) => Promise<boolean>;

Deprecated
Use request instead

construct signature

new (): PermissionsAndroidStatic;

interface PerspectiveTransform

interface PerspectiveTransform {}

property perspective

perspective: AnimatableNumericValue;

interface PixelRatioStatic

interface PixelRatioStatic {}

Copyright (c) Meta Platforms, Inc. and affiliates.
This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree.

method get

get: () => number;

method getFontScale

getFontScale: () => number;

method getPixelSizeForLayoutSize

getPixelSizeForLayoutSize: (layoutSize: number) => number;

Converts a layout size (dp) to pixel size (px). Guaranteed to return an integer number.

method roundToNearestPixel

roundToNearestPixel: (layoutSize: number) => number;

Rounds a layout size (dp) to the nearest layout size that corresponds to an integer number of pixels. For example, on a device with a PixelRatio of 3, PixelRatio.roundToNearestPixel(8.4) = 8.33, which corresponds to exactly (8.33 * 3) = 25 pixels.

method startDetecting

startDetecting: () => void;

No-op for iOS, but used on the web. Should not be documented. [sic]

interface PlatformAndroidStatic

interface PlatformAndroidStatic extends PlatformStatic {}

property constants

constants: PlatformConstants & {
    Version: number;
    Release: string;
    Serial: string;
    Fingerprint: string;
    Model: string;
    Brand: string;
    Manufacturer: string;
    ServerHost?: string | undefined;
    uiMode: 'car' | 'desk' | 'normal' | 'tv' | 'watch' | 'unknown';
};

property OS

OS: 'android';

property Version

Version: number;

interface PlatformIOSStatic

interface PlatformIOSStatic extends PlatformStatic {}

property constants

constants: PlatformConstants & {
    forceTouchAvailable: boolean;
    interfaceIdiom: string;
    osVersion: string;
    systemName: string;
    isMacCatalyst?: boolean | undefined;
};

property isMacCatalyst

isMacCatalyst?: boolean | undefined;

property isPad

isPad: boolean;

property isTV

isTV: boolean;

property isVision

isVision: boolean;

property OS

OS: 'ios';

property Version

Version: string;

interface PlatformMacOSStatic

interface PlatformMacOSStatic extends PlatformStatic {}

property constants

constants: PlatformConstants & {
    osVersion: string;
};

property OS

OS: 'macos';

property Version

Version: string;

interface PlatformStatic

interface PlatformStatic {}

property constants

constants: PlatformConstants;

property isTesting

isTesting: boolean;

property isTV

isTV: boolean;

property Version

Version: number | string;

method select

select: {
    <T>(
        specifics:
            | ({
                  ios?: T;
                  android?: T;
                  macos?: T;
                  windows?: T;
                  web?: T;
                  native?: T;
              } & { default: T })
            | { ios: T; android: T; macos: T; windows: T; web: T; native: T }
    ): T;
    <T>(specifics: {
        ios?: T;
        android?: T;
        macos?: T;
        windows?: T;
        web?: T;
        native?: T;
    }): T;
};

See Also
- https://reactnative.dev/docs/platform-specific-code#content

interface PlatformWebStatic

interface PlatformWebStatic extends PlatformStatic {}

property OS

OS: 'web';

interface PlatformWindowsOSStatic

interface PlatformWindowsOSStatic extends PlatformStatic {}

property constants

constants: PlatformConstants & {
    osVersion: number;
};

property OS

OS: 'windows';

property Version

Version: number;

interface PointerEvents

interface PointerEvents {}

property onPointerCancel

onPointerCancel?: ((event: PointerEvent) => void) | undefined;

property onPointerCancelCapture

onPointerCancelCapture?: ((event: PointerEvent) => void) | undefined;

property onPointerDown

onPointerDown?: ((event: PointerEvent) => void) | undefined;

property onPointerDownCapture

onPointerDownCapture?: ((event: PointerEvent) => void) | undefined;

property onPointerEnter

onPointerEnter?: ((event: PointerEvent) => void) | undefined;

property onPointerEnterCapture

onPointerEnterCapture?: ((event: PointerEvent) => void) | undefined;

property onPointerLeave

onPointerLeave?: ((event: PointerEvent) => void) | undefined;

property onPointerLeaveCapture

onPointerLeaveCapture?: ((event: PointerEvent) => void) | undefined;

property onPointerMove

onPointerMove?: ((event: PointerEvent) => void) | undefined;

property onPointerMoveCapture

onPointerMoveCapture?: ((event: PointerEvent) => void) | undefined;

property onPointerUp

onPointerUp?: ((event: PointerEvent) => void) | undefined;

property onPointerUpCapture

onPointerUpCapture?: ((event: PointerEvent) => void) | undefined;

interface PointProp

interface PointProp {}

property x

x: number;

property y

y: number;

interface PressableAndroidRippleConfig

interface PressableAndroidRippleConfig {}

property borderless

borderless?: null | boolean | undefined;

property color

color?: null | ColorValue | undefined;

property foreground

foreground?: null | boolean | undefined;

property radius

radius?: null | number | undefined;

interface PressableProps

interface PressableProps
    extends AccessibilityProps,
        Omit<ViewProps, 'children' | 'style' | 'hitSlop'> {}

property android_disableSound

android_disableSound?: null | boolean | undefined;

If true, doesn't play system sound on touch.

property android_ripple

android_ripple?: null | PressableAndroidRippleConfig | undefined;

Enables the Android ripple effect and configures its color.

property cancelable

cancelable?: null | boolean | undefined;

Whether a press gesture can be interrupted by a parent gesture such as a scroll event. Defaults to true.

property children

children?:
    | React.ReactNode
    | ((state: PressableStateCallbackType) => React.ReactNode)
    | undefined;

Either children or a render prop that receives a boolean reflecting whether the component is currently pressed.

property delayHoverIn

delayHoverIn?: number | null | undefined;

Duration to wait after hover in before calling onHoverIn. macos windows

property delayHoverOut

delayHoverOut?: number | null | undefined;

Duration to wait after hover out before calling onHoverOut. macos windows

property delayLongPress

delayLongPress?: null | number | undefined;

Duration (in milliseconds) from onPressIn before onLongPress is called.

property disabled

disabled?: null | boolean | undefined;

Whether the press behavior is disabled.

property hitSlop

hitSlop?: null | Insets | number | undefined;

Additional distance outside of this view in which a press is detected.

property onBlur

onBlur?:
    | null
    | ((event: NativeSyntheticEvent<TargetedEvent>) => void)
    | undefined;

Called after the element loses focus. macos windows

property onFocus

onFocus?:
    | null
    | ((event: NativeSyntheticEvent<TargetedEvent>) => void)
    | undefined;

Called after the element is focused. macos windows

property onHoverIn

onHoverIn?: null | ((event: MouseEvent) => void) | undefined;

Called when the hover is activated to provide visual feedback.

property onHoverOut

onHoverOut?: null | ((event: MouseEvent) => void) | undefined;

Called when the hover is deactivated to undo visual feedback.

property onLongPress

onLongPress?: null | ((event: GestureResponderEvent) => void) | undefined;

Called when a long-tap gesture is detected.

property onPress

onPress?: null | ((event: GestureResponderEvent) => void) | undefined;

Called when a single tap gesture is detected.

property onPressIn

onPressIn?: null | ((event: GestureResponderEvent) => void) | undefined;

Called when a touch is engaged before onPress.

property onPressOut

onPressOut?: null | ((event: GestureResponderEvent) => void) | undefined;

Called when a touch is released before onPress.

property pressRetentionOffset

pressRetentionOffset?: null | Insets | number | undefined;

Additional distance outside of this view in which a touch is considered a press before onPressOut is triggered.

property style

style?:
    | StyleProp<ViewStyle>
    | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>)
    | undefined;

Either view styles or a function that receives a boolean reflecting whether the component is currently pressed and returns view styles.

property testOnly_pressed

testOnly_pressed?: null | boolean | undefined;

Used only for documentation or testing (e.g. snapshot testing).

property unstable_pressDelay

unstable_pressDelay?: number | undefined;

Duration (in milliseconds) to wait after press down before calling onPressIn.

interface PressableStateCallbackType

interface PressableStateCallbackType {}

property pressed

readonly pressed: boolean;

interface ProgressBarAndroidProps

interface ProgressBarAndroidProps extends ViewProps {}

ProgressBarAndroid has been extracted from react-native core and will be removed in a future release. It can now be installed and imported from @react-native-community/progress-bar-android instead of 'react-native'.
See Also
- https://github.com/react-native-community/progress-bar-android
Deprecated

property animating

animating?: boolean | undefined;

Whether to show the ProgressBar (true, the default) or hide it (false).

property color

color?: ColorValue | undefined;

Color of the progress bar.

property indeterminate

indeterminate?: boolean | undefined;

If the progress bar will show indeterminate progress. Note that this can only be false if styleAttr is Horizontal.

property progress

progress?: number | undefined;

The progress value (between 0 and 1).

property styleAttr

styleAttr?:
    | 'Horizontal'
    | 'Normal'
    | 'Small'
    | 'Large'
    | 'Inverse'
    | 'SmallInverse'
    | 'LargeInverse'
    | undefined;

Style of the ProgressBar. One of: Horizontal Normal (default) Small Large Inverse SmallInverse LargeInverse

property testID

testID?: string | undefined;

Used to locate this view in end-to-end tests.

interface PushNotification

interface PushNotification {}

method finish

finish: (result: string) => void;

iOS Only Signifies remote notification handling is complete

method getAlert

getAlert: () => string | Object;

Gets the notification's main message from the aps object

method getBadgeCount

getBadgeCount: () => number;

Gets the badge count number from the aps object

method getCategory

getCategory: () => string;

Gets the category string from the aps object

method getContentAvailable

getContentAvailable: () => number;

Gets the content-available number from the aps object

method getData

getData: () => Object;

Gets the data object on the notif

method getMessage

getMessage: () => string | Object;

An alias for getAlert to get the notification's main message string

method getSound

getSound: () => string;

Gets the sound string from the aps object

method getThreadId

getThreadId: () => string;

Gets the thread ID on the notif

interface PushNotificationIOSStatic

interface PushNotificationIOSStatic {}

Handle push notifications for your app, including permission handling and icon badge number.
See Also
- https://reactnative.dev/docs/pushnotificationios#content
  //FIXME: BGR: The documentation seems completely off compared to the actual js implementation. I could never get the example to run

property FetchResult

FetchResult: FetchResult;

iOS fetch results that best describe the result of a finished remote notification handler. For a list of possible values, see PushNotificationIOS.FetchResult.

method abandonPermissions

abandonPermissions: () => void;

Unregister for all remote notifications received via Apple Push Notification service. You should call this method in rare circumstances only, such as when a new version of the app removes support for all types of remote notifications. Users can temporarily prevent apps from receiving remote notifications through the Notifications section of the Settings app. Apps unregistered through this method can always re-register.

method addEventListener

addEventListener: {
    (
        type: 'notification' | 'localNotification',
        handler: (notification: PushNotification) => void
    ): void;
    (type: 'register', handler: (deviceToken: string) => void): void;
    (
        type: 'registrationError',
        handler: (error: { message: string; code: number; details: any }) => void
    ): void;
};

Attaches a listener to remote notifications while the app is running in the foreground or the background.
The handler will get be invoked with an instance of PushNotificationIOS
The type MUST be 'notification'
Fired when the user registers for remote notifications.
The handler will be invoked with a hex string representing the deviceToken.
The type MUST be 'register'
Fired when the user fails to register for remote notifications. Typically occurs when APNS is having issues, or the device is a simulator.
The handler will be invoked with {message: string, code: number, details: any}.
The type MUST be 'registrationError'

method cancelAllLocalNotifications

cancelAllLocalNotifications: () => void;

Cancels all scheduled localNotifications

method cancelLocalNotifications

cancelLocalNotifications: (userInfo: Object) => void;

Cancel local notifications. Optionally restricts the set of canceled notifications to those notifications whose userInfo fields match the corresponding fields in the userInfo argument.

method checkPermissions

checkPermissions: (
    callback: (permissions: PushNotificationPermissions) => void
) => void;

See what push permissions are currently enabled. callback will be invoked with a permissions object:
- alert :boolean - badge :boolean - sound :boolean

method getApplicationIconBadgeNumber

getApplicationIconBadgeNumber: (callback: (badge: number) => void) => void;

Gets the current badge number for the app icon on the home screen

method getDeliveredNotifications

getDeliveredNotifications: (callback: (notifications: Object[]) => void) => void;

Provides you with a list of the app’s notifications that are still displayed in Notification Center.

method getInitialNotification

getInitialNotification: () => Promise<PushNotification | null>;

This method returns a promise that resolves to either the notification object if the app was launched by a push notification, or null otherwise.

method getScheduledLocalNotifications

getScheduledLocalNotifications: (
    callback: (notifications: ScheduleLocalNotificationDetails[]) => void
) => void;

Gets the local notifications that are currently scheduled.

method presentLocalNotification

presentLocalNotification: (details: PresentLocalNotificationDetails) => void;

Schedules the localNotification for immediate presentation. details is an object containing: alertBody : The message displayed in the notification alert. alertAction : The "action" displayed beneath an actionable notification. Defaults to "view"; soundName : The sound played when the notification is fired (optional). category : The category of this notification, required for actionable notifications (optional). userInfo : An optional object containing additional notification data. applicationIconBadgeNumber (optional) : The number to display as the app's icon badge. The default value of this property is 0, which means that no badge is displayed.

method removeAllDeliveredNotifications

removeAllDeliveredNotifications: () => void;

Remove all delivered notifications from Notification Center.

method removeDeliveredNotifications

removeDeliveredNotifications: (identifiers: string[]) => void;

Removes the specified notifications from Notification Center

method removeEventListener

removeEventListener: (
    type: PushNotificationEventName,
    handler:
        | ((notification: PushNotification) => void)
        | ((deviceToken: string) => void)
        | ((error: { message: string; code: number; details: any }) => void)
) => void;

Removes the event listener. Do this in componentWillUnmount to prevent memory leaks

method requestPermissions

requestPermissions: {
    (permissions?: PushNotificationPermissions[]): void;
    (
        permissions?: PushNotificationPermissions
    ): Promise<PushNotificationPermissions>;
};

Requests all notification permissions from iOS, prompting the user's dialog box.

method scheduleLocalNotification

scheduleLocalNotification: (details: ScheduleLocalNotificationDetails) => void;

Schedules the localNotification for future presentation. details is an object containing: fireDate : The date and time when the system should deliver the notification. alertBody : The message displayed in the notification alert. alertAction : The "action" displayed beneath an actionable notification. Defaults to "view"; soundName : The sound played when the notification is fired (optional). category : The category of this notification, required for actionable notifications (optional). userInfo : An optional object containing additional notification data. applicationIconBadgeNumber (optional) : The number to display as the app's icon badge. Setting the number to 0 removes the icon badge.

method setApplicationIconBadgeNumber

setApplicationIconBadgeNumber: (number: number) => void;

Sets the badge number for the app icon on the home screen

interface PushNotificationPermissions

interface PushNotificationPermissions {}

Copyright (c) Meta Platforms, Inc. and affiliates.
This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree.

property alert

alert?: boolean | undefined;

property badge

badge?: boolean | undefined;

property sound

sound?: boolean | undefined;

interface Rationale

interface Rationale {}

Copyright (c) Meta Platforms, Inc. and affiliates.
This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree.

property buttonNegative

buttonNegative?: string | undefined;

property buttonNeutral

buttonNeutral?: string | undefined;

property buttonPositive

buttonPositive: string;

property message

message: string;

property title

title: string;

interface RecursiveArray

interface RecursiveArray<T>
    extends Array<T | ReadonlyArray<T> | RecursiveArray<T>> {}

interface RefreshControlProps

interface RefreshControlProps
    extends RefreshControlPropsIOS,
        RefreshControlPropsAndroid {}

property onRefresh

onRefresh?: (() => void) | undefined;

Called when the view starts refreshing.

property progressViewOffset

progressViewOffset?: number | undefined;

Progress view top offset

property refreshing

refreshing: boolean;

Whether the view should be indicating an active refresh.

interface RefreshControlPropsAndroid

interface RefreshControlPropsAndroid extends ViewProps {}

property colors

colors?: ColorValue[] | undefined;

The colors (at least one) that will be used to draw the refresh indicator.

property enabled

enabled?: boolean | undefined;

Whether the pull to refresh functionality is enabled.

property progressBackgroundColor

progressBackgroundColor?: ColorValue | undefined;

The background color of the refresh indicator.

property size

size?: number | undefined;

Size of the refresh indicator, see RefreshControl.SIZE.

interface RefreshControlPropsIOS

interface RefreshControlPropsIOS extends ViewProps {}

property tintColor

tintColor?: ColorValue | undefined;

The color of the refresh indicator.

property title

title?: string | undefined;

The title displayed under the refresh indicator.

property titleColor

titleColor?: ColorValue | undefined;

Title color.

interface RippleBackgroundPropType

interface RippleBackgroundPropType extends BaseBackgroundPropType {}

property borderless

borderless: boolean;

property color

color?: number | null | undefined;

property type

type: 'RippleAndroid';

interface RotateTransform

interface RotateTransform {}

property rotate

rotate: AnimatableStringValue;

interface RotateXTransform

interface RotateXTransform {}

property rotateX

rotateX: AnimatableStringValue;

interface RotateYTransform

interface RotateYTransform {}

property rotateY

rotateY: AnimatableStringValue;

interface RotateZTransform

interface RotateZTransform {}

property rotateZ

rotateZ: AnimatableStringValue;

interface ScaledSize

interface ScaledSize {}

property fontScale

fontScale: number;

property height

height: number;

property scale

scale: number;

property width

width: number;

interface ScaleTransform

interface ScaleTransform {}

property scale

scale: AnimatableNumericValue;

interface ScaleXTransform

interface ScaleXTransform {}

property scaleX

scaleX: AnimatableNumericValue;

interface ScaleYTransform

interface ScaleYTransform {}

property scaleY

scaleY: AnimatableNumericValue;

interface ScrollResponderEvent

interface ScrollResponderEvent extends NativeSyntheticEvent<NativeTouchEvent> {}

interface ScrollResponderMixin

interface ScrollResponderMixin extends SubscribableMixin {}

method componentWillMount

componentWillMount: () => void;

componentWillMount is the closest thing to a standard "constructor" for React components.
The keyboardWillShow is called before input focus.

method scrollResponderGetScrollableNode

scrollResponderGetScrollableNode: () => any;

Returns the node that represents native view that can be scrolled. Components can pass what node to use by defining a getScrollableNode function otherwise this is used.

method scrollResponderHandleMomentumScrollBegin

scrollResponderHandleMomentumScrollBegin: (e: ScrollResponderEvent) => void;

Invoke this from an onMomentumScrollBegin event.

method scrollResponderHandleMomentumScrollEnd

scrollResponderHandleMomentumScrollEnd: (e: ScrollResponderEvent) => void;

Invoke this from an onMomentumScrollEnd event.

method scrollResponderHandleResponderGrant

scrollResponderHandleResponderGrant: (e: ScrollResponderEvent) => void;

Invoke this from an onResponderGrant event.

method scrollResponderHandleResponderReject

scrollResponderHandleResponderReject: () => any;

Invoke this from an onResponderReject event.
Some other element is not yielding its role as responder. Normally, we'd just disable the UIScrollView, but a touch has already began on it, the UIScrollView will not accept being disabled after that. The easiest solution for now is to accept the limitation of disallowing this altogether. To improve this, find a way to disable the UIScrollView after a touch has already started.

method scrollResponderHandleResponderRelease

scrollResponderHandleResponderRelease: (e: ScrollResponderEvent) => void;

Invoke this from an onResponderRelease event.

method scrollResponderHandleScroll

scrollResponderHandleScroll: (e: ScrollResponderEvent) => void;

method scrollResponderHandleScrollBeginDrag

scrollResponderHandleScrollBeginDrag: (e: ScrollResponderEvent) => void;

Unfortunately, onScrollBeginDrag also fires when *stopping* the scroll animation, and there's not an easy way to distinguish a drag vs. stopping momentum.
Invoke this from an onScrollBeginDrag event.

method scrollResponderHandleScrollEndDrag

scrollResponderHandleScrollEndDrag: (e: ScrollResponderEvent) => void;

Invoke this from an onScrollEndDrag event.

method scrollResponderHandleScrollShouldSetResponder

scrollResponderHandleScrollShouldSetResponder: () => boolean;

Invoke this from an onScroll event.

method scrollResponderHandleStartShouldSetResponder

scrollResponderHandleStartShouldSetResponder: () => boolean;

Merely touch starting is not sufficient for a scroll view to become the responder. Being the "responder" means that the very next touch move/end event will result in an action/movement.
Invoke this from an onStartShouldSetResponder event.
onStartShouldSetResponder is used when the next move/end will trigger some UI movement/action, but when you want to yield priority to views nested inside of the view.
There may be some cases where scroll views actually should return true from onStartShouldSetResponder: Any time we are detecting a standard tap that gives priority to nested views.
- If a single tap on the scroll view triggers an action such as recentering a map style view yet wants to give priority to interaction views inside (such as dropped pins or labels), then we would return true from this method when there is a single touch.
- Similar to the previous case, if a two finger "tap" should trigger a zoom, we would check the touches count, and if >= 2, we would return true.

method scrollResponderHandleStartShouldSetResponderCapture

scrollResponderHandleStartShouldSetResponderCapture: (
    e: ScrollResponderEvent
) => boolean;

There are times when the scroll view wants to become the responder (meaning respond to the next immediate touchStart/touchEnd), in a way that *doesn't* give priority to nested views (hence the capture phase):
- Currently animating. - Tapping anywhere that is not the focused input, while the keyboard is up (which should dismiss the keyboard).
Invoke this from an onStartShouldSetResponderCapture event.

method scrollResponderHandleTerminationRequest

scrollResponderHandleTerminationRequest: () => boolean;

We will allow the scroll view to give up its lock iff it acquired the lock during an animation. This is a very useful default that happens to satisfy many common user experiences.
- Stop a scroll on the left edge, then turn that into an outer view's backswipe. - Stop a scroll mid-bounce at the top, continue pulling to have the outer view dismiss. - However, without catching the scroll view mid-bounce (while it is motionless), if you drag far enough for the scroll view to become responder (and therefore drag the scroll view a bit), any backswipe navigation of a swipe gesture higher in the view hierarchy, should be rejected.

method scrollResponderHandleTouchEnd

scrollResponderHandleTouchEnd: (e: ScrollResponderEvent) => void;

Invoke this from an onTouchEnd event.
Parameter e
Event.

method scrollResponderHandleTouchMove

scrollResponderHandleTouchMove: (e: ScrollResponderEvent) => void;

Invoke this from an onTouchMove event.
Since we know that the SimpleEventPlugin occurs later in the plugin order, after ResponderEventPlugin, we can detect that we were *not* permitted to be the responder (presumably because a contained view became responder). The onResponderReject won't fire in that case - it only fires when a *current* responder rejects our request.
Parameter e
Touch Start event.

method scrollResponderHandleTouchStart

scrollResponderHandleTouchStart: (e: ScrollResponderEvent) => void;

Invoke this from an onTouchStart event.
Since we know that the SimpleEventPlugin occurs later in the plugin order, after ResponderEventPlugin, we can detect that we were *not* permitted to be the responder (presumably because a contained view became responder). The onResponderReject won't fire in that case - it only fires when a *current* responder rejects our request.
Parameter e
Touch Start event.

method scrollResponderInputMeasureAndScrollToKeyboard

scrollResponderInputMeasureAndScrollToKeyboard: (
    left: number,
    top: number,
    width: number,
    height: number
) => void;

The calculations performed here assume the scroll view takes up the entire screen - even if has some content inset. We then measure the offsets of the keyboard, and compensate both for the scroll view's "contentInset".
Parameter left
Position of input w.r.t. table view.
Parameter top
Position of input w.r.t. table view.
Parameter width
Width of the text input.
Parameter height
Height of the text input.

method scrollResponderIsAnimating

scrollResponderIsAnimating: () => boolean;

A helper function for this class that lets us quickly determine if the view is currently animating. This is particularly useful to know when a touch has just started or ended.

method scrollResponderKeyboardDidHide

scrollResponderKeyboardDidHide: (e: ScrollResponderEvent) => void;

method scrollResponderKeyboardDidShow

scrollResponderKeyboardDidShow: (e: ScrollResponderEvent) => void;

method scrollResponderKeyboardWillHide

scrollResponderKeyboardWillHide: (e: ScrollResponderEvent) => void;

method scrollResponderKeyboardWillShow

scrollResponderKeyboardWillShow: (e: ScrollResponderEvent) => void;

Warning, this may be called several times for a single keyboard opening. It's best to store the information in this method and then take any action at a later point (either in keyboardDidShow or other).
Here's the order that events occur in: - focus - willShow {startCoordinates, endCoordinates} several times - didShow several times - blur - willHide {startCoordinates, endCoordinates} several times - didHide several times
The ScrollResponder providesModule callbacks for each of these events. Even though any user could have easily listened to keyboard events themselves, using these props callbacks ensures that ordering of events is consistent - and not dependent on the order that the keyboard events are subscribed to. This matters when telling the scroll view to scroll to where the keyboard is headed - the scroll responder better have been notified of the keyboard destination before being instructed to scroll to where the keyboard will be. Stick to the ScrollResponder callbacks, and everything will work.
WARNING: These callbacks will fire even if a keyboard is displayed in a different navigation pane. Filter out the events to determine if they are relevant to you. (For example, only if you receive these callbacks after you had explicitly focused a node etc).

method scrollResponderScrollNativeHandleToKeyboard

scrollResponderScrollNativeHandleToKeyboard: (
    nodeHandle: any,
    additionalOffset?: number,
    preventNegativeScrollOffset?: boolean
) => void;

This method should be used as the callback to onFocus in a TextInputs' parent view. Note that any module using this mixin needs to return the parent view's ref in getScrollViewRef() in order to use this method.
Parameter nodeHandle
The TextInput node handle
Parameter additionalOffset
The scroll view's top "contentInset". Default is 0.
Parameter preventNegativeScrolling
Whether to allow pulling the content down to make it meet the keyboard's top. Default is false.

method scrollResponderScrollTo

scrollResponderScrollTo: (
    x?:
        | number
        | {
              x?: number | undefined;
              y?: number | undefined;
              animated?: boolean | undefined;
          },
    y?: number,
    animated?: boolean
) => void;

A helper function to scroll to a specific point in the scrollview. This is currently used to help focus on child textviews, but can also be used to quickly scroll to any element we want to focus. Syntax:
scrollResponderScrollTo(options: {x: number = 0; y: number = 0; animated: boolean = true})
Note: The weird argument signature is due to the fact that, for historical reasons, the function also accepts separate arguments as an alternative to the options object. This is deprecated due to ambiguity (y before x), and SHOULD NOT BE USED.

method scrollResponderTextInputFocusError

scrollResponderTextInputFocusError: (e: ScrollResponderEvent) => void;

method scrollResponderZoomTo

scrollResponderZoomTo: (
    rect: {
        x: number;
        y: number;
        width: number;
        height: number;
        animated?: boolean | undefined;
    },
    animated?: boolean
) => void;

A helper function to zoom to a specific rect in the scrollview. The argument has the shape {x: number; y: number; width: number; height: number; animated: boolean = true}
ios

interface ScrollViewProps

interface ScrollViewProps
    extends ViewProps,
        ScrollViewPropsIOS,
        ScrollViewPropsAndroid,
        Touchable {}

property contentContainerStyle

contentContainerStyle?: StyleProp<ViewStyle> | undefined;

These styles will be applied to the scroll view content container which wraps all of the child views. Example:
return ( <ScrollView contentContainerStyle={styles.contentContainer}> ); ... const styles = StyleSheet.create({ contentContainer: { paddingVertical: 20 } });

property decelerationRate

decelerationRate?: 'fast' | 'normal' | number | undefined;

A floating-point number that determines how quickly the scroll view decelerates after the user lifts their finger. You may also use string shortcuts "normal" and "fast" which match the underlying iOS settings for UIScrollViewDecelerationRateNormal and UIScrollViewDecelerationRateFast respectively.
- 'normal': 0.998 on iOS, 0.985 on Android (the default) - 'fast': 0.99 on iOS, 0.9 on Android

property disableIntervalMomentum

disableIntervalMomentum?: boolean | undefined;

When true, the scroll view stops on the next index (in relation to scroll position at release) regardless of how fast the gesture is. This can be used for horizontal pagination when the page is less than the width of the ScrollView. The default value is false.

property disableScrollViewPanResponder

disableScrollViewPanResponder?: boolean | undefined;

When true, the default JS pan responder on the ScrollView is disabled, and full control over touches inside the ScrollView is left to its child components. This is particularly useful if snapToInterval is enabled, since it does not follow typical touch patterns. Do not use this on regular ScrollView use cases without snapToInterval as it may cause unexpected touches to occur while scrolling. The default value is false.

property horizontal

horizontal?: boolean | null | undefined;

When true the scroll view's children are arranged horizontally in a row instead of vertically in a column. The default value is false.

property invertStickyHeaders

invertStickyHeaders?: boolean | undefined;

If sticky headers should stick at the bottom instead of the top of the ScrollView. This is usually used with inverted ScrollViews.

property keyboardDismissMode

keyboardDismissMode?: 'none' | 'interactive' | 'on-drag' | undefined;

Determines whether the keyboard gets dismissed in response to a drag. - 'none' (the default) drags do not dismiss the keyboard. - 'onDrag' the keyboard is dismissed when a drag begins. - 'interactive' the keyboard is dismissed interactively with the drag and moves in synchrony with the touch; dragging upwards cancels the dismissal.

property keyboardShouldPersistTaps

keyboardShouldPersistTaps?: boolean | 'always' | 'never' | 'handled' | undefined;

Determines when the keyboard should stay visible after a tap. - 'never' (the default), tapping outside of the focused text input when the keyboard is up dismisses the keyboard. When this happens, children won't receive the tap. - 'always', the keyboard will not dismiss automatically, and the scroll view will not catch taps, but children of the scroll view can catch taps. - 'handled', the keyboard will not dismiss automatically when the tap was handled by a children, (or captured by an ancestor). - false, deprecated, use 'never' instead - true, deprecated, use 'always' instead

property onContentSizeChange

onContentSizeChange?: ((w: number, h: number) => void) | undefined;

Called when scrollable content view of the ScrollView changes. Handler function is passed the content width and content height as parameters: (contentWidth, contentHeight) It's implemented using onLayout handler attached to the content container which this ScrollView renders.

property onMomentumScrollBegin

onMomentumScrollBegin?:
    | ((event: NativeSyntheticEvent<NativeScrollEvent>) => void)
    | undefined;

Fires when scroll view has begun moving

property onMomentumScrollEnd

onMomentumScrollEnd?:
    | ((event: NativeSyntheticEvent<NativeScrollEvent>) => void)
    | undefined;

Fires when scroll view has finished moving

property onScroll

onScroll?:
    | ((event: NativeSyntheticEvent<NativeScrollEvent>) => void)
    | undefined;

Fires at most once per frame during scrolling.

property onScrollBeginDrag

onScrollBeginDrag?:
    | ((event: NativeSyntheticEvent<NativeScrollEvent>) => void)
    | undefined;

Fires if a user initiates a scroll gesture.

property onScrollEndDrag

onScrollEndDrag?:
    | ((event: NativeSyntheticEvent<NativeScrollEvent>) => void)
    | undefined;

Fires when a user has finished scrolling.

property pagingEnabled

pagingEnabled?: boolean | undefined;

When true the scroll view stops on multiples of the scroll view's size when scrolling. This can be used for horizontal pagination. The default value is false.

property refreshControl

refreshControl?: React.ReactElement<RefreshControlProps> | undefined;

A RefreshControl component, used to provide pull-to-refresh functionality for the ScrollView.

property removeClippedSubviews

removeClippedSubviews?: boolean | undefined;

Experimental: When true offscreen child views (whose overflow value is hidden) are removed from their native backing superview when offscreen. This can improve scrolling performance on long lists. The default value is false.

property scrollEnabled

scrollEnabled?: boolean | undefined;

When false, the content does not scroll. The default value is true

property showsHorizontalScrollIndicator

showsHorizontalScrollIndicator?: boolean | undefined;

When true, shows a horizontal scroll indicator.

property showsVerticalScrollIndicator

showsVerticalScrollIndicator?: boolean | undefined;

When true, shows a vertical scroll indicator.

property snapToEnd

snapToEnd?: boolean | undefined;

Use in conjunction with snapToOffsets. By default, the end of the list counts as a snap offset. Set snapToEnd to false to disable this behavior and allow the list to scroll freely between its end and the last snapToOffsets offset. The default value is true.

property snapToInterval

snapToInterval?: number | undefined;

When set, causes the scroll view to stop at multiples of the value of snapToInterval. This can be used for paginating through children that have lengths smaller than the scroll view. Used in combination with snapToAlignment and decelerationRate="fast". Overrides less configurable pagingEnabled prop.

property snapToOffsets

snapToOffsets?: number[] | undefined;

When set, causes the scroll view to stop at the defined offsets. This can be used for paginating through variously sized children that have lengths smaller than the scroll view. Typically used in combination with decelerationRate="fast". Overrides less configurable pagingEnabled and snapToInterval props.

property snapToStart

snapToStart?: boolean | undefined;

Use in conjunction with snapToOffsets. By default, the beginning of the list counts as a snap offset. Set snapToStart to false to disable this behavior and allow the list to scroll freely between its start and the first snapToOffsets offset. The default value is true.

property StickyHeaderComponent

StickyHeaderComponent?: React.ComponentType<any> | undefined;

A React Component that will be used to render sticky headers, should be used together with stickyHeaderIndices. You may need to set this component if your sticky header uses custom transforms, for example, when you want your list to have an animated and hidable header. If component have not been provided, the default ScrollViewStickyHeader component will be used.

property stickyHeaderHiddenOnScroll

stickyHeaderHiddenOnScroll?: boolean | undefined;

When true, Sticky header is hidden when scrolling down, and dock at the top when scrolling up.

property stickyHeaderIndices

stickyHeaderIndices?: number[] | undefined;

An array of child indices determining which children get docked to the top of the screen when scrolling. For example passing stickyHeaderIndices={[0]} will cause the first child to be fixed to the top of the scroll view. This property is not supported in conjunction with horizontal={true}.

property style

style?: StyleProp<ViewStyle> | undefined;

Style

interface ScrollViewPropsAndroid

interface ScrollViewPropsAndroid {}

property endFillColor

endFillColor?: ColorValue | undefined;

Sometimes a scrollview takes up more space than its content fills. When this is the case, this prop will fill the rest of the scrollview with a color to avoid setting a background and creating unnecessary overdraw. This is an advanced optimization that is not needed in the general case.

property fadingEdgeLength

fadingEdgeLength?: number | undefined;

Fades out the edges of the scroll content.
If the value is greater than 0, the fading edges will be set accordingly to the current scroll direction and position, indicating if there is more content to show.
The default value is 0. android

property nestedScrollEnabled

nestedScrollEnabled?: boolean | undefined;

Enables nested scrolling for Android API level 21+. Nested scrolling is supported by default on iOS.

property overScrollMode

overScrollMode?: 'auto' | 'always' | 'never' | undefined;

Used to override default value of overScroll mode.
Possible values: - 'auto' - Default value, allow a user to over-scroll this view only if the content is large enough to meaningfully scroll. - 'always' - Always allow a user to over-scroll this view. - 'never' - Never allow a user to over-scroll this view.

property persistentScrollbar

persistentScrollbar?: boolean | undefined;

Causes the scrollbars not to turn transparent when they are not in use. The default value is false.

property scrollPerfTag

scrollPerfTag?: string | undefined;

Tag used to log scroll performance on this scroll view. Will force momentum events to be turned on (see sendMomentumEvents). This doesn't do anything out of the box and you need to implement a custom native FpsListener for it to be useful. android

interface ScrollViewPropsIOS

interface ScrollViewPropsIOS {}

property alwaysBounceHorizontal

alwaysBounceHorizontal?: boolean | undefined;

When true the scroll view bounces horizontally when it reaches the end even if the content is smaller than the scroll view itself. The default value is true when horizontal={true} and false otherwise.

property alwaysBounceVertical

alwaysBounceVertical?: boolean | undefined;

When true the scroll view bounces vertically when it reaches the end even if the content is smaller than the scroll view itself. The default value is false when horizontal={true} and true otherwise.

property automaticallyAdjustContentInsets

automaticallyAdjustContentInsets?: boolean | undefined;

Controls whether iOS should automatically adjust the content inset for scroll views that are placed behind a navigation bar or tab bar/ toolbar. The default value is true.

property automaticallyAdjustKeyboardInsets

automaticallyAdjustKeyboardInsets?: boolean | undefined;

Controls whether the ScrollView should automatically adjust its contentInset and scrollViewInsets when the Keyboard changes its size. The default value is false.

property automaticallyAdjustsScrollIndicatorInsets

automaticallyAdjustsScrollIndicatorInsets?: boolean | undefined;

Controls whether iOS should automatically adjust the scroll indicator insets. The default value is true. Available on iOS 13 and later.

property bounces

bounces?: boolean | undefined;

When true the scroll view bounces when it reaches the end of the content if the content is larger then the scroll view along the axis of the scroll direction. When false it disables all bouncing even if the alwaysBounce* props are true. The default value is true.

property bouncesZoom

bouncesZoom?: boolean | undefined;

When true gestures can drive zoom past min/max and the zoom will animate to the min/max value at gesture end otherwise the zoom will not exceed the limits.

property canCancelContentTouches

canCancelContentTouches?: boolean | undefined;

When false once tracking starts won't try to drag if the touch moves. The default value is true.

property centerContent

centerContent?: boolean | undefined;

When true the scroll view automatically centers the content when the content is smaller than the scroll view bounds; when the content is larger than the scroll view this property has no effect. The default value is false.

property contentInset

contentInset?: Insets | undefined;

The amount by which the scroll view content is inset from the edges of the scroll view. Defaults to {0, 0, 0, 0}.

property contentInsetAdjustmentBehavior

contentInsetAdjustmentBehavior?:
    | 'automatic'
    | 'scrollableAxes'
    | 'never'
    | 'always'
    | undefined;

This property specifies how the safe area insets are used to modify the content area of the scroll view. The default value of this property must be 'automatic'. But the default value is 'never' until RN@0.51.

property contentOffset

contentOffset?: PointProp | undefined;

Used to manually set the starting scroll offset. The default value is {x: 0, y: 0}

property directionalLockEnabled

directionalLockEnabled?: boolean | undefined;

When true the ScrollView will try to lock to only vertical or horizontal scrolling while dragging. The default value is false.

property indicatorStyle

indicatorStyle?: 'default' | 'black' | 'white' | undefined;

The style of the scroll indicators. - default (the default), same as black. - black, scroll indicator is black. This style is good against a white content background. - white, scroll indicator is white. This style is good against a black content background.

property maintainVisibleContentPosition

maintainVisibleContentPosition?:
    | null
    | {
          autoscrollToTopThreshold?: number | null | undefined;
          minIndexForVisible: number;
      }
    | undefined;

When set, the scroll view will adjust the scroll position so that the first child that is currently visible and at or beyond minIndexForVisible will not change position. This is useful for lists that are loading content in both directions, e.g. a chat thread, where new messages coming in might otherwise cause the scroll position to jump. A value of 0 is common, but other values such as 1 can be used to skip loading spinners or other content that should not maintain position.
The optional autoscrollToTopThreshold can be used to make the content automatically scroll to the top after making the adjustment if the user was within the threshold of the top before the adjustment was made. This is also useful for chat-like applications where you want to see new messages scroll into place, but not if the user has scrolled up a ways and it would be disruptive to scroll a bunch.
Caveat 1: Reordering elements in the scrollview with this enabled will probably cause jumpiness and jank. It can be fixed, but there are currently no plans to do so. For now, don't re-order the content of any ScrollViews or Lists that use this feature.
Caveat 2: This uses contentOffset and frame.origin in native code to compute visibility. Occlusion, transforms, and other complexity won't be taken into account as to whether content is "visible" or not.

property maximumZoomScale

maximumZoomScale?: number | undefined;

The maximum allowed zoom scale. The default value is 1.0.

property minimumZoomScale

minimumZoomScale?: number | undefined;

The minimum allowed zoom scale. The default value is 1.0.

property onScrollAnimationEnd

onScrollAnimationEnd?: (() => void) | undefined;

Called when a scrolling animation ends.

property onScrollToTop

onScrollToTop?:
    | ((event: NativeSyntheticEvent<NativeScrollEvent>) => void)
    | undefined;

Fires when the scroll view scrolls to top after the status bar has been tapped ios

property pinchGestureEnabled

pinchGestureEnabled?: boolean | undefined;

When true, ScrollView allows use of pinch gestures to zoom in and out. The default value is true.

property scrollEventThrottle

scrollEventThrottle?: number | undefined;

Limits how often scroll events will be fired while scrolling, specified as a time interval in ms. This may be useful when expensive work is performed in response to scrolling. Values <= 16 will disable throttling, regardless of the refresh rate of the device.

property scrollIndicatorInsets

scrollIndicatorInsets?: Insets | undefined;

The amount by which the scroll view indicators are inset from the edges of the scroll view. This should normally be set to the same value as the contentInset. Defaults to {0, 0, 0, 0}.

property scrollsToTop

scrollsToTop?: boolean | undefined;

When true the scroll view scrolls to top when the status bar is tapped. The default value is true.

property scrollToOverflowEnabled

scrollToOverflowEnabled?: boolean | undefined;

When true, the scroll view can be programmatically scrolled beyond its content size. The default value is false. ios

property snapToAlignment

snapToAlignment?: 'start' | 'center' | 'end' | undefined;

When snapToInterval is set, snapToAlignment will define the relationship of the snapping to the scroll view. - start (the default) will align the snap at the left (horizontal) or top (vertical) - center will align the snap in the center - end will align the snap at the right (horizontal) or bottom (vertical)

property zoomScale

zoomScale?: number | undefined;

The current scale of the scroll view content. The default value is 1.0.

interface SectionBase

interface SectionBase<ItemT, SectionT = DefaultSectionT> {}

property data

data: ReadonlyArray<ItemT>;

property ItemSeparatorComponent

ItemSeparatorComponent?: React.ComponentType<any> | null | undefined;

property key

key?: string | undefined;

property keyExtractor

keyExtractor?: ((item: ItemT, index: number) => string) | undefined;

property renderItem

renderItem?: SectionListRenderItem<ItemT, SectionT> | undefined;

interface SectionListProps

interface SectionListProps<ItemT, SectionT = DefaultSectionT>
    extends VirtualizedListWithoutPreConfiguredProps<ItemT> {}

property extraData

extraData?: any | undefined;

A marker property for telling the list to re-render (since it implements PureComponent). If any of your renderItem, Header, Footer, etc. functions depend on anything outside of the data prop, stick it here and treat it immutably.

property getItemLayout

getItemLayout?:
    | ((
          data: SectionListData<ItemT, SectionT>[] | null,
          index: number
      ) => { length: number; offset: number; index: number })
    | undefined;

getItemLayout is an optional optimization that lets us skip measurement of dynamic content if you know the height of items a priori. getItemLayout is the most efficient, and is easy to use if you have fixed height items, for example:
getItemLayout={(data, index) => ( {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index} )}

property initialNumToRender

initialNumToRender?: number | undefined;

How many items to render in the initial batch

property inverted

inverted?: boolean | null | undefined;

Reverses the direction of scroll. Uses scale transforms of -1.

property keyExtractor

keyExtractor?: ((item: ItemT, index: number) => string) | undefined;

Used to extract a unique key for a given item at the specified index. Key is used for caching and as the react key to track item re-ordering. The default extractor checks item.key, then falls back to using the index, like React does.

property legacyImplementation

legacyImplementation?: boolean | undefined;

Uses legacy MetroListView instead of default VirtualizedSectionList

property onEndReached

onEndReached?: ((info: { distanceFromEnd: number }) => void) | null | undefined;

Called once when the scroll position gets within onEndReachedThreshold of the rendered content.

property onEndReachedThreshold

onEndReachedThreshold?: number | null | undefined;

How far from the end (in units of visible length of the list) the bottom edge of the list must be from the end of the content to trigger the onEndReached callback. Thus a value of 0.5 will trigger onEndReached when the end of the content is within half the visible length of the list.

property onRefresh

onRefresh?: (() => void) | null | undefined;

If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make sure to also set the refreshing prop correctly.

property onScrollToIndexFailed

onScrollToIndexFailed?:
    | ((info: {
          index: number;
          highestMeasuredFrameIndex: number;
          averageItemLength: number;
      }) => void)
    | undefined;

Used to handle failures when scrolling to an index that has not been measured yet. Recommended action is to either compute your own offset and scrollTo it, or scroll as far as possible and then try again after more items have been rendered.

property refreshing

refreshing?: boolean | null | undefined;

Set this true while waiting for new data from a refresh.

property removeClippedSubviews

removeClippedSubviews?: boolean | undefined;

Note: may have bugs (missing content) in some circumstances - use at your own risk.
This may improve scroll performance for large lists.

property renderItem

renderItem?: SectionListRenderItem<ItemT, SectionT> | undefined;

Default renderer for every item in every section. Can be over-ridden on a per-section basis.

property renderScrollComponent

renderScrollComponent?:
    | ((props: ScrollViewProps) => React.ReactElement<ScrollViewProps>)
    | undefined;

Render a custom scroll component, e.g. with a differently styled RefreshControl.

property renderSectionFooter

renderSectionFooter?:
    | ((info: {
          section: SectionListData<ItemT, SectionT>;
      }) => React.ReactElement | null)
    | undefined;

Rendered at the bottom of each section.

property renderSectionHeader

renderSectionHeader?:
    | ((info: {
          section: SectionListData<ItemT, SectionT>;
      }) => React.ReactElement | null)
    | undefined;

Rendered at the top of each section. Sticky headers are not yet supported.

property sections

sections: ReadonlyArray<SectionListData<ItemT, SectionT>>;

An array of objects with data for each section.

property SectionSeparatorComponent

SectionSeparatorComponent?:
    | React.ComponentType<any>
    | React.ReactElement
    | null
    | undefined;

Rendered in between each section.

property stickySectionHeadersEnabled

stickySectionHeadersEnabled?: boolean | undefined;

Makes section headers stick to the top of the screen until the next one pushes it off. Only enabled by default on iOS because that is the platform standard there.

interface SectionListRenderItemInfo

interface SectionListRenderItemInfo<ItemT, SectionT = DefaultSectionT>
    extends ListRenderItemInfo<ItemT> {}

See Also
- https://reactnative.dev/docs/sectionlist.html#props

property section

section: SectionListData<ItemT, SectionT>;

interface SectionListScrollParams

interface SectionListScrollParams {}

property animated

animated?: boolean | undefined;

property itemIndex

itemIndex: number;

property sectionIndex

sectionIndex: number;

property viewOffset

viewOffset?: number | undefined;

property viewPosition

viewPosition?: number | undefined;

interface SectionListStatic

interface SectionListStatic<ItemT, SectionT = DefaultSectionT>
    extends React.ComponentClass<SectionListProps<ItemT, SectionT>> {}

method scrollToLocation

scrollToLocation: (params: SectionListScrollParams) => void;

Scrolls to the item at the specified sectionIndex and itemIndex (within the section) positioned in the viewable area such that viewPosition 0 places it at the top (and may be covered by a sticky header), 1 at the bottom, and 0.5 centered in the middle.

interface SettingsStatic

interface SettingsStatic {}

Copyright (c) Meta Platforms, Inc. and affiliates.
This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree.

method clearWatch

clearWatch: (watchId: number) => void;

method get

get: (key: string) => any;

method set

set: (settings: Object) => void;

method watchKeys

watchKeys: (keys: string | Array<string>, callback: () => void) => number;

interface ShadowStyleIOS

interface ShadowStyleIOS {}

property shadowColor

shadowColor?: ColorValue | undefined;

property shadowOffset

shadowOffset?: Readonly<{ width: number; height: number }> | undefined;

property shadowOpacity

shadowOpacity?: AnimatableNumericValue | undefined;

property shadowRadius

shadowRadius?: number | undefined;

interface ShareActionSheetIOSOptions

interface ShareActionSheetIOSOptions {}

property anchor

anchor?: number | undefined;

property excludedActivityTypes

excludedActivityTypes?: string[] | undefined;

The activities to exclude from the ActionSheet. For example: ['com.apple.UIKit.activity.PostToTwitter']

property message

message?: string | undefined;

property subject

subject?: string | undefined;

property url

url?: string | undefined;

interface ShareStatic

interface ShareStatic {}

property dismissedAction

dismissedAction: 'dismissedAction';

property sharedAction

sharedAction: 'sharedAction';

share: (content: ShareContent, options?: ShareOptions) => Promise<ShareAction>;

Open a dialog to share text content.
In iOS, Returns a Promise which will be invoked an object containing action, activityType. If the user dismissed the dialog, the Promise will still be resolved with action being Share.dismissedAction and all the other keys being undefined.
In Android, Returns a Promise which always resolves with action being Share.sharedAction.
### Content
#### iOS
- url - a URL to share - message - a message to share
At least one of URL or message is required.
#### Android
- title - title of the message (optional) - message - a message to share (often will include a URL).
### Options
#### iOS
- subject - a subject to share via email - excludedActivityTypes - tintColor
#### Android
- dialogTitle

interface SkewXTransform

interface SkewXTransform {}

property skewX

skewX: AnimatableStringValue;

interface SkewYTransform

interface SkewYTransform {}

property skewY

skewY: AnimatableStringValue;

interface StatusBarProps

interface StatusBarProps extends StatusBarPropsIOS, StatusBarPropsAndroid {}

property animated

animated?: boolean | undefined;

If the transition between status bar property changes should be animated. Supported for backgroundColor, barStyle and hidden.

property barStyle

barStyle?: null | StatusBarStyle | undefined;

Sets the color of the status bar text.

property hidden

hidden?: boolean | undefined;

If the status bar is hidden.

interface StatusBarPropsAndroid

interface StatusBarPropsAndroid {}

property backgroundColor

backgroundColor?: ColorValue | undefined;

The background color of the status bar.
android

property translucent

translucent?: boolean | undefined;

If the status bar is translucent. When translucent is set to true, the app will draw under the status bar. This is useful when using a semi transparent status bar color.
android

interface StatusBarPropsIOS

interface StatusBarPropsIOS {}

property networkActivityIndicatorVisible

networkActivityIndicatorVisible?: boolean | undefined;

If the network activity indicator should be visible.
ios

property showHideTransition

showHideTransition?: null | 'fade' | 'slide' | 'none' | undefined;

The transition effect when showing and hiding the status bar using the hidden prop. Defaults to 'fade'.
ios

interface StyleSheetProperties

interface StyleSheetProperties {}

property hairlineWidth

hairlineWidth: number;

method flatten

flatten: <T extends string>(style: T) => T;

interface SubscribableMixin

interface SubscribableMixin {}

method addListenerOn

addListenerOn: (
    eventEmitter: any,
    eventType: string,
    listener: () => any,
    context: any
) => void;

Special form of calling addListener that *guarantees* that a subscription *must* be tied to a component instance, and therefore will be cleaned up when the component is unmounted. It is impossible to create the subscription and pass it in - this method must be the one to create the subscription and therefore can guarantee it is retained in a way that will be cleaned up.
Parameter eventEmitter
emitter to subscribe to.
Parameter eventType
Type of event to listen to.
Parameter listener
Function to invoke when event occurs.
Parameter context
Object to use as listener context.

interface SwitchChangeEvent

interface SwitchChangeEvent extends NativeSyntheticEvent<SwitchChangeEventData> {}

interface SwitchChangeEventData

interface SwitchChangeEventData extends TargetedEvent {}

property value

value: boolean;

interface SwitchProps

interface SwitchProps extends SwitchPropsIOS {}

property disabled

disabled?: boolean | undefined;

If true the user won't be able to toggle the switch. Default value is false.

property ios_backgroundColor

ios_backgroundColor?: ColorValue | undefined;

On iOS, custom color for the background. Can be seen when the switch value is false or when the switch is disabled.

property onChange

onChange?:
    | ((event: SwitchChangeEvent) => Promise<void> | void)
    | null
    | undefined;

Invoked with the change event as an argument when the value changes.

property onValueChange

onValueChange?: ((value: boolean) => Promise<void> | void) | null | undefined;

Invoked with the new value when the value changes.

property style

style?: StyleProp<ViewStyle> | undefined;

property testID

testID?: string | undefined;

Used to locate this view in end-to-end tests.

property thumbColor

thumbColor?: ColorValue | undefined;

Color of the foreground switch grip.

property trackColor

trackColor?:
    | {
          false?: ColorValue | null | undefined;
          true?: ColorValue | null | undefined;
      }
    | undefined;

Custom colors for the switch track
Color when false and color when true

property value

value?: boolean | undefined;

The value of the switch. If true the switch will be turned on. Default value is false.

interface SwitchPropsIOS

interface SwitchPropsIOS extends ViewProps {}

property onTintColor

onTintColor?: ColorValue | undefined;

Background color when the switch is turned on.
Deprecated
use trackColor instead

property thumbTintColor

thumbTintColor?: ColorValue | undefined;

Color of the foreground switch grip.
Deprecated
use thumbColor instead

property tintColor

tintColor?: ColorValue | undefined;

Background color when the switch is turned off.
Deprecated
use trackColor instead

interface TargetedEvent

interface TargetedEvent {}

property target

target: number;

interface TextInputAndroidProps

interface TextInputAndroidProps {}

Android Specific properties for TextInput
See Also
- https://reactnative.dev/docs/textinput#props

property cursorColor

cursorColor?: ColorValue | null | undefined;

When provided it will set the color of the cursor (or "caret") in the component. Unlike the behavior of selectionColor the cursor color will be set independently from the color of the text selection box. android

property disableFullscreenUI

disableFullscreenUI?: boolean | undefined;

When false, if there is a small amount of space available around a text input (e.g. landscape orientation on a phone), the OS may choose to have the user edit the text inside of a full screen text input mode. When true, this feature is disabled and users will always edit the text directly inside of the text input. Defaults to false.

property importantForAutofill

importantForAutofill?:
    | 'auto'
    | 'no'
    | 'noExcludeDescendants'
    | 'yes'
    | 'yesExcludeDescendants'
    | undefined;

Determines whether the individual fields in your app should be included in a view structure for autofill purposes on Android API Level 26+. Defaults to auto. To disable auto complete, use off.
*Android Only*
The following values work on Android only:
- auto - let Android decide - no - not important for autofill - noExcludeDescendants - this view and its children aren't important for autofill - yes - is important for autofill - yesExcludeDescendants - this view is important for autofill but its children aren't

property inlineImageLeft

inlineImageLeft?: string | undefined;

If defined, the provided image resource will be rendered on the left.

property inlineImagePadding

inlineImagePadding?: number | undefined;

Padding between the inline image, if any, and the text input itself.

property numberOfLines

numberOfLines?: number | undefined;

Sets the number of lines for a TextInput. Use it with multiline set to true to be able to fill the lines.

property returnKeyLabel

returnKeyLabel?: string | undefined;

Sets the return key to the label. Use it instead of returnKeyType. android

property selectionHandleColor

selectionHandleColor?: ColorValue | null | undefined;

When provided it will set the color of the selection handles when highlighting text. Unlike the behavior of selectionColor the handle color will be set independently from the color of the text selection box. android

property showSoftInputOnFocus

showSoftInputOnFocus?: boolean | undefined;

When false, it will prevent the soft keyboard from showing when the field is focused. The default value is true

property textAlignVertical

textAlignVertical?: 'auto' | 'top' | 'bottom' | 'center' | undefined;

Vertically align text when multiline is set to true

property textBreakStrategy

textBreakStrategy?: 'simple' | 'highQuality' | 'balanced' | undefined;

Set text break strategy on Android API Level 23+, possible values are simple, highQuality, balanced The default value is simple.

property underlineColorAndroid

underlineColorAndroid?: ColorValue | undefined;

The color of the textInput underline.

property verticalAlign

verticalAlign?: 'auto' | 'top' | 'bottom' | 'middle' | undefined;

Vertically align text when multiline is set to true

interface TextInputChangeEventData

interface TextInputChangeEventData extends TargetedEvent {}

See Also
- TextInputProps.onChange

property eventCount

eventCount: number;

property text

text: string;

interface TextInputContentSizeChangeEventData

interface TextInputContentSizeChangeEventData {}

See Also
- TextInputProps.onContentSizeChange

property contentSize

contentSize: { width: number; height: number };

interface TextInputEndEditingEventData

interface TextInputEndEditingEventData {}

See Also
- TextInputProps.onEndEditing

property text

text: string;

interface TextInputFocusEventData

interface TextInputFocusEventData extends TargetedEvent {}

See Also
- TextInputProps.onFocus

property eventCount

eventCount: number;

property text

text: string;

interface TextInputIOSProps

interface TextInputIOSProps {}

IOS Specific properties for TextInput
See Also
- https://reactnative.dev/docs/textinput#props

property clearButtonMode

clearButtonMode?:
    | 'never'
    | 'while-editing'
    | 'unless-editing'
    | 'always'
    | undefined;

enum('never', 'while-editing', 'unless-editing', 'always') When the clear button should appear on the right side of the text view

property clearTextOnFocus

clearTextOnFocus?: boolean | undefined;

If true, clears the text field automatically when editing begins

property dataDetectorTypes

dataDetectorTypes?: DataDetectorTypes | DataDetectorTypes[] | undefined;

Determines the types of data converted to clickable URLs in the text input. Only valid if multiline={true} and editable={false}. By default no data types are detected.
You can provide one type or an array of many types.
Possible values for dataDetectorTypes are:
- 'phoneNumber' - 'link' - 'address' - 'calendarEvent' - 'none' - 'all'

property enablesReturnKeyAutomatically

enablesReturnKeyAutomatically?: boolean | undefined;

If true, the keyboard disables the return key when there is no text and automatically enables it when there is text. The default value is false.

property keyboardAppearance

keyboardAppearance?: 'default' | 'light' | 'dark' | undefined;

Determines the color of the keyboard.

property lineBreakModeIOS

lineBreakModeIOS?:
    | 'wordWrapping'
    | 'char'
    | 'clip'
    | 'head'
    | 'middle'
    | 'tail'
    | undefined;

Set line break mode on iOS. ios

property lineBreakStrategyIOS

lineBreakStrategyIOS?:
    | 'none'
    | 'standard'
    | 'hangul-word'
    | 'push-out'
    | undefined;

Set line break strategy on iOS.

property passwordRules

passwordRules?: string | null | undefined;

Provide rules for your password. For example, say you want to require a password with at least eight characters consisting of a mix of uppercase and lowercase letters, at least one number, and at most two consecutive characters. "required: upper; required: lower; required: digit; max-consecutive: 2; minlength: 8;"

property rejectResponderTermination

rejectResponderTermination?: boolean | null | undefined;

If true, allows TextInput to pass touch events to the parent component. This allows components to be swipeable from the TextInput on iOS, as is the case on Android by default. If false, TextInput always asks to handle the input (except when disabled).

property scrollEnabled

scrollEnabled?: boolean | undefined;

If false, scrolling of the text view will be disabled. The default value is true. Only works with multiline={true}

property selectionState

selectionState?: DocumentSelectionState | undefined;

See DocumentSelectionState.js, some state that is responsible for maintaining selection information for a document

property smartInsertDelete

smartInsertDelete?: boolean | undefined;

If false, the iOS system will not insert an extra space after a paste operation neither delete one or two spaces after a cut or delete operation.
The default value is true.

property spellCheck

spellCheck?: boolean | undefined;

If false, disables spell-check style (i.e. red underlines). The default value is inherited from autoCorrect

property textContentType

textContentType?:
    | 'none'
    | 'URL'
    | 'addressCity'
    | 'addressCityAndState'
    | 'addressState'
    | 'countryName'
    | 'creditCardNumber'
    | 'creditCardExpiration'
    | 'creditCardExpirationMonth'
    | 'creditCardExpirationYear'
    | 'creditCardSecurityCode'
    | 'creditCardType'
    | 'creditCardName'
    | 'creditCardGivenName'
    | 'creditCardMiddleName'
    | 'creditCardFamilyName'
    | 'emailAddress'
    | 'familyName'
    | 'fullStreetAddress'
    | 'givenName'
    | 'jobTitle'
    | 'location'
    | 'middleName'
    | 'name'
    | 'namePrefix'
    | 'nameSuffix'
    | 'nickname'
    | 'organizationName'
    | 'postalCode'
    | 'streetAddressLine1'
    | 'streetAddressLine2'
    | 'sublocality'
    | 'telephoneNumber'
    | 'username'
    | 'password'
    | 'newPassword'
    | 'oneTimeCode'
    | 'birthdate'
    | 'birthdateDay'
    | 'birthdateMonth'
    | 'birthdateYear'
    | 'cellularEID'
    | 'cellularIMEI'
    | 'dateTime'
    | 'flightNumber'
    | 'shipmentTrackingNumber'
    | undefined;

Give the keyboard and the system information about the expected semantic meaning for the content that users enter.
To disable autofill, set textContentType to none.
Possible values for textContentType are:
- 'none' - 'URL' - 'addressCity' - 'addressCityAndState' - 'addressState' - 'countryName' - 'creditCardNumber' - 'creditCardExpiration' (iOS 17+) - 'creditCardExpirationMonth' (iOS 17+) - 'creditCardExpirationYear' (iOS 17+) - 'creditCardSecurityCode' (iOS 17+) - 'creditCardType' (iOS 17+) - 'creditCardName' (iOS 17+) - 'creditCardGivenName' (iOS 17+) - 'creditCardMiddleName' (iOS 17+) - 'creditCardFamilyName' (iOS 17+) - 'emailAddress' - 'familyName' - 'fullStreetAddress' - 'givenName' - 'jobTitle' - 'location' - 'middleName' - 'name' - 'namePrefix' - 'nameSuffix' - 'nickname' - 'organizationName' - 'postalCode' - 'streetAddressLine1' - 'streetAddressLine2' - 'sublocality' - 'telephoneNumber' - 'username' - 'password' - 'newPassword' - 'oneTimeCode' - 'birthdate' (iOS 17+) - 'birthdateDay' (iOS 17+) - 'birthdateMonth' (iOS 17+) - 'birthdateYear' (iOS 17+) - 'cellularEID' (iOS 17.4+) - 'cellularIMEI' (iOS 17.4+) - 'dateTime' (iOS 15+) - 'flightNumber' (iOS 15+) - 'shipmentTrackingNumber' (iOS 15+)

interface TextInputKeyPressEventData

interface TextInputKeyPressEventData {}

See Also
- TextInputProps.onKeyPress

property key

key: string;

interface TextInputProps

interface TextInputProps
    extends ViewProps,
        TextInputIOSProps,
        TextInputAndroidProps,
        AccessibilityProps {}

See Also
- https://reactnative.dev/docs/textinput#props

property allowFontScaling

allowFontScaling?: boolean | undefined;

Specifies whether fonts should scale to respect Text Size accessibility settings. The default is true.

property autoCapitalize

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

Can tell TextInput to automatically capitalize certain characters. characters: all characters, words: first letter of each word sentences: first letter of each sentence (default) none: don't auto capitalize anything
https://reactnative.dev/docs/textinput#autocapitalize

property autoComplete

autoComplete?:
    | 'additional-name'
    | 'address-line1'
    | 'address-line2'
    | 'birthdate-day'
    | 'birthdate-full'
    | 'birthdate-month'
    | 'birthdate-year'
    | 'cc-csc'
    | 'cc-exp'
    | 'cc-exp-day'
    | 'cc-exp-month'
    | 'cc-exp-year'
    | 'cc-number'
    | 'cc-name'
    | 'cc-given-name'
    | 'cc-middle-name'
    | 'cc-family-name'
    | 'cc-type'
    | 'country'
    | 'current-password'
    | 'email'
    | 'family-name'
    | 'gender'
    | 'given-name'
    | 'honorific-prefix'
    | 'honorific-suffix'
    | 'name'
    | 'name-family'
    | 'name-given'
    | 'name-middle'
    | 'name-middle-initial'
    | 'name-prefix'
    | 'name-suffix'
    | 'new-password'
    | 'nickname'
    | 'one-time-code'
    | 'organization'
    | 'organization-title'
    | 'password'
    | 'password-new'
    | 'postal-address'
    | 'postal-address-country'
    | 'postal-address-extended'
    | 'postal-address-extended-postal-code'
    | 'postal-address-locality'
    | 'postal-address-region'
    | 'postal-code'
    | 'street-address'
    | 'sms-otp'
    | 'tel'
    | 'tel-country-code'
    | 'tel-national'
    | 'tel-device'
    | 'url'
    | 'username'
    | 'username-new'
    | 'off'
    | undefined;

Specifies autocomplete hints for the system, so it can provide autofill. On Android, the system will always attempt to offer autofill by using heuristics to identify the type of content. To disable autocomplete, set autoComplete to off.
The following values work across platforms:
- additional-name - address-line1 - address-line2 - cc-number - country - current-password - email - family-name - given-name - honorific-prefix - honorific-suffix - name - new-password - off - one-time-code - postal-code - street-address - tel - username
The following values work on iOS only:
- nickname - organization - organization-title - url
The following values work on Android only:
- birthdate-day - birthdate-full - birthdate-month - birthdate-year - cc-csc - cc-exp - cc-exp-day - cc-exp-month - cc-exp-year - gender - name-family - name-given - name-middle - name-middle-initial - name-prefix - name-suffix - password - password-new - postal-address - postal-address-country - postal-address-extended - postal-address-extended-postal-code - postal-address-locality - postal-address-region - sms-otp - tel-country-code - tel-national - tel-device - username-new

property autoCorrect

autoCorrect?: boolean | undefined;

If false, disables auto-correct. The default value is true.

property autoFocus

autoFocus?: boolean | undefined;

If true, focuses the input on componentDidMount. The default value is false.

property blurOnSubmit

blurOnSubmit?: boolean | undefined;

If true, the text field will blur when submitted. The default value is true for single-line fields and false for multiline fields. Note that for multiline fields, setting blurOnSubmit to true means that pressing return will blur the field and trigger the onSubmitEditing event instead of inserting a newline into the field.
See Also
- submitBehavior
Deprecated
Note that submitBehavior now takes the place of blurOnSubmit and will override any behavior defined by blurOnSubmit.

property caretHidden

caretHidden?: boolean | undefined;

If true, caret is hidden. The default value is false.

property contextMenuHidden

contextMenuHidden?: boolean | undefined;

If true, context menu is hidden. The default value is false.

property defaultValue

defaultValue?: string | undefined;

Provides an initial value that will change when the user starts typing. Useful for simple use-cases where you don't want to deal with listening to events and updating the value prop to keep the controlled state in sync.

property editable

editable?: boolean | undefined;

If false, text is not editable. The default value is true.

property enterKeyHint

enterKeyHint?: EnterKeyHintTypeOptions | undefined;

Determines what text should be shown to the return key on virtual keyboards. Has precedence over the returnKeyType prop.

property inputAccessoryViewID

inputAccessoryViewID?: string | undefined;

Used to connect to an InputAccessoryView. Not part of react-natives documentation, but present in examples and code. See https://reactnative.dev/docs/inputaccessoryview for more information.

property inputMode

inputMode?: InputModeOptions | undefined;

Works like the inputmode attribute in HTML, it determines which keyboard to open, e.g. numeric and has precedence over keyboardType.

property keyboardType

keyboardType?: KeyboardTypeOptions | undefined;

enum("default", 'numeric', 'email-address', "ascii-capable", 'numbers-and-punctuation', 'url', 'number-pad', 'phone-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search', 'visible-password') Determines which keyboard to open, e.g.numeric. The following values work across platforms: - default - numeric - email-address - phone-pad The following values work on iOS: - ascii-capable - numbers-and-punctuation - url - number-pad - name-phone-pad - decimal-pad - twitter - web-search The following values work on Android: - visible-password

property maxFontSizeMultiplier

maxFontSizeMultiplier?: number | null | undefined;

Specifies largest possible scale a font can reach when allowFontScaling is enabled. Possible values: - null/undefined (default): inherit from the parent node or the global default (0) - 0: no max, ignore parent/global default - >= 1: sets the maxFontSizeMultiplier of this node to this value

property maxLength

maxLength?: number | undefined;

Limits the maximum number of characters that can be entered. Use this instead of implementing the logic in JS to avoid flicker.

property multiline

multiline?: boolean | undefined;

If true, the text input can be multiple lines. The default value is false.

property onBlur

onBlur?:
    | ((e: NativeSyntheticEvent<TextInputFocusEventData>) => void)
    | undefined;

Callback that is called when the text input is blurred

property onChange

onChange?:
    | ((e: NativeSyntheticEvent<TextInputChangeEventData>) => void)
    | undefined;

Callback that is called when the text input's text changes.

property onChangeText

onChangeText?: ((text: string) => void) | undefined;

Callback that is called when the text input's text changes. Changed text is passed as an argument to the callback handler.

property onContentSizeChange

onContentSizeChange?:
    | ((e: NativeSyntheticEvent<TextInputContentSizeChangeEventData>) => void)
    | undefined;

Callback that is called when the text input's content size changes. This will be called with { nativeEvent: { contentSize: { width, height } } }.
Only called for multiline text inputs.

property onEndEditing

onEndEditing?:
    | ((e: NativeSyntheticEvent<TextInputEndEditingEventData>) => void)
    | undefined;

Callback that is called when text input ends.

property onFocus

onFocus?:
    | ((e: NativeSyntheticEvent<TextInputFocusEventData>) => void)
    | undefined;

Callback that is called when the text input is focused

property onKeyPress

onKeyPress?:
    | ((e: NativeSyntheticEvent<TextInputKeyPressEventData>) => void)
    | undefined;

Callback that is called when a key is pressed. This will be called with { nativeEvent: { key: keyValue } } where keyValue is 'Enter' or 'Backspace' for respective keys and the typed-in character otherwise including ' ' for space.
Fires before onChange callbacks. Note: on Android only the inputs from soft keyboard are handled, not the hardware keyboard inputs.

property onPress

onPress?: ((e: NativeSyntheticEvent<NativeTouchEvent>) => void) | undefined;

Called when a single tap gesture is detected.

property onPressIn

onPressIn?: ((e: NativeSyntheticEvent<NativeTouchEvent>) => void) | undefined;

Callback that is called when a touch is engaged.

property onPressOut

onPressOut?: ((e: NativeSyntheticEvent<NativeTouchEvent>) => void) | undefined;

Callback that is called when a touch is released.

property onScroll

onScroll?:
    | ((e: NativeSyntheticEvent<TextInputScrollEventData>) => void)
    | undefined;

Invoked on content scroll with { nativeEvent: { contentOffset: { x, y } } }.
May also contain other properties from ScrollEvent but on Android contentSize is not provided for performance reasons.

property onSelectionChange

onSelectionChange?:
    | ((e: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => void)
    | undefined;

Callback that is called when the text input selection is changed.

property onSubmitEditing

onSubmitEditing?:
    | ((e: NativeSyntheticEvent<TextInputSubmitEditingEventData>) => void)
    | undefined;

Callback that is called when the text input's submit button is pressed.

property placeholder

placeholder?: string | undefined;

The string that will be rendered before text input has been entered

property placeholderTextColor

placeholderTextColor?: ColorValue | undefined;

The text color of the placeholder string

property readOnly

readOnly?: boolean | undefined;

If true, text is not editable. The default value is false.

property returnKeyType

returnKeyType?: ReturnKeyTypeOptions | undefined;

enum('default', 'go', 'google', 'join', 'next', 'route', 'search', 'send', 'yahoo', 'done', 'emergency-call') Determines how the return key should look.

property secureTextEntry

secureTextEntry?: boolean | undefined;

If true, the text input obscures the text entered so that sensitive text like passwords stay secure. The default value is false.

property selection

selection?: { start: number; end?: number | undefined } | undefined;

The start and end of the text input's selection. Set start and end to the same value to position the cursor.

property selectionColor

selectionColor?: ColorValue | undefined;

The highlight (and cursor on ios) color of the text input

property selectTextOnFocus

selectTextOnFocus?: boolean | undefined;

If true, all text will automatically be selected on focus

property style

style?: StyleProp<TextStyle> | undefined;

Styles

property submitBehavior

submitBehavior?: SubmitBehavior | undefined;

When the return key is pressed,
For single line inputs:
- 'newline' defaults to 'blurAndSubmit' - undefined defaults to 'blurAndSubmit'
For multiline inputs:
- 'newline' adds a newline - undefined defaults to 'newline'
For both single line and multiline inputs:
- 'submit' will only send a submit event and not blur the input - 'blurAndSubmit' will both blur the input and send a submit event

property testID

testID?: string | undefined;

Used to locate this view in end-to-end tests

property textAlign

textAlign?: 'left' | 'center' | 'right' | undefined;

Align the input text to the left, center, or right sides of the input field.

property value

value?: string | undefined;

The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to simply setting the same value, either set editable={false}, or set/update maxLength to prevent unwanted edits without flicker.

interface TextInputScrollEventData

interface TextInputScrollEventData {}

See Also
- TextInputProps.onScroll

property contentOffset

contentOffset: { x: number; y: number };

interface TextInputSelectionChangeEventData

interface TextInputSelectionChangeEventData extends TargetedEvent {}

See Also
- TextInputProps.onSelectionChange

property selection

selection: {
    start: number;
    end: number;
};

interface TextInputState

interface TextInputState {}

This class is responsible for coordinating the "focused" state for TextInputs. All calls relating to the keyboard should be funneled through here

method blurTextInput

blurTextInput: (textField?: HostInstance) => void;

Parameter textField
ref of the text field to focus Unfocuses the specified text field noop if it wasn't focused

method currentlyFocusedField

currentlyFocusedField: () => number;

Deprecated
Use currentlyFocusedInput Returns the ID of the currently focused text field, if one exists If no text field is focused it returns null

method currentlyFocusedInput

currentlyFocusedInput: () => HostInstance;

Returns the ref of the currently focused text field, if one exists If no text field is focused it returns null

method focusTextInput

focusTextInput: (textField?: HostInstance) => void;

Parameter textField
ref of the text field to focus Focuses the specified text field noop if the text field was already focused

interface TextInputSubmitEditingEventData

interface TextInputSubmitEditingEventData {}

See Also
- TextInputProps.onSubmitEditing

property text

text: string;

interface TextLayoutEventData

interface TextLayoutEventData extends TargetedEvent {}

See Also
- TextProps.onTextLayout

property lines

lines: TextLayoutLine[];

interface TextLayoutLine

interface TextLayoutLine {}

property ascender

ascender: number;

property capHeight

capHeight: number;

property descender

descender: number;

property height

height: number;

property text

text: string;

property width

width: number;

property x

x: number;

property xHeight

xHeight: number;

property y

y: number;

interface TextProps

interface TextProps extends TextPropsIOS, TextPropsAndroid, AccessibilityProps {}

property allowFontScaling

allowFontScaling?: boolean | undefined;

Specifies whether fonts should scale to respect Text Size accessibility settings. The default is true.

property children

children?: React.ReactNode | undefined;

property ellipsizeMode

ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip' | undefined;

This can be one of the following values:
- head - The line is displayed so that the end fits in the container and the missing text at the beginning of the line is indicated by an ellipsis glyph. e.g., "...wxyz" - middle - The line is displayed so that the beginning and end fit in the container and the missing text in the middle is indicated by an ellipsis glyph. "ab...yz" - tail - The line is displayed so that the beginning fits in the container and the missing text at the end of the line is indicated by an ellipsis glyph. e.g., "abcd..." - clip - Lines are not drawn past the edge of the text container.
The default is tail.
numberOfLines must be set in conjunction with this prop.
> clip is working only for iOS

property id

id?: string | undefined;

Used to reference react managed views from native code.

property lineBreakMode

lineBreakMode?: 'head' | 'middle' | 'tail' | 'clip' | undefined;

Line Break mode. Works only with numberOfLines. clip is working only for iOS

property maxFontSizeMultiplier

maxFontSizeMultiplier?: number | null | undefined;

Specifies largest possible scale a font can reach when allowFontScaling is enabled. Possible values: - null/undefined (default): inherit from the parent node or the global default (0) - 0: no max, ignore parent/global default - >= 1: sets the maxFontSizeMultiplier of this node to this value

property minimumFontScale

minimumFontScale?: number | undefined;

Specifies smallest possible scale a font can reach when adjustsFontSizeToFit is enabled. (values 0.01-1.0).

property nativeID

nativeID?: string | undefined;

Used to reference react managed views from native code.

property numberOfLines

numberOfLines?: number | undefined;

Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number.
This prop is commonly used with ellipsizeMode.

property onLayout

onLayout?: ((event: LayoutChangeEvent) => void) | undefined;

Invoked on mount and layout changes with
{nativeEvent: { layout: {x, y, width, height}}}.

property onLongPress

onLongPress?: ((event: GestureResponderEvent) => void) | undefined;

This function is called on long press. e.g., onLongPress={this.increaseSize}>`

property onPress

onPress?: ((event: GestureResponderEvent) => void) | undefined;

This function is called on press. Text intrinsically supports press handling with a default highlight state (which can be disabled with suppressHighlighting).

property onPressIn

onPressIn?: ((event: GestureResponderEvent) => void) | undefined;

property onPressOut

onPressOut?: ((event: GestureResponderEvent) => void) | undefined;

property onTextLayout

onTextLayout?:
    | ((event: NativeSyntheticEvent<TextLayoutEventData>) => void)
    | undefined;

Invoked on Text layout

property style

style?: StyleProp<TextStyle> | undefined;

See Also
- https://reactnative.dev/docs/text#style

property testID

testID?: string | undefined;

Used to locate this view in end-to-end tests.

interface TextPropsAndroid

interface TextPropsAndroid {}

property android_hyphenationFrequency

android_hyphenationFrequency?: 'normal' | 'none' | 'full' | undefined;

Hyphenation strategy

property dataDetectorType

dataDetectorType?:
    | null
    | 'phoneNumber'
    | 'link'
    | 'email'
    | 'none'
    | 'all'
    | undefined;

Determines the types of data converted to clickable URLs in the text element. By default no data types are detected.

property disabled

disabled?: boolean | undefined;

Specifies the disabled state of the text view for testing purposes.

property selectable

selectable?: boolean | undefined;

Lets the user select text, to use the native copy and paste functionality.

property selectionColor

selectionColor?: ColorValue | undefined;

The highlight color of the text.

property textBreakStrategy

textBreakStrategy?: 'simple' | 'highQuality' | 'balanced' | undefined;

Set text break strategy on Android API Level 23+ default is highQuality.

interface TextPropsIOS

interface TextPropsIOS {}

property adjustsFontSizeToFit

adjustsFontSizeToFit?: boolean | undefined;

Specifies whether font should be scaled down automatically to fit given style constraints.

property dynamicTypeRamp

dynamicTypeRamp?:
    | 'caption2'
    | 'caption1'
    | 'footnote'
    | 'subheadline'
    | 'callout'
    | 'body'
    | 'headline'
    | 'title3'
    | 'title2'
    | 'title1'
    | 'largeTitle'
    | undefined;

The Dynamic Type scale ramp to apply to this element on iOS.

property lineBreakStrategyIOS

lineBreakStrategyIOS?:
    | 'none'
    | 'standard'
    | 'hangul-word'
    | 'push-out'
    | undefined;

Set line break strategy on iOS.

property suppressHighlighting

suppressHighlighting?: boolean | undefined;

When true, no visual change is made when text is pressed down. By default, a gray oval highlights the text on press down.

interface TextStyle

interface TextStyle extends TextStyleIOS, TextStyleAndroid, ViewStyle {}

property color

color?: ColorValue | undefined;

property fontFamily

fontFamily?: string | undefined;

property fontSize

fontSize?: number | undefined;

property fontStyle

fontStyle?: 'normal' | 'italic' | undefined;

property fontWeight

fontWeight?:
    | 'normal'
    | 'bold'
    | '100'
    | '200'
    | '300'
    | '400'
    | '500'
    | '600'
    | '700'
    | '800'
    | '900'
    | 100
    | 200
    | 300
    | 400
    | 500
    | 600
    | 700
    | 800
    | 900
    | 'ultralight'
    | 'thin'
    | 'light'
    | 'medium'
    | 'regular'
    | 'semibold'
    | 'condensedBold'
    | 'condensed'
    | 'heavy'
    | 'black'
    | undefined;

Specifies font weight. The values 'normal' and 'bold' are supported for most fonts. Not all fonts have a variant for each of the numeric values, in that case the closest one is chosen.

property letterSpacing

letterSpacing?: number | undefined;

property lineHeight

lineHeight?: number | undefined;

property textAlign

textAlign?: 'auto' | 'left' | 'right' | 'center' | 'justify' | undefined;

property textDecorationColor

textDecorationColor?: ColorValue | undefined;

property textDecorationLine

textDecorationLine?:
    | 'none'
    | 'underline'
    | 'line-through'
    | 'underline line-through'
    | undefined;

property textDecorationStyle

textDecorationStyle?: 'solid' | 'double' | 'dotted' | 'dashed' | undefined;

property textShadowColor

textShadowColor?: ColorValue | undefined;

property textShadowOffset

textShadowOffset?: { width: number; height: number } | undefined;

property textShadowRadius

textShadowRadius?: number | undefined;

property textTransform

textTransform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase' | undefined;

property userSelect

userSelect?: 'auto' | 'none' | 'text' | 'contain' | 'all' | undefined;

interface TextStyleAndroid

interface TextStyleAndroid extends ViewStyle {}

property includeFontPadding

includeFontPadding?: boolean | undefined;

property textAlignVertical

textAlignVertical?: 'auto' | 'top' | 'bottom' | 'center' | undefined;

property verticalAlign

verticalAlign?: 'auto' | 'top' | 'bottom' | 'middle' | undefined;

interface TextStyleIOS

interface TextStyleIOS extends ViewStyle {}

property fontVariant

fontVariant?: FontVariant[] | undefined;

property textDecorationColor

textDecorationColor?: ColorValue | undefined;

property textDecorationStyle

textDecorationStyle?: 'solid' | 'double' | 'dotted' | 'dashed' | undefined;

property writingDirection

writingDirection?: 'auto' | 'ltr' | 'rtl' | undefined;

interface ThemeAttributeBackgroundPropType

interface ThemeAttributeBackgroundPropType extends BaseBackgroundPropType {}

property attribute

attribute: string;

property type

type: 'ThemeAttrAndroid';

interface ToastAndroidStatic

interface ToastAndroidStatic {}

This exposes the native ToastAndroid module as a JS module. This has a function 'show' which takes the following parameters:
1. String message: A string with the text to toast 2. int duration: The duration of the toast. May be ToastAndroid.SHORT or ToastAndroid.LONG
There is also a function showWithGravity to specify the layout gravity. May be ToastAndroid.TOP, ToastAndroid.BOTTOM, ToastAndroid.CENTER

property BOTTOM

BOTTOM: number;

property CENTER

CENTER: number;

property LONG

LONG: number;

property SHORT

SHORT: number;

property TOP

TOP: number;

method show

show: (message: string, duration: number) => void;

String message: A string with the text to toast int duration: The duration of the toast. May be ToastAndroid.SHORT or ToastAndroid.LONG

method showWithGravity

showWithGravity: (message: string, duration: number, gravity: number) => void;

gravity may be ToastAndroid.TOP, ToastAndroid.BOTTOM, ToastAndroid.CENTER

method showWithGravityAndOffset

showWithGravityAndOffset: (
    message: string,
    duration: number,
    gravity: number,
    xOffset: number,
    yOffset: number
) => void;

interface Touchable

interface Touchable {}

//FIXME: need to find documentation on which component is a TTouchable and can implement that interface
See Also
- React.DOMAttributes

property onTouchCancel

onTouchCancel?: ((event: GestureResponderEvent) => void) | undefined;

property onTouchEnd

onTouchEnd?: ((event: GestureResponderEvent) => void) | undefined;

property onTouchEndCapture

onTouchEndCapture?: ((event: GestureResponderEvent) => void) | undefined;

property onTouchMove

onTouchMove?: ((event: GestureResponderEvent) => void) | undefined;

property onTouchStart

onTouchStart?: ((event: GestureResponderEvent) => void) | undefined;

interface TouchableHighlightProps

interface TouchableHighlightProps extends TouchableWithoutFeedbackProps {}

See Also
- https://reactnative.dev/docs/touchablehighlight#props

property activeOpacity

activeOpacity?: number | undefined;

Determines what the opacity of the wrapped view should be when touch is active.

property onHideUnderlay

onHideUnderlay?: (() => void) | undefined;

Called immediately after the underlay is hidden

property onShowUnderlay

onShowUnderlay?: (() => void) | undefined;

Called immediately after the underlay is shown

property style

style?: StyleProp<ViewStyle> | undefined;

See Also
- https://reactnative.dev/docs/view#style

property underlayColor

underlayColor?: ColorValue | undefined;

The color of the underlay that will show through when the touch is active.

interface TouchableMixin

interface TouchableMixin {}

See Also
- https://github.com/facebook/react-native/blob/0.34-stable\Libraries\Components\Touchable\Touchable.js

method touchableGetHighlightDelayMS

touchableGetHighlightDelayMS: () => number;

Returns the number of millis to wait before triggering a highlight.

method touchableGetHitSlop

touchableGetHitSlop: () => Insets;

method touchableGetLongPressDelayMS

touchableGetLongPressDelayMS: () => number;

method touchableGetPressOutDelayMS

touchableGetPressOutDelayMS: () => number;

method touchableGetPressRectOffset

touchableGetPressRectOffset: () => Insets;

Returns the amount to extend the HitRect into the PressRect. Positive numbers mean the size expands outwards.

method touchableHandleActivePressIn

touchableHandleActivePressIn: (e: GestureResponderEvent) => void;

Invoked when the item should be highlighted. Mixers should implement this to visually distinguish the VisualRect so that the user knows that releasing a touch will result in a "selection" (analog to click).

method touchableHandleActivePressOut

touchableHandleActivePressOut: (e: GestureResponderEvent) => void;

Invoked when the item is "active" (in that it is still eligible to become a "select") but the touch has left the PressRect. Usually the mixer will want to unhighlight the VisualRect. If the user (while pressing) moves back into the PressRect touchableHandleActivePressIn will be invoked again and the mixer should probably highlight the VisualRect again. This event will not fire on an touchEnd/mouseUp event, only move events while the user is depressing the mouse/touch.

method touchableHandleLongPress

touchableHandleLongPress: (e: GestureResponderEvent) => void;

Invoked when the item is long pressed - meaning the interaction ended by letting up while the item was in RESPONDER_ACTIVE_LONG_PRESS_IN. If touchableHandleLongPress is *not* provided, touchableHandlePress will be called as it normally is. If touchableHandleLongPress is provided, by default any touchableHandlePress callback will not be invoked. To override this default behavior, override touchableLongPressCancelsPress to return false. As a result, touchableHandlePress will be called when lifting up, even if touchableHandleLongPress has also been called.

method touchableHandlePress

touchableHandlePress: (e: GestureResponderEvent) => void;

Invoked when the item is "selected" - meaning the interaction ended by letting up while the item was either in the state RESPONDER_ACTIVE_PRESS_IN or RESPONDER_INACTIVE_PRESS_IN.

interface TouchableNativeFeedbackProps

interface TouchableNativeFeedbackProps
    extends TouchableWithoutFeedbackProps,
        TVProps {}

See Also
- https://reactnative.dev/docs/touchablenativefeedback#props

property background

background?: BackgroundPropType | undefined;

Determines the type of background drawable that's going to be used to display feedback. It takes an object with type property and extra data depending on the type. It's recommended to use one of the following static methods to generate that dictionary: 1) TouchableNativeFeedback.SelectableBackground() - will create object that represents android theme's default background for selectable elements (?android:attr/selectableItemBackground) 2) TouchableNativeFeedback.SelectableBackgroundBorderless() - will create object that represent android theme's default background for borderless selectable elements (?android:attr/selectableItemBackgroundBorderless). Available on android API level 21+ 3) TouchableNativeFeedback.Ripple(color, borderless) - will create object that represents ripple drawable with specified color (as a string). If property borderless evaluates to true the ripple will render outside of the view bounds (see native actionbar buttons as an example of that behavior). This background type is available on Android API level 21+

property useForeground

useForeground?: boolean | undefined;

interface TouchableOpacityProps

interface TouchableOpacityProps extends TouchableWithoutFeedbackProps, TVProps {}

See Also
- https://reactnative.dev/docs/touchableopacity#props

property activeOpacity

activeOpacity?: number | undefined;

Determines what the opacity of the wrapped view should be when touch is active. Defaults to 0.2

interface TouchableWithoutFeedbackProps

interface TouchableWithoutFeedbackProps
    extends TouchableWithoutFeedbackPropsIOS,
        TouchableWithoutFeedbackPropsAndroid,
        AccessibilityProps {}

See Also
- https://reactnative.dev/docs/touchablewithoutfeedback#props

property children

children?: React.ReactNode | undefined;

property delayLongPress

delayLongPress?: number | undefined;

Delay in ms, from onPressIn, before onLongPress is called.

property delayPressIn

delayPressIn?: number | undefined;

Delay in ms, from the start of the touch, before onPressIn is called.

property delayPressOut

delayPressOut?: number | undefined;

Delay in ms, from the release of the touch, before onPressOut is called.

property disabled

disabled?: boolean | undefined;

If true, disable all interactions for this component.

property focusable

focusable?: boolean | undefined;

Whether this View should be focusable with a non-touch input device, eg. receive focus with a hardware keyboard / TV remote.

property hitSlop

hitSlop?: null | Insets | number | undefined;

This defines how far your touch can start away from the button. This is added to pressRetentionOffset when moving off of the button. NOTE The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views.

property id

id?: string | undefined;

Used to reference react managed views from native code.

property onBlur

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

When accessible is true (which is the default) this may be called when the OS-specific concept of "blur" occurs, meaning the element lost focus. Some platforms may not have the concept of blur.

property onFocus

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

When accessible is true (which is the default) this may be called when the OS-specific concept of "focus" occurs. Some platforms may not have the concept of focus.

property onLayout

onLayout?: ((event: LayoutChangeEvent) => void) | undefined;

Invoked on mount and layout changes with {nativeEvent: {layout: {x, y, width, height}}}

property onLongPress

onLongPress?: ((event: GestureResponderEvent) => void) | undefined;

property onPress

onPress?: ((event: GestureResponderEvent) => void) | undefined;

Called when the touch is released, but not if cancelled (e.g. by a scroll that steals the responder lock).

property onPressIn

onPressIn?: ((event: GestureResponderEvent) => void) | undefined;

property onPressOut

onPressOut?: ((event: GestureResponderEvent) => void) | undefined;

property pressRetentionOffset

pressRetentionOffset?: null | Insets | number | undefined;

When the scroll view is disabled, this defines how far your touch may move off of the button, before deactivating the button. Once deactivated, try moving it back and you'll see that the button is once again reactivated! Move it back and forth several times while the scroll view is disabled. Ensure you pass in a constant to reduce memory allocations.

property rejectResponderTermination

rejectResponderTermination?: boolean | undefined;

property style

style?: StyleProp<ViewStyle> | undefined;

//FIXME: not in doc but available in examples

property testID

testID?: string | undefined;

Used to locate this view in end-to-end tests.

interface TouchableWithoutFeedbackPropsAndroid

interface TouchableWithoutFeedbackPropsAndroid {}

property touchSoundDisabled

touchSoundDisabled?: boolean | undefined;

If true, doesn't play a system sound on touch.
android

interface TouchableWithoutFeedbackPropsIOS

interface TouchableWithoutFeedbackPropsIOS {}

interface TransformsStyle

interface TransformsStyle {}

property rotation

rotation?: AnimatableNumericValue | undefined;

Deprecated
Use rotate in transform prop instead.

property scaleX

scaleX?: AnimatableNumericValue | undefined;

Deprecated
Use scaleX in transform prop instead.

property scaleY

scaleY?: AnimatableNumericValue | undefined;

Deprecated
Use scaleY in transform prop instead.

property transform

transform?:
    | Readonly<
          MaximumOneOf<
              PerspectiveTransform &
                  RotateTransform &
                  RotateXTransform &
                  RotateYTransform &
                  RotateZTransform &
                  ScaleTransform &
                  ScaleXTransform &
                  ScaleYTransform &
                  TranslateXTransform &
                  TranslateYTransform &
                  SkewXTransform &
                  SkewYTransform &
                  MatrixTransform
          >[]
      >
    | string
    | undefined;

property transformMatrix

transformMatrix?: Array<number> | undefined;

Deprecated
Use matrix in transform prop instead.

property transformOrigin

transformOrigin?: Array<string | number> | string | undefined;

property translateX

translateX?: AnimatableNumericValue | undefined;

Deprecated
Use translateX in transform prop instead.

property translateY

translateY?: AnimatableNumericValue | undefined;

Deprecated
Use translateY in transform prop instead.

interface TranslateXTransform

interface TranslateXTransform {}

property translateX

translateX: AnimatableNumericValue | `${number}%`;

interface TranslateYTransform

interface TranslateYTransform {}

property translateY

translateY: AnimatableNumericValue | `${number}%`;

interface TurboModule

interface TurboModule {}

Copyright (c) Meta Platforms, Inc. and affiliates.
This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree.

method getConstants

getConstants: () => {};

interface TVProps

interface TVProps {}

property hasTVPreferredFocus

hasTVPreferredFocus?: boolean | undefined;

*(Apple TV only)* TV preferred focus (see documentation for the View component).
ios

property nextFocusDown

nextFocusDown?: number | undefined;

Designates the next view to receive focus when the user navigates down. See the Android documentation.
android

property nextFocusForward

nextFocusForward?: number | undefined;

Designates the next view to receive focus when the user navigates forward. See the Android documentation.
android

property nextFocusLeft

nextFocusLeft?: number | undefined;

Designates the next view to receive focus when the user navigates left. See the Android documentation.
android

property nextFocusRight

nextFocusRight?: number | undefined;

Designates the next view to receive focus when the user navigates right. See the Android documentation.
android

property nextFocusUp

nextFocusUp?: number | undefined;

Designates the next view to receive focus when the user navigates up. See the Android documentation.
android

interface TVViewPropsIOS

interface TVViewPropsIOS {}

property hasTVPreferredFocus

hasTVPreferredFocus?: boolean | undefined;

*(Apple TV only)* May be set to true to force the Apple TV focus engine to move focus to this view.
ios

property isTVSelectable

isTVSelectable?: boolean | undefined;

*(Apple TV only)* When set to true, this view will be focusable and navigable using the Apple TV remote.
ios

property tvParallaxMagnification

tvParallaxMagnification?: number | undefined;

*(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out of focus. Defaults to 1.0.
ios

property tvParallaxShiftDistanceX

tvParallaxShiftDistanceX?: number | undefined;

*(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out of focus. Defaults to 2.0.
ios

property tvParallaxShiftDistanceY

tvParallaxShiftDistanceY?: number | undefined;

*(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out of focus. Defaults to 2.0.
ios

property tvParallaxTiltAngle

tvParallaxTiltAngle?: number | undefined;

*(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out of focus. Defaults to 0.05.
ios

interface UIManagerStatic

interface UIManagerStatic {}

property dispatchViewManagerCommand

dispatchViewManagerCommand: (
    reactTag: number | null,
    commandID: number | string,
    commandArgs?: Array<any>
) => void;

Used to call a native view method from JavaScript
reactTag - Id of react view. commandID - Id of the native method that should be called. commandArgs - Args of the native method that we can pass from JS to native.

property getViewManagerConfig

getViewManagerConfig: (name: string) => {
    Commands: { [key: string]: number };
};

property hasViewManagerConfig

hasViewManagerConfig: (name: string) => boolean;

property setLayoutAnimationEnabledExperimental

setLayoutAnimationEnabledExperimental?: ((value: boolean) => void) | undefined;

Automatically animates views to their new positions when the next layout happens.
A common way to use this API is to call it before calling setState.
Note that in order to get this to work on **Android** you need to set the following flags via UIManager:
UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true);

method measure

measure: (node: number, callback: MeasureOnSuccessCallback) => void;

Determines the location on screen, width, and height of the given view and returns the values via an async callback. If successful, the callback will be called with the following arguments:
- x - y - width - height - pageX - pageY
Note that these measurements are not available until after the rendering has been completed in native. If you need the measurements as soon as possible, consider using the [onLayout prop](docs/view.html#onlayout) instead.
Deprecated
Use ref.measure instead.

method measureInWindow

measureInWindow: (
    node: number,
    callback: MeasureInWindowOnSuccessCallback
) => void;

Determines the location of the given view in the window and returns the values via an async callback. If the React root view is embedded in another native view, this will give you the absolute coordinates. If successful, the callback will be called with the following arguments:
- x - y - width - height
Note that these measurements are not available until after the rendering has been completed in native.
Deprecated
Use ref.measureInWindow instead.

method measureLayout

measureLayout: (
    node: number,
    relativeToNativeNode: number,
    onFail: () => void,
    onSuccess: MeasureLayoutOnSuccessCallback
) => void;

Like [measure()](#measure), but measures the view relative an ancestor, specified as relativeToNativeNode. This means that the returned x, y are relative to the origin x, y of the ancestor view.
As always, to obtain a native node handle for a component, you can use React.findNodeHandle(component).
Deprecated
Use ref.measureLayout instead.

interface VibrationStatic

interface VibrationStatic {}

The Vibration API is exposed at Vibration.vibrate(). The vibration is asynchronous so this method will return immediately.
There will be no effect on devices that do not support Vibration, eg. the simulator.
**Note for android** add <uses-permission android:name="android.permission.VIBRATE"/> to AndroidManifest.xml
**Android Usage:**
[0, 500, 200, 500] V(0.5s) --wait(0.2s)--> V(0.5s)
[300, 500, 200, 500] --wait(0.3s)--> V(0.5s) --wait(0.2s)--> V(0.5s)
**iOS Usage:** if first argument is 0, it will not be included in pattern array.
[0, 1000, 2000, 3000] V(fixed) --wait(1s)--> V(fixed) --wait(2s)--> V(fixed) --wait(3s)--> V(fixed)

method cancel

cancel: () => void;

Stop vibration

method vibrate

vibrate: (pattern?: number | number[], repeat?: boolean) => void;

interface ViewProps

interface ViewProps
    extends ViewPropsAndroid,
        ViewPropsIOS,
        GestureResponderHandlers,
        Touchable,
        PointerEvents,
        AccessibilityProps {}

See Also
- https://reactnative.dev/docs/view#props

property children

children?: React.ReactNode | undefined;

property experimental_layoutConformance

experimental_layoutConformance?: 'strict' | 'classic' | undefined;

Contols whether this view, and its transitive children, are laid in a way consistent with web browsers ('strict'), or consistent with existing React Native code which may rely on incorrect behavior ('classic').

property hitSlop

hitSlop?: null | Insets | number | undefined;

This defines how far a touch event can start away from the view. Typical interface guidelines recommend touch targets that are at least 30 - 40 points/density-independent pixels. If a Touchable view has a height of 20 the touchable height can be extended to 40 with hitSlop={{top: 10, bottom: 10, left: 0, right: 0}} NOTE The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views.

property id

id?: string | undefined;

Used to reference react managed views from native code.

property nativeID

nativeID?: string | undefined;

Used to reference react managed views from native code.

property needsOffscreenAlphaCompositing

needsOffscreenAlphaCompositing?: boolean | undefined;

Whether this view needs to rendered offscreen and composited with an alpha in order to preserve 100% correct colors and blending behavior. The default (false) falls back to drawing the component and its children with an alpha applied to the paint used to draw each element instead of rendering the full component offscreen and compositing it back with an alpha value. This default may be noticeable and undesired in the case where the View you are setting an opacity on has multiple overlapping elements (e.g. multiple overlapping Views, or text and a background).
Rendering offscreen to preserve correct alpha behavior is extremely expensive and hard to debug for non-native developers, which is why it is not turned on by default. If you do need to enable this property for an animation, consider combining it with renderToHardwareTextureAndroid if the view contents are static (i.e. it doesn't need to be redrawn each frame). If that property is enabled, this View will be rendered off-screen once, saved in a hardware texture, and then composited onto the screen with an alpha each frame without having to switch rendering targets on the GPU.

property onLayout

onLayout?: ((event: LayoutChangeEvent) => void) | undefined;

Invoked on mount and layout changes with
{nativeEvent: { layout: {x, y, width, height}}}.

property pointerEvents

pointerEvents?: 'box-none' | 'none' | 'box-only' | 'auto' | undefined;

In the absence of auto property, none is much like CSS's none value. box-none is as if you had applied the CSS class:
.box-none { pointer-events: none; } .box-none * { pointer-events: all; }
box-only is the equivalent of
.box-only { pointer-events: all; } .box-only * { pointer-events: none; }
But since pointerEvents does not affect layout/appearance, and we are already deviating from the spec by adding additional modes, we opt to not include pointerEvents on style. On some platforms, we would need to implement it as a className anyways. Using style or not is an implementation detail of the platform.

property removeClippedSubviews

removeClippedSubviews?: boolean | undefined;

This is a special performance property exposed by RCTView and is useful for scrolling content when there are many subviews, most of which are offscreen. For this property to be effective, it must be applied to a view that contains many subviews that extend outside its bound. The subviews must also have overflow: hidden, as should the containing view (or one of its superviews).

property style

style?: StyleProp<ViewStyle> | undefined;

property testID

testID?: string | undefined;

Used to locate this view in end-to-end tests.

interface ViewPropsAndroid

interface ViewPropsAndroid {}

property collapsable

collapsable?: boolean | undefined;

Views that are only used to layout their children or otherwise don't draw anything may be automatically removed from the native hierarchy as an optimization. Set this property to false to disable this optimization and ensure that this View exists in the native view hierarchy.

property collapsableChildren

collapsableChildren?: boolean | undefined;

Setting to false prevents direct children of the view from being removed from the native view hierarchy, similar to the effect of setting collapsable={false} on each child.

property focusable

focusable?: boolean | undefined;

Whether this View should be focusable with a non-touch input device, eg. receive focus with a hardware keyboard.

property renderToHardwareTextureAndroid

renderToHardwareTextureAndroid?: boolean | undefined;

Whether this view should render itself (and all of its children) into a single hardware texture on the GPU.
On Android, this is useful for animations and interactions that only modify opacity, rotation, translation, and/or scale: in those cases, the view doesn't have to be redrawn and display lists don't need to be re-executed. The texture can just be re-used and re-composited with different parameters. The downside is that this can use up limited video memory, so this prop should be set back to false at the end of the interaction/animation.

property tabIndex

tabIndex?: 0 | -1 | undefined;

Indicates whether this View should be focusable with a non-touch input device, eg. receive focus with a hardware keyboard. See https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex for more details.
Supports the following values: - 0 (View is focusable) - -1 (View is not focusable)

interface ViewPropsIOS

interface ViewPropsIOS extends TVViewPropsIOS {}

property shouldRasterizeIOS

shouldRasterizeIOS?: boolean | undefined;

Whether this view should be rendered as a bitmap before compositing.
On iOS, this is useful for animations and interactions that do not modify this component's dimensions nor its children; for example, when translating the position of a static view, rasterization allows the renderer to reuse a cached bitmap of a static view and quickly composite it during each frame.
Rasterization incurs an off-screen drawing pass and the bitmap consumes memory. Test and measure when using this property.

interface ViewStyle

interface ViewStyle extends FlexStyle, ShadowStyleIOS, TransformsStyle {}

See Also
- https://reactnative.dev/docs/view#style

property backfaceVisibility

backfaceVisibility?: 'visible' | 'hidden' | undefined;

property backgroundColor

backgroundColor?: ColorValue | undefined;

property borderBlockColor

borderBlockColor?: ColorValue | undefined;

property borderBlockEndColor

borderBlockEndColor?: ColorValue | undefined;

property borderBlockStartColor

borderBlockStartColor?: ColorValue | undefined;

property borderBottomColor

borderBottomColor?: ColorValue | undefined;

property borderBottomEndRadius

borderBottomEndRadius?: AnimatableNumericValue | string | undefined;

property borderBottomLeftRadius

borderBottomLeftRadius?: AnimatableNumericValue | string | undefined;

property borderBottomRightRadius

borderBottomRightRadius?: AnimatableNumericValue | string | undefined;

property borderBottomStartRadius

borderBottomStartRadius?: AnimatableNumericValue | string | undefined;

property borderColor

borderColor?: ColorValue | undefined;

property borderCurve

borderCurve?: 'circular' | 'continuous' | undefined;

On iOS 13+, it is possible to change the corner curve of borders. ios

property borderEndColor

borderEndColor?: ColorValue | undefined;

property borderEndEndRadius

borderEndEndRadius?: AnimatableNumericValue | string | undefined;

property borderEndStartRadius

borderEndStartRadius?: AnimatableNumericValue | string | undefined;

property borderLeftColor

borderLeftColor?: ColorValue | undefined;

property borderRadius

borderRadius?: AnimatableNumericValue | string | undefined;

property borderRightColor

borderRightColor?: ColorValue | undefined;

property borderStartColor

borderStartColor?: ColorValue | undefined;

property borderStartEndRadius

borderStartEndRadius?: AnimatableNumericValue | string | undefined;

property borderStartStartRadius

borderStartStartRadius?: AnimatableNumericValue | string | undefined;

property borderStyle

borderStyle?: 'solid' | 'dotted' | 'dashed' | undefined;

property borderTopColor

borderTopColor?: ColorValue | undefined;

property borderTopEndRadius

borderTopEndRadius?: AnimatableNumericValue | string | undefined;

property borderTopLeftRadius

borderTopLeftRadius?: AnimatableNumericValue | string | undefined;

property borderTopRightRadius

borderTopRightRadius?: AnimatableNumericValue | string | undefined;

property borderTopStartRadius

borderTopStartRadius?: AnimatableNumericValue | string | undefined;

property boxShadow

boxShadow?: ReadonlyArray<BoxShadowValue> | string | undefined;

property cursor

cursor?: CursorValue | undefined;

property elevation

elevation?: number | undefined;

Sets the elevation of a view, using Android's underlying [elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation). This adds a drop shadow to the item and affects z-order for overlapping views. Only supported on Android 5.0+, has no effect on earlier versions.
android

property experimental_backgroundImage

experimental_backgroundImage?: ReadonlyArray<GradientValue> | string | undefined;

property filter

filter?: ReadonlyArray<FilterFunction> | string | undefined;

property isolation

isolation?: 'auto' | 'isolate' | undefined;

property mixBlendMode

mixBlendMode?: BlendMode | undefined;

property opacity

opacity?: AnimatableNumericValue | undefined;

property outlineColor

outlineColor?: ColorValue | undefined;

property outlineOffset

outlineOffset?: AnimatableNumericValue | undefined;

property outlineStyle

outlineStyle?: 'solid' | 'dotted' | 'dashed' | undefined;

property outlineWidth

outlineWidth?: AnimatableNumericValue | undefined;

property pointerEvents

pointerEvents?: 'box-none' | 'none' | 'box-only' | 'auto' | undefined;

Controls whether the View can be the target of touch events.

Type Aliases

type AccessibilityActionEvent

type AccessibilityActionEvent = NativeSyntheticEvent<
    Readonly<{
        actionName: string;
    }>
>;

type AccessibilityActionInfo

type AccessibilityActionInfo = Readonly<{
    name: AccessibilityActionName | string;
    label?: string | undefined;
}>;

type AccessibilityActionName

type AccessibilityActionName =
    /**
     * Generated when a screen reader user double taps the component.
     */
    | 'activate'
    /**
     * Generated when a screen reader user increments an adjustable component.
     */
    | 'increment'
    /**
     * Generated when a screen reader user decrements an adjustable component.
     */
    | 'decrement'
    /**
     * Generated when a TalkBack user places accessibility focus on the component and double taps and holds one finger on the screen.
     * @platform android
     */
    | 'longpress'
    /**
     * Generated when a VoiceOver user places focus on or inside the component and double taps with two fingers.
     * @platform ios
     * */
    | 'magicTap'
    /**
     * Generated when a VoiceOver user places focus on or inside the component and performs a two finger scrub gesture (left, right, left).
     * @platform ios
     * */
    | 'escape';

type AccessibilityAnnouncementEventName

type AccessibilityAnnouncementEventName = 'announcementFinished';

type AccessibilityAnnouncementFinishedEvent

type AccessibilityAnnouncementFinishedEvent = {
    announcement: string;
    success: boolean;
};

type AccessibilityAnnouncementFinishedEventHandler

type AccessibilityAnnouncementFinishedEventHandler = (
    event: AccessibilityAnnouncementFinishedEvent
) => void;

type AccessibilityChangeEvent

type AccessibilityChangeEvent = boolean;

type AccessibilityChangeEventHandler

type AccessibilityChangeEventHandler = (event: AccessibilityChangeEvent) => void;

type AccessibilityChangeEventName

type AccessibilityChangeEventName =
    | 'change' // deprecated, maps to screenReaderChanged
    | 'boldTextChanged' // iOS-only Event
    | 'grayscaleChanged' // iOS-only Event
    | 'invertColorsChanged' // iOS-only Event
    | 'reduceMotionChanged'
    | 'highTextContrastChanged' // Android-only Event
    | 'darkerSystemColorsChanged' // iOS-only Event
    | 'screenReaderChanged'
    | 'reduceTransparencyChanged';

type AccessibilityEventTypes

type AccessibilityEventTypes = 'click' | 'focus' | 'viewHoverEnter';

type AccessibilityInfo

type AccessibilityInfo = AccessibilityInfoStatic;

type AccessibilityProperties

type AccessibilityProperties = AccessibilityProps;

Deprecated
Use AccessibilityProps

type AccessibilityPropertiesAndroid

type AccessibilityPropertiesAndroid = AccessibilityPropsAndroid;

Deprecated
Use AccessibilityPropsAndroid

type AccessibilityPropertiesIOS

type AccessibilityPropertiesIOS = AccessibilityPropsIOS;

Deprecated
Use AccessibilityPropsIOS

type AccessibilityRole

type AccessibilityRole =
    | 'none'
    | 'button'
    | 'togglebutton'
    | 'link'
    | 'search'
    | 'image'
    | 'keyboardkey'
    | 'text'
    | 'adjustable'
    | 'imagebutton'
    | 'header'
    | 'summary'
    | 'alert'
    | 'checkbox'
    | 'combobox'
    | 'menu'
    | 'menubar'
    | 'menuitem'
    | 'progressbar'
    | 'radio'
    | 'radiogroup'
    | 'scrollbar'
    | 'spinbutton'
    | 'switch'
    | 'tab'
    | 'tabbar'
    | 'tablist'
    | 'timer'
    | 'list'
    | 'toolbar';

type ActionSheetIOS

type ActionSheetIOS = ActionSheetIOSStatic;

type ActivityIndicatorIOSProperties

type ActivityIndicatorIOSProperties = ActivityIndicatorIOSProps;

Deprecated
Use ActivityIndicatorIOSProps

type ActivityIndicatorProperties

type ActivityIndicatorProperties = ActivityIndicatorProps;

Deprecated
Use ActivityIndicatorProps

type Alert

type Alert = AlertStatic;

type AlertType

type AlertType = 'default' | 'plain-text' | 'secure-text' | 'login-password';

type AnimatableNumericValue

type AnimatableNumericValue = number | Animated.AnimatedNode;

type AnimatableStringValue

type AnimatableStringValue = string | Animated.AnimatedNode;

type AppConfig

type AppConfig = {
    appKey: string;
    component?: ComponentProvider | undefined;
    run?: Runnable | undefined;
};

type AppState

type AppState = AppStateStatic;

type AppStateEvent

type AppStateEvent = 'change' | 'memoryWarning' | 'blur' | 'focus';

AppState can tell you if the app is in the foreground or background, and notify you when the state changes.
AppState is frequently used to determine the intent and proper behavior when handling push notifications.
App State Events change - This even is received when the app state has changed. focus [Android] - Received when the app gains focus (the user is interacting with the app). blur [Android] - Received when the user is not actively interacting with the app.
App States active - The app is running in the foreground background - The app is running in the background. The user is either in another app or on the home screen inactive [iOS] - This is a transition state that happens when the app launches, is asking for permissions or when a call or SMS message is received. unknown [iOS] - Initial value until the current app state is determined extension [iOS] - The app is running as an app extension
For more information, see Apple's documentation: https://developer.apple.com/library/ios/documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/TheAppLifeCycle/TheAppLifeCycle.html
See Also
- https://reactnative.dev/docs/appstate#app-states

type AppStateStatus

type AppStateStatus = 'active' | 'background' | 'inactive' | 'unknown' | 'extension';

type BackgroundPropType

type BackgroundPropType =
    | RippleBackgroundPropType
    | ThemeAttributeBackgroundPropType;

type BackHandler

type BackHandler = BackHandlerStatic;

type BackPressEventName

type BackPressEventName = 'hardwareBackPress';

type BlendMode

type BlendMode =
    | 'normal'
    | 'multiply'
    | 'screen'
    | 'overlay'
    | 'darken'
    | 'lighten'
    | 'color-dodge'
    | 'color-burn'
    | 'hard-light'
    | 'soft-light'
    | 'difference'
    | 'exclusion'
    | 'hue'
    | 'saturation'
    | 'color'
    | 'luminosity';

type BoxShadowValue

type BoxShadowValue = {
    offsetX: number | string;
    offsetY: number | string;
    color?: string | undefined;
    blurRadius?: ColorValue | number | undefined;
    spreadDistance?: number | string | undefined;
    inset?: boolean | undefined;
};

type ButtonProperties

type ButtonProperties = ButtonProps;

Deprecated
Use ButtonProps

type Clipboard

type Clipboard = ClipboardStatic;

Clipboard has been extracted from react-native core and will be removed in a future release. It can now be installed and imported from @react-native-clipboard/clipboard instead of 'react-native'.
See Also
- https://github.com/react-native-clipboard/clipboard
Deprecated

type ColorSchemeName

type ColorSchemeName = 'light' | 'dark' | null | undefined;

type ColorValue

type ColorValue = string | OpaqueColorValue;

type ComponentProvider

type ComponentProvider = () => React.ComponentType<any>;

type ComponentProviderInstrumentationHook

type ComponentProviderInstrumentationHook = (
    component: ComponentProvider,
    scopedPerformanceLogger: IPerformanceLogger
) => React.ComponentType<any>;

type CursorValue

type CursorValue = 'auto' | 'pointer';

type DataDetectorTypes

type DataDetectorTypes =
    | 'phoneNumber'
    | 'link'
    | 'address'
    | 'calendarEvent'
    | 'trackingNumber'
    | 'flightNumber'
    | 'lookupSuggestion'
    | 'none'
    | 'all';

type DefaultSectionT

type DefaultSectionT = {
    [key: string]: any;
};

See Also
- https://reactnative.dev/docs/sectionlist

type DimensionValue

type DimensionValue = number | 'auto' | `${number}%` | Animated.AnimatedNode | null;

type DrawerLayoutAndroidProperties

type DrawerLayoutAndroidProperties = DrawerLayoutAndroidProps;

Deprecated
Use DrawerLayoutAndroidProps

type DropShadowValue

type DropShadowValue = {
    offsetX: number | string;
    offsetY: number | string;
    standardDeviation?: number | string | undefined;
    color?: ColorValue | number | undefined;
};

type DynamicColorIOSTuple

type DynamicColorIOSTuple = {
    light: ColorValue;
    dark: ColorValue;
    highContrastLight?: ColorValue | undefined;
    highContrastDark?: ColorValue | undefined;
};

type Easing

type Easing = EasingStatic;

type EasingFunction

type EasingFunction = (value: number) => number;

This class implements common easing functions. The math is pretty obscure, but this cool website has nice visual illustrations of what they represent: http://xaedes.de/dev/transitions/

type EnterKeyHintType

type EnterKeyHintType = 'done' | 'go' | 'next' | 'search' | 'send';

type EnterKeyHintTypeAndroid

type EnterKeyHintTypeAndroid = 'previous';

type EnterKeyHintTypeIOS

type EnterKeyHintTypeIOS = 'enter';

type EnterKeyHintTypeOptions

type EnterKeyHintTypeOptions =
    | EnterKeyHintType
    | EnterKeyHintTypeAndroid
    | EnterKeyHintTypeIOS;

type ErrorHandlerCallback

type ErrorHandlerCallback = (error: any, isFatal?: boolean) => void;

Copyright (c) Meta Platforms, Inc. and affiliates.
This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree.

type Falsy

type Falsy = undefined | null | false | '';

type FetchResult

type FetchResult = {
    NewData: 'UIBackgroundFetchResultNewData';
    NoData: 'UIBackgroundFetchResultNoData';
    ResultFailed: 'UIBackgroundFetchResultFailed';
};

type FilterFunction

type FilterFunction =
    | { brightness: number | string }
    | { blur: number | string }
    | { contrast: number | string }
    | { grayscale: number | string }
    | { hueRotate: number | string }
    | { invert: number | string }
    | { opacity: number | string }
    | { saturate: number | string }
    | { sepia: number | string }
    | { dropShadow: DropShadowValue | string };

type FlatListProperties

type FlatListProperties<ItemT> = FlatListProps<ItemT>;

Deprecated
Use FlatListProps

type FlexAlignType

type FlexAlignType = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';

type FontVariant

type FontVariant =
    | 'small-caps'
    | 'oldstyle-nums'
    | 'lining-nums'
    | 'tabular-nums'
    | 'common-ligatures'
    | 'no-common-ligatures'
    | 'discretionary-ligatures'
    | 'no-discretionary-ligatures'
    | 'historical-ligatures'
    | 'no-historical-ligatures'
    | 'contextual'
    | 'no-contextual'
    | 'proportional-nums'
    | 'stylistic-one'
    | 'stylistic-two'
    | 'stylistic-three'
    | 'stylistic-four'
    | 'stylistic-five'
    | 'stylistic-six'
    | 'stylistic-seven'
    | 'stylistic-eight'
    | 'stylistic-nine'
    | 'stylistic-ten'
    | 'stylistic-eleven'
    | 'stylistic-twelve'
    | 'stylistic-thirteen'
    | 'stylistic-fourteen'
    | 'stylistic-fifteen'
    | 'stylistic-sixteen'
    | 'stylistic-seventeen'
    | 'stylistic-eighteen'
    | 'stylistic-nineteen'
    | 'stylistic-twenty';

type GradientValue

type GradientValue = {
    type: 'linearGradient';
    // Angle or direction enums
    direction?: string | undefined;
    colorStops: ReadonlyArray<{
        color: ColorValue;
        positions?: ReadonlyArray<string[]> | undefined;
    }>;
};

type Handle

type Handle = number;

type HostInstance

type HostInstance = NativeMethods;

type I18nManager

type I18nManager = I18nManagerStatic;

type ImageBackgroundProperties

type ImageBackgroundProperties = ImageBackgroundProps;

Deprecated
Use ImageBackgroundProps

type ImageProperties

type ImageProperties = ImageProps;

Deprecated
Use ImageProps

type ImagePropertiesAndroid

type ImagePropertiesAndroid = ImagePropsAndroid;

Deprecated
Use ImagePropsAndroid

type ImagePropertiesIOS

type ImagePropertiesIOS = ImagePropsIOS;

Deprecated
Use ImagePropsIOS

type ImagePropertiesSourceOptions

type ImagePropertiesSourceOptions = ImageSourcePropType;

Deprecated
Use ImageSourcePropType

type ImageRequireSource

type ImageRequireSource = number;

type ImageResizeMode

type ImageResizeMode =
    | 'cover'
    | 'contain'
    | 'stretch'
    | 'repeat'
    | 'center'
    | 'none';

Copyright (c) Meta Platforms, Inc. and affiliates.
This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree.

type ImageSourcePropType

type ImageSourcePropType = ImageURISource | ImageURISource[] | ImageRequireSource;

See Also
- https://reactnative.dev/docs/image#source

type InputAccessoryViewProperties

type InputAccessoryViewProperties = InputAccessoryViewProps;

Deprecated
Use InputAccessoryViewProps

type InputModeOptions

type InputModeOptions =
    | 'none'
    | 'text'
    | 'decimal'
    | 'numeric'
    | 'tel'
    | 'search'
    | 'email'
    | 'url';

type KeyboardEventEasing

type KeyboardEventEasing =
    | 'easeIn'
    | 'easeInEaseOut'
    | 'easeOut'
    | 'linear'
    | 'keyboard';

type KeyboardEventListener

type KeyboardEventListener = (event: KeyboardEvent) => void;

type KeyboardEventName

type KeyboardEventName =
    | 'keyboardWillShow'
    | 'keyboardDidShow'
    | 'keyboardWillHide'
    | 'keyboardDidHide'
    | 'keyboardWillChangeFrame'
    | 'keyboardDidChangeFrame';

type KeyboardMetrics

type KeyboardMetrics = {
    screenX: number;
    screenY: number;
    width: number;
    height: number;
};

type KeyboardType

type KeyboardType =
    | 'default'
    | 'number-pad'
    | 'decimal-pad'
    | 'numeric'
    | 'email-address'
    | 'phone-pad'
    | 'url';

type KeyboardTypeAndroid

type KeyboardTypeAndroid = 'visible-password';

type KeyboardTypeIOS

type KeyboardTypeIOS =
    | 'ascii-capable'
    | 'numbers-and-punctuation'
    | 'name-phone-pad'
    | 'twitter'
    | 'web-search';

type KeyboardTypeOptions

type KeyboardTypeOptions = KeyboardType | KeyboardTypeAndroid | KeyboardTypeIOS;

type LayoutAnimation

type LayoutAnimation = LayoutAnimationStatic;

type LayoutAnimationProperties

type LayoutAnimationProperties = {
    [prop in LayoutAnimationProperty]: prop;
};

type LayoutAnimationProperty

type LayoutAnimationProperty = 'opacity' | 'scaleX' | 'scaleY' | 'scaleXY';

type LayoutAnimationType

type LayoutAnimationType =
    | 'spring'
    | 'linear'
    | 'easeInEaseOut'
    | 'easeIn'
    | 'easeOut'
    | 'keyboard';

Copyright (c) Meta Platforms, Inc. and affiliates.
This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree.

type LayoutAnimationTypes

type LayoutAnimationTypes = {
    [type in LayoutAnimationType]: type;
};

type LayoutChangeEvent

type LayoutChangeEvent = NativeSyntheticEvent<{ layout: LayoutRectangle }>;

type Linking

type Linking = LinkingStatic;

type LogBox

type LogBox = LogBoxStatic;

type MaximumOneOf

type MaximumOneOf<T, K extends keyof T = keyof T> = K extends keyof T
    ? { [P in K]: T[K] } & { [P in Exclude<keyof T, K>]?: never }
    : never;

type MeasureInWindowOnSuccessCallback

type MeasureInWindowOnSuccessCallback = (
    x: number,
    y: number,
    width: number,
    height: number
) => void;

type MeasureLayoutOnSuccessCallback

type MeasureLayoutOnSuccessCallback = (
    left: number,
    top: number,
    width: number,
    height: number
) => void;

type MeasureOnSuccessCallback

type MeasureOnSuccessCallback = (
    x: number,
    y: number,
    width: number,
    height: number,
    pageX: number,
    pageY: number
) => void;

type ModalProperties

type ModalProperties = ModalProps;

Deprecated
Use ModalProps

type ModalProps

type ModalProps = ModalBaseProps & ModalPropsIOS & ModalPropsAndroid & ViewProps;

type Module

type Module = Object;

Copyright (c) Meta Platforms, Inc. and affiliates.
This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree.

type NativeMethodsMixin

type NativeMethodsMixin = NativeMethods;

Deprecated
Use NativeMethods instead.

type NativeMethodsMixinType

type NativeMethodsMixinType = NativeMethods;

Deprecated
Use NativeMethods instead.

type NativeModule

type NativeModule = {
    /**
     * Add the provided eventType as an active listener
     * @param eventType name of the event for which we are registering listener
     */
    addListener: (eventType: string) => void;

    /**
     * Remove a specified number of events.  There are no eventTypes in this case, as
     * the native side doesn't remove the name, but only manages a counter of total
     * listeners
     * @param count number of listeners to remove (of any type)
     */
    removeListeners: (count: number) => void;
};

The React Native implementation of the IOS RCTEventEmitter which is required when creating a module that communicates with IOS

type NodeHandle

type NodeHandle = number;

type OpaqueColorValue

type OpaqueColorValue = symbol & { __TYPE__: 'Color' };

type PanResponder

type PanResponder = PanResponderStatic;

type Permission

type Permission =
    | 'android.permission.READ_CALENDAR'
    | 'android.permission.WRITE_CALENDAR'
    | 'android.permission.CAMERA'
    | 'android.permission.READ_CONTACTS'
    | 'android.permission.WRITE_CONTACTS'
    | 'android.permission.GET_ACCOUNTS'
    | 'android.permission.ACCESS_BACKGROUND_LOCATION'
    | 'android.permission.ACCESS_FINE_LOCATION'
    | 'android.permission.ACCESS_COARSE_LOCATION'
    | 'android.permission.RECORD_AUDIO'
    | 'android.permission.READ_PHONE_STATE'
    | 'android.permission.CALL_PHONE'
    | 'android.permission.READ_CALL_LOG'
    | 'android.permission.WRITE_CALL_LOG'
    | 'com.android.voicemail.permission.ADD_VOICEMAIL'
    | 'com.android.voicemail.permission.READ_VOICEMAIL'
    | 'com.android.voicemail.permission.WRITE_VOICEMAIL'
    | 'android.permission.USE_SIP'
    | 'android.permission.PROCESS_OUTGOING_CALLS'
    | 'android.permission.BODY_SENSORS'
    | 'android.permission.BODY_SENSORS_BACKGROUND'
    | 'android.permission.SEND_SMS'
    | 'android.permission.RECEIVE_SMS'
    | 'android.permission.READ_SMS'
    | 'android.permission.RECEIVE_WAP_PUSH'
    | 'android.permission.RECEIVE_MMS'
    | 'android.permission.READ_EXTERNAL_STORAGE'
    | 'android.permission.READ_MEDIA_IMAGES'
    | 'android.permission.READ_MEDIA_VIDEO'
    | 'android.permission.READ_MEDIA_AUDIO'
    | 'android.permission.READ_MEDIA_VISUAL_USER_SELECTED'
    | 'android.permission.WRITE_EXTERNAL_STORAGE'
    | 'android.permission.BLUETOOTH_CONNECT'
    | 'android.permission.BLUETOOTH_SCAN'
    | 'android.permission.BLUETOOTH_ADVERTISE'
    | 'android.permission.ACCESS_MEDIA_LOCATION'
    | 'android.permission.ACCEPT_HANDOVER'
    | 'android.permission.ACTIVITY_RECOGNITION'
    | 'android.permission.ANSWER_PHONE_CALLS'
    | 'android.permission.READ_PHONE_NUMBERS'
    | 'android.permission.UWB_RANGING'
    | 'android.permission.POST_NOTIFICATIONS'
    | 'android.permission.NEARBY_WIFI_DEVICES';

type PermissionsAndroid

type PermissionsAndroid = PermissionsAndroidStatic;

type PermissionStatus

type PermissionStatus = 'granted' | 'denied' | 'never_ask_again';

type Platform

type Platform =
    | PlatformIOSStatic
    | PlatformAndroidStatic
    | PlatformWindowsOSStatic
    | PlatformMacOSStatic
    | PlatformWebStatic;

type PlatformConstants

type PlatformConstants = {
    isTesting: boolean;
    isDisableAnimations?: boolean | undefined;
    reactNativeVersion: {
        major: number;
        minor: number;
        patch: number;
        prerelease?: string | null | undefined;
    };
};

type PlatformOSType

type PlatformOSType = 'ios' | 'android' | 'macos' | 'windows' | 'web' | 'native';

See Also
- https://reactnative.dev/docs/platform-specific-code#content

type PointerEvent

type PointerEvent = NativeSyntheticEvent<NativePointerEvent>;

type PresentLocalNotificationDetails

type PresentLocalNotificationDetails = {
    alertBody: string;
    alertAction: string;
    alertTitle?: string | undefined;
    soundName?: string | undefined;
    category?: string | undefined;
    userInfo?: Object | undefined;
    applicationIconBadgeNumber?: number | undefined;
};

type ProcessedColorValue

type ProcessedColorValue = number | OpaqueColorValue;

type ProgressBarAndroidProperties

type ProgressBarAndroidProperties = ProgressBarAndroidProps;

Deprecated
Use ProgressBarAndroidProps

type PromiseTask

type PromiseTask = {
    name: string;
    gen: () => Promise<any>;
};

type PushNotificationEventName

type PushNotificationEventName =
    | 'notification'
    | 'localNotification'
    | 'register'
    | 'registrationError';

type PushNotificationIOS

type PushNotificationIOS = PushNotificationIOSStatic;

PushNotificationIOS has been extracted from react-native core and will be removed in a future release. It can now be installed and imported from @react-native-community/push-notification-ios instead of 'react-native'.
See Also
- https://github.com/react-native-community/react-native-push-notification-ios
Deprecated

type RCTNativeAppEventEmitter

type RCTNativeAppEventEmitter = DeviceEventEmitterStatic;

Receive events from native-code Deprecated - subclass NativeEventEmitter to create granular event modules instead of adding all event listeners directly to RCTNativeAppEventEmitter.
See Also
- https://github.com/facebook/react-native/blob/0.34-stable\Libraries\EventEmitter\RCTNativeAppEventEmitter.js
- https://reactnative.dev/docs/native-modules-ios#sending-events-to-javascript

type RefreshControlProperties

type RefreshControlProperties = RefreshControlProps;

Deprecated
Use RefreshControlProps

type RefreshControlPropertiesAndroid

type RefreshControlPropertiesAndroid = RefreshControlPropsAndroid;

Deprecated
Use RefreshControlPropsAndroid

type RefreshControlPropertiesIOS

type RefreshControlPropertiesIOS = RefreshControlPropsIOS;

Deprecated
Use RefreshControlPropsIOS

type RegisterCallableModule

type RegisterCallableModule = (
    name: string,
    moduleOrFactory: Module | (() => Module)
) => void;

type RegisteredStyle

type RegisteredStyle<T> = number & { __registeredStyleBrand: T };

Keep a brand of 'T' so that calls to StyleSheet.flatten can take RegisteredStyle<T> and return T.

type ReturnKeyType

type ReturnKeyType = 'done' | 'go' | 'next' | 'search' | 'send';

type ReturnKeyTypeAndroid

type ReturnKeyTypeAndroid = 'none' | 'previous';

type ReturnKeyTypeIOS

type ReturnKeyTypeIOS =
    | 'default'
    | 'google'
    | 'join'
    | 'route'
    | 'yahoo'
    | 'emergency-call';

type ReturnKeyTypeOptions

type ReturnKeyTypeOptions = ReturnKeyType | ReturnKeyTypeAndroid | ReturnKeyTypeIOS;

type Role

type Role =
    | 'alert'
    | 'alertdialog'
    | 'application'
    | 'article'
    | 'banner'
    | 'button'
    | 'cell'
    | 'checkbox'
    | 'columnheader'
    | 'combobox'
    | 'complementary'
    | 'contentinfo'
    | 'definition'
    | 'dialog'
    | 'directory'
    | 'document'
    | 'feed'
    | 'figure'
    | 'form'
    | 'grid'
    | 'group'
    | 'heading'
    | 'img'
    | 'link'
    | 'list'
    | 'listitem'
    | 'log'
    | 'main'
    | 'marquee'
    | 'math'
    | 'menu'
    | 'menubar'
    | 'menuitem'
    | 'meter'
    | 'navigation'
    | 'none'
    | 'note'
    | 'option'
    | 'presentation'
    | 'progressbar'
    | 'radio'
    | 'radiogroup'
    | 'region'
    | 'row'
    | 'rowgroup'
    | 'rowheader'
    | 'scrollbar'
    | 'searchbox'
    | 'separator'
    | 'slider'
    | 'spinbutton'
    | 'status'
    | 'summary'
    | 'switch'
    | 'tab'
    | 'table'
    | 'tablist'
    | 'tabpanel'
    | 'term'
    | 'timer'
    | 'toolbar'
    | 'tooltip'
    | 'tree'
    | 'treegrid'
    | 'treeitem';

type RootTag

type RootTag = number;

type RootViewStyleProvider

type RootViewStyleProvider = (appParameters: any) => ViewStyle;

type Runnable

type Runnable = (appParameters: any) => void;

type ScheduleLocalNotificationDetails

type ScheduleLocalNotificationDetails = {
    alertAction?: string | undefined;
    alertBody?: string | undefined;
    alertTitle?: string | undefined;
    applicationIconBadgeNumber?: number | undefined;
    category?: string | undefined;
    fireDate?: number | string | undefined;
    isSilent?: boolean | undefined;
    repeatInterval?:
        | 'year'
        | 'month'
        | 'week'
        | 'day'
        | 'hour'
        | 'minute'
        | undefined;
    soundName?: string | undefined;
    userInfo?: Object | undefined;
};

type ScrollViewProperties

type ScrollViewProperties = ScrollViewProps;

Deprecated
Use ScrollViewProps

type ScrollViewPropertiesAndroid

type ScrollViewPropertiesAndroid = ScrollViewPropsAndroid;

Deprecated
Use ScrollViewPropsAndroid

type ScrollViewPropertiesIOS

type ScrollViewPropertiesIOS = ScrollViewPropsIOS;

Deprecated
Use ScrollViewPropsIOS

type SectionListData

type SectionListData<ItemT, SectionT = DefaultSectionT> = SectionBase<
    ItemT,
    SectionT
> &
    SectionT;

type SectionListProperties

type SectionListProperties<ItemT> = SectionListProps<ItemT>;

Deprecated
Use SectionListProps

type SectionListRenderItem

type SectionListRenderItem<ItemT, SectionT = DefaultSectionT> = (
    info: SectionListRenderItemInfo<ItemT, SectionT>
) => React.ReactElement | null;

type Settings

type Settings = SettingsStatic;

type Share = ShareStatic;

type ShareAction

type ShareAction = {
    action: 'sharedAction' | 'dismissedAction';
    activityType?: string | null | undefined;
};

type ShareContent

type ShareContent =
    | {
          title?: string | undefined;
          url: string;
          message?: string | undefined;
      }
    | {
          title?: string | undefined;
          url?: string | undefined;
          message: string;
      };

type ShareOptions

type ShareOptions = {
    dialogTitle?: string | undefined;
    excludedActivityTypes?: Array<string> | undefined;
    tintColor?: ColorValue | undefined;
    subject?: string | undefined;
    anchor?: number | undefined;
};

type SimpleTask

type SimpleTask = {
    name: string;
    gen: () => void;
};

type StatusBarAnimation

type StatusBarAnimation = 'none' | 'fade' | 'slide';

type StatusBarProperties

type StatusBarProperties = StatusBarProps;

Deprecated
Use StatusBarProps

type StatusBarPropertiesAndroid

type StatusBarPropertiesAndroid = StatusBarPropsAndroid;

Deprecated
Use StatusBarPropsAndroid

type StatusBarPropertiesIOS

type StatusBarPropertiesIOS = StatusBarPropsIOS;

Deprecated
Use StatusBarPropsIOS

type StatusBarStyle

type StatusBarStyle = 'default' | 'light-content' | 'dark-content';

type StyleProp

type StyleProp<T> =
    | T
    | RegisteredStyle<T>
    | RecursiveArray<T | RegisteredStyle<T> | Falsy>
    | Falsy;

type SubmitBehavior

type SubmitBehavior = 'submit' | 'blurAndSubmit' | 'newline';

type SwitchProperties

type SwitchProperties = SwitchProps;

Deprecated
Use SwitchProps

type SwitchPropertiesIOS

type SwitchPropertiesIOS = SwitchPropsIOS;

Deprecated
Use SwitchPropsIOS

type Task

type Task = (taskData: any) => Promise<void>;

type TaskCanceller

type TaskCanceller = () => void;

type TaskCancelProvider

type TaskCancelProvider = () => TaskCanceller;

type TaskProvider

type TaskProvider = () => Task;

type TextInputAndroidProperties

type TextInputAndroidProperties = TextInputAndroidProps;

Deprecated
Use TextInputAndroidProps

type TextInputIOSProperties

type TextInputIOSProperties = TextInputIOSProps;

Deprecated
Use TextInputIOSProps

type TextInputProperties

type TextInputProperties = TextInputProps;

Deprecated
Use TextInputProps

type TextProperties

type TextProperties = TextProps;

Deprecated
Use TextProps

type TextPropertiesAndroid

type TextPropertiesAndroid = TextPropsAndroid;

Deprecated
Use TextPropsAndroid

type TextPropertiesIOS

type TextPropertiesIOS = TextPropsIOS;

Deprecated
Use TextPropsIOS

type ToastAndroid

type ToastAndroid = ToastAndroidStatic;

type TouchableHighlightProperties

type TouchableHighlightProperties = TouchableHighlightProps;

Deprecated
Use TouchableHighlightProps

type TouchableNativeFeedbackProperties

type TouchableNativeFeedbackProperties = TouchableNativeFeedbackProps;

Deprecated
Use TouchableNativeFeedbackProps

type TouchableOpacityProperties

type TouchableOpacityProperties = TouchableOpacityProps;

Deprecated
Use TouchableOpacityProps

type TouchableWithoutFeedbackProperties

type TouchableWithoutFeedbackProperties = TouchableWithoutFeedbackProps;

Deprecated
Use TouchableWithoutFeedbackProps

type UIManager

type UIManager = UIManagerStatic;

type Vibration

type Vibration = VibrationStatic;

type ViewProperties

type ViewProperties = ViewProps;

Deprecated
Use ViewProps

type ViewPropertiesAndroid

type ViewPropertiesAndroid = ViewPropsAndroid;

Deprecated
Use ViewPropsAndroid

type ViewPropertiesIOS

type ViewPropertiesIOS = ViewPropsIOS;

Deprecated
Use ViewPropsIOS

type VirtualizedListProperties

type VirtualizedListProperties<ItemT> = VirtualizedListProps<ItemT>;

Deprecated
Use VirtualizedListProps

type VirtualizedListWithoutPreConfiguredProps

type VirtualizedListWithoutPreConfiguredProps<ItemT> = Omit<
    VirtualizedListWithoutRenderItemProps<ItemT>,
    'stickyHeaderIndices'
>;

type WrapperComponentProvider

type WrapperComponentProvider = (appParameters: any) => React.ComponentType<any>;

Namespaces

namespace Animated

namespace Animated {}

variable Image

const Image: AnimatedComponent<typeof Image>;

variable ScrollView

const ScrollView: AnimatedComponent<typeof ScrollView>;

variable Text

const Text: AnimatedComponent<typeof Text>;

variable View

const View: AnimatedComponent<typeof View>;

Animated variants of the basic native views. Accepts Animated.Value for props and style.

function add

add: <OutputT extends string | number>(
    a: Animated,
    b: Animated
) => AnimatedAddition<OutputT>;

Creates a new Animated value composed from two Animated values added together.

function createAnimatedComponent

createAnimatedComponent: <T extends React.ComponentType<any>>(
    component: T,
    options?: AnimatedComponentOptions
) => AnimatedComponent<T>;

Make any React component Animatable. Used to create Animated.View, etc.

function decay

decay: (
    value: AnimatedValue | AnimatedValueXY,
    config: DecayAnimationConfig
) => CompositeAnimation;

Animates a value from an initial velocity to zero based on a decay coefficient.

function delay

delay: (time: number) => CompositeAnimation;

Starts an animation after the given delay.

function diffClamp

diffClamp: <OutputT extends string | number>(
    a: Animated,
    min: number,
    max: number
) => AnimatedDiffClamp<OutputT>;

Create a new Animated value that is limited between 2 values. It uses the difference between the last value so even if the value is far from the bounds it will start changing when the value starts getting closer again. (value = clamp(value + diff, min, max)).
This is useful with scroll events, for example, to show the navbar when scrolling up and to hide it when scrolling down.

function divide

divide: <OutputT extends string | number>(
    a: Animated,
    b: Animated
) => AnimatedDivision<OutputT>;

Creates a new Animated value composed by dividing the first Animated value by the second Animated value.

function event

event: <T>(
    argMapping: Array<Mapping | null>,
    config?: EventConfig<T>
) => (...args: any[]) => void;

Takes an array of mappings and extracts values from each arg accordingly, then calls setValue on the mapped outputs. e.g.

 onScroll={Animated.event(
   [{nativeEvent: {contentOffset: {x: this._scrollX}}}]
   {listener},          // Optional async listener
 )
 ...
 onPanResponderMove: Animated.event([
   null,                // raw event arg ignored
   {dx: this._panX},    // gestureState arg
 ]),

function loop

loop: (
    animation: CompositeAnimation,
    config?: LoopAnimationConfig
) => CompositeAnimation;

Loops a given animation continuously, so that each time it reaches the end, it resets and begins again from the start. Can specify number of times to loop using the key 'iterations' in the config. Will loop without blocking the UI thread if the child animation is set to 'useNativeDriver'.

function modulo

modulo: <OutputT extends string | number>(
    a: Animated,
    modulus: number
) => AnimatedModulo<OutputT>;

Creates a new Animated value that is the (non-negative) modulo of the provided Animated value

function multiply

multiply: <OutputT extends string | number>(
    a: Animated,
    b: Animated
) => AnimatedMultiplication<OutputT>;

Creates a new Animated value composed from two Animated values multiplied together.

function parallel

parallel: (
    animations: Array<CompositeAnimation>,
    config?: ParallelConfig
) => CompositeAnimation;

Starts an array of animations all at the same time. By default, if one of the animations is stopped, they will all be stopped. You can override this with the stopTogether flag.

function sequence

sequence: (animations: Array<CompositeAnimation>) => CompositeAnimation;

Starts an array of animations in order, waiting for each to complete before starting the next. If the current running animation is stopped, no following animations will be started.

function spring

spring: (
    value: AnimatedValue | AnimatedValueXY,
    config: SpringAnimationConfig
) => CompositeAnimation;

Spring animation based on Rebound and Origami. Tracks velocity state to create fluid motions as the toValue updates, and can be chained together.

function stagger

stagger: (
    time: number,
    animations: Array<CompositeAnimation>
) => CompositeAnimation;

Array of animations may run in parallel (overlap), but are started in sequence with successive delays. Nice for doing trailing effects.

function subtract

subtract: <OutputT extends string | number>(
    a: Animated,
    b: Animated
) => AnimatedSubtraction<OutputT>;

Creates a new Animated value composed by subtracting the second Animated value from the first Animated value.

function timing

timing: (
    value: AnimatedValue | AnimatedValueXY,
    config: TimingAnimationConfig
) => CompositeAnimation;

Animates a value along a timed easing curve. The Easing module has tons of pre-defined curves, or you can use your own function.

class Animated

class Animated {}

class AnimatedAddition

class AnimatedAddition<
    OutputT extends number | string
> extends AnimatedInterpolation<OutputT> {}

class AnimatedColor

class AnimatedColor extends AnimatedWithChildren {}

constructor

constructor(
    valueIn?: ColorValue | RgbaValue | RgbaAnimatedValue,
    config?: AnimatedConfig
);

property a

a: Value;

property addListener

addListener: (callback: (value: ColorValue) => unknown) => string;

property b

b: Value;

property extractOffset

extractOffset: () => void;

property flattenOffset

flattenOffset: () => void;

property g

g: Value;

property nativeColor

nativeColor: {};

property r

r: Value;

property removeAllListeners

removeAllListeners: () => void;

property removeListener

removeListener: (id: string) => void;

property resetAnimation

resetAnimation: (callback: (value: ColorValue) => unknown) => void;

property setOffset

setOffset: (offset: RgbaValue) => void;

property setValue

setValue: (value: RgbaValue | ColorValue) => void;

property stopAnimation

stopAnimation: (callback: (value: ColorValue) => unknown) => void;

class AnimatedDiffClamp

class AnimatedDiffClamp<
    OutputT extends number | string
> extends AnimatedInterpolation<OutputT> {}

class AnimatedDivision

class AnimatedDivision<
    OutputT extends number | string
> extends AnimatedInterpolation<OutputT> {}

class AnimatedInterpolation

class AnimatedInterpolation<
    OutputT extends number | string
> extends AnimatedWithChildren {}

method interpolate

interpolate: (config: InterpolationConfigType) => AnimatedInterpolation<OutputT>;

class AnimatedModulo

class AnimatedModulo<
    OutputT extends number | string
> extends AnimatedInterpolation<OutputT> {}

class AnimatedMultiplication

class AnimatedMultiplication<
    OutputT extends number | string
> extends AnimatedInterpolation<OutputT> {}

class AnimatedNode

class AnimatedNode {}

method addListener

addListener: (callback: (value: any) => any) => string;

Adds an asynchronous listener to the value so you can observe updates from animations. This is useful because there is no way to synchronously read the value because it might be driven natively.
See https://reactnative.dev/docs/animatedvalue.html#addlistener

method hasListeners

hasListeners: () => boolean;

method removeAllListeners

removeAllListeners: () => void;

Remove all registered listeners.
See https://reactnative.dev/docs/animatedvalue.html#removealllisteners

method removeListener

removeListener: (id: string) => void;

Unregister a listener. The id param shall match the identifier previously returned by addListener().
See https://reactnative.dev/docs/animatedvalue.html#removelistener

class AnimatedSubtraction

class AnimatedSubtraction<
    OutputT extends number | string
> extends AnimatedInterpolation<OutputT> {}

class AnimatedWithChildren

class AnimatedWithChildren extends AnimatedNode {}

class FlatList

class FlatList<ItemT = any> extends FlatListComponent<
    ItemT,
    AnimatedProps<FlatListProps<ItemT>>
> {}

FlatList and SectionList infer generic Type defined under their data and section props.

class SectionList

class SectionList<
    ItemT = any,
    SectionT = DefaultSectionT
> extends SectionListComponent<AnimatedProps<SectionListProps<ItemT, SectionT>>> {}

class Value

class Value extends AnimatedWithChildren {}

Standard value for driving animations. One Animated.Value can drive multiple properties in a synchronized fashion, but can only be driven by one mechanism at a time. Using a new mechanism (e.g. starting a new animation, or calling setValue) will stop any previous ones.

constructor

constructor(value: number, config?: AnimatedConfig);

method addListener

addListener: (callback: ValueListenerCallback) => string;

Adds an asynchronous listener to the value so you can observe updates from animations. This is useful because there is no way to synchronously read the value because it might be driven natively.

method animate

animate: (animation: Animation, callback?: EndCallback | null) => void;

Typically only used internally, but could be used by a custom Animation class.
See https://reactnative.dev/docs/animatedvalue#animate

method extractOffset

extractOffset: () => void;

Sets the offset value to the base value, and resets the base value to zero. The final output of the value is unchanged.

method flattenOffset

flattenOffset: () => void;

Merges the offset value into the base value and resets the offset to zero. The final output of the value is unchanged.

method interpolate

interpolate: <OutputT extends string | number>(
    config: InterpolationConfigType
) => AnimatedInterpolation<OutputT>;

Interpolates the value before updating the property, e.g. mapping 0-1 to 0-10.

method removeAllListeners

removeAllListeners: () => void;

method removeListener

removeListener: (id: string) => void;

method resetAnimation

resetAnimation: (callback?: (value: number) => void) => void;

Stops any animation and resets the value to its original.
See https://reactnative.dev/docs/animatedvalue#resetanimation

method setOffset

setOffset: (offset: number) => void;

Sets an offset that is applied on top of whatever value is set, whether via setValue, an animation, or Animated.event. Useful for compensating things like the start of a pan gesture.

method setValue

setValue: (value: number) => void;

Directly set the value. This will stop any animations running on the value and update all the bound properties.

method stopAnimation

stopAnimation: (callback?: (value: number) => void) => void;

Stops any running animation or tracking. callback is invoked with the final value after stopping the animation, which is useful for updating state to match the animation position with layout.

class ValueXY

class ValueXY extends AnimatedWithChildren {}

2D Value for driving 2D animations, such as pan gestures. Almost identical API to normal Animated.Value, but multiplexed. Contains two regular Animated.Values under the hood.

constructor

constructor(
    valueIn?: { x: number | AnimatedValue; y: number | AnimatedValue },
    config?: AnimatedConfig
);

property x

x: Value;

property y

y: Value;

method addListener

addListener: (callback: ValueXYListenerCallback) => string;

method extractOffset

extractOffset: () => void;

method flattenOffset

flattenOffset: () => void;

method getLayout

getLayout: () => { [key: string]: Value };

Converts {x, y} into {left, top} for use in style, e.g.
style={this.state.anim.getLayout()}

method getTranslateTransform

getTranslateTransform: () => [
    { translateX: AnimatedValue },
    { translateY: AnimatedValue }
];

Converts {x, y} into a useable translation transform, e.g.

 style={{
   transform: this.state.anim.getTranslateTransform()
 }}

method removeListener

removeListener: (id: string) => void;

method resetAnimation

resetAnimation: (callback?: (value: { x: number; y: number }) => void) => void;

method setOffset

setOffset: (offset: { x: number; y: number }) => void;

method setValue

setValue: (value: { x: number; y: number }) => void;

method stopAnimation

stopAnimation: (callback?: (value: { x: number; y: number }) => void) => void;

interface AnimatedComponent

interface AnimatedComponent<T extends React.ComponentType<any>>
    extends React.FC<AnimatedProps<React.ComponentPropsWithRef<T>>> {}

interface AnimationConfig

interface AnimationConfig {}

property isInteraction

isInteraction?: boolean | undefined;

property useNativeDriver

useNativeDriver: boolean;

interface CompositeAnimation

interface CompositeAnimation {}

property reset

reset: () => void;

Stops any running animation and resets the value to its original.

property start

start: (callback?: EndCallback) => void;

Animations are started by calling start() on your animation. start() takes a completion callback that will be called when the animation is done or when the animation is done because stop() was called on it before it could finish.
Parameter callback
Optional function that will be called after the animation finished running normally or when the animation is done because stop() was called on it before it could finish
Example 1
Animated.timing({}).start(({ finished }) => { // completion callback });

property stop

stop: () => void;

Stops any running animation.

interface DecayAnimationConfig

interface DecayAnimationConfig extends AnimationConfig {}

property deceleration

deceleration?: number | undefined;

property velocity

velocity: number | { x: number; y: number };

interface EventConfig

interface EventConfig<T> {}

property listener

listener?: ((event: NativeSyntheticEvent<T>) => void) | undefined;

property useNativeDriver

useNativeDriver: boolean;

interface LoopAnimationConfig

interface LoopAnimationConfig {}

property iterations

iterations?: number | undefined;

property resetBeforeIteration

resetBeforeIteration?: boolean | undefined;

Defaults to true

interface SpringAnimationConfig

interface SpringAnimationConfig extends AnimationConfig {}

property bounciness

bounciness?: number | undefined;

property damping

damping?: number | undefined;

property delay

delay?: number | undefined;

property friction

friction?: number | undefined;

property mass

mass?: number | undefined;

property overshootClamping

overshootClamping?: boolean | undefined;

property restDisplacementThreshold

restDisplacementThreshold?: number | undefined;

property restSpeedThreshold

restSpeedThreshold?: number | undefined;

property speed

speed?: number | undefined;

property stiffness

stiffness?: number | undefined;

property tension

tension?: number | undefined;

property toValue

toValue:
    | number
    | AnimatedValue
    | { x: number; y: number }
    | AnimatedValueXY
    | RgbaValue
    | AnimatedColor
    | AnimatedInterpolation<number>;

property velocity

velocity?: number | { x: number; y: number } | undefined;

interface TimingAnimationConfig

interface TimingAnimationConfig extends AnimationConfig {}

property delay

delay?: number | undefined;

property duration

duration?: number | undefined;

property easing

easing?: ((value: number) => number) | undefined;

property toValue

toValue:
    | number
    | AnimatedValue
    | { x: number; y: number }
    | AnimatedValueXY
    | AnimatedInterpolation<number>;

interface WithAnimatedArray

interface WithAnimatedArray<P> extends Array<WithAnimatedValue<P>> {}

type AnimatedComponentOptions

type AnimatedComponentOptions = {
    collapsable?: boolean | undefined;
};

type AnimatedConfig

type AnimatedConfig = {
    readonly useNativeDriver: boolean;
};

type AnimatedProps

type AnimatedProps<T> = {
    [key in keyof T]: key extends NonAnimatedProps
        ? key extends 'ref'
            ? TAugmentRef<T[key]>
            : T[key]
        : WithAnimatedValue<T[key]>;
};

type AnimatedValue

type AnimatedValue = Value;

type AnimatedValueXY

type AnimatedValueXY = ValueXY;

type Animation

type Animation = {
    start(
        fromValue: number,
        onUpdate: (value: number) => void,
        onEnd: EndCallback | null,
        previousAnimation: Animation | null,
        animatedValue: AnimatedValue
    ): void;
    stop(): void;
};

type Builtin

type Builtin = Function | Date | Error | RegExp;

type ComponentProps

type ComponentProps<T> = T extends
    | React.ComponentType<infer P>
    | React.Component<infer P>
    ? P
    : never;

type EndCallback

type EndCallback = (result: EndResult) => void;

type EndResult

type EndResult = { finished: boolean };

type ExtrapolateType

type ExtrapolateType = 'extend' | 'identity' | 'clamp';

type InterpolationConfigType

type InterpolationConfigType = {
    inputRange: number[];
    outputRange: number[] | string[];
    easing?: ((input: number) => number) | undefined;
    extrapolate?: ExtrapolateType | undefined;
    extrapolateLeft?: ExtrapolateType | undefined;
    extrapolateRight?: ExtrapolateType | undefined;
};

type LegacyRef

type LegacyRef<C> = { getNode(): C };

type Mapping

type Mapping = { [key: string]: Mapping } | AnimatedValue;

type NonAnimatedProps

type NonAnimatedProps = 'key' | 'ref';

type Nullable

type Nullable = undefined | null;

type ParallelConfig

type ParallelConfig = {
    stopTogether?: boolean | undefined; // If one is stopped, stop all.  default: true
};

type Primitive

type Primitive = string | number | boolean | symbol;

type RgbaAnimatedValue

type RgbaAnimatedValue = {
    readonly r: AnimatedValue;
    readonly g: AnimatedValue;
    readonly b: AnimatedValue;
    readonly a: AnimatedValue;
};

type RgbaValue

type RgbaValue = {
    readonly r: number;
    readonly g: number;
    readonly b: number;
    readonly a: number;
};

type TAugmentRef

type TAugmentRef<T> = T extends React.Ref<infer R>
    ? unknown extends R
        ? never
        : React.Ref<R | LegacyRef<R>>
    : never;

type ValueListenerCallback

type ValueListenerCallback = (state: { value: number }) => void;

type ValueXYListenerCallback

type ValueXYListenerCallback = (value: { x: number; y: number }) => void;

type WithAnimatedObject

type WithAnimatedObject<T> = {
    [K in keyof T]: WithAnimatedValue<T[K]>;
};

type WithAnimatedValue

type WithAnimatedValue<T> = T extends Builtin | Nullable
    ? T
    : T extends Primitive
    ? T | Value | AnimatedInterpolation<number | string> // add `Value` and `AnimatedInterpolation` but also preserve original T
    : T extends Array<infer P>
    ? WithAnimatedArray<P>
    : T extends {}
    ? WithAnimatedObject<T>
    : T;

namespace Appearance

namespace Appearance {}

function addChangeListener

addChangeListener: (listener: AppearanceListener) => NativeEventSubscription;

Add an event handler that is fired when appearance preferences change.

function getColorScheme

getColorScheme: () => ColorSchemeName;

Note: Although color scheme is available immediately, it may change at any time. Any rendering logic or styles that depend on this should try to call this function on every render, rather than caching the value (for example, using inline styles rather than setting a value in a StyleSheet).
Example: const colorScheme = Appearance.getColorScheme();

function setColorScheme

setColorScheme: (scheme: ColorSchemeName | null | undefined) => void;

Set the color scheme preference. This is useful for overriding the default color scheme preference for the app. Note that this will not change the appearance of the system UI, only the appearance of the app. Only available on iOS 13+ and Android 10+.

type AppearanceListener

type AppearanceListener = (preferences: AppearancePreferences) => void;

type AppearancePreferences

type AppearancePreferences = {
    colorScheme: ColorSchemeName;
};

namespace AppRegistry

namespace AppRegistry {}

AppRegistry is the JS entry point to running all React Native apps. App root components should register themselves with AppRegistry.registerComponent, then the native system can load the bundle for the app and then actually run the app when it's ready by invoking AppRegistry.runApplication.
To "stop" an application when a view should be destroyed, call AppRegistry.unmountApplicationComponentAtRootTag with the tag that was pass into runApplication. These should always be used as a pair.
AppRegistry should be required early in the require sequence to make sure the JS execution environment is setup before other modules are required.

function cancelHeadlessTask

cancelHeadlessTask: (taskId: number, taskKey: string) => void;

function getAppKeys

getAppKeys: () => string[];

function getRegistry

getRegistry: () => { sections: string[]; runnables: Runnable[] };

function getRunnable

getRunnable: (appKey: string) => Runnable | undefined;

function getSectionKeys

getSectionKeys: () => string[];

function getSections

getSections: () => Record<string, Runnable>;

function registerCancellableHeadlessTask

registerCancellableHeadlessTask: (
    taskKey: string,
    taskProvider: TaskProvider,
    taskCancelProvider: TaskCancelProvider
) => void;

function registerComponent

registerComponent: (
    appKey: string,
    getComponentFunc: ComponentProvider,
    section?: boolean
) => string;

function registerConfig

registerConfig: (config: AppConfig[]) => void;

function registerHeadlessTask

registerHeadlessTask: (taskKey: string, taskProvider: TaskProvider) => void;

function registerRunnable

registerRunnable: (appKey: string, func: Runnable) => string;

function registerSection

registerSection: (appKey: string, component: ComponentProvider) => void;

function runApplication

runApplication: (appKey: string, appParameters: any) => void;

function setComponentProviderInstrumentationHook

setComponentProviderInstrumentationHook: (
    hook: ComponentProviderInstrumentationHook
) => void;

function setRootViewStyleProvider

setRootViewStyleProvider: (provider: RootViewStyleProvider) => void;

function setSurfaceProps

setSurfaceProps: (
    appKey: string,
    appParameters: any,
    displayMode?: number
) => void;

function setWrapperComponentProvider

setWrapperComponentProvider: (provider: WrapperComponentProvider) => void;

function startHeadlessTask

startHeadlessTask: (taskId: number, taskKey: string, data: any) => void;

function unmountApplicationComponentAtRootTag

unmountApplicationComponentAtRootTag: (rootTag: number) => void;

namespace global

namespace global {}

variable console

var console: Console;

variable ErrorUtils

const ErrorUtils: ErrorUtils;

variable HermesInternal

const HermesInternal: {};

variable originalXMLHttpRequest

const originalXMLHttpRequest: any;

This contains the non-native XMLHttpRequest object, which you can use if you want to route network requests through DevTools (to trace them):
global.XMLHttpRequest = global.originalXMLHttpRequest;
See Also
- https://github.com/facebook/react-native/issues/934

variable require

var require: NodeRequire;

interface Console

interface Console {}

Console polyfill
See Also
- https://reactnative.dev/docs/javascript-environment#polyfills

property ignoredYellowBox

ignoredYellowBox: string[];

Deprecated
Use LogBox.ignoreLogs(patterns) instead

method debug

debug: {
    (...data: any[]): void;
    (message?: any, ...optionalParams: any[]): void;
};

method error

error: {
    (...data: any[]): void;
    (message?: any, ...optionalParams: any[]): void;
};

method group

group: { (...data: any[]): void; (label?: string): void };

method groupCollapsed

groupCollapsed: { (...data: any[]): void; (label?: string): void };

method groupEnd

groupEnd: { (): void; (): void };

method info

info: {
    (...data: any[]): void;
    (message?: any, ...optionalParams: any[]): void;
};

method log

log: { (...data: any[]): void; (message?: any, ...optionalParams: any[]): void };

method table

table: {
    (tabularData?: any, properties?: string[]): void;
    (...data: any[]): void;
};

method trace

trace: {
    (...data: any[]): void;
    (message?: any, ...optionalParams: any[]): void;
};

method warn

warn: {
    (...data: any[]): void;
    (message?: any, ...optionalParams: any[]): void;
};

interface NodeRequire

interface NodeRequire {}

call signature

(id: string): any;

namespace react-native/Libraries/BatchedBridge/BatchedBridge

module 'react-native/Libraries/BatchedBridge/BatchedBridge' {}

variable BatchedBridge

const BatchedBridge: MessageQueue;

namespace react-native/Libraries/BatchedBridge/MessageQueue

module 'react-native/Libraries/BatchedBridge/MessageQueue' {}

class MessageQueue

class MessageQueue {}

method getCallableModule

getCallableModule: (name: string) => Object;

method registerCallableModule

registerCallableModule: (name: string, module: Object) => void;

method registerLazyCallableModule

registerLazyCallableModule: (name: string, factory: () => Object) => void;

method spy

static spy: (spyOrToggle: boolean | ((data: SpyData) => void)) => void;

namespace react-native/Libraries/Core/Devtools/parseErrorStack

module 'react-native/Libraries/Core/Devtools/parseErrorStack' {}

Copyright (c) Meta Platforms, Inc. and affiliates.
This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree.

function parseErrorStack

parseErrorStack: (error: ExtendedError) => StackFrame[];

interface ExtendedError

interface ExtendedError extends Error {}

property framesToPop

framesToPop?: number | undefined;

type StackFrame

type StackFrame = {
    file: string;
    methodName: string;
    lineNumber: number;
    column: number | null;
};

namespace react-native/Libraries/Core/Devtools/symbolicateStackTrace

module 'react-native/Libraries/Core/Devtools/symbolicateStackTrace' {}

function symbolicateStackTrace

symbolicateStackTrace: (
    stack: ReadonlyArray<StackFrame>,
    extraData?: any
) => Promise<StackFrame[]>;

namespace react-native/Libraries/NewAppScreen

module 'react-native/Libraries/NewAppScreen' {}

Copyright (c) Meta Platforms, Inc. and affiliates.
This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree.

variable Colors

const Colors: any;

variable DebugInstructions

const DebugInstructions: any;

const Header: any;

variable LearnMoreLinks

const LearnMoreLinks: any;

variable ReloadInstructions

const ReloadInstructions: any;

namespace react-native/Libraries/Types/CodegenTypes

module 'react-native/Libraries/Types/CodegenTypes' {}

type BubblingEventHandler

type BubblingEventHandler<T, PaperName extends string | never = never> = (
    event: NativeSyntheticEvent<T>
) => void | Promise<void>;

type DefaultTypes

type DefaultTypes = number | boolean | string | ReadonlyArray<string>;

type DirectEventHandler

type DirectEventHandler<T, PaperName extends string | never = never> = (
    event: NativeSyntheticEvent<T>
) => void | Promise<void>;

type Double

type Double = number;

type EventEmitter

type EventEmitter<T> = (
    handler: (arg: T) => void | Promise<void>
) => EventSubscription;

type Float

type Float = number;

type Int32

type Int32 = number;

type UnsafeMixed

type UnsafeMixed = unknown;

type UnsafeObject

type UnsafeObject = object;

type WithDefault

type WithDefault<
    Type extends DefaultTypes,
    Value extends Type | string | undefined | null
> = Type | undefined | null;

namespace react-native/Libraries/Utilities/codegenNativeCommands

module 'react-native/Libraries/Utilities/codegenNativeCommands' {}

Copyright (c) Meta Platforms, Inc. and affiliates.
This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree.

function codegenNativeCommands

codegenNativeCommands: <T extends object>(
    options: Options<keyof T extends string ? keyof T : never>
) => T;

interface Options

interface Options<T extends string> {}

property supportedCommands

readonly supportedCommands: ReadonlyArray<T>;

namespace react-native/Libraries/Utilities/codegenNativeComponent

module 'react-native/Libraries/Utilities/codegenNativeComponent' {}

function codegenNativeComponent

codegenNativeComponent: <Props extends object>(
    componentName: string,
    options?: Options
) => HostComponent<T>;

interface Options

interface Options {}

property excludedPlatforms

readonly excludedPlatforms?: ReadonlyArray<'iOS' | 'android'> | undefined;

property interfaceOnly

readonly interfaceOnly?: boolean | undefined;

property paperComponentName

readonly paperComponentName?: string | undefined;

property paperComponentNameDeprecated

readonly paperComponentNameDeprecated?: string | undefined;

type NativeComponentType

type NativeComponentType<T> = HostComponent<T>;

namespace StyleSheet

namespace StyleSheet {}

variable absoluteFill

const absoluteFill: Number & { __registeredStyleBrand: AbsoluteFillStyle };

A very common pattern is to create overlays with position absolute and zero positioning, so absoluteFill can be used for convenience and to reduce duplication of these repeated styles.

variable absoluteFillObject

const absoluteFillObject: AbsoluteFillStyle;

Sometimes you may want absoluteFill but with a couple tweaks - absoluteFillObject can be used to create a customized entry in a StyleSheet, e.g.:
const styles = StyleSheet.create({ wrapper: { ...StyleSheet.absoluteFillObject, top: 10, backgroundColor: 'transparent', }, });

variable hairlineWidth

const hairlineWidth: number;

This is defined as the width of a thin line on the platform. It can be used as the thickness of a border or division between two elements. Example:
{ borderBottomColor: '#bbb', borderBottomWidth: StyleSheet.hairlineWidth }
This constant will always be a round number of pixels (so a line defined by it look crisp) and will try to match the standard width of a thin line on the underlying platform. However, you should not rely on it being a constant size, because on different platforms and screen densities its value may be calculated differently.

function compose

compose: <
    T extends ViewStyle | TextStyle | ImageStyle,
    U extends T,
    V extends T
>(
    style1: StyleProp<U> | Array<StyleProp<U>>,
    style2: StyleProp<V> | Array<StyleProp<V>>
) => StyleProp<T>;

Combines two styles such that style2 will override any styles in style1. If either style is falsy, the other one is returned without allocating an array, saving allocations and maintaining reference equality for PureComponent checks.

function create

create: <T extends NamedStyles<T> | NamedStyles<any>>(
    styles: T & NamedStyles<any>
) => T;

An identity function for creating style sheets.

function flatten

flatten: <T>(style?: StyleProp<T>) => T extends (infer U)[] ? U : T;

Flattens an array of style objects, into one aggregated style object.

Example:

const styles = StyleSheet.create({
  listItem: {
    flex: 1,
    fontSize: 16,
    color: 'white'
  },
  selectedListItem: {
    color: 'green'
  }
});

StyleSheet.flatten([styles.listItem, styles.selectedListItem])
// returns { flex: 1, fontSize: 16, color: 'green' }

function setStyleAttributePreprocessor

setStyleAttributePreprocessor: (
    property: string,
    process: (nextProp: any) => any
) => void;

WARNING: EXPERIMENTAL. Breaking changes will probably happen a lot and will not be reliably announced. The whole thing might be deleted, who knows? Use at your own risk.
Sets a function to use to pre-process a style property value. This is used internally to process color and transform values. You should not use this unless you really know what you are doing and have exhausted other options.

interface AbsoluteFillStyle

interface AbsoluteFillStyle {}

property bottom

bottom: 0;

property left

left: 0;

property position

position: 'absolute';

property right

right: 0;

property top

top: 0;

type NamedStyles

type NamedStyles<T> = { [P in keyof T]: ViewStyle | TextStyle | ImageStyle };

namespace Systrace

module 'Libraries/Performance/Systrace.d.ts' {}

Copyright (c) Meta Platforms, Inc. and affiliates.
This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree.

function beginAsyncEvent

beginAsyncEvent: (eventName: EventName, args?: EventArgs) => number;

Marks the start of a potentially asynchronous event. The end of this event should be marked calling the endAsyncEvent function with the cookie returned by this function.

function beginEvent

beginEvent: (eventName: EventName, args?: EventArgs) => void;

Marks the start of a synchronous event that should end in the same stack frame. The end of this event should be marked using the endEvent function.

function counterEvent

counterEvent: (eventName: EventName, value: number) => void;

counterEvent registers the value to the eventName on the systrace timeline

function endAsyncEvent

endAsyncEvent: (eventName: EventName, cookie: number, args?: EventArgs) => void;

Registers a new value for a counter event.

function endEvent

endEvent: (args?: EventArgs) => void;

Marks the end of a synchronous event started in the same stack frame.

function isEnabled

isEnabled: () => boolean;

Indicates if the application is currently being traced.
Calling methods on this module when the application isn't being traced is cheap, but this method can be used to avoid computing expensive values for those functions.
Example 1
if (Systrace.isEnabled()) { const expensiveArgs = computeExpensiveArgs(); Systrace.beginEvent('myEvent', expensiveArgs); }

function setEnabled

setEnabled: (_doEnable: boolean) => void;

Deprecated
This function is now a no-op but it's left for backwards compatibility. isEnabled will now synchronously check if we're actively profiling or not. This is necessary because we don't have callbacks to know when profiling has started/stopped on Android APIs.

type EventArgs

type EventArgs = { [key: string]: string } | void | null;

type EventName

type EventName = string | (() => string);

Copyright (c) Meta Platforms, Inc. and affiliates.
This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree.

namespace TurboModuleRegistry

module 'Libraries/TurboModule/TurboModuleRegistry.d.ts' {}

Copyright (c) Meta Platforms, Inc. and affiliates.
This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree.

function get

get: <T extends TurboModule>(name: string) => T | null;

function getEnforcing

getEnforcing: <T extends TurboModule>(name: string) => T;

Package Files (87)

Dev Dependencies (0)

No dev dependencies.

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.

Markdown

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

HTML

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

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

react-native

Install

Overview

Index

Variables

Functions

Classes

Interfaces

Type Aliases

Namespaces

Variables

variable AccessibilityInfo

variable ActionSheetIOS

variable ActivityIndicatorBase

variable Alert

variable AppState

variable BackHandler

variable Clipboard

See Also

Deprecated

variable DeviceEventEmitter

variable DevMenu

variable DevSettings

variable Dimensions

variable DrawerLayoutAndroidBase

variable Easing

variable I18nManager

variable ImageBackgroundBase

variable ImageBase

variable InteractionManager

variable Keyboard

variable KeyboardAvoidingViewBase

variable LayoutAnimation

variable Linking

variable LogBox

variable NativeAppEventEmitter

variable NativeModules

Example 1

variable PanResponder

variable PermissionsAndroid

variable PixelRatio

variable Platform

variable Pressable

variable ProgressBarAndroidBase

variable PushNotificationIOS

See Also

Deprecated

variable RefreshControlBase

variable registerCallableModule

variable RootTagContext

variable SafeAreaViewBase

variable ScrollViewBase

variable Settings

variable Share

variable SwitchBase

variable TextBase

variable TextInputBase

variable ToastAndroid

variable Touchable

variable TouchableHighlight

See Also

variable TouchableNativeFeedbackBase

variable TouchableOpacity

See Also

variable TouchableWithoutFeedbackBase

variable UIManager

variable Vibration

variable ViewBase

variable YellowBox

See Also

Deprecated

Functions

function DynamicColorIOS

Parameter tuple

function findNodeHandle

function PlatformColor

See Also

function processColor

function requireNativeComponent

function unstable_batchedUpdates