feat: timestamp (#174)

## 📜 Description Added `timestamp` property to events that are delivered via EventEmitter. ## 💡 Motivation and Context Since these events arrive asynchronously it's important to understand the delay. Below is a table with typical delay across different devices: |Device|AVG delay| |--------------------------|-----------| |Xiaomi Redmi Note 5 Pro | 2-5ms| |iPhone 6s | 4-8ms| |Pixel 7 Pro | 0-1ms| ## 📢 Changelog ### JS - added new property to `KeyboardEvents` module. ### iOS - added new property to `KeyboardEvents` module. ### Android - added new property to `KeyboardEvents` module. ## 🤔 How Has This Been Tested? Tested manually on: - Pixel 7 Pro (Android 13); - iPhone 6s (iOS 15.5); - iPhone 11 (iOS 16.5); - Xiaomi Redmi Note 5 Pro (Android 9). ## 📸 Screenshots (if appropriate): <img src="https://github.com/kirillzyusko/react-native-keyboard-controller/assets/22820318/c2c7e8c9-e769-4d38-96da-410672967326" width="250px"> ## 📝 Checklist - [x] CI successfully passed
kirillzyusko · Jul 13, 2023 · 43ddde7 · 43ddde7
1 parent 88ff6e9
commit 43ddde7
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 8 deletions.
diff --git a/FabricExample/src/screens/Examples/Events/index.tsx b/FabricExample/src/screens/Examples/Events/index.tsx
@@ -20,31 +20,35 @@ function EventsListener() {
 
   useEffect(() => {
     const show = KeyboardEvents.addListener('keyboardWillShow', (e) => {
+      const delay = new Date().getTime() - e.timestamp;
       Toast.show({
         type: 'info',
         text1: '⬆️ ⌨️ Keyboard will show',
-        text2: `📲 Height: ${e.height}, duration: ${e.duration}ms`,
+        text2: `📲 Height: ${e.height}, duration: ${e.duration}ms, delay: ${delay}ms`,
       });
     });
     const shown = KeyboardEvents.addListener('keyboardDidShow', (e) => {
+      const delay = new Date().getTime() - e.timestamp;
       Toast.show({
         type: 'success',
         text1: '⌨️ Keyboard is shown',
-        text2: `👋 Height: ${e.height}, duration: ${e.duration}ms`,
+        text2: `👋 Height: ${e.height}, duration: ${e.duration}ms, delay: ${delay}ms`,
       });
     });
     const hide = KeyboardEvents.addListener('keyboardWillHide', (e) => {
+      const delay = new Date().getTime() - e.timestamp;
       Toast.show({
         type: 'info',
         text1: '⬇️ ⌨️ Keyboard will hide',
-        text2: `📲 Height: ${e.height}, duration: ${e.duration}ms`,
+        text2: `📲 Height: ${e.height}, duration: ${e.duration}ms, delay: ${delay}ms`,
       });
     });
     const hid = KeyboardEvents.addListener('keyboardDidHide', (e) => {
+      const delay = new Date().getTime() - e.timestamp;
       Toast.show({
         type: 'error',
         text1: '⌨️ Keyboard is hidden',
-        text2: `🤐 Height: ${e.height}, duration: ${e.duration}ms`,
+        text2: `🤐 Height: ${e.height}, duration: ${e.duration}ms, delay: ${delay}ms`,
       });
     });
 

diff --git a/android/src/main/java/com/reactnativekeyboardcontroller/KeyboardAnimationCallback.kt b/android/src/main/java/com/reactnativekeyboardcontroller/KeyboardAnimationCallback.kt
@@ -203,6 +203,7 @@ class KeyboardAnimationCallback(
     val params: WritableMap = Arguments.createMap()
     params.putDouble("height", height)
     params.putInt("duration", duration)
+    params.putDouble("timestamp", System.currentTimeMillis().toDouble())
 
     return params
   }

diff --git a/example/src/screens/Examples/Events/index.tsx b/example/src/screens/Examples/Events/index.tsx
@@ -20,31 +20,35 @@ function EventsListener() {
 
   useEffect(() => {
     const show = KeyboardEvents.addListener('keyboardWillShow', (e) => {
+      const delay = new Date().getTime() - e.timestamp;
       Toast.show({
         type: 'info',
         text1: '⬆️ ⌨️ Keyboard will show',
-        text2: `📲 Height: ${e.height}, duration: ${e.duration}ms`,
+        text2: `📲 Height: ${e.height}, duration: ${e.duration}ms, delay: ${delay}ms`,
       });
     });
     const shown = KeyboardEvents.addListener('keyboardDidShow', (e) => {
+      const delay = new Date().getTime() - e.timestamp;
       Toast.show({
         type: 'success',
         text1: '⌨️ Keyboard is shown',
-        text2: `👋 Height: ${e.height}, duration: ${e.duration}ms`,
+        text2: `👋 Height: ${e.height}, duration: ${e.duration}ms, delay: ${delay}ms`,
       });
     });
     const hide = KeyboardEvents.addListener('keyboardWillHide', (e) => {
+      const delay = new Date().getTime() - e.timestamp;
       Toast.show({
         type: 'info',
         text1: '⬇️ ⌨️ Keyboard will hide',
-        text2: `📲 Height: ${e.height}, duration: ${e.duration}ms`,
+        text2: `📲 Height: ${e.height}, duration: ${e.duration}ms, delay: ${delay}ms`,
       });
     });
     const hid = KeyboardEvents.addListener('keyboardDidHide', (e) => {
+      const delay = new Date().getTime() - e.timestamp;
       Toast.show({
         type: 'error',
         text1: '⌨️ Keyboard is hidden',
-        text2: `🤐 Height: ${e.height}, duration: ${e.duration}ms`,
+        text2: `🤐 Height: ${e.height}, duration: ${e.duration}ms, delay: ${delay}ms`,
       });
     });
 

diff --git a/ios/Extensions.swift b/ios/Extensions.swift
@@ -21,3 +21,9 @@ public extension CGFloat {
     return interpolatedValue
   }
 }
+
+public extension Date {
+  static var currentTimeStamp: Int64 {
+    return Int64(Date().timeIntervalSince1970 * 1000)
+  }
+}
diff --git a/ios/KeyboardMovementObserver.swift b/ios/KeyboardMovementObserver.swift
@@ -146,6 +146,7 @@ public class KeyboardMovementObserver: NSObject {
       var data = [AnyHashable: Any]()
       data["height"] = keyboardHeight
       data["duration"] = duration
+      data["timestamp"] = Date.currentTimeStamp
 
       onEvent("onKeyboardMoveStart", Float(keyboardHeight) as NSNumber, 1, duration as NSNumber)
       onNotify("KeyboardController::keyboardWillShow", data)
@@ -163,6 +164,7 @@ public class KeyboardMovementObserver: NSObject {
     var data = [AnyHashable: Any]()
     data["height"] = 0
     data["duration"] = duration
+    data["timestamp"] = Date.currentTimeStamp
 
     onEvent("onKeyboardMoveStart", 0, 0, duration as NSNumber)
     onNotify("KeyboardController::keyboardWillHide", data)
@@ -182,6 +184,7 @@ public class KeyboardMovementObserver: NSObject {
       var data = [AnyHashable: Any]()
       data["height"] = keyboardHeight
       data["duration"] = duration
+      data["timestamp"] = Date.currentTimeStamp
 
       onEvent("onKeyboardMoveEnd", keyboardHeight as NSNumber, 1, duration as NSNumber)
       onNotify("KeyboardController::keyboardDidShow", data)
@@ -198,6 +201,7 @@ public class KeyboardMovementObserver: NSObject {
     var data = [AnyHashable: Any]()
     data["height"] = 0
     data["duration"] = duration
+    data["timestamp"] = Date.currentTimeStamp
 
     onEvent("onKeyboardMoveEnd", 0 as NSNumber, 0, duration as NSNumber)
     onNotify("KeyboardController::keyboardDidHide", data)

diff --git a/src/types.ts b/src/types.ts
@@ -68,6 +68,7 @@ export type KeyboardControllerEvents =
 export type KeyboardEventData = {
   height: number;
   duration: number;
+  timestamp: number;
 };
 
 // package types