diff --git a/types/react-native/index.d.ts b/types/react-native/index.d.ts index 8430b3d127..f3efa9f587 100644 --- a/types/react-native/index.d.ts +++ b/types/react-native/index.d.ts @@ -1109,6 +1109,36 @@ export interface TextInputKeyPressEventData { key: string; } +/** + * @see TextInputProps.onChange + */ +export interface TextInputChangeEventData { + eventCount: number; + target: number; + text: string; +} + +/** + * @see TextInputProps.onContentSizeChange + */ +export interface TextInputContentSizeChangeEventData { + contentSize: { width: number; height: number }; +} + +/** + * @see TextInputProps.onEndEditing + */ +export interface TextInputEndEditingEventData { + text: string; +} + +/** + * @see TextInputProps.onSubmitEditing + */ +export interface TextInputSubmitEditingEventData { + text: string; +} + /** * @see https://facebook.github.io/react-native/docs/textinput.html#props */ @@ -1195,16 +1225,7 @@ export interface TextInputProps /** * Callback that is called when the text input's text changes. */ - onChange?: ( - event: { - nativeEvent: { - text: string; - contentSize: { width: number; height: number }; - target: number; - eventCount: number; - }; - } - ) => void; + onChange?: (e: NativeSyntheticEvent) => void; /** * Callback that is called when the text input's text changes. @@ -1219,12 +1240,12 @@ export interface TextInputProps * * Only called for multiline text inputs. */ - onContentSizeChange?: (event: { nativeEvent: { contentSize: { width: number; height: number } } }) => void; + onContentSizeChange?: (e: NativeSyntheticEvent) => void; /** * Callback that is called when text input ends. */ - onEndEditing?: (event: { nativeEvent: { text: string } }) => void; + onEndEditing?: (e: NativeSyntheticEvent) => void; /** * Callback that is called when the text input is focused @@ -1239,7 +1260,7 @@ export interface TextInputProps /** * Callback that is called when the text input's submit button is pressed. */ - onSubmitEditing?: (event: { nativeEvent: { text: string } }) => void; + onSubmitEditing?: (e: NativeSyntheticEvent) => void; /** * Invoked on content scroll with @@ -3392,6 +3413,14 @@ export interface ImageURISource { export type ImageRequireSource = number; +/** + * @see ImagePropsIOS.onProgress + */ +export interface ImageProgressEventDataIOS { + loaded: number; + total: number; +} + export interface ImagePropsIOS { /** * blurRadius: the blur radius of the blur filter added to the image @@ -3415,7 +3444,7 @@ export interface ImagePropsIOS { /** * Invoked on download progress with {nativeEvent: {loaded, total}} */ - onProgress?: (event: { nativeEvent: { loaded: number; total: number } }) => void; + onProgress?: (event: NativeSyntheticEvent) => void; /** * Invoked when a partial load of the image is complete. The definition of @@ -3468,6 +3497,10 @@ export interface ImageLoadEventData extends ImageLoadEventDataAndroid { } } +export interface ImageErrorEventData { + error: any; +} + /** * @see https://facebook.github.io/react-native/docs/image.html#resolveassetsource */ @@ -3487,14 +3520,14 @@ export interface ImagePropsBase extends ImagePropsIOS, ImagePropsAndroid, Access * * Invoked on mount and layout changes with * - * {nativeEvent: { layout: {x, y, width, height}}}. + * {nativeEvent: { layout: {x, y, width, height} }}. */ onLayout?: (event: LayoutChangeEvent) => void; /** * Invoked on load error with {nativeEvent: {error}} */ - onError?: (error: { nativeEvent: any }) => void; + onError?: (error: NativeSyntheticEvent) => void; /** * Invoked when load completes successfully diff --git a/types/react-native/test/index.tsx b/types/react-native/test/index.tsx index 022ab8a37b..117c80379f 100644 --- a/types/react-native/test/index.tsx +++ b/types/react-native/test/index.tsx @@ -26,6 +26,7 @@ import { ImageStyle, ImageResizeMode, ImageLoadEventData, + ImageErrorEventData, ImageResolvedAssetSource, InteractionManager, ListView, @@ -61,6 +62,10 @@ import { TextInputScrollEventData, TextInputSelectionChangeEventData, TextInputKeyPressEventData, + TextInputChangeEventData, + TextInputContentSizeChangeEventData, + TextInputEndEditingEventData, + TextInputSubmitEditingEventData, } from "react-native"; declare module "react-native" { @@ -509,6 +514,30 @@ class TextInputTest extends React.Component<{}, {username: string}> { console.log(`key: ${ e.nativeEvent.key }`); } + handleOnChange = (e: NativeSyntheticEvent) => { + testNativeSyntheticEvent(e); + + console.log(`eventCount: ${ e.nativeEvent.eventCount }`); + console.log(`target: ${ e.nativeEvent.target }`); + console.log(`text: ${ e.nativeEvent.text }`); + } + + handleOnContentSizeChange = (e: NativeSyntheticEvent) => { + testNativeSyntheticEvent(e); + console.log(`contentSize.width: ${ e.nativeEvent.contentSize.width }`); + console.log(`contentSize.height: ${ e.nativeEvent.contentSize.height }`); + } + + handleOnEndEditing = (e: NativeSyntheticEvent) => { + testNativeSyntheticEvent(e); + console.log(`text: ${ e.nativeEvent.text }`); + } + + handleOnSubmitEditing = (e: NativeSyntheticEvent) => { + testNativeSyntheticEvent(e); + console.log(`text: ${ e.nativeEvent.text }`); + } + render() { return ( @@ -537,6 +566,27 @@ class TextInputTest extends React.Component<{}, {username: string}> { + + + + + + + + + + ); } @@ -566,13 +616,18 @@ export class ImageTest extends React.Component { console.log(image.width, image.height, image.scale, image.uri); } - onLoad(e: NativeSyntheticEvent) { + handleOnLoad = (e: NativeSyntheticEvent) => { testNativeSyntheticEvent(e); console.log('height:', e.nativeEvent.source.height); console.log('width:', e.nativeEvent.source.width); console.log('url:', e.nativeEvent.source.url); } + handleOnError = (e: NativeSyntheticEvent) => { + testNativeSyntheticEvent(e); + console.log('error:', e.nativeEvent.error); + } + render() { const resizeMode: ImageResizeMode = 'contain'; @@ -580,7 +635,8 @@ export class ImageTest extends React.Component {