Skip to content

Instantly share code, notes, and snippets.

@lelandrichardson

lelandrichardson/react-native.js

Last active July 21, 2022 17:56
Show Gist options
  • Star 73 You must be signed in to star a gist
  • Fork 11 You must be signed in to fork a gist
  • Save lelandrichardson/c037f46885af67ceb447091c908d1471 to your computer and use it in GitHub Desktop.
Save lelandrichardson/c037f46885af67ceb447091c908d1471 to your computer and use it in GitHub Desktop.
Download ZIP
React Native flow types
Raw
react-native.js
declare var __DEV__: boolean;
declare module 'react-native' {
declare type Color = string | number;
declare type Transform =
{ perspective: number } |
{ scale: number } |
{ scaleX: number } |
{ scaleY: number } |
{ translateX: number } |
{ translateY: number } |
{ rotate: string } |
{ rotateX: string } |
{ rotateY: string } |
{ rotateZ: string } |
{ skewX: string } |
{ skewY: string };
declare type TransformPropTypes = {|
transform?: Array<Transform>
|};
declare type LayoutPropTypes = {|
/** `display` sets the display type of this component.
*
* It works similarly to `display` in CSS, but only support 'flex' and 'none'.
* 'flex' is the default.
*/
display?: 'flex' | 'none',
/** `width` sets the width of this component.
*
* It works similarly to `width` in CSS, but in React Native you
* must use points or percentages. Ems and other units are not supported.
* See https://developer.mozilla.org/en-US/docs/Web/CSS/width for more details.
*/
width?: number | string,
/** `height` sets the height of this component.
*
* It works similarly to `height` in CSS, but in React Native you
* must use points or percentages. Ems and other units are not supported.
* See https://developer.mozilla.org/en-US/docs/Web/CSS/height for more details.
*/
height?: number | string,
/** `top` is the number of logical pixels to offset the top edge of
* this component.
*
* It works similarly to `top` in CSS, but in React Native you
* must use points or percentages. Ems and other units are not supported.
*
* See https://developer.mozilla.org/en-US/docs/Web/CSS/top
* for more details of how `top` affects layout.
*/
top?: number | string,
/** `left` is the number of logical pixels to offset the left edge of
* this component.
*
* It works similarly to `left` in CSS, but in React Native you
* must use points or percentages. Ems and other units are not supported.
*
* See https://developer.mozilla.org/en-US/docs/Web/CSS/left
* for more details of how `left` affects layout.
*/
left?: number | string,
/** `right` is the number of logical pixels to offset the right edge of
* this component.
*
* It works similarly to `right` in CSS, but in React Native you
* must use points or percentages. Ems and other units are not supported.
*
* See https://developer.mozilla.org/en-US/docs/Web/CSS/right
* for more details of how `right` affects layout.
*/
right?: number | string,
/** `bottom` is the number of logical pixels to offset the bottom edge of
* this component.
*
* It works similarly to `bottom` in CSS, but in React Native you
* must use points or percentages. Ems and other units are not supported.
*
* See https://developer.mozilla.org/en-US/docs/Web/CSS/bottom
* for more details of how `bottom` affects layout.
*/
bottom?: number | string,
/** `minWidth` is the minimum width for this component, in logical pixels.
*
* It works similarly to `min-width` in CSS, but in React Native you
* must use points or percentages. Ems and other units are not supported.
*
* See https://developer.mozilla.org/en-US/docs/Web/CSS/min-width
* for more details.
*/
minWidth?: number | string,
/** `maxWidth` is the maximum width for this component, in logical pixels.
*
* It works similarly to `max-width` in CSS, but in React Native you
* must use points or percentages. Ems and other units are not supported.
*
* See https://developer.mozilla.org/en-US/docs/Web/CSS/max-width
* for more details.
*/
maxWidth?: number | string,
/** `minHeight` is the minimum height for this component, in logical pixels.
*
* It works similarly to `min-height` in CSS, but in React Native you
* must use points or percentages. Ems and other units are not supported.
*
* See https://developer.mozilla.org/en-US/docs/Web/CSS/min-height
* for more details.
*/
minHeight?: number | string,
/** `maxHeight` is the maximum height for this component, in logical pixels.
*
* It works similarly to `max-height` in CSS, but in React Native you
* must use points or percentages. Ems and other units are not supported.
*
* See https://developer.mozilla.org/en-US/docs/Web/CSS/max-height
* for more details.
*/
maxHeight?: number | string,
/** Setting `margin` has the same effect as setting each of
* `marginTop`, `marginLeft`, `marginBottom`, and `marginRight`.
* See https://developer.mozilla.org/en-US/docs/Web/CSS/margin
* for more details.
*/
margin?: number | string,
/** Setting `marginVertical` has the same effect as setting both
* `marginTop` and `marginBottom`.
*/
marginVertical?: number | string,
/** Setting `marginHorizontal` has the same effect as setting
* both `marginLeft` and `marginRight`.
*/
marginHorizontal?: number | string,
/** `marginTop` works like `margin-top` in CSS.
* See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top
* for more details.
*/
marginTop?: number | string,
/** `marginBottom` works like `margin-bottom` in CSS.
* See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom
* for more details.
*/
marginBottom?: number | string,
/** `marginLeft` works like `margin-left` in CSS.
* See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left
* for more details.
*/
marginLeft?: number | string,
/** `marginRight` works like `margin-right` in CSS.
* See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right
* for more details.
*/
marginRight?: number | string,
/** Setting `padding` has the same effect as setting each of
* `paddingTop`, `paddingBottom`, `paddingLeft`, and `paddingRight`.
* See https://developer.mozilla.org/en-US/docs/Web/CSS/padding
* for more details.
*/
padding?: number | string,
/** Setting `paddingVertical` is like setting both of
* `paddingTop` and `paddingBottom`.
*/
paddingVertical?: number | string,
/** Setting `paddingHorizontal` is like setting both of
* `paddingLeft` and `paddingRight`.
*/
paddingHorizontal?: number | string,
/** `paddingTop` works like `padding-top` in CSS.
* See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top
* for more details.
*/
paddingTop?: number | string,
/** `paddingBottom` works like `padding-bottom` in CSS.
* See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom
* for more details.
*/
paddingBottom?: number | string,
/** `paddingLeft` works like `padding-left` in CSS.
* See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left
* for more details.
*/
paddingLeft?: number | string,
/** `paddingRight` works like `padding-right` in CSS.
* See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right
* for more details.
*/
paddingRight?: number | string,
/** `borderWidth` works like `border-width` in CSS.
* See https://developer.mozilla.org/en-US/docs/Web/CSS/border-width
* for more details.
*/
borderWidth?: number,
/** `borderTopWidth` works like `border-top-width` in CSS.
* See https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width
* for more details.
*/
borderTopWidth?: number,
/** `borderRightWidth` works like `border-right-width` in CSS.
* See https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width
* for more details.
*/
borderRightWidth?: number,
/** `borderBottomWidth` works like `border-bottom-width` in CSS.
* See https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width
* for more details.
*/
borderBottomWidth?: number,
/** `borderLeftWidth` works like `border-left-width` in CSS.
* See https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width
* for more details.
*/
borderLeftWidth?: number,
/** `position` in React Native is similar to regular CSS, but
* everything is set to `relative` by default, so `absolute`
* positioning is always just relative to the parent.
*
* If you want to position a child using specific numbers of logical
* pixels relative to its parent, set the child to have `absolute`
* position.
*
* If you want to position a child relative to something
* that is not its parent, just don't use styles for that. Use the
* component tree.
*
* See https://github.com/facebook/yoga
* for more details on how `position` differs between React Native
* and CSS.
*/
position?: 'absolute' | 'relative',
/** `flexDirection` controls which directions children of a container go.
* `row` goes left to right, `column` goes top to bottom, and you may
* be able to guess what the other two do. It works like `flex-direction`
* in CSS, except the default is `column`.
* See https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction
* for more details.
*/
flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse',
/** `flexWrap` controls whether children can wrap around after they
* hit the end of a flex container.
* It works like `flex-wrap` in CSS (default: nowrap).
* See https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap
* for more details.
*/
flexWrap?: 'wrap' | 'nowrap',
/** `justifyContent` aligns children in the main direction.
* For example, if children are flowing vertically, `justifyContent`
* controls how they align vertically.
* It works like `justify-content` in CSS (default: flex-start).
* See https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
* for more details.
*/
justifyContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around',
/** `alignItems` aligns children in the cross direction.
* For example, if children are flowing vertically, `alignItems`
* controls how they align horizontally.
* It works like `align-items` in CSS (default: stretch).
* See https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
* for more details.
*/
alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline',
/** `alignSelf` controls how a child aligns in the cross direction,
* overriding the `alignItems` of the parent. It works like `align-self`
* in CSS (default: auto).
* See https://developer.mozilla.org/en-US/docs/Web/CSS/align-self
* for more details.
*/
alignSelf?: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline',
/** `alignContent` controls how rows align in the cross direction,
* overriding the `alignContent` of the parent.
* See https://developer.mozilla.org/en-US/docs/Web/CSS/align-content
* for more details.
*/
alignContent?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'space-between' | 'space-around',
/** `overflow` controls how a children are measured and displayed.
* `overflow: hidden` causes views to be clipped while `overflow: scroll`
* causes views to be measured independently of their parents main axis.`
* It works like `overflow` in CSS (default: visible).
* See https://developer.mozilla.org/en/docs/Web/CSS/overflow
* for more details.
*/
overflow?: 'visible' | 'hidden' | 'scroll',
/** In React Native `flex` does not work the same way that it does in CSS.
* `flex` is a number rather than a string, and it works
* according to the `Yoga` library
* at https://github.com/facebook/yoga
*
* When `flex` is a positive number, it makes the component flexible
* and it will be sized proportional to its flex value. So a
* component with `flex` set to 2 will take twice the space as a
* component with `flex` set to 1.
*
* When `flex` is 0, the component is sized according to `width`
* and `height` and it is inflexible.
*
* When `flex` is -1, the component is normally sized according
* `width` and `height`. However, if there's not enough space,
* the component will shrink to its `minWidth` and `minHeight`.
*
* flexGrow, flexShrink, and flexBasis work the same as in CSS.
*/
flex?: number,
flexGrow?: number,
flexShrink?: number,
flexBasis?: number | string,
/**
* Aspect ratio control the size of the undefined dimension of a node. Aspect ratio is a
* non-standard property only available in react native and not CSS.
*
* - On a node with a set width/height aspect ratio control the size of the unset dimension
* - On a node with a set flex basis aspect ratio controls the size of the node in the cross axis
* if unset
* - On a node with a measure function aspect ratio works as though the measure function measures
* the flex basis
* - On a node with flex grow/shrink aspect ratio controls the size of the node in the cross axis
* if unset
* - Aspect ratio takes min/max dimensions into account
*/
aspectRatio?: number,
/** `zIndex` controls which components display on top of others.
* Normally, you don't use `zIndex`. Components render according to
* their order in the document tree, so later components draw over
* earlier ones. `zIndex` may be useful if you have animations or custom
* modal interfaces where you don't want this behavior.
*
* It works like the CSS `z-index` property - components with a larger
* `zIndex` will render on top. Think of the z-direction like it's
* pointing from the phone into your eyeball.
* See https://developer.mozilla.org/en-US/docs/Web/CSS/z-index for
* more details.
*/
zIndex?: number,
/** `direction` specifies the directional flow of the user interface.
* The default is `inherit`, except for root node which will have
* value based on the current locale.
* See https://facebook.github.io/yoga/docs/rtl/
* for more details.
* @platform ios
*/
direction?: 'inherit' | 'ltr' | 'rtl',
|};
declare type ShadowPropTypes = {|
/**
* Sets the drop shadow color
* @platform ios
*/
shadowColor?: Color,
/**
* 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,
|};
declare type ExtraViewStylePropTypes = {|
backfaceVisibility?: 'visible' | 'hidden',
backgroundColor?: Color,
borderColor?: Color,
borderTopColor?: Color,
borderRightColor?: Color,
borderBottomColor?: Color,
borderLeftColor?: Color,
borderRadius?: number,
borderTopLeftRadius?: number,
borderTopRightRadius?: number,
borderBottomLeftRadius?: number,
borderBottomRightRadius?: number,
borderStyle?: 'solid' | 'dotted' | 'dashed',
borderWidth?: number,
borderTopWidth?: number,
borderRightWidth?: number,
borderBottomWidth?: number,
borderLeftWidth?: number,
opacity?: number,
/**
* (Android-only) 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.
* @platform android
*/
elevation?: number,
|};
declare type FontVariant = 'small-caps' |
'oldstyle-nums' |
'lining-nums' |
'tabular-nums' |
'proportional-nums';
declare type ExtraTextStylePropTypes = {|
color?: Color,
fontFamily?: string,
fontSize?: number,
fontStyle?: 'normal' | 'italic',
/**
* 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',
/**
* @platform ios
*/
fontVariant?: Array<FontVariant>,
textShadowOffset?: {|
width?: number,
height?: number
|},
textShadowRadius?: number,
textShadowColor?: Color,
/**
* @platform ios
*/
letterSpacing?: number,
lineHeight?: number,
/**
* Specifies text alignment. The value 'justify' is only supported on iOS and
* fallbacks to `left` on Android.
*/
textAlign?: 'auto' | 'left' | 'right' | 'center' | 'justify',
/**
* @platform android
*/
textAlignVertical?: 'auto' | 'top' | 'bottom' | 'center',
/**
* Set to `false` to remove extra font padding intended to make space for certain ascenders / descenders.
* With some fonts, this padding can make text look slightly misaligned when centered vertically.
* For best results also set `textAlignVertical` to `center`. Default is true.
* @platform android
*/
includeFontPadding?: boolean,
textDecorationLine?: 'none' | 'underline' | 'line-through' | 'underline line-through',
/**
* @platform ios
*/
textDecorationStyle?: 'solid' | 'double' | 'dotted' | 'dashed',
/**
* @platform ios
*/
textDecorationColor?: Color,
/**
* @platform ios
*/
writingDirection?: 'auto' | 'ltr' | 'rtl',
|};
declare type ImageResizeModeEnum = {
contain: 'contain',
cover: 'cover',
stretch: 'stretch',
center: 'center',
repeat: 'repeat',
};
declare type ExtraImageStylePropTypes = {|
resizeMode?: $Keys<ImageResizeModeEnum>,
backfaceVisibility?: 'visible' | 'hidden',
backgroundColor?: Color,
borderColor?: Color,
borderWidth?: number,
borderRadius?: number,
overflow?: 'visible' | 'hidden',
/**
* Changes the color of all the non-transparent pixels to the tintColor.
*/
tintColor?: Color,
opacity?: number,
/**
* When the image has rounded corners, specifying an overlayColor will
* cause the remaining space in the corners to be filled with a solid color.
* This is useful in cases which are not supported by the Android
* implementation of rounded corners:
* - Certain resize modes, such as 'contain'
* - Animated GIFs
*
* A typical way to use this prop is with images displayed on a solid
* background and setting the `overlayColor` to the same color
* as the background.
*
* For details of how this works under the hood, see
* http://frescolib.org/docs/rounded-corners-and-circles.html
*
* @platform android
*/
overlayColor?: string,
// Android-Specific styles
borderTopLeftRadius?: number,
borderTopRightRadius?: number,
borderBottomLeftRadius?: number,
borderBottomRightRadius?: number,
|};
declare type ViewStylePropTypes = {|
...LayoutPropTypes,
...ShadowPropTypes,
...TransformPropTypes,
...ExtraViewStylePropTypes,
|};
declare type TextStylePropTypes = {|
...LayoutPropTypes,
...ShadowPropTypes,
...TransformPropTypes,
...ExtraViewStylePropTypes,
...ExtraTextStylePropTypes,
|};
declare type ImageStylePropTypes = {|
...LayoutPropTypes,
...ShadowPropTypes,
...TransformPropTypes,
...ExtraImageStylePropTypes,
|};
declare type StylePropTypes = {|
...LayoutPropTypes,
...ShadowPropTypes,
...TransformPropTypes,
...ExtraImageStylePropTypes,
...ExtraTextStylePropTypes,
...ExtraViewStylePropTypes,
|}
declare type StyleId = number;
declare type Styles = {[key: string]: StylePropTypes};
declare type StyleRuleSet<S: Styles> = {[key: $Keys<S>]: StyleId};
declare type StyleProp<T, V> = false | null | void | T | V | Array<StyleProp<T, V>>;
declare export var StyleSheet: {|
hairlineWidth: number,
absoluteFill: StyleId,
absoluteFillObject: Object,
flatten: (style: StyleProp<StylePropTypes, StyleId>) => StylePropTypes,
create<S: Styles>(styles: S): StyleRuleSet<S>,
setStyleAttributePreprocessor(property: string, process: (nextProp: mixed) => mixed): void,
|};
declare type EdgeInsetsProp = {
top: number,
left: number,
bottom: number,
right: number,
};
declare type AccessibilityTrait =
'none' |
'button' |
'link' |
'header' |
'search' |
'image' |
'selected' |
'plays' |
'key' |
'text' |
'summary' |
'disabled' |
'frequentUpdates' |
'startsMedia' |
'adjustable' |
'allowsDirectInteraction' |
'pageTurn';
declare type AccessibilityComponentType =
'none' |
'button' |
'radiobutton_checked' |
'radiobutton_unchecked';
declare type MeasureOnSuccessCallback = (
x: number,
y: number,
width: number,
height: number,
pageX: number,
pageY: number,
) => void;
declare type MeasureInWindowOnSuccessCallback = (
x: number,
y: number,
width: number,
height: number,
) => void;
declare type MeasureLayoutOnSuccessCallback = (
left: number,
top: number,
width: number,
height: number,
) => void;
declare type NativeMethodsMixinType = {
blur(): void,
focus(): void,
measure(callback: MeasureOnSuccessCallback): void,
measureInWindow(callback: MeasureInWindowOnSuccessCallback): void,
measureLayout(
relativeToNativeNode: number,
onSuccess: MeasureLayoutOnSuccessCallback,
onFail: () => void,
): void,
setNativeProps(nativeProps: Object): void,
};
declare type ViewDefaultProps = {
};
declare type ViewProps = {
accessible?: boolean,
accessibilityLabel?: React$PropType$Primitive<any>,
accessibilityComponentType?: AccessibilityComponentType,
accessibilityLiveRegion?: 'none' | 'polite' | 'assertive',
importantForAccessibility?: 'auto'| 'yes'| 'no'| 'no-hide-descendants',
accessibilityTraits?: AccessibilityTrait | Array<AccessibilityTrait>,
accessibilityViewIsModal?: boolean,
onAccessibilityTap?: Function,
onMagicTap?: Function,
testID?: string,
nativeID?: string,
onResponderGrant?: Function,
onResponderMove?: Function,
onResponderReject?: Function,
onResponderRelease?: Function,
onResponderTerminate?: Function,
onResponderTerminationRequest?: Function,
onStartShouldSetResponder?: Function,
onStartShouldSetResponderCapture?: Function,
onMoveShouldSetResponder?: Function,
onMoveShouldSetResponderCapture?: Function,
hitSlop?: EdgeInsetsProp,
pointerEvents?: 'box-none'| 'none'| 'box-only'| 'auto',
style?: StyleProp<ViewStylePropTypes, StyleId>,
removeClippedSubviews?: boolean,
renderToHardwareTextureAndroid?: boolean,
shouldRasterizeIOS?: boolean,
collapsable?: boolean,
needsOffscreenAlphaCompositing?: boolean,
children?: React$Element<*>,
};
declare export class View extends React$Component<void, ViewProps, void> {
blur(): void,
focus(): void,
measure(callback: MeasureOnSuccessCallback): void,
measureInWindow(callback: MeasureInWindowOnSuccessCallback): void,
measureLayout(
relativeToNativeNode: number,
onSuccess: MeasureLayoutOnSuccessCallback,
onFail: () => void,
): void,
setNativeProps(nativeProps: ViewProps): void,
}
declare type TextDefaultProps = {
accessible: true,
allowFontScaling: true,
ellipsizeMode: 'tail',
disabled: false,
};
declare type TextProps = {
/**
* When `numberOfLines` is set, this prop defines how text will be truncated.
* `numberOfLines` must be set in conjunction with this prop.
*
* 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`.
*
* > `clip` is working only for iOS
*/
ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip',
/**
* 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,
/**
* Set text break strategy on Android API Level 23+, possible values are `simple`, `highQuality`, `balanced`
* The default value is `highQuality`.
* @platform android
*/
textBreakStrategy?: 'simple' | 'highQuality' | 'balanced',
/**
* Invoked on mount and layout changes with
*
* `{nativeEvent: {layout: {x, y, width, height}}}`
*/
onLayout?: Function,
/**
* This function is called on press.
*
* e.g., `onPress={() => console.log('1st')}`
*/
onPress?: Function,
/**
* This function is called on long press.
*
* e.g., `onLongPress={this.increaseSize}>`
*/
onLongPress?: Function,
/**
* 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.
*/
pressRetentionOffset?: EdgeInsetsProp,
/**
* Lets the user select text, to use the native copy and paste functionality.
*/
selectable?: boolean,
/**
* The highlight color of the text.
* @platform android
*/
selectionColor?: Color,
/**
* When `true`, no visual change is made when text is pressed down. By
* default, a gray oval highlights the text on press down.
* @platform ios
*/
suppressHighlighting?: boolean,
/**
* Used to locate this view in end-to-end tests.
*/
testID?: string,
/**
* Used to locate this view from native code.
* @platform android
*/
nativeID?: string,
/**
* Specifies whether fonts should scale to respect Text Size accessibility settings. The
* default is `true`.
*/
allowFontScaling?: boolean,
/**
* When set to `true`, indicates that the view is an accessibility element. The default value
* for a `Text` element is `true`.
*
* See the
* [Accessibility guide](docs/accessibility.html#accessible-ios-android)
* for more information.
*/
accessible?: boolean,
/**
* Specifies whether font should be scaled down automatically to fit given style constraints.
* @platform ios
*/
adjustsFontSizeToFit?: boolean,
/**
* Specifies smallest possible scale a font can reach when adjustsFontSizeToFit is enabled. (values 0.01-1.0).
* @platform ios
*/
minimumFontScale?: number,
/**
* Specifies the disabled state of the text view for testing purposes
* @platform android
*/
disabled?: boolean,
style?: StyleProp<TextStylePropTypes, StyleId>,
children?: React$Element<*>,
};
declare export class Text extends React$Component<TextDefaultProps, TextProps, void> {
blur(): void,
focus(): void,
measure(callback: MeasureOnSuccessCallback): void,
measureInWindow(callback: MeasureInWindowOnSuccessCallback): void,
measureLayout(
relativeToNativeNode: number,
onSuccess: MeasureLayoutOnSuccessCallback,
onFail: () => void,
): void,
setNativeProps(nativeProps: TextProps): void,
}
declare type ImageUriSourcePropType = {
uri: string,
width?: number,
height?: number,
scale?: number,
/**
* `bundle` is the iOS asset bundle which the image is included in. This
* will default to [NSBundle mainBundle] if not set.
* @platform ios
*/
bundle?: string,
/**
* `method` is the HTTP Method to use. Defaults to GET if not specified.
*/
method?: string,
/**
* `headers` is an object representing the HTTP headers to send along with the
* request for a remote image.
*/
headers?: { [key: string]: string },
/**
* `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.
*/
body?: string,
/**
* `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.
*
* @platform ios
*/
cache?: 'default' | 'reload' | 'force-cache' | 'only-if-cached',
};
declare type ImageSourcePropType = ImageUriSourcePropType | number | Array<ImageUriSourcePropType>;
declare type ImageProps = {
/**
* > `ImageResizeMode` is an `Enum` for different image resizing modes, set via the
* > `resizeMode` style property on `Image` components. The values are `contain`, `cover`,
* > `stretch`, `center`, `repeat`.
*/
style?: StyleProp<ImageStylePropTypes, StyleId>,
/**
* 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).
*/
source?: ImageSourcePropType,
/**
* A static image to display while loading the image source.
*
* - `uri` - a string representing the resource identifier for the image, which
* should be either a local file path or the name of a static image resource
* (which should be wrapped in the `require('./path/to/image.png')` function).
* - `width`, `height` - can be specified if known at build time, in which case
* these will be used to set the default `<Image/>` component dimensions.
* - `scale` - 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.
* - `number` - Opaque type returned by something like `require('./image.jpg')`.
*
* @platform ios
*/
defaultSource?: ImageSourcePropType,
/**
* When true, indicates the image is an accessibility element.
* @platform ios
*/
accessible?: boolean,
/**
* The text that's read by the screen reader when the user interacts with
* the image.
* @platform ios
*/
accessibilityLabel?: React$PropType$Primitive<any>,
/**
* blurRadius: the blur radius of the blur filter added to the image
*/
blurRadius?: number,
/**
* 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 in the
* [official Apple documentation](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImage_Class/index.html#//apple_ref/occ/instm/UIImage/resizableImageWithCapInsets).
*
* @platform ios
*/
capInsets?: EdgeInsetsPropType,
/**
* 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.
*
* More details about `resize` and `scale` can be found at http://frescolib.org/docs/resizing-rotating.html.
*
* @platform android
*/
resizeMethod?: 'auto' | 'resize' | 'scale',
/**
* 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)
*/
resizeMode?: $Keys<ImageResizeModeEnum>,
/**
* A unique identifier for this element to be used in UI Automation
* testing scripts.
*/
testID?: string,
/**
* Invoked on mount and layout changes with
* `{nativeEvent: {layout: {x, y, width, height}}}`.
*/
onLayout?: Function,
/**
* Invoked on load start.
*
* e.g., `onLoadStart={(e) => this.setState({loading: true})}`
*/
onLoadStart?: Function,
/**
* Invoked on download progress with `{nativeEvent: {loaded, total}}`.
* @platform ios
*/
onProgress?: Function,
/**
* Invoked on load error with `{nativeEvent: {error}}`.
*/
onError?: Function,
/**
* 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.
* @platform ios
*/
onPartialLoad?: Function,
/**
* Invoked when load completes successfully.
*/
onLoad?: Function,
/**
* Invoked when load either succeeds or fails.
*/
onLoadEnd?: Function,
children?: React$Element<*>,
}
declare type ResolvedAssetSource = {
__packager_asset: boolean,
width: ?number,
height: ?number,
uri: string,
scale: number,
};
declare export class Image extends React$Component<void, ImageProps, void> {
static resizeMode: ImageResizeModeEnum,
/**
* Retrieve the width and height (in pixels) of an image prior to displaying it.
* This method can fail if the image cannot be found, or fails to download.
*
* In order to retrieve the image dimensions, the image may first need to be
* loaded or downloaded, after which it will be cached. This means that in
* principle you could use this method to preload images, however it is not
* optimized for that purpose, and may in future be implemented in a way that
* does not fully load/download the image data. A proper, supported way to
* preload images will be provided as a separate API.
*
* Does not work for static image resources.
*
* @param uri The location of the image.
* @param success The function that will be called if the image was successfully found and width
* and height retrieved.
* @param failure The function that will be called if there was an error, such as failing to
* to retrieve the image.
*
* @returns void
*
* @platform ios
*/
static getSize(
uri: string,
success: (width: number, height: number) => void,
failure?: (error: any) => void,
): void,
/**
* Prefetches a remote image for later use by downloading it to the disk
* cache
*
* @param url The remote location of the image.
*
* @return The prefetched image.
*/
static prefetch(url: string): Promise<string>,
/**
* Resolves an asset reference into an object which has the properties `uri`, `width`,
* and `height`. The input may either be a number (opaque type returned by
* require('./foo.png')) or an `ImageSource` like { uri: '<http location || file path>' }
*/
static resolveAssetSource(source: ImageSourcePropType): ?ResolvedAssetSource,
blur(): void,
focus(): void,
measure(callback: MeasureOnSuccessCallback): void,
measureInWindow(callback: MeasureInWindowOnSuccessCallback): void,
measureLayout(
relativeToNativeNode: number,
onSuccess: MeasureLayoutOnSuccessCallback,
onFail: () => void,
): void,
setNativeProps(nativeProps: ImageProps): void,
}
declare type ScrollViewProps = {
...ViewProps,
/**
* 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.
* @platform ios
*/
automaticallyAdjustContentInsets?: boolean,
/**
* The amount by which the scroll view content is inset from the edges
* of the scroll view. Defaults to `{top: 0, left: 0, bottom: 0, right: 0}`.
* @platform ios
*/
contentInset?: EdgeInsetsPropType,
/**
* Used to manually set the starting scroll offset.
* The default value is `{x: 0, y: 0}`.
* @platform ios
*/
contentOffset?: PointPropType,
/**
* 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.
* @platform ios
*/
bounces?: boolean,
/**
* 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.
* @platform ios
*/
bouncesZoom?: boolean,
/**
* 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.
* @platform ios
*/
alwaysBounceHorizontal?: boolean,
/**
* 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.
* @platform ios
*/
alwaysBounceVertical?: boolean,
/**
* 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.
* @platform ios
*/
centerContent?: boolean,
/**
* These styles will be applied to the scroll view content container which
* wraps all of the child views. Example:
*
* ```
* return (
* <ScrollView contentContainerStyle={styles.contentContainer}>
* </ScrollView>
* );
* ...
* const styles = StyleSheet.create({
* contentContainer: {
* paddingVertical: 20
* }
* });
* ```
*/
contentContainerStyle?: StyleProp<ViewStylePropTypes, StyleId>,
/**
* 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 (the default)
* - `'fast'`: 0.99
*
* @platform ios
*/
decelerationRate?: 'fast' | 'normal' | number,
/**
* When true, the scroll view's children are arranged horizontally in a row
* instead of vertically in a column. The default value is false.
*/
horizontal?: boolean,
/**
* The style of the scroll indicators.
*
* - `'default'` (the default), same as `black`.
* - `'black'`, scroll indicator is black. This style is good against a light background.
* - `'white'`, scroll indicator is white. This style is good against a dark background.
*
* @platform ios
*/
indicatorStyle?: 'default' | 'black' | 'white',
/**
* When true, the ScrollView will try to lock to only vertical or horizontal
* scrolling while dragging. The default value is false.
* @platform ios
*/
directionalLockEnabled?: boolean,
/**
* When false, once tracking starts, won't try to drag if the touch moves.
* The default value is true.
* @platform ios
*/
canCancelContentTouches?: boolean,
/**
* 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.
* - `'interactive'`, the keyboard is dismissed interactively with the drag and moves in
* synchrony with the touch; dragging upwards cancels the dismissal.
* On android this is not supported and it will have the same behavior as 'none'.
*/
keyboardDismissMode?: 'none' | 'interactive' | 'on-drag',
/**
* 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
*/
keyboardShouldPersistTaps?: 'always' | 'never' | 'handled' | false | true,
/**
* The maximum allowed zoom scale. The default value is 1.0.
* @platform ios
*/
maximumZoomScale?: number,
/**
* The minimum allowed zoom scale. The default value is 1.0.
* @platform ios
*/
minimumZoomScale?: number,
/**
* Fires at most once per frame during scrolling. The frequency of the
* events can be controlled using the `scrollEventThrottle` prop.
*/
onScroll?: Function,
/**
* Called when a scrolling animation ends.
* @platform ios
*/
onScrollAnimationEnd?: Function,
/**
* 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.
*/
onContentSizeChange?: Function,
/**
* 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.
*/
pagingEnabled?: boolean,
/**
* When false, the view cannot be scrolled via touch interaction.
* The default value is true.
*
* Note that the view can be always be scrolled by calling `scrollTo`.
*/
scrollEnabled?: boolean,
/**
* This controls how often the scroll event will be fired while scrolling
* (as a time interval in ms). A lower number yields better accuracy for code
* that is tracking the scroll position, but can lead to scroll performance
* problems due to the volume of information being send over the bridge.
* You will not notice a difference between values set between 1-16 as the
* JS run loop is synced to the screen refresh rate. If you do not need precise
* scroll position tracking, set this value higher to limit the information
* being sent across the bridge. The default value is zero, which results in
* the scroll event being sent only once each time the view is scrolled.
* @platform ios
*/
scrollEventThrottle?: number,
/**
* 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}`.
* @platform ios
*/
scrollIndicatorInsets?: EdgeInsetsPropType,
/**
* When true, the scroll view scrolls to top when the status bar is tapped.
* The default value is true.
* @platform ios
*/
scrollsToTop?: boolean,
/**
* When true, shows a horizontal scroll indicator.
* The default value is true.
*/
showsHorizontalScrollIndicator?: boolean,
/**
* When true, shows a vertical scroll indicator.
* The default value is true.
*/
showsVerticalScrollIndicator?: boolean,
/**
* 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}`.
*/
stickyHeaderIndices?: Array<number>,
/**
* 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`.
* @platform ios
*/
snapToInterval?: number,
/**
* 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)
*
* @platform ios
*/
snapToAlignment?: 'start' | 'center' | 'end',
/**
* 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
* true.
*/
removeClippedSubviews?: boolean,
/**
* The current scale of the scroll view content. The default value is 1.0.
* @platform ios
*/
zoomScale?: number,
/**
* A RefreshControl component, used to provide pull-to-refresh
* functionality for the ScrollView. Only works for vertical ScrollViews
* (`horizontal` prop must be `false`).
*
* See [RefreshControl](docs/refreshcontrol.html).
*/
refreshControl?: React$Element<*>,
/**
* 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.
* @platform android
*/
endFillColor?: Color,
/**
* 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.
* @platform android
*/
scrollPerfTag?: string,
/**
* 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.
*
* @platform android
*/
overScrollMode?: 'auto' | 'always' | 'never',
}
declare export class ScrollView extends React$Component<void, ScrollViewProps, void> {
// TODO(lmr): ScrollResponder.Mixin?
setNativeProps(props: ScrollViewProps): void,
/**
* 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.
*/
getScrollResponder(): ScrollView,
getScrollableNode(): any,
getInnerViewNode(): any,
/**
* Scrolls to a given x, y offset, either immediately or with a smooth animation.
*
* Example:
*
* `scrollTo({x: 0, y: 0, animated: true})`
*
* Note: The weird function 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.
*/
scrollTo(
y?: number | { x?: number, y?: number, animated?: boolean },
x?: number,
animated?: boolean
): void,
/**
* If this is a vertical ScrollView scrolls to the bottom.
* If this is a horizontal ScrollView scrolls to the right.
*
* Use `scrollToEnd({animated: true})` for smooth animated scrolling,
* `scrollToEnd({animated: false})` for immediate scrolling.
* If no options are passed, `animated` defaults to true.
*/
scrollToEnd(
options?: { animated?: boolean },
): void,
}
declare export var Platform: {|
OS: 'ios' | 'android',
Version: number,
isPad: boolean,
isTesting: boolean,
isTVOS: boolean,
select<T>(obj: { [key: string]: T }): T,
|}
declare type Dimension = {
width: number,
height: number,
scale: number,
fontScale: number,
};
declare type DimensionName = 'window' | 'screen';
declare export var Dimensions: {|
set(dims: { [key: DimensionName]: Dimension }): void,
get(dim: DimensionName): Dimensions,
addEventListener(
type: string,
handler: Function
): void,
removeEventListener(
type: string,
handler: Function
): void,
|}
declare export var PixelRatio: {|
/**
* Returns the device pixel density. Some examples:
*
* - PixelRatio.get() === 1
* - mdpi Android devices (160 dpi)
* - PixelRatio.get() === 1.5
* - hdpi Android devices (240 dpi)
* - PixelRatio.get() === 2
* - iPhone 4, 4S
* - iPhone 5, 5c, 5s
* - iPhone 6
* - xhdpi Android devices (320 dpi)
* - PixelRatio.get() === 3
* - iPhone 6 plus
* - xxhdpi Android devices (480 dpi)
* - PixelRatio.get() === 3.5
* - Nexus 6
*/
get(): number,
/**
* Returns the scaling factor for font sizes. This is the ratio that is used to calculate the
* absolute font size, so any elements that heavily depend on that should use this to do
* calculations.
*
* If a font scale is not set, this returns the device pixel ratio.
*
* Currently this is only implemented on Android and reflects the user preference set in
* Settings > Display > Font size, on iOS it will always return the default pixel ratio.
* @platform android
*/
getFontScale(): number,
/**
* Converts a layout size (dp) to pixel size (px).
*
* Guaranteed to return an integer number.
*/
getPixelSizeForLayoutSize(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.
*/
roundToNearestPixel(layoutSize: number): number,
// No-op for iOS, but used on the web. Should not be documented.
startDetecting(): void,
|};
declare type LayoutAnimationTypesEnum = {
spring: 'spring',
linear: 'linear',
easeInEaseOut: 'easeInEaseOut',
easeIn: 'easeIn',
easeOut: 'easeOut',
keyboard: 'keyboard',
};
declare type LayoutAnimationPropertiesEnum = {
opacity: 'opacity',
scaleXY: 'scaleXY',
};
declare type Anim = {
duration?: number,
delay?: number,
springDamping?: number,
initialVelocity?: number,
type?: $Keys<LayoutAnimationTypesEnum>,
property?: $Keys<LayoutAnimationPropertiesEnum>,
};
declare type LayoutAnimationConfig = {
duration: number,
create?: Anim,
update?: Anim,
delete?: Anim,
};
declare export var LayoutAnimation: {
/**
* 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.
* @param onError Called on error. Only supported on iOS.
*/
configureNext(config: LayoutAnimationConfig, onAnimationDidEnd?: Function): void,
/**
* Helper for creating a config for `configureNext`.
*/
create(duration: number, type, creationProp): LayoutAnimationConfig,
Types: LayoutAnimationTypesEnum,
Properties: LayoutAnimationPropertiesEnum,
Presets: {
easeInEaseOut: LayoutAnimationConfig,
linear: LayoutAnimationConfig,
spring: LayoutAnimationConfig,
},
easeInEaseOut(onAnimationDidEnd?: Function): void,
linear(onAnimationDidEnd?: Function): void,
spring(onAnimationDidEnd?: Function): void,
};
declare type Event = Object;
declare type Selection = {
start: number,
end?: number,
};
declare type DataDetector =
'phoneNumber' |
'link' |
'address' |
'calendarEvent' |
'none' |
'all';
declare type TextInputState = {|
/**
* Returns the ID of the currently focused text field, if one exists
* If no text field is focused it returns null
*/
currentlyFocusedField(): ?number,
/**
* @param {number} TextInputID id of the text field to focus
* Focuses the specified text field
* noop if the text field was already focused
*/
focusTextInput(textFieldID: ?number): void,
/**
* @param {number} textFieldID id of the text field to focus
* Unfocuses the specified text field
* noop if it wasn't focused
*/
blurTextInput(textFieldID: ?number): void,
|};
declare type EventSubscription = {
eventType: string;
key: number;
subscriber: EventSubscriptionVendor;
remove(): void,
}
declare type EventSubscriptionVendor = {
addSubscription(eventType: string, subscription: EventSubscription): EventSubscription,
removeAllSubscriptions(eventType: ?string): void,
removeSubscription(subscription: EventSubscription): void,
getSubscriptionsForType(eventType: string): ?[EventSubscription],
}
declare type EmitterSubscription<T: string> = {
emitter: EventEmitter<T>;
listener: Function;
context: ?Object;
remove(): void,
}
declare type EventEmitter<T: string> = {
emit(eventType: T, ...args: any[]): void,
addListener(eventType: T, listener: Function, context: ?Object): EmitterSubscription<T>,
once(eventType: T, listener: Function, context: ?Object): EmitterSubscription<T>,
removeAllListeners(): void,
removeCurrentListener(): void,
removeSubscription(subscription: EmitterSubscription<T>): void,
listeners(eventType: T): [EmitterSubscription<T>],
removeListener(eventType: T, listener: Function): void,
}
declare type EventHolderToken<T: string> = { eventType: T, index: number };
declare type EventHolder<T: string> = {
holdEvent(eventType: T, ...args: any[]): EventHolderToken<T>,
emitToListener(eventType: ?T, listener: Function, context: ?Object): void,
releaseCurrentEvent(): void,
releaseEvent(token: EventHolderToken<T>): void,
releaseEventType(eventType: T): void,
}
declare type EventEmitterWithHolding<T: string> = {
addListener(eventType: T, listener: Function, context: ?Object): EmitterSubscription<T>,
once(eventType: T, listener: Function, context: ?Object): EmitterSubscription<T>,
removeAllListeners(eventType: T): void,
removeCurrentListener(): void,
listeners(eventType: T): [EmitterSubscription<T>],
emit(eventType: T, ...args: any[]): void,
addRetroactiveListener(eventType: T, listener: Function, context: ?Object): EmitterSubscription<T>,
emitAndHold(eventType: T, ...args: any[]): void,
releaseCurrentEvent(): void,
releaseHeldEventType(eventType: T): void,
}
declare type DocumentSelectionState = {|
...EventEmitterWithHolding<'blur' | 'focus' | 'update'>,
update(anchor, focus): void,
constrainLength(maxLength: number): void,
focus(): void,
blur(): void,
hasFocus(): void,
isCollapsed(): boolean,
isBackward(): boolean,
getAnchorOffset(): ?number,
getFocusOffset(): ?number,
getStartOffset(): ?number,
getEndOffset(): ?number,
overlaps(start: number, end: number): boolean,
|}
declare type TextInputProps = {
...ViewProps,
/**
* 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.
*/
autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters',
/**
* If `false`, disables auto-correct. The default value is `true`.
*/
autoCorrect?: boolean,
/**
* If `false`, disables spell-check style (i.e. red underlines).
* The default value is inherited from `autoCorrect`.
* @platform ios
*/
spellCheck?: boolean,
/**
* If `true`, focuses the input on `componentDidMount`.
* The default value is `false`.
*/
autoFocus?: boolean,
/**
* If `false`, text is not editable. The default value is `true`.
*/
editable?: boolean,
/**
* Determines which keyboard to open, e.g.`numeric`.
*
* The following values work across platforms:
*
* - `default`
* - `numeric`
* - `email-address`
* - `phone-pad`
*/
keyboardType?:
// Cross-platform
'default' |
'email-address' |
'numeric' |
'phone-pad' |
// iOS-only
'ascii-capable' |
'numbers-and-punctuation' |
'url' |
'number-pad' |
'name-phone-pad' |
'decimal-pad' |
'twitter' |
'web-search',
/**
* Determines the color of the keyboard.
* @platform ios
*/
keyboardAppearance?: 'default' | 'light' | 'dark',
/**
* Determines how the return key should look. On Android you can also use
* `returnKeyLabel`.
*
* *Cross platform*
*
* The following values work across platforms:
*
* - `done`
* - `go`
* - `next`
* - `search`
* - `send`
*
* *Android Only*
*
* The following values work on Android only:
*
* - `none`
* - `previous`
*
* *iOS Only*
*
* The following values work on iOS only:
*
* - `default`
* - `emergency-call`
* - `google`
* - `join`
* - `route`
* - `yahoo`
*/
returnKeyType?:
// Cross-platform
'done'|
'go'|
'next'|
'search'|
'send'|
// Android-only
'none'|
'previous'|
// iOS-only
'default'|
'emergency-call'|
'google'|
'join'|
'route'|
'yahoo',
/**
* Sets the return key to the label. Use it instead of `returnKeyType`.
* @platform android
*/
returnKeyLabel?: string,
/**
* Limits the maximum number of characters that can be entered. Use this
* instead of implementing the logic in JS to avoid flicker.
*/
maxLength?: number,
/**
* Sets the number of lines for a `TextInput`. Use it with multiline set to
* `true` to be able to fill the lines.
* @platform android
*/
numberOfLines?: number,
/**
* 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`.
* @platform android
*/
disableFullscreenUI?: boolean,
/**
* 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`.
* @platform ios
*/
enablesReturnKeyAutomatically?: boolean,
/**
* If `true`, the text input can be multiple lines.
* The default value is `false`.
*/
multiline?: boolean,
/**
* Set text break strategy on Android API Level 23+, possible values are `simple`, `highQuality`, `balanced`
* The default value is `simple`.
* @platform android
*/
textBreakStrategy?: 'simple' | 'highQuality' | 'balanced',
/**
* Callback that is called when the text input is blurred.
*/
onBlur?: Function,
/**
* Callback that is called when the text input is focused.
*/
onFocus?: Function,
/**
* Callback that is called when the text input's text changes.
*/
onChange?: Function,
/**
* Callback that is called when the text input's text changes.
* Changed text is passed as an argument to the callback handler.
*/
onChangeText?: Function,
/**
* 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.
*/
onContentSizeChange?: Function,
/**
* Callback that is called when text input ends.
*/
onEndEditing?: Function,
/**
* Callback that is called when the text input selection is changed.
* This will be called with
* `{ nativeEvent: { selection: { start, end } } }`.
*/
onSelectionChange?: Function,
/**
* Callback that is called when the text input's submit button is pressed.
* Invalid if `multiline={true}` is specified.
*/
onSubmitEditing?: Function,
/**
* 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.
* @platform ios
*/
onKeyPress?: Function,
/**
* Invoked on mount and layout changes with `{x, y, width, height}`.
*/
onLayout?: Function,
/**
* 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.
*/
onScroll?: Function,
/**
* The string that will be rendered before text input has been entered.
*/
placeholder?: Function,
/**
* The text color of the placeholder string.
*/
placeholderTextColor?: Color,
/**
* If `true`, the text input obscures the text entered so that sensitive text
* like passwords stay secure. The default value is `false`.
*/
secureTextEntry?: boolean,
/**
* The highlight and cursor color of the text input.
*/
selectionColor?: Color,
/**
* An instance of `DocumentSelectionState`, this is some state that is responsible for
* maintaining selection information for a document.
*
* Some functionality that can be performed with this instance is:
*
* - `blur()`
* - `focus()`
* - `update()`
*
* > You can reference `DocumentSelectionState` in
* > [`vendor/document/selection/DocumentSelectionState.js`](https://github.com/facebook/react-native/blob/master/Libraries/vendor/document/selection/DocumentSelectionState.js)
*
* @platform ios
*/
selectionState?: DocumentSelectionState,
/**
* The start and end of the text input's selection. Set start and end to
* the same value to position the cursor.
*/
selection?: {
start: number,
end?: number,
},
/**
* 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.
*/
value?: string,
/**
* Provides an initial value that will change when the user starts typing.
* Useful for simple use-cases where you do not want to deal with listening
* to events and updating the value prop to keep the controlled state in sync.
*/
defaultValue?: string,
/**
* When the clear button should appear on the right side of the text view.
* @platform ios
*/
clearButtonMode?: 'never' | 'while-editing' | 'unless-editing' | 'always',
/**
* If `true`, clears the text field automatically when editing begins.
* @platform ios
*/
clearTextOnFocus?: boolean,
/**
* If `true`, all text will automatically be selected on focus.
*/
selectTextOnFocus?: boolean,
/**
* 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.
*/
blurOnSubmit?: boolean,
/**
* Note that not all Text styles are supported,
* see [Issue#7070](https://github.com/facebook/react-native/issues/7070)
* for more detail.
*
* [Styles](docs/style.html)
*/
style?: StyleProp<TextStylePropTypes, StyleId>,
/**
* The color of the `TextInput` underline.
* @platform android
*/
underlineColorAndroid?: Color,
/**
* If defined, the provided image resource will be rendered on the left.
* @platform android
*/
inlineImageLeft?: string,
/**
* Padding between the inline image, if any, and the text input itself.
* @platform android
*/
inlineImagePadding?: number,
/**
* 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'`
*
* @platform ios
*/
dataDetectorTypes: DataDetector | Array<DataDetector>,
/**
* If `true`, caret is hidden. The default value is `false`.
*/
caretHidden?: boolean,
};
declare export class TextInput extends React$Component<void, TextInputProps, void> {
static State: TextInputState,
isFocused(): boolean,
clear(): void,
blur(): void,
focus(): void,
measure(callback: MeasureOnSuccessCallback): void,
measureInWindow(callback: MeasureInWindowOnSuccessCallback): void,
measureLayout(
relativeToNativeNode: number,
onSuccess: MeasureLayoutOnSuccessCallback,
onFail: () => void,
): void,
setNativeProps(nativeProps: TextInputProps): void,
}
declare type AlertType = $Enum<{
'default': string,
'plain-text': string,
'secure-text': string,
'login-password': string,
}>;
declare type AlertButtonStyle = $Enum<{
'default': string,
'cancel': string,
'destructive': string,
}>;
/**
* Array or buttons
* @typedef {Array} ButtonsArray
* @property {string=} text Button label
* @property {Function=} onPress Callback function when button pressed
* @property {AlertButtonStyle=} style Button style
*/
declare type ButtonsArray = Array<{
/**
* Button label
*/
text?: string,
/**
* Callback function when button pressed
*/
onPress?: ?Function,
/**
* Button style
*/
style?: AlertButtonStyle,
}>;
declare type AlertButtons = Array<{
text?: string,
onPress?: ?Function,
style?: AlertButtonStyle,
}>;
declare type AlertOptions = {
cancelable?: ?boolean,
onDismiss?: ?Function,
};
declare export var Alert: {|
alert(
title: ?string,
message?: ?string,
buttons?: AlertButtons,
options?: AlertOptions,
type?: AlertType,
): void,
|};
declare export var Linking: {|
...$Exact<EventEmitter<string>>,
addEventListener(type: string, handler: Function): void,
removeEventListener(type: string, handler: Function ): void,
/**
* 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" on Android
* or "http://maps.apple.com/?ll=37.484847,-122.148386" on iOS), a contact,
* or any other URL that can be opened with the installed apps.
*
* The method returns a `Promise` object. If the user confirms the open dialog or the
* url automatically opens, the promise is resolved. If the user cancels the open dialog
* or there are no registered applications for the url, the promise is rejected.
*
* 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 {@code canOpenURL} first.
*
* NOTE: For web URLs, the protocol ("http://", "https://") must be set accordingly!
*/
openURL(url: string): Promise<any>,
/**
* 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` or canOpenURL will always return false.
*
* @param URL the URL to open
*/
canOpenURL(url: string): Promise<boolean>,
/**
* If the app launch was triggered by an app link,
* 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
*/
getInitialURL(): Promise<?string>,
|};
declare export var processColor: Color => number;
declare type KeyboardEventName =
| 'keyboardWillShow'
| 'keyboardDidShow'
| 'keyboardWillHide'
| 'keyboardDidHide'
| 'keyboardWillChangeFrame'
| 'keyboardDidChangeFrame';
declare type KeyboardEventData = {
endCoordinates: {
width: number,
height: number,
screenX: number,
screenY: number,
},
};
declare type KeyboardEventListener = (e: KeyboardEventData) => void;
declare export var Keyboard: {|
...$Exact<EventEmitter<KeyboardEventName>>,
dismiss(): void,
|};
declare export var AsyncStorage: {|
/**
* Fetches an item for a `key` and invokes a callback upon completion.
* Returns a `Promise` object.
* @param key Key of the item to fetch.
* @param callback Function that will be called with a result if found or
* any error.
* @returns A `Promise` object.
*/
getItem(
key: string,
callback?: ?(error: ?Error, result: ?string) => void
): Promise,
/**
* Sets the value for a `key` and invokes a callback upon completion.
* Returns a `Promise` object.
* @param key Key of the item to set.
* @param value Value to set for the `key`.
* @param callback Function that will be called with any error.
* @returns A `Promise` object.
*/
setItem(
key: string,
value: string,
callback?: ?(error: ?Error) => void
): Promise,
/**
* Removes an item for a `key` and invokes a callback upon completion.
* Returns a `Promise` object.
* @param key Key of the item to remove.
* @param callback Function that will be called with any error.
* @returns A `Promise` object.
*/
removeItem(
key: string,
callback?: ?(error: ?Error) => void
): Promise,
/**
* Merges an existing `key` value with an input value, assuming both values
* are stringified JSON. Returns a `Promise` object.
*
* **NOTE:** This is not supported by all native implementations.
*
* @param key Key of the item to modify.
* @param value New value to merge for the `key`.
* @param callback Function that will be called with any error.
* @returns A `Promise` object.
*
* @example <caption>Example</caption>
* let UID123_object = {
* name: 'Chris',
* age: 30,
* traits: {hair: 'brown', eyes: 'brown'},
* };
* // You only need to define what will be added or updated
* let UID123_delta = {
* age: 31,
* traits: {eyes: 'blue', shoe_size: 10}
* };
*
* AsyncStorage.setItem('UID123', JSON.stringify(UID123_object), () => {
* AsyncStorage.mergeItem('UID123', JSON.stringify(UID123_delta), () => {
* AsyncStorage.getItem('UID123', (err, result) => {
* console.log(result);
* });
* });
* });
*
* // Console log result:
* // => {'name':'Chris','age':31,'traits':
* // {'shoe_size':10,'hair':'brown','eyes':'blue'}}
*/
mergeItem(
key: string,
value: string,
callback?: ?(error: ?Error) => void
): Promise,
/**
* Erases *all* `AsyncStorage` for all clients, libraries, etc. You probably
* don't want to call this; use `removeItem` or `multiRemove` to clear only
* your app's keys. Returns a `Promise` object.
* @param callback Function that will be called with any error.
* @returns A `Promise` object.
*/
clear(callback?: ?(error: ?Error) => void): Promise,
/**
* Gets *all* keys known to your app; for all callers, libraries, etc.
* Returns a `Promise` object.
* @param callback Function that will be called the keys found and any error.
* @returns A `Promise` object.
*
* Example: see the `multiGet` example.
*/
getAllKeys(callback?: ?(error: ?Error, keys: ?Array<string>) => void): Promise,
/**
* The following batched functions are useful for executing a lot of
* operations at once, allowing for native optimizations and provide the
* convenience of a single callback after all operations are complete.
*
* These functions return arrays of errors, potentially one for every key.
* For key-specific errors, the Error object will have a key property to
* indicate which key caused the error.
*/
/** Flushes any pending requests using a single batch call to get the data. */
flushGetRequests(): void,
/**
* This allows you to batch the fetching of items given an array of `key`
* inputs. Your callback will be invoked with an array of corresponding
* key-value pairs found:
*
* ```
* multiGet(['k1', 'k2'], cb) -> cb([['k1', 'val1'], ['k2', 'val2']])
* ```
*
* The method returns a `Promise` object.
*
* @param keys Array of key for the items to get.
* @param callback Function that will be called with a key-value array of
* the results, plus an array of any key-specific errors found.
* @returns A `Promise` object.
*
* @example <caption>Example</caption>
*
* AsyncStorage.getAllKeys((err, keys) => {
* AsyncStorage.multiGet(keys, (err, stores) => {
* stores.map((result, i, store) => {
* // get at each store's key/value so you can work with it
* let key = store[i][0];
* let value = store[i][1];
* });
* });
* });
*/
multiGet(
keys: Array<string>,
callback?: ?(errors: ?Array<Error>, result: ?Array<Array<string>>) => void
): Promise,
/**
* Use this as a batch operation for storing multiple key-value pairs. When
* the operation completes you'll get a single callback with any errors:
*
* ```
* multiSet([['k1', 'val1'], ['k2', 'val2']], cb);
* ```
*
* The method returns a `Promise` object.
*
* @param keyValuePairs Array of key-value array for the items to set.
* @param callback Function that will be called with an array of any
* key-specific errors found.
* @returns A `Promise` object.
* Example: see the `multiMerge` example.
*/
multiSet(
keyValuePairs: Array<Array<string>>,
callback?: ?(errors: ?Array<Error>) => void
): Promise,
/**
* Call this to batch the deletion of all keys in the `keys` array. Returns
* a `Promise` object.
*
* @param keys Array of key for the items to delete.
* @param callback Function that will be called an array of any key-specific
* errors found.
* @returns A `Promise` object.
*
* @example <caption>Example</caption>
* let keys = ['k1', 'k2'];
* AsyncStorage.multiRemove(keys, (err) => {
* // keys k1 & k2 removed, if they existed
* // do most stuff after removal (if you want)
* });
*/
multiRemove(
keys: Array<string>,
callback?: ?(errors: ?Array<Error>) => void
): Promise,
/**
* Batch operation to merge in existing and new values for a given set of
* keys. This assumes that the values are stringified JSON. Returns a
* `Promise` object.
*
* **NOTE**: This is not supported by all native implementations.
*
* @param keyValuePairs Array of key-value array for the items to merge.
* @param callback Function that will be called with an array of any
* key-specific errors found.
* @returns A `Promise` object.
*
* @example <caption>Example</caption>
* // first user, initial values
* let UID234_object = {
* name: 'Chris',
* age: 30,
* traits: {hair: 'brown', eyes: 'brown'},
* };
*
* // first user, delta values
* let UID234_delta = {
* age: 31,
* traits: {eyes: 'blue', shoe_size: 10},
* };
*
* // second user, initial values
* let UID345_object = {
* name: 'Marge',
* age: 25,
* traits: {hair: 'blonde', eyes: 'blue'},
* };
*
* // second user, delta values
* let UID345_delta = {
* age: 26,
* traits: {eyes: 'green', shoe_size: 6},
* };
*
* let multi_set_pairs = [['UID234', JSON.stringify(UID234_object)], ['UID345', JSON.stringify(UID345_object)]]
* let multi_merge_pairs = [['UID234', JSON.stringify(UID234_delta)], ['UID345', JSON.stringify(UID345_delta)]]
*
* AsyncStorage.multiSet(multi_set_pairs, (err) => {
* AsyncStorage.multiMerge(multi_merge_pairs, (err) => {
* AsyncStorage.multiGet(['UID234','UID345'], (err, stores) => {
* stores.map( (result, i, store) => {
* let key = store[i][0];
* let val = store[i][1];
* console.log(key, val);
* });
* });
* });
* });
*
* // Console log results:
* // => UID234 {"name":"Chris","age":31,"traits":{"shoe_size":10,"hair":"brown","eyes":"blue"}}
* // => UID345 {"name":"Marge","age":26,"traits":{"shoe_size":6,"hair":"blonde","eyes":"green"}}
*/
multiMerge(
keyValuePairs: Array<Array<string>>,
callback?: ?(errors: ?Array<Error>) => void
): Promise,
|};
declare type InteractionManagerEvents = {
interactionStart: 'interactionStart',
interactionComplete: 'interactionComplete',
};
declare export var InteractionManager: {|
Events: InteractionManagerEvents,
/**
* Schedule a function to run after all interactions have completed. Returns a cancellable
* "promise".
*/
runAfterInteractions(task: ?Task): {then: Function, done: Function, cancel: Function},
/**
* Notify manager that an interaction has started.
*/
createInteractionHandle(): Handle,
/**
* Notify manager that an interaction has completed.
*/
clearInteractionHandle(handle: Handle): void,
addListener(
eventType: $Keys<InteractionManagerEvents>,
listener: Function,
context: ?Object
): EmitterSubscription<$Keys<InteractionManagerEvents>>,
/**
* 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).
*/
setDeadline(deadline: number): void,
|};
declare type EasingFunction = (t: number) => number;
declare export var Easing: {|
step0: (n: number) => EasingFunction,
step1: (n: number) => EasingFunction,
linear: EasingFunction,
ease: EasingFunction,
quad: EasingFunction,
cubic: EasingFunction,
/**
* A power function. Position is equal to the Nth power of elapsed time.
*
* n = 4: http://easings.net/#easeInQuart
* n = 5: http://easings.net/#easeInQuint
*/
poly: EasingFunction,
/**
* A sinusoidal function.
*
* http://easings.net/#easeInSine
*/
sin: EasingFunction,
/**
* A circular function.
*
* http://easings.net/#easeInCirc
*/
circle: EasingFunction,
/**
* An exponential function.
*
* http://easings.net/#easeInExpo
*/
exp: EasingFunction,
/**
* A simple elastic interaction, similar to a spring oscillating back and
* forth.
*
* Default bounciness is 1, which overshoots a little bit once. 0 bounciness
* doesn't overshoot at all, and bounciness of N > 1 will overshoot about N
* times.
*
* http://easings.net/#easeInElastic
*
* Wolfram Plots:
*
* - http://tiny.cc/elastic_b_1 (bounciness = 1, default)
* - http://tiny.cc/elastic_b_3 (bounciness = 3)
*/
elastic(bounciness?: number): EasingFunction,
/**
* Use with `Animated.parallel()` to create a simple effect where the object
* animates back slightly as the animation starts.
*
* Wolfram Plot:
*
* - http://tiny.cc/back_default (s = 1.70158, default)
*/
back(s: number): EasingFunction,
/**
* Provides a simple bouncing effect.
*
* http://easings.net/#easeInBounce
*/
bounce: EasingFunction,
/**
* Provides a cubic bezier curve, equivalent to CSS Transitions'
* `transition-timing-function`.
*
* A useful tool to visualize cubic bezier curves can be found at
* http://cubic-bezier.com/
*/
bezier(
x1: number,
y1: number,
x2: number,
y2: number
): EasingFunction,
/**
* Runs an easing function forwards.
*/
in(easing: EasingFunction): EasingFunction,
/**
* Runs an easing function backwards.
*/
out(easing: EasingFunction): EasingFunction,
/**
* Makes any easing function symmetrical. The easing function will run
* forwards for half of the duration, then backwards for the rest of the
* duration.
*/
inOut(easing: EasingFunction): EasingFunction,
|};
declare type ExtrapolateType = 'extend' | 'identity' | 'clamp';
declare type InterpolationConfigType = {
inputRange: Array<number>,
outputRange: (Array<number> | Array<string>),
easing?: ((input: number) => number),
extrapolate?: ExtrapolateType,
extrapolateLeft?: ExtrapolateType,
extrapolateRight?: ExtrapolateType,
};
declare type EndResult = {finished: bool};
declare type EndCallback = (result: EndResult) => void;
declare type AnimationConfig = {
isInteraction?: bool,
useNativeDriver?: bool,
onComplete?: ?EndCallback,
iterations?: number,
};
declare class Interpolation {
static create(config: InterpolationConfigType): (input: number) => number | string,
}
declare class BaseAnimated {
}
declare class Animation {
start(
fromValue: number,
onUpdate: (value: number) => void,
onEnd: ?EndCallback,
previousAnimation: ?Animation,
animatedValue: AnimatedValue
): void,
onUpdate(): void,
stop(): void,
}
declare class AnimatedWithChildren extends BaseAnimated {}
declare class TimingAnimation extends Animation {}
declare type DecayAnimationConfig = AnimationConfig & {
velocity: number | {x: number, y: number},
deceleration?: number,
};
declare type DecayAnimationConfigSingle = AnimationConfig & {
velocity: number,
deceleration?: number,
};
declare type SpringAnimationConfig = AnimationConfig & {
toValue: number | AnimatedValue | {x: number, y: number} | AnimatedValueXY,
overshootClamping?: bool,
restDisplacementThreshold?: number,
restSpeedThreshold?: number,
velocity?: number | {x: number, y: number},
bounciness?: number,
speed?: number,
tension?: number,
friction?: number,
};
declare type SpringAnimationConfigSingle = AnimationConfig & {
toValue: number | AnimatedValue,
overshootClamping?: bool,
restDisplacementThreshold?: number,
restSpeedThreshold?: number,
velocity?: number,
bounciness?: number,
speed?: number,
tension?: number,
friction?: number,
};
declare class DecayAnimation extends Animation {}
declare class SpringAnimation extends Animation {}
declare type ValueListenerCallback = (state: {value: number}) => void;
declare class AnimatedValue extends AnimatedWithChildren {
constructor(value: number): void,
/**
* Directly set the value. This will stop any animations running on the value
* and update all the bound properties.
*/
setValue(value: 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.
*/
setOffset(offset: number): void,
/**
* Merges the offset value into the base value and resets the offset to zero.
* The final output of the value is unchanged.
*/
flattenOffset(): void,
/**
* Sets the offset value to the base value, and resets the base value to zero.
* The final output of the value is unchanged.
*/
extractOffset(): void,
/**
* 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.
*/
addListener(callback: ValueListenerCallback): string,
removeListener(id: string): void,
removeAllListeners(): 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.
*/
stopAnimation(callback?: ?(value: number) => void): void,
/**
* Stops any animation and resets the value to its original
*/
resetAnimation(callback?: ?(value: number) => void): void,
/**
* Interpolates the value before updating the property, e.g. mapping 0-1 to
* 0-10.
*/
interpolate(config: InterpolationConfigType): AnimatedInterpolation,
/**
* Typically only used internally, but could be used by a custom Animation
* class.
*/
animate(animation: Animation, callback: ?EndCallback): void,
/**
* Typically only used internally.
*/
stopTracking(): void,
/**
* Typically only used internally.
*/
track(tracking: BaseAnimated): void,
}
declare type ValueXYListenerCallback = (value: {x: number, y: number}) => void;
declare class AnimatedValueXY extends AnimatedWithChildren {
x: AnimatedValue;
y: AnimatedValue;
constructor(valueIn?: ?{x: number | AnimatedValue, y: number | AnimatedValue}): void,
setValue(value: {x: number, y: number}): void,
setOffset(offset: {x: number, y: number}): void,
flattenOffset(): void,
extractOffset(): void,
resetAnimation(callback?: (value: {x: number, y: number}) => void): void,
stopAnimation(callback?: (value: {x: number, y: number}) => void): void,
addListener(callback: ValueXYListenerCallback): string,
removeListener(id: string): void,
removeAllListeners(): void,
/**
* Converts `{x, y}` into `{left, top}` for use in style, e.g.
*
*```javascript
* style={this.state.anim.getLayout()}
*```
*/
getLayout(): {[key: string]: AnimatedValue},
/**
* Converts `{x, y}` into a useable translation transform, e.g.
*
*```javascript
* style={{
* transform: this.state.anim.getTranslateTransform()
* }}
*```
*/
getTranslateTransform(): Array<{[key: string]: AnimatedValue}>,
}
declare class AnimatedInterpolation extends AnimatedWithChildren {
constructor(parent: BaseAnimated, config: InterpolationConfigType): void,
interpolate(config: InterpolationConfigType): AnimatedInterpolation,
}
declare class AnimatedAddition extends AnimatedWithChildren {
constructor(a: BaseAnimated | number, b: BaseAnimated | number): void,
interpolate(config: InterpolationConfigType): AnimatedInterpolation,
}
declare class AnimatedDivision extends AnimatedWithChildren {
constructor(a: BaseAnimated | number, b: BaseAnimated | number): void,
interpolate(config: InterpolationConfigType): AnimatedInterpolation,
}
declare class AnimatedMultiplication extends AnimatedWithChildren {
constructor(a: BaseAnimated | number, b: BaseAnimated | number): void,
interpolate(config: InterpolationConfigType): AnimatedInterpolation,
}
declare class AnimatedModulo extends AnimatedWithChildren {
constructor(a: BaseAnimated | number, moduluis: number): void,
interpolate(config: InterpolationConfigType): AnimatedInterpolation,
}
declare class AnimatedDiffClamp extends AnimatedWithChildren {
constructor(a: BaseAnimated, min: number, max: number): void,
interpolate(config: InterpolationConfigType): AnimatedInterpolation,
}
declare class AnimatedTransform extends AnimatedWithChildren {
constructor(transforms: Array<Object>): void,
}
declare class AnimatedStyle extends AnimatedWithChildren {
constructor(style: any): void,
}
declare class AnimatedProps extends AnimatedWithChildren {
constructor(
props: Object,
callback: () => void,
): void,
update(): void,
setNativeView(animatedView: any): void,
}
declare class AnimatedComponent extends React$Component<*,*,*> {
getNode(): any,
}
declare class AnimatedTracking extends BaseAnimated {
constructor(
value: AnimatedValue,
parent: BaseAnimated,
animationClass: any,
animationConfig: Object,
callback?: ?EndCallback,
): void,
update(): void,
}
declare type CompositeAnimation = {
start: (callback?: ?EndCallback) => void,
stop: () => void,
reset: () => void,
};
declare type ParallelConfig = {
stopTogether?: bool, // If one is stopped, stop all. default: true
}
declare type LoopAnimationConfig = { iterations: number };
declare type Mapping = {[key: string]: Mapping} | AnimatedValue;
declare type EventConfig = {
listener?: ?Function,
useNativeDriver?: bool,
};
declare class AnimatedEvent {
}
declare var Animated: {|
/**
* Standard value class for driving animations. Typically initialized with
* `new Animated.Value(0);`
*
* See also [`AnimatedValue`](docs/animated.html#animatedvalue).
*/
Value: Class<AnimatedValue>,
/**
* 2D value class for driving 2D animations, such as pan gestures.
*
* See also [`AnimatedValueXY`](docs/animated.html#animatedvaluexy).
*/
ValueXY: Class<AnimatedValueXY>,
/**
* exported to use the Interpolation type in flow
*
* See also [`AnimatedInterpolation`](docs/animated.html#animatedinterpolation).
*/
Interpolation: Class<AnimatedInterpolation>,
/**
* Animates a value from an initial velocity to zero based on a decay
* coefficient.
*
* Config is an object that may have the following options:
*
* - `velocity`: Initial velocity. Required.
* - `deceleration`: Rate of decay. Default 0.997.
* - `useNativeDriver`: Uses the native driver when true. Default false.
*/
decay(value: AnimatedValue | AnimatedValueXY, config: DecayAnimationConfig): CompositeAnimation,
/**
* Animates a value along a timed easing curve. The
* [`Easing`](docs/easing.html) module has tons of predefined curves, or you
* can use your own function.
*
* Config is an object that may have the following options:
*
* - `duration`: Length of animation (milliseconds). Default 500.
* - `easing`: Easing function to define curve.
* Default is `Easing.inOut(Easing.ease)`.
* - `delay`: Start the animation after delay (milliseconds). Default 0.
* - `useNativeDriver`: Uses the native driver when true. Default false.
*/
timing(value: AnimatedValue | AnimatedValueXY, config: TimingAnimationConfig): CompositeAnimation,
/**
* Spring animation based on Rebound and
* [Origami](https://facebook.github.io/origami/). Tracks velocity state to
* create fluid motions as the `toValue` updates, and can be chained together.
*
* Config is an object that may have the following options. Note that you can
* only define bounciness/speed or tension/friction but not both:
*
* - `friction`: Controls "bounciness"/overshoot. Default 7.
* - `tension`: Controls speed. Default 40.
* - `speed`: Controls speed of the animation. Default 12.
* - `bounciness`: Controls bounciness. Default 8.
* - `useNativeDriver`: Uses the native driver when true. Default false.
*/
spring(value: AnimatedValue | AnimatedValueXY, config: SpringAnimationConfig): CompositeAnimation,
/**
* Creates a new Animated value composed from two Animated values added
* together.
*/
add(a: BaseAnimated | number, b: BaseAnimated | number): AnimatedAddition,
/**
* Creates a new Animated value composed by dividing the first Animated value
* by the second Animated value.
*/
divide(a: BaseAnimated | number, b: BaseAnimated | number): AnimatedDivision,
/**
* Creates a new Animated value composed from two Animated values multiplied
* together.
*/
multiply(a: BaseAnimated | number, b: BaseAnimated | number): AnimatedMultiplication,
/**
* Creates a new Animated value that is the (non-negative) modulo of the
* provided Animated value
*/
modulo(a: BaseAnimated, modulus: number): AnimatedModulo,
/**
* 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.
*/
diffClamp(a: BaseAnimated, min: number, max: number): AnimatedDiffClamp,
/**
* Starts an animation after the given delay.
*/
delay(time: number): 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.
*/
sequence(animations: Array<CompositeAnimation>): 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.
*/
parallel(animations: Array<CompositeAnimation>, config?: ?ParallelConfig): CompositeAnimation,
/**
* Array of animations may run in parallel (overlap), but are started in
* sequence with successive delays. Nice for doing trailing effects.
*/
stagger(time: number, animations: Array<CompositeAnimation>): 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'.
*/
loop(animation: CompositeAnimation, config?: LoopAnimationConfig): CompositeAnimation,
/**
* Takes an array of mappings and extracts values from each arg accordingly,
* then calls `setValue` on the mapped outputs. e.g.
*
*```javascript
* 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
* ]),
*```
*
* Config is an object that may have the following options:
*
* - `listener`: Optional async listener.
* - `useNativeDriver`: Uses the native driver when true. Default false.
*/
event(argMapping: Array<?Mapping>, config?: EventConfig): any,
/**
* Make any React component Animatable. Used to create `Animated.View`, etc.
*/
createAnimatedComponent(Component: React$Component<*>): AnimatedComponent,
/**
* Imperative API to attach an animated value to an event on a view. Prefer using
* `Animated.event` with `useNativeDrive: true` if possible.
*/
attachNativeEvent(viewRef: any, eventName: string, argMapping: Array<?Mapping>): void,
/**
* Advanced imperative API for snooping on animated events that are passed in through props. Use
* values directly where possible.
*/
forkEvent(event: ?AnimatedEvent | ?Function, listener: Function): AnimatedEvent | Function,
unforkEvent(event: ?AnimatedEvent | ?Function, listener: Function): void ,
|};
declare export function findNodeHandle(componentOrHandle: any): ?number;
declare type TouchableWithoutFeedbackProps = {
accessible?: boolean,
accessibilityComponentType?: AccessibilityComponentType,
accessibilityTraits?: AccessibilityTrait | Array<AccessibilityTrait>,
/**
* If true, disable all interactions for this component.
*/
disabled?: boolean,
/**
* Called when the touch is released, but not if cancelled (e.g. by a scroll
* that steals the responder lock).
*/
onPress?: Function,
onPressIn?: Function,
onPressOut?: Function,
/**
* Invoked on mount and layout changes with
*
* `{nativeEvent: {layout: {x, y, width, height}}}`
*/
onLayout?: Function,
onLongPress?: Function,
/**
* Delay in ms, from the start of the touch, before onPressIn is called.
*/
delayPressIn?: number,
/**
* Delay in ms, from the release of the touch, before onPressOut is called.
*/
delayPressOut?: number,
/**
* Delay in ms, from onPressIn, before onLongPress is called.
*/
delayLongPress?: number,
/**
* 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.
*/
pressRetentionOffset?: EdgeInsetsProp,
/**
* 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.
*/
hitSlop?: EdgeInsetsProp,
};
declare export class TouchableWithoutFeedback extends React$Component<void, TouchableWithoutFeedbackProps, void> {
blur(): void,
focus(): void,
measure(callback: MeasureOnSuccessCallback): void,
measureInWindow(callback: MeasureInWindowOnSuccessCallback): void,
measureLayout(
relativeToNativeNode: number,
onSuccess: MeasureLayoutOnSuccessCallback,
onFail: () => void,
): void,
setNativeProps(nativeProps: TouchableWithoutFeedbackProps): void,
}
declare type TouchableOpacityProps = {
...TouchableWithoutFeedbackProps,
/**
* Determines what the opacity of the wrapped view should be when touch is
* active. Defaults to 0.2.
*/
activeOpacity?: number,
focusedOpacity?: number,
/**
* Apple TV parallax effects
*/
tvParallaxProperties?: Object,
};
declare export class TouchableOpacity extends React$Component<typeof TouchableOpacity.defaultProps, TouchableOpacityProps, void> {
static defaultProps: {
activeOpacity: 0.2,
focusedOpacity: 0.7,
};
blur(): void,
focus(): void,
measure(callback: MeasureOnSuccessCallback): void,
measureInWindow(callback: MeasureInWindowOnSuccessCallback): void,
measureLayout(
relativeToNativeNode: number,
onSuccess: MeasureLayoutOnSuccessCallback,
onFail: () => void,
): void,
setNativeProps(nativeProps: TouchableOpacityProps): void,
}
declare type TouchableHighlightProps = {
...TouchableWithoutFeedbackProps,
/**
* Determines what the opacity of the wrapped view should be when touch is
* active.
*/
activeOpacity?: number,
/**
* The color of the underlay that will show through when the touch is
* active.
*/
underlayColor?: Color,
style?: StyleProp<ViewStylePropTypes, StyleId>,
/**
* Called immediately after the underlay is shown
*/
onShowUnderlay?: Function,
/**
* Called immediately after the underlay is hidden
*/
onHideUnderlay?: Function,
/**
* *(Apple TV only)* TV preferred focus (see documentation for the View component).
*
* @platform ios
*/
hasTVPreferredFocus?: boolean,
/**
* *(Apple TV only)* Object with properties to control Apple TV parallax effects.
*
* enabled: If true, parallax effects are enabled. Defaults to true.
* shiftDistanceX: Defaults to 2.0.
* shiftDistanceY: Defaults to 2.0.
* tiltAngle: Defaults to 0.05.
* magnification: Defaults to 1.0.
*
* @platform ios
*/
tvParallaxProperties?: Object,
};
declare export class TouchableHighlight extends React$Component<typeof TouchableHighlight.defaultProps, TouchableHighlightProps, void> {
static defaultProps: {
activeOpacity: 0.85,
underlayColor: 'black',
};
blur(): void,
focus(): void,
measure(callback: MeasureOnSuccessCallback): void,
measureInWindow(callback: MeasureInWindowOnSuccessCallback): void,
measureLayout(
relativeToNativeNode: number,
onSuccess: MeasureLayoutOnSuccessCallback,
onFail: () => void,
): void,
setNativeProps(nativeProps: TouchableHighlightProps): void,
}
declare type TouchableNativeFeedbackProps = {
...TouchableWithoutFeedbackProps,
/**
* 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 static
* methods to generate that dictionary.
*/
background: {
type: 'RippleAndroid',
color?: number,
borderless?: boolean,
} | {
type: 'ThemeAttrAndroid',
attribute: string,
},
/**
* Set to true to add the ripple effect to the foreground of the view, instead of the
* background. This is useful if one of your child views has a background of its own, or you're
* e.g. displaying images, and you don't want the ripple to be covered by them.
*
* Check TouchableNativeFeedback.canUseNativeForeground() first, as this is only available on
* Android 6.0 and above. If you try to use this on older versions you will get a warning and
* fallback to background.
*/
useForeground?: boolean,
};
declare export class TouchableNativeFeedback extends React$Component<typeof TouchableNativeFeedback.defaultProps, TouchableNativeFeedbackProps, void> {
static defaultProps: {
activeOpacity: 0.85,
underlayColor: 'black',
};
/**
* Creates an object that represents android theme's default background for
* selectable elements (?android:attr/selectableItemBackground).
*/
static SelectableBackground(): {
type: 'ThemeAttrAndroid',
attribute: 'selectableItemBackground'
},
/**
* Creates an object that represent android theme's default background for borderless
* selectable elements (?android:attr/selectableItemBackgroundBorderless).
* Available on android API level 21+.
*/
static SelectableBackgroundBorderless(): {
type: 'ThemeAttrAndroid',
attribute: 'selectableItemBackgroundBorderless',
},
/**
* 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+.
*
* @param color The ripple color
* @param borderless If the ripple can render outside it's bounds
*/
static Ripple(color: string, borderless: boolean): {
type: 'RippleAndroid',
color: number,
borderless: boolean,
},
static canUseNativeForeground(): boolean,
blur(): void,
focus(): void,
measure(callback: MeasureOnSuccessCallback): void,
measureInWindow(callback: MeasureInWindowOnSuccessCallback): void,
measureLayout(
relativeToNativeNode: number,
onSuccess: MeasureLayoutOnSuccessCallback,
onFail: () => void,
): void,
setNativeProps(nativeProps: TouchableNativeFeedbackProps): void,
}
declare class ListViewDataSource {
/**
* You can provide custom extraction and `hasChanged` functions for section
* headers and rows. If absent, data will be extracted with the
* `defaultGetRowData` and `defaultGetSectionHeaderData` functions.
*
* The default extractor expects data of one of the following forms:
*
* { sectionID_1: { rowID_1: <rowData1>, ... }, ... }
*
* or
*
* { sectionID_1: [ <rowData1>, <rowData2>, ... ], ... }
*
* or
*
* [ [ <rowData1>, <rowData2>, ... ], ... ]
*
* The constructor takes in a params argument that can contain any of the
* following:
*
* - getRowData(dataBlob, sectionID, rowID);
* - getSectionHeaderData(dataBlob, sectionID);
* - rowHasChanged(prevRowData, nextRowData);
* - sectionHeaderHasChanged(prevSectionData, nextSectionData);
*/
constructor(params: ParamType): void,
/**
* Clones this `ListViewDataSource` with the specified `dataBlob` and
* `rowIdentities`. The `dataBlob` is just an arbitrary blob of data. At
* construction an extractor to get the interesting information was defined
* (or the default was used).
*
* The `rowIdentities` is a 2D array of identifiers for rows.
* ie. [['a1', 'a2'], ['b1', 'b2', 'b3'], ...]. If not provided, it's
* assumed that the keys of the section data are the row identities.
*
* Note: This function does NOT clone the data in this data source. It simply
* passes the functions defined at construction to a new data source with
* the data specified. If you wish to maintain the existing data you must
* handle merging of old and new data separately and then pass that into
* this function as the `dataBlob`.
*/
cloneWithRows(
dataBlob: $ReadOnlyArray<any> | {+[key: string]: any},
rowIdentities: ?$ReadOnlyArray<string>
): ListViewDataSource,
/**
* This performs the same function as the `cloneWithRows` function but here
* you also specify what your `sectionIdentities` are. If you don't care
* about sections you should safely be able to use `cloneWithRows`.
*
* `sectionIdentities` is an array of identifiers for sections.
* ie. ['s1', 's2', ...]. If not provided, it's assumed that the
* keys of dataBlob are the section identities.
*
* Note: this returns a new object!
*/
cloneWithRowsAndSections(
dataBlob: any,
sectionIdentities: ?Array<string>,
rowIdentities: ?Array<Array<string>>
): ListViewDataSource,
getRowCount(): number,
getRowAndSectionCount(): number,
/**
* Returns if the row is dirtied and needs to be rerendered
*/
rowShouldUpdate(sectionIndex: number, rowIndex: number): boolean,
/**
* Gets the data required to render the row.
*/
getRowData(sectionIndex: number, rowIndex: number): any,
/**
* Gets the rowID at index provided if the dataSource arrays were flattened,
* or null of out of range indexes.
*/
getRowIDForFlatIndex(index: number): ?string,
/**
* Gets the sectionID at index provided if the dataSource arrays were flattened,
* or null for out of range indexes.
*/
getSectionIDForFlatIndex(index: number): ?string,
/**
* Returns an array containing the number of rows in each section
*/
getSectionLengths(): Array<number>,
/**
* Returns if the section header is dirtied and needs to be rerendered
*/
sectionHeaderShouldUpdate(sectionIndex: number): boolean,
/**
* Gets the data required to render the section header
*/
getSectionHeaderData(sectionIndex: number): any,
}
declare type ListViewProps = {
...ScrollViewProps,
/**
* An instance of [ListView.DataSource](docs/listviewdatasource.html) to use
*/
dataSource: ListViewDataSource,
/**
* (sectionID, rowID, adjacentRowHighlighted) => renderable
*
* If provided, a renderable component to be rendered as the separator
* below each row but not the last row if there is a section header below.
* Take a sectionID and rowID of the row above and whether its adjacent row
* is highlighted.
*/
renderSeparator?: Function,
/**
* (rowData, sectionID, rowID, highlightRow) => renderable
*
* Takes a data entry from the data source and its ids and should return
* a renderable component to be rendered as the row. By default the data
* is exactly what was put into the data source, but it's also possible to
* provide custom extractors. ListView can be notified when a row is
* being highlighted by calling `highlightRow(sectionID, rowID)`. This
* sets a boolean value of adjacentRowHighlighted in renderSeparator, allowing you
* to control the separators above and below the highlighted row. The highlighted
* state of a row can be reset by calling highlightRow(null).
*/
renderRow: Function,
/**
* How many rows to render on initial component mount. Use this to make
* it so that the first screen worth of data appears at one time instead of
* over the course of multiple frames.
*/
initialListSize?: number,
/**
* Called when all rows have been rendered and the list has been scrolled
* to within onEndReachedThreshold of the bottom. The native scroll
* event is provided.
*/
onEndReached?: Function,
/**
* Threshold in pixels (virtual, not physical) for calling onEndReached.
*/
onEndReachedThreshold?: number,
/**
* Number of rows to render per event loop. Note: if your 'rows' are actually
* cells, i.e. they don't span the full width of your view (as in the
* ListViewGridLayoutExample), you should set the pageSize to be a multiple
* of the number of cells per row, otherwise you're likely to see gaps at
* the edge of the ListView as new pages are loaded.
*/
pageSize?: number,
/**
* () => renderable
*
* The header and footer are always rendered (if these props are provided)
* on every render pass. If they are expensive to re-render, wrap them
* in StaticContainer or other mechanism as appropriate. Footer is always
* at the bottom of the list, and header at the top, on every render pass.
*/
renderFooter?: Function,
renderHeader?: Function,
/**
* (sectionData, sectionID) => renderable
*
* If provided, a header is rendered for this section.
*/
renderSectionHeader?: Function,
/**
* (props) => renderable
*
* A function that returns the scrollable component in which the list rows
* are rendered. Defaults to returning a ScrollView with the given props.
*/
renderScrollComponent?: Function,
/**
* How early to start rendering rows before they come on screen, in
* pixels.
*/
scrollRenderAheadDistance?: number,
/**
* (visibleRows, changedRows) => void
*
* Called when the set of visible rows changes. `visibleRows` maps
* { sectionID: { rowID: true }} for all the visible rows, and
* `changedRows` maps { sectionID: { rowID: true | false }} for the rows
* that have changed their visibility, with true indicating visible, and
* false indicating the view has moved out of view.
*/
onChangeVisibleRows?: Function,
/**
* A performance optimization for improving scroll perf of
* large lists, used in conjunction with overflow: 'hidden' on the row
* containers. This is enabled by default.
*/
removeClippedSubviews?: boolean,
/**
* Makes the sections headers sticky. The sticky behavior means that it
* will scroll with the content at the top of the section until it reaches
* the top of the screen, at which point it will stick to the top until it
* is pushed off the screen by the next section header. This property is
* not supported in conjunction with `horizontal={true}`. Only enabled by
* default on iOS because of typical platform standards.
*/
stickySectionHeadersEnabled?: boolean,
/**
* 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}`.
*/
stickyHeaderIndices?: Array<number>,
/**
* Flag indicating whether empty section headers should be rendered. In the future release
* empty section headers will be rendered by default, and the flag will be deprecated.
* If empty sections are not desired to be rendered their indices should be excluded from sectionID object.
*/
enableEmptySections?: boolean,
};
declare export class ListView extends React$Component<void, ListViewProps, void> {
static DataSource: Class<ListViewDataSource>,
/**
* Provides a handle to the underlying scroll responder.
* Note that `this._scrollComponent` might not be a `ScrollView`, so we
* need to check that it responds to `getScrollResponder` before calling it.
*/
getScrollResponder(): any, // TODO(lmr): ScrollResponder
getScrollableNode(): any,
/**
* Scrolls to a given x, y offset, either immediately or with a smooth animation.
*
* See `ScrollView#scrollTo`.
*/
scrollTo(...args: Array<mixed>): void,
/**
* If this is a vertical ListView scrolls to the bottom.
* If this is a horizontal ListView scrolls to the right.
*
* Use `scrollToEnd({animated: true})` for smooth animated scrolling,
* `scrollToEnd({animated: false})` for immediate scrolling.
* If no options are passed, `animated` defaults to true.
*
* See `ScrollView#scrollToEnd`.
*/
scrollToEnd(options?: ?{ animated?: ?boolean }): void,
setNativeProps(props: Object): void,
}
declare type VirtualizedListItem = any;
declare type renderItemType = (info: any) => ?React.Element<any>;
declare type RequiredVirtualizedListProps = {
renderItem: renderItemType,
/**
* The default accessor functions assume this is an Array<{key: string}> but you can override
* getItem, getItemCount, and keyExtractor to handle any type of index-based data.
*/
data?: any,
/**
* A generic accessor for extracting an item from any sort of data blob.
*/
getItem: (data: any, index: number) => ?VirtualizedListItem,
/**
* Determines how many items are in the data blob.
*/
getItemCount: (data: any) => number,
};
declare type OptionalVirtualizedListProps = {
/**
* `debug` will turn on extra logging and visual overlays to aid with debugging both usage and
* implementation, but with a significant perf hit.
*/
debug?: ?boolean,
/**
* DEPRECATED: Virtualization provides significant performance and memory optimizations, but fully
* unmounts react instances that are outside of the render window. You should only need to disable
* this for debugging purposes.
*/
disableVirtualization: boolean,
/**
* 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.
*/
extraData?: any,
getItemLayout?: (data: any, index: number) =>
{length: number, offset: number, index: number}, // e.g. height, y
horizontal?: ?boolean,
/**
* How many items to render in the initial batch. This should be enough to fill the screen but not
* much more. Note these items will never be unmounted as part of the windowed rendering in order
* to improve perceived performance of scroll-to-top actions.
*/
initialNumToRender: number,
/**
* Instead of starting at the top with the first item, start at `initialScrollIndex`. This
* disables the "scroll to top" optimization that keeps the first `initialNumToRender` items
* always rendered and immediately renders the items starting at this initial index. Requires
* `getItemLayout` to be implemented.
*/
initialScrollIndex?: ?number,
keyExtractor: (item: VirtualizedListItem, index: number) => string,
/**
* Rendered when the list is empty. Can be a React Component Class, a render function, or
* a rendered element.
*/
ListEmptyComponent?: ?(React$Class<any> | React$Element<any>),
/**
* Rendered at the bottom of all the items. Can be a React Component Class, a render function, or
* a rendered element.
*/
ListFooterComponent?: ?(React$Class<any> | React$Element<any>),
/**
* Rendered at the top of all the items. Can be a React Component Class, a render function, or
* a rendered element.
*/
ListHeaderComponent?: ?(React$Class<any> | React$Element<any>),
/**
* The maximum number of items to render in each incremental render batch. The more rendered at
* once, the better the fill rate, but responsiveness my suffer because rendering content may
* interfere with responding to button taps or other interactions.
*/
maxToRenderPerBatch: number,
onEndReached?: ?(info: {distanceFromEnd: number}) => void,
onEndReachedThreshold?: ?number, // units of visible length
onLayout?: ?Function,
/**
* If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make
* sure to also set the `refreshing` prop correctly.
*/
onRefresh?: ?Function,
/**
* Called when the viewability of rows changes, as defined by the
* `viewabilityConfig` prop.
*/
onViewableItemsChanged?: ?(info: {
viewableItems: Array<ViewToken>,
changed: Array<ViewToken>,
}) => void,
/**
* Set this true while waiting for new data from a refresh.
*/
refreshing?: ?boolean,
/**
* Note: may have bugs (missing content) in some circumstances - use at your own risk.
*
* This may improve scroll performance for large lists.
*/
removeClippedSubviews?: boolean,
/**
* Render a custom scroll component, e.g. with a differently styled `RefreshControl`.
*/
renderScrollComponent: (props: Object) => React$Element<any>,
/**
* Amount of time between low-pri item render batches, e.g. for rendering items quite a ways off
* screen. Similar fill rate/responsiveness tradeoff as `maxToRenderPerBatch`.
*/
updateCellsBatchingPeriod: number,
viewabilityConfig?: ViewabilityConfig,
/**
* Determines the maximum number of items rendered outside of the visible area, in units of
* visible lengths. So if your list fills the screen, then `windowSize={21}` (the default) will
* render the visible screen area plus up to 10 screens above and 10 below the viewport. Reducing
* this number will reduce memory consumption and may improve performance, but will increase the
* chance that fast scrolling may reveal momentary blank areas of unrendered content.
*/
windowSize: number,
};
declare type VirtualizedListProps = {
...RequiredVirtualizedListProps,
...OptionalVirtualizedListProps,
};
declare class VirtualizedList extends React.PureComponent<OptionalVirtualizedListProps, VirtualizedListProps, void> {
scrollToEnd(params?: ?{animated?: ?boolean}): void,
// scrollToIndex may be janky without getItemLayout prop
scrollToIndex(params: {
animated?: ?boolean, index: number, viewOffset?: number, viewPosition?: number
}): void,
// scrollToItem may be janky without getItemLayout prop. Required linear scan through items -
// use scrollToIndex instead if possible.
scrollToItem(params: {animated?: ?boolean, item: Item, viewPosition?: number}): void,
scrollToOffset(params: {animated?: ?boolean, offset: number}): void,
recordInteraction(): void,
/**
* Provides a handle to the underlying scroll responder.
* Note that `this._scrollRef` might not be a `ScrollView`, so we
* need to check that it responds to `getScrollResponder` before calling it.
*/
getScrollResponder(): any,
getScrollableNode(): any,
}
declare type RequiredFlatListProps<ItemT> = {
/**
* Takes an item from `data` and renders it into the list. Example usage:
*
* <FlatList
* ItemSeparatorComponent={Platform.OS !== 'android' && ({highlighted}) => (
* <View style={[style.separator, highlighted && {marginLeft: 0}]} />
* )}
* data={[{title: 'Title Text', key: 'item1'}]}
* renderItem={({item, separators}) => (
* <TouchableHighlight
* onPress={() => this._onPress(item)}
* onShowUnderlay={separators.highlight}
* onHideUnderlay={separators.unhighlight}>
* <View style={{backgroundColor: 'white'}}>
* <Text>{item.title}}</Text>
* </View>
* </TouchableHighlight>
* )}
* />
*
* Provides additional metadata like `index` if you need it, as well as a more generic
* `separators.updateProps` function which let's you set whatever props you want to change the
* rendering of either the leading separator or trailing separator in case the more common
* `highlight` and `unhighlight` (which set the `highlighted: boolean` prop) are insufficient for
* your use-case.
*/
renderItem: (info: {
item: ItemT,
index: number,
separators: {
highlight: () => void,
unhighlight: () => void,
updateProps: (select: 'leading' | 'trailing', newProps: Object) => void,
},
}) => ?React.Element<any>,
/**
* For simplicity, data is just a plain array. If you want to use something else, like an
* immutable list, use the underlying `VirtualizedList` directly.
*/
data: ?$ReadOnlyArray<ItemT>,
};
declare type OptionalFlatListProps<ItemT> = {
/**
* Rendered in between each item, but not at the top or bottom. By default, `highlighted` and
* `leadingItem` props are provided. `renderItem` provides `separators.highlight`/`unhighlight`
* which will update the `highlighted` prop, but you can also add custom props with
* `separators.updateProps`.
*/
ItemSeparatorComponent?: ?ReactClass<any>,
/**
* Rendered when the list is empty. Can be a React Component Class, a render function, or
* a rendered element.
*/
ListEmptyComponent?: ?(ReactClass<any> | React.Element<any>),
/**
* Rendered at the bottom of all the items. Can be a React Component Class, a render function, or
* a rendered element.
*/
ListFooterComponent?: ?(ReactClass<any> | React.Element<any>),
/**
* Rendered at the top of all the items. Can be a React Component Class, a render function, or
* a rendered element.
*/
ListHeaderComponent?: ?(ReactClass<any> | React.Element<any>),
/**
* Optional custom style for multi-item rows generated when numColumns > 1.
*/
columnWrapperStyle?: StyleObj,
/**
* 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.
*/
extraData?: any,
/**
* `getItemLayout` is an optional optimizations that let 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`.
*/
getItemLayout?: (data: ?Array<ItemT>, index: number) =>
{length: number, offset: number, index: number},
/**
* If true, renders items next to each other horizontally instead of stacked vertically.
*/
horizontal?: ?boolean,
/**
* How many items to render in the initial batch. This should be enough to fill the screen but not
* much more. Note these items will never be unmounted as part of the windowed rendering in order
* to improve perceived performance of scroll-to-top actions.
*/
initialNumToRender: number,
/**
* Instead of starting at the top with the first item, start at `initialScrollIndex`. This
* disables the "scroll to top" optimization that keeps the first `initialNumToRender` items
* always rendered and immediately renders the items starting at this initial index. Requires
* `getItemLayout` to be implemented.
*/
initialScrollIndex?: ?number,
/**
* 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.
*/
keyExtractor: (item: ItemT, index: number) => string,
/**
* 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.
*/
numColumns: number,
/**
* Called once when the scroll position gets within `onEndReachedThreshold` of the rendered
* content.
*/
onEndReached?: ?(info: {distanceFromEnd: number}) => void,
/**
* 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.
*/
onEndReachedThreshold?: ?number,
/**
* If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make
* sure to also set the `refreshing` prop correctly.
*/
onRefresh?: ?() => void,
/**
* Called when the viewability of rows changes, as defined by the `viewabilityConfig` prop.
*/
onViewableItemsChanged?: ?(info: {
viewableItems: Array<ViewToken>,
changed: Array<ViewToken>,
}) => void,
legacyImplementation?: ?boolean,
/**
* Set this true while waiting for new data from a refresh.
*/
refreshing?: ?boolean,
/**
* Note: may have bugs (missing content) in some circumstances - use at your own risk.
*
* This may improve scroll performance for large lists.
*/
removeClippedSubviews?: boolean,
/**
* See `ViewabilityHelper` for flow type and further documentation.
*/
viewabilityConfig?: ViewabilityConfig,
};
declare type FlatListProps<ItemT> = {
...RequiredProps<ItemT>,
...OptionalProps<ItemT>,
...VirtualizedListProps,
};
declare export class FlatList<ItemT> extends React$Component<void, FlatListProps<ItemT>, void> {
/**
* Scrolls to the end of the content. May be janky without `getItemLayout` prop.
*/
scrollToEnd(params?: ?{animated?: ?boolean}): void,
/**
* Scrolls to the item at a 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. `viewOffset` is a fixed number of pixels to offset the final target position.
*
* Note: cannot scroll to locations outside the render window without specifying the
* `getItemLayout` prop.
*/
scrollToIndex(params: {
animated?: ?boolean, index: number, viewOffset?: number, viewPosition?: number,
}): void,
/**
* Requires linear scan through data - use `scrollToIndex` instead if possible.
*
* Note: cannot scroll to locations outside the render window without specifying the
* `getItemLayout` prop.
*/
scrollToItem(params: {animated?: ?boolean, item: ItemT, viewPosition?: number}): void,
/**
* Scroll to a specific content pixel offset, like a normal `ScrollView`.
*/
scrollToOffset(params: {animated?: ?boolean, offset: number}): void,
/**
* Tells the list an interaction has occured, 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.
*/
recordInteraction(): void,
/**
* Provides a handle to the underlying scroll responder.
*/
getScrollResponder(): any,
getScrollableNode(): any,
}
declare export var AppState: {|
...$Exact<EventEmitter<string>>,
currentState: ?string,
isAvailable: boolean,
/**
* Add a handler to AppState changes by listening to the `change` event type
* and providing the handler
*
* TODO: now that AppState is a subclass of NativeEventEmitter, we could deprecate
* `addEventListener` and `removeEventListener` and just use `addListener` and
* `listener.remove()` directly. That will be a breaking change though, as both
* the method and event names are different (addListener events are currently
* required to be globally unique).
*/
addEventListener(type: string, handler: Function): void,
/**
* Remove a handler by passing the `change` event type and the handler
*/
removeEventListener(type: string, handler: Function): void,
|}
declare export var DeviceEventEmitter: {|
...$Exact<EventEmitter<string>>,
|}
declare export var NativeEventEmitter: {|
...$Exact<EventEmitter<string>>,
|}
declare export var UIManager: {|
focus(reactTag: number): void,
blur(reactTag: number): void,
dispatchViewManagerCommand(
reactTag: number,
commandID,
commandArgs
): void,
measure(
reactTag: number,
callback: MeasureOnSuccessCallback,
): void,
measureLayout(
reactTag: number,
relativeTo: number,
errorCallback: () => void,
callback: MeasureLayoutOnSuccessCallback,
): void,
measureLayoutRelativeToParent(
reactTag: number,
errorCallback: () => void,
callback: MeasureLayoutOnSuccessCallback
): void,
measureViewsInRect(
rect: {
x: number,
y: number,
width: number,
height: number,
},
parentView: number,
errorCallback: () => void,
callback: MeasureLayoutOnSuccessCallback
): void,
|}
declare export var Clipboard: {|
/**
* Get content of string type, this method returns a `Promise`, so you can use following code to get clipboard content
* ```javascript
* async _getContent() {
* var content = await Clipboard.getString();
* }
* ```
*/
getString(): Promise<string>,
/**
* Set content of string type. You can use following code to set clipboard content
* ```javascript
* _setContent() {
* Clipboard.setString('hello world');
* }
* ```
* @param the content to be stored in the clipboard.
*/
setString(content: string): void,
|}
declare export var NetInfo: {|
/**
* Invokes the listener whenever network status changes.
* The listener receives one of the connectivity types listed above.
*/
addEventListener(
eventName: ChangeEventName,
handler: Function
): {remove: () => void},
/**
* Removes the listener for network status changes.
*/
removeEventListener(
eventName: ChangeEventName,
handler: Function
): void,
/**
* Returns a promise that resolves with one of the connectivity types listed
* above.
*/
fetch(): Promise<any>,
/**
* An object with the same methods as above but the listener receives a
* boolean which represents the internet connectivity.
* Use this if you are only interested with whether the device has internet
* connectivity.
*/
isConnected: {
addEventListener(
eventName: ChangeEventName,
handler: Function
): {remove: () => void},
removeEventListener(
eventName: ChangeEventName,
handler: Function
): void,
fetch(): Promise<any>,
},
isConnectionExpensive(): Promise<boolean>,
|}
declare type ComponentInterface = React$Class<any> | {
name?: string,
displayName?: string,
propTypes: Object,
};
declare export function requireNativeComponent(
viewName: string,
componentInterface?: ?ComponentInterface,
extraConfig?: ?{nativeOnly?: Object},
): ReactClass<any> | string;
declare type Task = (taskData: any) => Promise<void>;
declare type TaskProvider = () => Task;
declare type ComponentProvider = () => React$Class<any>;
declare type ComponentProviderInstrumentationHook =
(component: ComponentProvider) => React$Class<any>;
declare type AppConfig = {
appKey: string,
component?: ComponentProvider,
run?: Function,
section?: boolean,
};
declare type Runnable = {
component?: ComponentProvider,
run: Function,
};
declare type Runnables = {
[appKey: string]: Runnable,
};
declare type Registry = {
sections: Array<string>,
runnables: Runnables,
};
declare export var AppRegistry: {|
registerConfig(config: Array<AppConfig>): void,
registerComponent(
appKey: string,
componentProvider: ComponentProvider,
section?: boolean,
): string,
registerRunnable(appKey: string, run: Function): string,
registerSection(appKey: string, component: ComponentProvider): void,
getAppKeys(): Array<string>,
getSectionKeys(): Array<string>,
getSections(): Runnables,
getRunnable(appKey: string): ?Runnable,
getRegistry(): Registry,
setComponentProviderInstrumentationHook(hook: ComponentProviderInstrumentationHook): void,
runApplication(appKey: string, appParameters: any): void,
unmountApplicationComponentAtRootTag(rootTag: number): void,
/**
* Register a headless task. A headless task is a bit of code that runs without a UI.
* @param taskKey the key associated with this task
* @param task a promise returning function that takes some data passed from the native side as
* the only argument; when the promise is resolved or rejected the native side is
* notified of this event and it may decide to destroy the JS context.
*/
registerHeadlessTask(taskKey: string, task: TaskProvider): void,
/**
* Only called from native code. Starts a headless task.
*
* @param taskId the native id for this task instance to keep track of its execution
* @param taskKey the key for the task to start
* @param data the data to pass to the task
*/
startHeadlessTask(taskId: number, taskKey: string, data: any): void,
|}
declare type ShareContent = { title?: string, message: string } | { title?: string, url: string };
declare type ShareOptions = { dialogTitle?: string, excludeActivityTypes?: Array<string>, tintColor?: string };
declare export var Share: {|
/**
* 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 be resolved with action being `Share.sharedAction`.
*
* ### Content
*
* - `message` - a message to share
* - `title` - title of the message
*
* #### iOS
*
* - `url` - an URL to share
*
* At least one of URL and message is required.
*
* ### Options
*
* #### iOS
*
* - `excludedActivityTypes`
* - `tintColor`
*
* #### Android
*
* - `dialogTitle`
*
*/
share(content: ShareContent, options: ShareOptions): Promise<Object>,
/**
* The content was successfully shared.
*/
sharedAction: 'sharedAction',
/**
* The dialog has been dismissed.
* @platform ios
*/
dismissedAction: 'dismissedAction'
|}
declare type ActivityIndicatorProps = {
...ViewProps,
/**
* Whether to show the indicator (true, the default) or hide it (false).
*/
animating?: boolean,
/**
* The foreground color of the spinner (default is gray).
*/
color?: Color,
/**
* Size of the indicator (default is 'small').
* Passing a number to the size prop is only supported on Android.
*/
size?: 'small' | 'large' | number,
/**
* Whether the indicator should hide when not animating (true by default).
*
* @platform ios
*/
hidesWhenStopped?: boolean,
}
declare export class ActivityIndicator extends React$Component<void, ActivityIndicatorProps, void> {
blur(): void,
focus(): void,
measure(callback: MeasureOnSuccessCallback): void,
measureInWindow(callback: MeasureInWindowOnSuccessCallback): void,
measureLayout(
relativeToNativeNode: number,
onSuccess: MeasureLayoutOnSuccessCallback,
onFail: () => void,
): void,
setNativeProps(nativeProps: Object): void,
}
declare type StatusBarStyle = $Enum<{
/**
* Default status bar style (dark for iOS, light for Android)
*/
'default': string,
/**
* Dark background, white texts and icons
*/
'light-content': string,
/**
* Light background, dark texts and icons
*/
'dark-content': string,
}>;
/**
* Status bar animation
*/
declare type StatusBarAnimation = $Enum<{
/**
* No animation
*/
'none': string,
/**
* Fade animation
*/
'fade': string,
/**
* Slide animation
*/
'slide': string,
}>;
declare type StatusBarProps = {
hidden?: boolean,
animated?: boolean,
backgroundColor?: Color,
translucent?: boolean,
barStyle?: StatusBarStyle,
networkActivityIndicatorVisible?: boolean,
showHideTransition?: 'fade' | 'slide',
}
declare export class StatusBar extends React$Component<void, StatusBarProps, void> {
static currentHeight: number,
// Provide an imperative API as static functions of the component.
// See the corresponding prop for more detail.
/**
* Show or hide the status bar
* @param hidden Hide the status bar.
* @param animation Optional animation when
* changing the status bar hidden property.
*/
static setHidden(hidden: boolean, animation?: StatusBarAnimation): void,
/**
* Set the status bar style
* @param style Status bar style to set
* @param animated Animate the style change.
*/
static setBarStyle(style: StatusBarStyle, animated?: boolean): void,
/**
* Control the visibility of the network activity indicator
* @param visible Show the indicator.
*/
static setNetworkActivityIndicatorVisible(visible: boolean): void,
/**
* Set the background color for the status bar
* @param color Background color.
* @param animated Animate the style change.
*/
static setBackgroundColor(color: string, animated?: boolean): void,
/**
* Control the translucency of the status bar
* @param translucent Set as translucent.
*/
static setTranslucent(translucent: boolean): void,
}
// declare export var View: any;
// declare export var StyleSheet: any;
// declare export var Text: any;
// declare export var Platform: any;
// declare export var TouchableOpacity: any;
// declare export var Image: any;
// declare export var Dimensions: any;
// declare export var ScrollView: any;
// declare export var Animated: any; // yes // TODO(lmr): View/Text/Image/ScrollView
// declare export var Alert: any; // yes
// declare export var TouchableHighlight: any;
// declare export var ActivityIndicator: any;
// declare export var TouchableWithoutFeedback: any;
// declare export var TextInput: any; // yes
// declare export var PixelRatio: any; // yes
// declare export var ListView: any; // yes
// declare export var StatusBar: any;
// declare export var Linking: any; // yes
// declare export var Keyboard: any; // yes
// declare export var LayoutAnimation: any; // yes
// declare export var AsyncStorage: any; // yes
// declare export var InteractionManager: any; // yes
// declare export var Easing: any; // yes
// declare export var TouchableNativeFeedback: any;
declare export var NativeModules: any;
declare export var Modal: any;
declare export var ColorPropType: any;
// declare export var AppState: any; // yes
declare export var RefreshControl: any;
declare export var KeyboardAvoidingView: any;
declare export var Picker: any;
declare export var ActionSheetIOS: any;
declare export var Navigator: any;
declare export var WebView: any;
// declare export var FlatList: any; // yes
// declare export var findNodeHandle: any; // yes
declare export var Switch: any;
// declare export var UIManager: any; // yes
// declare export var Clipboard: any; // yes
declare export var PanResponder: any; // yes
// declare export var NetInfo: any; // yes
declare export var BackAndroid: any;
// declare export var Share: any; // yes
declare export var NavigationExperimental: any;
declare export var CameraRoll: any;
declare export var Vibration: any;
declare export var PermissionsAndroid: any;
declare export var Slider: any;
declare export var AlertIOS: any;
// declare export var AppRegistry: any; // yes
declare export var PushNotificationIOS: any;
declare export var RenderingPerf: any;
declare export var Perf: any;
declare export var ToastAndroid: any;
declare export var RecyclerViewBackedScrollView: any;
declare export var SectionList: any;
declare export var DatePickerIOS: any;
declare export var ART: any;
// declare export var requireNativeComponent: any; // yes
// declare export var DeviceEventEmitter: any; // yes
declare export var BackHandler: any;
// declare export var NativeEventEmitter: any; // yes
declare export var Touchable: any;
declare export var ProgressViewIOS: any;
declare export var I18nManager: any;
declare export var SwipeableListView: any;
// declare export var processColor: any;
declare export var VibrationIOS: any;
declare export var DatePickerAndroid: any;
declare export var TimePickerAndroid: any;
}
@allenhsu
Copy link

Thanks for the gist, it helps a lot for our flow type coverage.

https://gist.github.com/lelandrichardson/c037f46885af67ceb447091c908d1471#file-react-native-js-L1486

The return type of Dimensions.get should be Dimension instead of Dimensions here.

@Nodonisko
Copy link

Great work!

@Nodonisko
Copy link

You should create repo for this, because of pull requests.

@maraujop
Copy link

Hi there,

I'm trying to better type my react-native projects and found this react-native types definition. I've put it under [libs] in .flowconfig, fixed the Dimension issue and once I start flow server I'm getting errors like:

Library type error:
flow/react-native.js:968
968:     capInsets?: EdgeInsetsPropType,
                     ^^^^^^^^^^^^^^^^^^ EdgeInsetsPropType. Could not resolve name

Library type error:
flow/react-native.js:1140
1140:     contentOffset?: PointPropType,
                          ^^^^^^^^^^^^^ PointPropType. Could not resolve name

Library type error:
flow/react-native.js:1599
1599:     create(duration: number, type, creationProp): LayoutAnimationConfig,
                                   ^^^^ type. Could not resolve name

[...]
Library type error:
flow/react-native.js:3872
3872:     ...RequiredProps<ItemT>,
             ^^^^^^^^^^^^^^^^^^^^ RequiredProps. Could not resolve name

It's my understanding this are global types and should be found. What am I doing wrong?

Thanks

@SRandazzo
Copy link

👋 Hello and thanks for these types!
Any interest in adding this to https://github.com/flowtype/flow-typed/ ?

@code4cake
Copy link

Hello there, to be able to use this type, do I need to integrate them into my react-native app and if so how? thanks

@oVerde
Copy link

oVerde commented Jul 21, 2022

Why there isn't any of this at flow-typed? Am I missing something?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment