Merge pull request #26293 from Fitzpasd/focus_blur_event

react-native: Add event for TextInput onFocus and onBlur

types/react-native/index.d.ts

@@ -1078,6 +1078,12 @@ export type ReturnKeyTypeAndroid = "none" | "previous";
 export type ReturnKeyTypeIOS = "default" | "google" | "join" | "route" | "yahoo" | "emergency-call";
 export type ReturnKeyTypeOptions = ReturnKeyType | ReturnKeyTypeAndroid | ReturnKeyTypeIOS
 
+export interface TextInputFocusEventData {
+    target: number,
+    text: string,
+    eventCount: number
+}
+
 /**
  * @see https://facebook.github.io/react-native/docs/textinput.html#props
  */
@@ -1159,7 +1165,7 @@ export interface TextInputProps
     /**
      * Callback that is called when the text input is blurred
      */
-    onBlur?: () => void;
+    onBlur?: (e: NativeSyntheticEvent<TextInputFocusEventData>) => void;
 
     /**
      * Callback that is called when the text input's text changes.
@@ -1198,7 +1204,7 @@ export interface TextInputProps
     /**
      * Callback that is called when the text input is focused
      */
-    onFocus?: () => void;
+    onFocus?: (e: NativeSyntheticEvent<TextInputFocusEventData>) => void;
 
     /**
      * Callback that is called when the text input selection is changed.

types/react-native/test/index.tsx

@@ -49,8 +49,10 @@ import {
     NativeModules,
     MaskedViewIOS,
     TextInput,
+    TextInputFocusEventData,
     InputAccessoryView,
-    StatusBar
+    StatusBar,
+    NativeSyntheticEvent
 } from "react-native";
 
 declare module "react-native" {
@@ -447,6 +449,25 @@ class TextInputRefTest extends React.Component<{}, {username: string}> {
     }
 }
 
+class TextInputFocusBlurEventTest extends React.Component {
+    handleOnBlur(e: NativeSyntheticEvent<TextInputFocusEventData>) {
+    }
+
+    handleOnFocus(e: NativeSyntheticEvent<TextInputFocusEventData>) {
+    }
+
+    render() {
+        return (
+            <View>
+                <TextInput
+                    onBlur={(e: NativeSyntheticEvent<TextInputFocusEventData>) => this.handleOnBlur(e)}
+                    onFocus={(e: NativeSyntheticEvent<TextInputFocusEventData>) => this.handleOnFocus(e)}
+                />
+            </View>
+        )
+    }
+}
+
 class StatusBarTest extends React.Component {
     render() {
         StatusBar.setBarStyle("dark-content", true);