@types/react-native

// Type definitions for react-native 0.70 // Project: https://github.com/facebook/react-native // Definitions by: Eloy Durán <https://github.com/alloy> // HuHuanming <https://github.com/huhuanming> // Kyle Roach <https://github.com/iRoachie> // Tim Wang <https://github.com/timwangdev> // Kamal Mahyuddin <https://github.com/kamal> // Alex Dunne <https://github.com/alexdunne> // Manuel Alabor <https://github.com/swissmanu> // Michele Bombardi <https://github.com/bm-software> // Martin van Dam <https://github.com/mvdam> // Kacper Wiszczuk <https://github.com/esemesek> // Ryan Nickel <https://github.com/mrnickel> // Souvik Ghosh <https://github.com/souvik-ghosh> // Cheng Gibson <https://github.com/nossbigg> // Saransh Kataria <https://github.com/saranshkataria> // Wojciech Tyczynski <https://github.com/tykus160> // Jake Bloom <https://github.com/jakebloom> // Ceyhun Ozugur <https://github.com/ceyhun> // Mike Martin <https://github.com/mcmar> // Theo Henry de Villeneuve <https://github.com/theohdv> // Romain Faust <https://github.com/romain-faust> // Be Birchall <https://github.com/bebebebebe> // Jesse Katsumata <https://github.com/Naturalclar> // Xianming Zhong <https://github.com/chinesedfan> // Valentyn Tolochko <https://github.com/vtolochk> // Sergey Sychev <https://github.com/SychevSP> // Daiki Ihara <https://github.com/sasurau4> // Abe Dolinger <https://github.com/256hz> // Dominique Richard <https://github.com/doumart> // Mohamed Shaban <https://github.com/drmas> // Jérémy Barbet <https://github.com/jeremybarbet> // David Sheldrick <https://github.com/ds300> // Natsathorn Yuthakovit <https://github.com/natsathorn> // ConnectDotz <https://github.com/connectdotz> // Alexey Molchan <https://github.com/alexeymolchan> // Alex Brazier <https://github.com/alexbrazier> // Arafat Zahan <https://github.com/kuasha420> // Pedro Hernández <https://github.com/phvillegas> // Sebastian Silbermann <https://github.com/eps1lon> // Zihan Chen <https://github.com/ZihanChen-MSFT> // Lorenzo Sciandra <https://github.com/kelset> // Mateusz Wit <https://github.com/MateWW> // Luna Wei <https://github.com/lunaleaps> // Saad Najmi <https://github.com/saadnajmi> // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 3.0 /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// // // USING: these definitions are meant to be used with the TSC compiler target set to at least ES2015. // // USAGE EXAMPLES: check the RNTSExplorer project at https://github.com/bgrieder/RNTSExplorer // // CONTRIBUTING: please open pull requests // // CREDITS: This work is based on an original work made by Bernd Paradies: https://github.com/bparadie // /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// /// <reference path="globals.d.ts" /> /// <reference path="legacy-properties.d.ts" /> /// <reference path="BatchedBridge.d.ts" /> /// <reference path="Codegen.d.ts" /> /// <reference path="Devtools.d.ts" /> /// <reference path="LaunchScreen.d.ts" /> import * as React from 'react'; type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>; type Constructor<T> = new (...args: any[]) => T; export type MeasureOnSuccessCallback = ( x: number, y: number, width: number, height: number, pageX: number, pageY: number, ) => void; export type MeasureInWindowOnSuccessCallback = (x: number, y: number, width: number, height: number) => void; export type MeasureLayoutOnSuccessCallback = (left: number, top: number, width: number, height: number) => void; /** * EventSubscription represents a subscription to a particular event. It can * remove its own subscription. */ interface EventSubscription { eventType: string; key: number; subscriber: EventSubscriptionVendor; /** * @param subscriber the subscriber that controls * this subscription. */ new (subscriber: EventSubscriptionVendor): EventSubscription; /** * Removes this subscription from the subscriber that controls it. */ remove(): void; } /** * EventSubscriptionVendor stores a set of EventSubscriptions that are * subscribed to a particular event type. */ declare class EventSubscriptionVendor { constructor(); /** * Adds a subscription keyed by an event type. * */ addSubscription(eventType: string, subscription: EventSubscription): EventSubscription; /** * Removes a bulk set of the subscriptions. * * @param eventType - Optional name of the event type whose * registered supscriptions to remove, if null remove all subscriptions. */ removeAllSubscriptions(eventType?: string): void; /** * Removes a specific subscription. Instead of calling this function, call * `subscription.remove()` directly. * */ removeSubscription(subscription: any): void; /** * Returns the array of subscriptions that are currently registered for the * given event type. * * Note: This array can be potentially sparse as subscriptions are deleted * from it when they are removed. * */ getSubscriptionsForType(eventType: string): EventSubscription[]; } /** * EmitterSubscription represents a subscription with listener and context data. */ interface EmitterSubscription extends EventSubscription { emitter: EventEmitter; listener: () => any; context: any; /** * @param emitter - The event emitter that registered this * subscription * @param subscriber - The subscriber that controls * this subscription * @param listener - Function to invoke when the specified event is * emitted * @param context - Optional context object to use when invoking the * listener */ new ( emitter: EventEmitter, subscriber: EventSubscriptionVendor, listener: () => any, context: any, ): EmitterSubscription; /** * 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. */ remove(): void; } declare class EventEmitter { /** * * @param subscriber - Optional subscriber instance * to use. If omitted, a new subscriber will be created for the emitter. */ constructor(subscriber?: EventSubscriptionVendor | null); /** * 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. * * @param eventType - Name of the event to listen to * @param listener - Function to invoke when the specified event is * emitted * @param context - Optional context object to use when invoking the * listener */ addListener(eventType: string, listener: (...args: any[]) => any, context?: any): EmitterSubscription; /** * Removes all of the registered listeners, including those registered as * listener maps. * * @param eventType - Optional name of the event whose registered * listeners to remove */ removeAllListeners(eventType?: string): void; /** * Returns the number of listeners that are currently registered for the given * event. * * @param eventType - Name of the event to query */ listenerCount(eventType: string): number; /** * Emits an event of the given type with the given data. All handlers of that * particular type will be notified. * * @param eventType - Name of the event to emit * @param Arbitrary arguments to be passed to each registered listener * * @example * emitter.addListener('someEvent', function(message) { * console.log(message); * }); * * emitter.emit('someEvent', 'abc'); // logs 'abc' */ emit(eventType: string, ...params: any[]): void; } /** * 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 https://github.com/facebook/react-native/blob/master/Libraries/Renderer/shims/ReactNativeTypes.js#L87 */ export interface NativeMethods { /** * 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. */ measure(callback: MeasureOnSuccessCallback): 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. */ measureInWindow(callback: MeasureInWindowOnSuccessCallback): 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._ */ measureLayout( relativeToNativeComponentRef: HostComponent<unknown> | number, onSuccess: MeasureLayoutOnSuccessCallback, onFail: () => void /* currently unused */, ): 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)). */ setNativeProps(nativeProps: object): void; /** * Requests focus for the given input or view. The exact behavior triggered * will depend on the platform and type of view. */ focus(): void; /** * Removes focus from an input or view. This is the opposite of `focus()`. */ blur(): void; refs: { [key: string]: React.Component<any, any>; }; } /** * @deprecated Use NativeMethods instead. */ export type NativeMethodsMixin = NativeMethods; /** * @deprecated Use NativeMethods instead. */ export type NativeMethodsMixinType = NativeMethods; /** * Represents a native component, such as those returned from `requireNativeComponent`. * * @see https://github.com/facebook/react-native/blob/v0.62.0-rc.5/Libraries/Renderer/shims/ReactNativeTypes.js * * @todo This should eventually be defined as an AbstractComponent, but that * should first be introduced in the React typings. */ export interface HostComponent extends Pick<React.ComponentClass, Exclude<keyof React.ComponentClass, 'new'>> { new (props: P, context?: any): React.Component & Readonly<NativeMethods>; } // see react-jsx.d.ts export function createElement( type: React.ElementType, props?: P, ...children: React.ReactNode[] ): React.ReactElement; export type Runnable = (appParameters: any) => void; type Task = (taskData: any) => Promise<void>; type TaskProvider = () => Task; type NodeHandle = number; // Similar to React.SyntheticEvent except for nativeEvent export interface NativeSyntheticEvent<T> extends React.BaseSyntheticEvent<T, React.ElementRef<HostComponent<unknown>>, React.ElementRef<HostComponent<unknown>>> {} export interface NativeTouchEvent { /** * Array of all touch events that have changed since the last event */ changedTouches: NativeTouchEvent[]; /** * The ID of the touch */ identifier: string; /** * The X position of the touch, relative to the element */ locationX: number; /** * The Y position of the touch, relative to the element */ locationY: number; /** * The X position of the touch, relative to the screen */ pageX: number; /** * The Y position of the touch, relative to the screen */ pageY: number; /** * The node id of the element receiving the touch event */ target: NodeHandle; /** * A time identifier for the touch, useful for velocity calculation */ timestamp: number; /** * Array of all current touches on the screen */ touches: NativeTouchEvent[]; /** * 3D Touch reported force * @platform ios */ force?: number | undefined; } /** * https://developer.mozilla.org/en-US/docs/Web/API/UIEvent */ export interface NativeUIEvent { /** * Returns a long with details about the event, depending on the event type. */ readonly detail: number; } /** * https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent */ export interface NativeMouseEvent extends NativeUIEvent { /** * The X coordinate of the mouse pointer in global (screen) coordinates. */ readonly screenX: number; /** * The Y coordinate of the mouse pointer in global (screen) coordinates. */ readonly screenY: number; /** * The X coordinate of the mouse pointer relative to the whole document. */ readonly pageX: number; /** * The Y coordinate of the mouse pointer relative to the whole document. */ readonly pageY: number; /** * The X coordinate of the mouse pointer in local (DOM content) coordinates. */ readonly clientX: number; /** * The Y coordinate of the mouse pointer in local (DOM content) coordinates. */ readonly clientY: number; /** * Alias for NativeMouseEvent.clientX */ readonly x: number; /** * Alias for NativeMouseEvent.clientY */ readonly y: number; /** * Returns true if the control key was down when the mouse event was fired. */ readonly ctrlKey: boolean; /** * Returns true if the shift key was down when the mouse event was fired. */ readonly shiftKey: boolean; /** * Returns true if the alt key was down when the mouse event was fired. */ readonly altKey: boolean; /** * Returns true if the meta key was down when the mouse event was fired. */ readonly metaKey: boolean; /** * The button number that was pressed (if applicable) when the mouse event was fired. */ readonly button: number; /** * The buttons being depressed (if any) when the mouse event was fired. */ readonly buttons: number; /** * The secondary target for the event, if there is one. */ readonly relatedTarget: null | number | React.ElementRef<HostComponent<unknown>>; // offset is proposed: https://drafts.csswg.org/cssom-view/#extensions-to-the-mouseevent-interface /** * The X coordinate of the mouse pointer between that event and the padding edge of the target node */ readonly offsetX: number; /** * The Y coordinate of the mouse pointer between that event and the padding edge of the target node */ readonly offsetY: number; } /** * https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent */ export interface NativePointerEvent extends NativeMouseEvent { /** * A unique identifier for the pointer causing the event. */ readonly pointerId: number; /** * The width (magnitude on the X axis), in CSS pixels, of the contact geometry of the pointer */ readonly width: number; /** * The height (magnitude on the Y axis), in CSS pixels, of the contact geometry of the pointer. */ readonly height: 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. */ readonly pressure: 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. */ readonly tangentialPressure: 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. */ readonly tiltX: 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. */ readonly tiltY: 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. */ readonly twist: number; /** * Indicates the device type that caused the event (mouse, pen, touch, etc.) */ readonly pointerType: string; /** * Indicates if the pointer represents the primary pointer of this pointer type. */ readonly isPrimary: boolean; } export type PointerEvent = NativeSyntheticEvent<NativePointerEvent>; export interface GestureResponderEvent extends NativeSyntheticEvent<NativeTouchEvent> {} export interface MouseEvent extends NativeSyntheticEvent<NativeMouseEvent> {} // See https://reactnative.dev/docs/scrollview#contentoffset export interface PointProp { x: number; y: number; } export interface Insets { top?: number | undefined; left?: number | undefined; bottom?: number | undefined; right?: number | undefined; } export interface PressableStateCallbackType { readonly pressed: boolean; } export interface PressableAndroidRippleConfig { color?: null | ColorValue | undefined; borderless?: null | boolean | undefined; radius?: null | number | undefined; foreground?: null | boolean | undefined; } export interface PressableProps extends AccessibilityProps, Omit<ViewProps, 'children' | 'style' | 'hitSlop'> { /** * Called when the hover is activated to provide visual feedback. */ onHoverIn?: null | ((event: MouseEvent) => void) | undefined, /** * Called when the hover is deactivated to undo visual feedback. */ onHoverOut?: null | ((event: MouseEvent) => void) | undefined, /** * Called when a single tap gesture is detected. */ onPress?: null | ((event: GestureResponderEvent) => void) | undefined; /** * Called when a touch is engaged before `onPress`. */ onPressIn?: null | ((event: GestureResponderEvent) => void) | undefined; /** * Called when a touch is released before `onPress`. */ onPressOut?: null | ((event: GestureResponderEvent) => void) | undefined; /** * Called when a long-tap gesture is detected. */ onLongPress?: null | ((event: GestureResponderEvent) => void) | undefined; /** * Called after the element loses focus. * @platform macos windows */ onBlur?: null | ((event: NativeSyntheticEvent<TargetedEvent>) => void) | undefined; /** * Called after the element is focused. * @platform macos windows */ onFocus?: null | ((event: NativeSyntheticEvent<TargetedEvent>) => void) | undefined; /** * Either children or a render prop that receives a boolean reflecting whether * the component is currently pressed. */ children?: React.ReactNode | ((state: PressableStateCallbackType) => React.ReactNode) | undefined; /** * Whether a press gesture can be interrupted by a parent gesture such as a * scroll event. Defaults to true. */ cancelable?: null | boolean | undefined; /** * Duration to wait after hover in before calling `onHoverIn`. * @platform macos windows */ delayHoverIn?: number | null | undefined; /** * Duration to wait after hover out before calling `onHoverOut`. * @platform macos windows */ delayHoverOut?: number | null | undefined; /** * Duration (in milliseconds) from `onPressIn` before `onLongPress` is called. */ delayLongPress?: null | number | undefined; /** * Whether the press behavior is disabled. */ disabled?: null | boolean | undefined; /** * Additional distance outside of this view in which a press is detected. */ hitSlop?: null | Insets | number | undefined; /** * Additional distance outside of this view in which a touch is considered a * press before `onPressOut` is triggered. */ pressRetentionOffset?: null | Insets | number | undefined; /** * If true, doesn't play system sound on touch. */ android_disableSound?: null | boolean | undefined; /** * Enables the Android ripple effect and configures its color. */ android_ripple?: null | PressableAndroidRippleConfig | undefined; /** * Used only for documentation or testing (e.g. snapshot testing). */ testOnly_pressed?: null | boolean | undefined; /** * Either view styles or a function that receives a boolean reflecting whether * the component is currently pressed and returns view styles. */ style?: StyleProp<ViewStyle> | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>) | undefined; /** * Duration (in milliseconds) to wait after press down before calling onPressIn. */ unstable_pressDelay?: number; } // TODO use React.AbstractComponent when available export const Pressable: React.ForwardRefExoticComponent<PressableProps & React.RefAttributes<View>>; /** * //FIXME: need to find documentation on which component is a TTouchable and can implement that interface * @see React.DOMAtributes */ export interface Touchable { onTouchStart?: ((event: GestureResponderEvent) => void) | undefined; onTouchMove?: ((event: GestureResponderEvent) => void) | undefined; onTouchEnd?: ((event: GestureResponderEvent) => void) | undefined; onTouchCancel?: ((event: GestureResponderEvent) => void) | undefined; onTouchEndCapture?: ((event: GestureResponderEvent) => void) | undefined; } export const Touchable: { TOUCH_TARGET_DEBUG: boolean; renderDebugView: (config: { color: string | number; hitSlop?: Insets | undefined }) => React.ReactElement | null; }; export interface PointerEvents { onPointerEnter?: ((event: PointerEvent) => void) | undefined; onPointerEnterCapture?: ((event: PointerEvent) => void) | undefined; onPointerLeave?: ((event: PointerEvent) => void) | undefined; onPointerLeaveCapture?: ((event: PointerEvent) => void) | undefined; onPointerMove?: ((event: PointerEvent) => void) | undefined; onPointerMoveCapture?: ((event: PointerEvent) => void) | undefined; onPointerCancel?: ((event: PointerEvent) => void) | undefined; onPointerCancelCapture?: ((event: PointerEvent) => void) | undefined; onPointerDown?: ((event: PointerEvent) => void) | undefined; onPointerDownCapture?: ((event: PointerEvent) => void) | undefined; onPointerUp?: ((event: PointerEvent) => void) | undefined; onPointerUpCapture?: ((event: PointerEvent) => void) | undefined; } export type ComponentProvider = () => React.ComponentType<any>; export type AppConfig = { appKey: string; component?: ComponentProvider | undefined; run?: Runnable | undefined; }; // https://github.com/facebook/react-native/blob/master/Libraries/ReactNative/AppRegistry.js /** * `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 `require`d early in the `require` sequence to make * sure the JS execution environment is setup before other modules are * `require`d. */ export namespace AppRegistry { function registerConfig(config: AppConfig[]): void; function registerComponent(appKey: string, getComponentFunc: ComponentProvider): string; function registerRunnable(appKey: string, func: Runnable): string; function getAppKeys(): string[]; function unmountApplicationComponentAtRootTag(rootTag: number): void; function runApplication(appKey: string, appParameters: any): void; function setSurfaceProps(appKey: string, appParameters: any, displayMode?: number): void; function registerHeadlessTask(appKey: string, task: TaskProvider): void; function getRunnable(appKey: string): Runnable | undefined; } export type LayoutAnimationType = 'spring' | 'linear' | 'easeInEaseOut' | 'easeIn' | 'easeOut' | 'keyboard'; export type LayoutAnimationTypes = { [type in LayoutAnimationType]: type; }; export type LayoutAnimationProperty = 'opacity' | 'scaleX' | 'scaleY' | 'scaleXY'; export type LayoutAnimationProperties = { [prop in LayoutAnimationProperty]: prop; }; export interface LayoutAnimationAnim { duration?: number | undefined; delay?: number | undefined; springDamping?: number | undefined; initialVelocity?: number | undefined; type?: LayoutAnimationType | undefined; property?: LayoutAnimationProperty | undefined; } export interface LayoutAnimationConfig { duration: number; create?: LayoutAnimationAnim | undefined; update?: LayoutAnimationAnim | undefined; delete?: LayoutAnimationAnim | undefined; } /** 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. */ export interface LayoutAnimationStatic { /** Schedules an animation to happen on the next layout. * @param 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) * @param onAnimationDidEnd Called when the animation finished. Only supported on iOS. */ configureNext: ( config: LayoutAnimationConfig, onAnimationDidEnd?: () => void, onAnimationDidFail?: () => void, ) => void; /** Helper for creating a config for configureNext. */ create: ( duration: number, type?: LayoutAnimationType, creationProp?: LayoutAnimationProperty, ) => LayoutAnimationConfig; Types: LayoutAnimationTypes; Properties: LayoutAnimationProperties; configChecker: (shapeTypes: { [key: string]: any }) => any; Presets: { easeInEaseOut: LayoutAnimationConfig; linear: LayoutAnimationConfig; spring: LayoutAnimationConfig; }; easeInEaseOut: (onAnimationDidEnd?: () => void) => void; linear: (onAnimationDidEnd?: () => void) => void; spring: (onAnimationDidEnd?: () => void) => void; } type FlexAlignType = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'; /** * Flex Prop Types * @see https://reactnative.dev/docs/flexbox * @see https://reactnative.dev/docs/layout-props */ export interface FlexStyle { alignContent?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'space-between' | 'space-around' | undefined; alignItems?: FlexAlignType | undefined; alignSelf?: 'auto' | FlexAlignType | undefined; aspectRatio?: number | undefined; borderBottomWidth?: number | undefined; borderEndWidth?: number | string | undefined; borderLeftWidth?: number | undefined; borderRightWidth?: number | undefined; borderStartWidth?: number | string | undefined; borderTopWidth?: number | undefined; borderWidth?: number | undefined; bottom?: number | string | undefined; display?: 'none' | 'flex' | undefined; end?: number | string | undefined; flex?: number | undefined; flexBasis?: number | string | undefined; flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse' | undefined; flexGrow?: number | undefined; flexShrink?: number | undefined; flexWrap?: 'wrap' | 'nowrap' | 'wrap-reverse' | undefined; height?: number | string | undefined; justifyContent?: | 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | undefined; left?: number | string | undefined; margin?: number | string | undefined; marginBottom?: number | string | undefined; marginEnd?: number | string | undefined; marginHorizontal?: number | string | undefined; marginLeft?: number | string | undefined; marginRight?: number | string | undefined; marginStart?: number | string | undefined; marginTop?: number | string | undefined; marginVertical?: number | string | undefined; maxHeight?: number | string | undefined; maxWidth?: number | string | undefined; minHeight?: number | string | undefined; minWidth?: number | string | undefined; overflow?: 'visible' | 'hidden' | 'scroll' | undefined; padding?: number | string | undefined; paddingBottom?: number | string | undefined; paddingEnd?: number | string | undefined; paddingHorizontal?: number | string | undefined; paddingLeft?: number | string | undefined; paddingRight?: number | string | undefined; paddingStart?: number | string | undefined; paddingTop?: number | string | undefined; paddingVertical?: number | string | undefined; position?: 'absolute' | 'relative' | undefined; right?: number | string | undefined; start?: number | string | undefined; top?: number | string | undefined; width?: number | string | undefined; zIndex?: number | undefined; /** * @platform ios */ direction?: 'inherit' | 'ltr' | 'rtl' | undefined; } /** * @see ShadowPropTypesIOS.js */ export interface ShadowPropTypesIOSStatic { /** * Sets the drop shadow color * @platform ios */ shadowColor: ColorValue; /** * Sets the drop shadow offset * @platform ios */ shadowOffset: { width: number; height: number }; /** * Sets the drop shadow opacity (multiplied by the color's alpha component) * @platform ios */ shadowOpacity: number; /** * Sets the drop shadow blur radius * @platform ios */ shadowRadius: number; } interface PerpectiveTransform { perspective: number; } interface RotateTransform { rotate: string; } interface RotateXTransform { rotateX: string; } interface RotateYTransform { rotateY: string; } interface RotateZTransform { rotateZ: string; } interface ScaleTransform { scale: number; } interface ScaleXTransform { scaleX: number; } interface ScaleYTransform { scaleY: number; } interface TranslateXTransform { translateX: number; } interface TranslateYTransform { translateY: number; } interface SkewXTransform { skewX: string; } interface SkewYTransform { skewY: string; } interface MatrixTransform { matrix: number[]; } export interface TransformsStyle { transform?: | ( | PerpectiveTransform | RotateTransform | RotateXTransform | RotateYTransform | RotateZTransform | ScaleTransform | ScaleXTransform | ScaleYTransform | TranslateXTransform | TranslateYTransform | SkewXTransform | SkewYTransform | MatrixTransform )[] | undefined; /** * @deprecated Use matrix in transform prop instead. */ transformMatrix?: Array<number> | undefined; /** * @deprecated Use rotate in transform prop instead. */ rotation?: number | undefined; /** * @deprecated Use scaleX in transform prop instead. */ scaleX?: number | undefined; /** * @deprecated Use scaleY in transform prop instead. */ scaleY?: number | undefined; /** * @deprecated Use translateX in transform prop instead. */ translateX?: number | undefined; /** * @deprecated Use translateY in transform prop instead. */ translateY?: number | undefined; } export interface StyleSheetProperties { hairlineWidth: number; flatten<T extends string>(style: T): T; } export interface LayoutRectangle { x: number; y: number; width: number; height: number; } // @see TextProps.onLayout export type LayoutChangeEvent = NativeSyntheticEvent<{ layout: LayoutRectangle, target?: NodeHandle | null }>; interface TextLayoutLine { ascender: number; capHeight: number; descender: number; height: number; text: string; width: number; x: number; xHeight: number; y: number; } /** * @see TextProps.onTextLayout */ export interface TextLayoutEventData extends TargetedEvent { lines: TextLayoutLine[]; } export type FontVariant = 'small-caps' | 'oldstyle-nums' | 'lining-nums' | 'tabular-nums' | 'proportional-nums'; export interface TextStyleIOS extends ViewStyle { fontVariant?: FontVariant[] | undefined; letterSpacing?: number | undefined; textDecorationColor?: ColorValue | undefined; textDecorationStyle?: 'solid' | 'double' | 'dotted' | 'dashed' | undefined; writingDirection?: 'auto' | 'ltr' | 'rtl' | undefined; } export interface TextStyleAndroid extends ViewStyle { textAlignVertical?: 'auto' | 'top' | 'bottom' | 'center' | undefined; includeFontPadding?: boolean | undefined; } // @see https://reactnative.dev/docs/text#style export interface TextStyle extends TextStyleIOS, TextStyleAndroid, ViewStyle { color?: ColorValue | undefined; fontFamily?: string | undefined; fontSize?: number | undefined; fontStyle?: 'normal' | 'italic' | 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. */ fontWeight?: 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' | undefined; letterSpacing?: number | undefined; lineHeight?: number | undefined; textAlign?: 'auto' | 'left' | 'right' | 'center' | 'justify' | undefined; textDecorationLine?: 'none' | 'underline' | 'line-through' | 'underline line-through' | undefined; textDecorationStyle?: 'solid' | 'double' | 'dotted' | 'dashed' | undefined; textDecorationColor?: ColorValue | undefined; textShadowColor?: ColorValue | undefined; textShadowOffset?: { width: number; height: number } | undefined; textShadowRadius?: number | undefined; textTransform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase' | undefined; testID?: string | undefined; } export interface TextPropsIOS { /** * Specifies whether font should be scaled down automatically to fit given style constraints. */ adjustsFontSizeToFit?: boolean | undefined; /** * Specifies smallest possible scale a font can reach when adjustsFontSizeToFit is enabled. (values 0.01-1.0). */ minimumFontScale?: number | undefined; /** * When `true`, no visual change is made when text is pressed down. By * default, a gray oval highlights the text on press down. */ suppressHighlighting?: boolean | undefined; } export interface TextPropsAndroid { /** * Specifies the disabled state of the text view for testing purposes. */ disabled?: boolean | undefined; /** * Lets the user select text, to use the native copy and paste functionality. */ selectable?: boolean | undefined; /** * The highlight color of the text. */ selectionColor?: ColorValue | undefined; /** * Set text break strategy on Android API Level 23+ * default is `highQuality`. */ textBreakStrategy?: 'simple' | 'highQuality' | 'balanced' | undefined; /** * Determines the types of data converted to clickable URLs in the text element. * By default no data types are detected. */ dataDetectorType?: null | 'phoneNumber' | 'link' | 'email' | 'none' | 'all' | undefined; /** * Hyphenation strategy */ android_hyphenationFrequency?: 'normal' | 'none' | 'full' | undefined; } // https://reactnative.dev/docs/text#props export interface TextProps extends TextPropsIOS, TextPropsAndroid, AccessibilityProps { /** * Specifies whether fonts should scale to respect Text Size accessibility settings. * The default is `true`. */ allowFontScaling?: boolean | undefined; children?: React.ReactNode; /** * 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 */ ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip' | undefined; /** * Line Break mode. Works only with numberOfLines. * clip is working only for iOS */ lineBreakMode?: 'head' | 'middle' | 'tail' | 'clip' | 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`. */ numberOfLines?: number | undefined; /** * Invoked on mount and layout changes with * * {nativeEvent: { layout: {x, y, width, height}}}. */ onLayout?: ((event: LayoutChangeEvent) => void) | undefined; /** * Invoked on Text layout */ onTextLayout?: ((event: NativeSyntheticEvent<TextLayoutEventData>) => void) | undefined; /** * This function is called on press. * Text intrinsically supports press handling with a default highlight state (which can be disabled with suppressHighlighting). */ onPress?: ((event: GestureResponderEvent) => void) | undefined; onPressIn?: ((event: GestureResponderEvent) => void) | undefined; onPressOut?: ((event: GestureResponderEvent) => void) | undefined; /** * This function is called on long press. * e.g., `onLongPress={this.increaseSize}>`` */ onLongPress?: ((event: GestureResponderEvent) => void) | undefined; /** * @see https://reactnative.dev/docs/text#style */ style?: StyleProp<TextStyle> | undefined; /** * Used to locate this view in end-to-end tests. */ testID?: string | undefined; /** * Used to reference react managed views from native code. */ nativeID?: string | 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 */ maxFontSizeMultiplier?: number | null | undefined; } /** * A React component for displaying text which supports nesting, styling, and touch handling. */ declare class TextComponent extends React.Component<TextProps> {} declare const TextBase: Constructor<NativeMethods> & typeof TextComponent; export class Text extends TextBase {} type DataDetectorTypes = 'phoneNumber' | 'link' | 'address' | 'calendarEvent' | 'none' | 'all'; /** * 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. */ export interface DocumentSelectionState extends EventEmitter { new (anchor: number, focus: number): DocumentSelectionState; /** * Apply an update to the state. If either offset value has changed, * set the values and emit the `change` event. Otherwise no-op. * */ update(anchor: number, focus: number): void; /** * Given a max text length, constrain our selection offsets to ensure * that the selection remains strictly within the text range. * */ constrainLength(maxLength: number): void; focus(): void; blur(): void; hasFocus(): boolean; isCollapsed(): boolean; isBackward(): boolean; getAnchorOffset(): number; getFocusOffset(): number; getStartOffset(): number; getEndOffset(): number; overlaps(start: number, end: number): boolean; } /** * IOS Specific properties for TextInput * @see https://reactnative.dev/docs/textinput#props */ export interface TextInputIOSProps { /** * enum('never', 'while-editing', 'unless-editing', 'always') * When the clear button should appear on the right side of the text view */ clearButtonMode?: 'never' | 'while-editing' | 'unless-editing' | 'always' | undefined; /** * If true, clears the text field automatically when editing begins */ clearTextOnFocus?: boolean | 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'` */ dataDetectorTypes?: DataDetectorTypes | DataDetectorTypes[] | 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. */ enablesReturnKeyAutomatically?: boolean | undefined; /** * Determines the color of the keyboard. */ keyboardAppearance?: 'default' | 'light' | 'dark' | 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;" */ passwordRules?: string | 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). */ rejectResponderTermination?: boolean | null | undefined; /** * See DocumentSelectionState.js, some state that is responsible for maintaining selection information for a document */ selectionState?: DocumentSelectionState | undefined; /** * If false, disables spell-check style (i.e. red underlines). The default value is inherited from autoCorrect */ spellCheck?: boolean | undefined; /** * Give the keyboard and the system information about the expected * semantic meaning for the content that users enter. * * For iOS 11+ you can set `textContentType` to `username` or `password` to * enable autofill of login details from the device keychain. * * For iOS 12+ `newPassword` can be used to indicate a new password input the * user may want to save in the keychain, and `oneTimeCode` can be used to indicate * that a field can be autofilled by a code arriving in an SMS. * * To disable autofill, set textContentType to `none`. * * Possible values for `textContentType` are: * * - `'none'` * - `'URL'` * - `'addressCity'` * - `'addressCityAndState'` * - `'addressState'` * - `'countryName'` * - `'creditCardNumber'` * - `'emailAddress'` * - `'familyName'` * - `'fullStreetAddress'` * - `'givenName'` * - `'jobTitle'` * - `'location'` * - `'middleName'` * - `'name'` * - `'namePrefix'` * - `'nameSuffix'` * - `'nickname'` * - `'organizationName'` * - `'postalCode'` * - `'streetAddressLine1'` * - `'streetAddressLine2'` * - `'sublocality'` * - `'telephoneNumber'` * - `'username'` * - `'password'` * - `'newPassword'` * - `'oneTimeCode'` * */ textContentType?: | 'none' | 'URL' | 'addressCity' | 'addressCityAndState' | 'addressState' | 'countryName' | 'creditCardNumber' | 'emailAddress' | 'familyName' | 'fullStreetAddress' | 'givenName' | 'jobTitle' | 'location' | 'middleName' | 'name' | 'namePrefix' | 'nameSuffix' | 'nickname' | 'organizationName' | 'postalCode' | 'streetAddressLine1' | 'streetAddressLine2' | 'sublocality' | 'telephoneNumber' | 'username' | 'password' | 'newPassword' | 'oneTimeCode' | undefined; /** * If false, scrolling of the text view will be disabled. The default value is true. Only works with multiline={true} */ scrollEnabled?: boolean | undefined; } /** * Android Specific properties for TextInput * @see https://reactnative.dev/docs/textinput#props */ export interface TextInputAndroidProps { /** * 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`. * * *Android Only* * * Possible values for `autoComplete` are: * * - `birthdate-day` * - `birthdate-full` * - `birthdate-month` * - `birthdate-year` * - `cc-csc` * - `cc-exp` * - `cc-exp-day` * - `cc-exp-month` * - `cc-exp-year` * - `cc-number` * - `email` * - `gender` * - `name` * - `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` * - `postal-code` * - `street-address` * - `sms-otp` * - `tel` * - `tel-country-code` * - `tel-national` * - `tel-device` * - `username` * - `username-new` * - `off` */ autoComplete?: | 'birthdate-day' | 'birthdate-full' | 'birthdate-month' | 'birthdate-year' | 'cc-csc' | 'cc-exp' | 'cc-exp-day' | 'cc-exp-month' | '