Add onScroll event to TextInput

types/react-native/index.d.ts

@@ -1075,17 +1075,23 @@ export type KeyboardTypeIOS =
     | "twitter"
     | "web-search";
 export type KeyboardTypeAndroid = "visible-password";
-export type KeyboardTypeOptions = KeyboardType | KeyboardTypeAndroid | KeyboardTypeIOS
+export type KeyboardTypeOptions = KeyboardType | KeyboardTypeAndroid | KeyboardTypeIOS;
 
 export type ReturnKeyType = "done" | "go" | "next" | "search" | "send";
 export type ReturnKeyTypeAndroid = "none" | "previous";
 export type ReturnKeyTypeIOS = "default" | "google" | "join" | "route" | "yahoo" | "emergency-call";
-export type ReturnKeyTypeOptions = ReturnKeyType | ReturnKeyTypeAndroid | ReturnKeyTypeIOS
+export type ReturnKeyTypeOptions = ReturnKeyType | ReturnKeyTypeAndroid | ReturnKeyTypeIOS;
 
 export interface TextInputFocusEventData {
-    target: number,
-    text: string,
-    eventCount: number
+    target: number;
+    text: string;
+    eventCount: number;
+}
+
+export interface TextInputScrollEvent {
+    nativeEvent: {
+        contentOffset: { x: number; y: number; }
+    }
 }
 
 /**
@@ -1220,6 +1226,14 @@ export interface TextInputProps
      */
     onSubmitEditing?: (event: { nativeEvent: { text: string } }) => void;
 
+    /**
+     * 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?: (event: TextInputScrollEvent) => void;
+
     /**
      * The string that will be rendered before text input has been entered
      */

types/react-native/test/index.tsx

@@ -54,7 +54,8 @@ import {
     InputAccessoryView,
     StatusBar,
     NativeSyntheticEvent,
-    GestureResponderEvent
+    GestureResponderEvent,
+    TextInputScrollEvent,
 } from "react-native";
 
 declare module "react-native" {
@@ -197,14 +198,19 @@ class Welcome extends React.Component {
 
 export default Welcome;
 
-// SyntheticEventsTest
-export class SyntheticEventsTest extends React.Component {
+// EventsTest
+export class EventsTest extends React.Component {
     onPressButton(e: GestureResponderEvent) {
         e.persist();
         e.isPropagationStopped();
         e.isDefaultPrevented();
     }
 
+    onScroll(e: TextInputScrollEvent) {
+        console.log(`x: ${ e.nativeEvent.contentOffset.x }`);
+        console.log(`y: ${ e.nativeEvent.contentOffset.y }`);
+    }
+
     render() {
         return (
             <TouchableNativeFeedback
@@ -212,6 +218,10 @@ export class SyntheticEventsTest extends React.Component {
             >
                 <View style={{width: 150, height: 100, backgroundColor: 'red'}}>
                     <Text style={{margin: 30}}>Button</Text>
+                    <TextInput
+                        multiline
+                        onScroll={this.onScroll}
+                    />
                 </View>
             </TouchableNativeFeedback>
         )