[FIX] Keyboard tracking loses input ref (#1784)

Co-authored-by: Diego Mello <diegolmello@gmail.com>

app/containers/MessageBox/index.js

@@ -92,7 +92,8 @@ class MessageBox extends Component {
 		onSubmit: PropTypes.func.isRequired,
 		typing: PropTypes.func,
 		theme: PropTypes.string,
-		replyCancel: PropTypes.func
+		replyCancel: PropTypes.func,
+		navigation: PropTypes.object
 	}
 
 	constructor(props) {
@@ -140,7 +141,7 @@ class MessageBox extends Component {
 
 	async componentDidMount() {
 		const db = database.active;
-		const { rid, tmid } = this.props;
+		const { rid, tmid, navigation } = this.props;
 		let msg;
 		try {
 			const threadsCollection = db.collections.get('threads');
@@ -178,6 +179,12 @@ class MessageBox extends Component {
 		if (isTablet) {
 			EventEmiter.addEventListener(KEY_COMMAND, this.handleCommands);
 		}
+
+		this.didFocusListener = navigation.addListener('didFocus', () => {
+			if (this.tracking && this.tracking.resetTracking) {
+				this.tracking.resetTracking();
+			}
+		});
 	}
 
 	componentWillReceiveProps(nextProps) {
@@ -258,6 +265,9 @@ class MessageBox extends Component {
 		if (this.getSlashCommands && this.getSlashCommands.stop) {
 			this.getSlashCommands.stop();
 		}
+		if (this.didFocusListener && this.didFocusListener.remove) {
+			this.didFocusListener.remove();
+		}
 		if (isTablet) {
 			EventEmiter.removeListener(KEY_COMMAND, this.handleCommands);
 		}
@@ -866,6 +876,7 @@ class MessageBox extends Component {
 				}}
 			>
 				<KeyboardAccessoryView
+					ref={ref => this.tracking = ref}
 					renderContent={this.renderContent}
 					kbInputRef={this.component}
 					kbComponent={showEmojiKeyboard ? 'EmojiKeyboard' : null}

app/views/RoomView/index.js

@@ -896,6 +896,7 @@ class RoomView extends React.Component {
 				replyWithMention={replyWithMention}
 				replyCancel={this.onReplyCancel}
 				getCustomEmoji={this.getCustomEmoji}
+				navigation={navigation}
 			/>
 		);
 	};

ios/Podfile.lock

@@ -299,7 +299,7 @@ PODS:
   - react-native-jitsi-meet (2.1.0):
     - JitsiMeetSDK
     - React
-  - react-native-keyboard-input (5.3.1):
+  - react-native-keyboard-input (5.4.1):
     - React
   - react-native-keyboard-tracking-view (5.6.1):
     - React
@@ -754,7 +754,7 @@ SPEC CHECKSUMS:
   react-native-cameraroll: 463aff54e37cff27ea76eb792e6f1fa43b876320
   react-native-document-picker: c36bf5f067a581657ecaf7124dcd921a8be19061
   react-native-jitsi-meet: 04ccc47303c62ba2b7e7407a113f5f46241ebd75
-  react-native-keyboard-input: 2a01e0aceac330592bbe9b3101761bb9d8e6d1fb
+  react-native-keyboard-input: 775c2f00554869563b1d59c6bebd8f8a2aa54295
   react-native-keyboard-tracking-view: 4bb67b89ccd327c7d9eab87f722880d2103a25a8
   react-native-notifications: 163ddedac6fcc8d850ea15b06abdadcacdff00f1
   react-native-orientation-locker: 23918c400376a7043e752c639c122fcf6bce8f1c

ios/Pods/Local Podspecs/react-native-keyboard-input.podspec.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-keyboard-input",
-  "version": "5.3.1",
+  "version": "5.4.1",
   "summary": "React Native Custom Input Controller",
   "license": "MIT",
   "authors": "Leo Natan <lnatan@wix.com>",
@@ -10,7 +10,7 @@
   },
   "source": {
     "git": "https://github.com/wix/react-native-keyboard-input.git",
-    "tag": "v5.3.1"
+    "tag": "v5.4.1"
   },
   "source_files": "lib/ios/**/*.{h,m}",
   "dependencies": {

ios/Pods/Manifest.lock

@@ -299,7 +299,7 @@ PODS:
   - react-native-jitsi-meet (2.1.0):
     - JitsiMeetSDK
     - React
-  - react-native-keyboard-input (5.3.1):
+  - react-native-keyboard-input (5.4.1):
     - React
   - react-native-keyboard-tracking-view (5.6.1):
     - React
@@ -754,7 +754,7 @@ SPEC CHECKSUMS:
   react-native-cameraroll: 463aff54e37cff27ea76eb792e6f1fa43b876320
   react-native-document-picker: c36bf5f067a581657ecaf7124dcd921a8be19061
   react-native-jitsi-meet: 04ccc47303c62ba2b7e7407a113f5f46241ebd75
-  react-native-keyboard-input: 2a01e0aceac330592bbe9b3101761bb9d8e6d1fb
+  react-native-keyboard-input: 775c2f00554869563b1d59c6bebd8f8a2aa54295
   react-native-keyboard-tracking-view: 4bb67b89ccd327c7d9eab87f722880d2103a25a8
   react-native-notifications: 163ddedac6fcc8d850ea15b06abdadcacdff00f1
   react-native-orientation-locker: 23918c400376a7043e752c639c122fcf6bce8f1c

patches/react-native-keyboard-input+5.4.1.patch

@@ -1,3 +1,6 @@
+diff --git a/node_modules/react-native-keyboard-input/.DS_Store b/node_modules/react-native-keyboard-input/.DS_Store
+new file mode 100644
+index 0000000..e69de29
 diff --git a/node_modules/react-native-keyboard-input/lib/android/src/main/java/com/wix/reactnativekeyboardinput/CustomKeyboardRootView.java b/node_modules/react-native-keyboard-input/lib/android/src/main/java/com/wix/reactnativekeyboardinput/CustomKeyboardRootView.java
 index 69ef9f3..10729c8 100644
 --- a/node_modules/react-native-keyboard-input/lib/android/src/main/java/com/wix/reactnativekeyboardinput/CustomKeyboardRootView.java
@@ -83,7 +86,7 @@ index 0000000..1d08ca1
 +end
 \ No newline at end of file
 diff --git a/node_modules/react-native-keyboard-input/src/KeyboardAccessoryView.js b/node_modules/react-native-keyboard-input/src/KeyboardAccessoryView.js
-index bd557a8..6745017 100644
+index bd557a8..c150bb4 100644
 --- a/node_modules/react-native-keyboard-input/src/KeyboardAccessoryView.js
 +++ b/node_modules/react-native-keyboard-input/src/KeyboardAccessoryView.js
 @@ -23,6 +23,7 @@ export default class KeyboardAccessoryView extends Component {
@@ -94,7 +97,20 @@ index bd557a8..6745017 100644
      allowHitsOutsideBounds: PropTypes.bool,
    };
    static defaultProps = {
-@@ -136,6 +137,7 @@ export default class KeyboardAccessoryView extends Component {
+@@ -125,6 +126,12 @@ export default class KeyboardAccessoryView extends Component {
+     }
+   }
+ 
++  resetTracking() {
++    if (this.trackingViewRef) {
++      this.trackingViewRef.resetTracking();
++    }
++  }
++
+   render() {
+     return (
+       <KeyboardTrackingView
+@@ -136,6 +143,7 @@ export default class KeyboardAccessoryView extends Component {
          manageScrollView={this.props.manageScrollView}
          requiresSameParentToManageScrollView={this.props.requiresSameParentToManageScrollView}
          addBottomView={this.props.addBottomView}

patches/react-native-keyboard-tracking-view+5.6.1.patch

@@ -1,5 +1,5 @@
 diff --git a/node_modules/react-native-keyboard-tracking-view/lib/KeyboardTrackingViewManager.m b/node_modules/react-native-keyboard-tracking-view/lib/KeyboardTrackingViewManager.m
-index 800bd35..edb3030 100644
+index 800bd35..8fcd559 100644
 --- a/node_modules/react-native-keyboard-tracking-view/lib/KeyboardTrackingViewManager.m
 +++ b/node_modules/react-native-keyboard-tracking-view/lib/KeyboardTrackingViewManager.m
 @@ -49,6 +49,7 @@ @interface KeyboardTrackingView : UIView
@@ -63,7 +63,21 @@ index 800bd35..edb3030 100644
          {
              [self setupTextView:(UITextView*)subview];
          }
-@@ -442,12 +445,28 @@ -(void)setAddBottomView:(BOOL)addBottomView
+@@ -266,6 +269,13 @@ - (void)initializeAccessoryViewsAndHandleInsets
+     [self addBottomViewIfNecessary];
+ }
+ 
++- (void)resetTracking
++{
++    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.1 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
++        [self deferedInitializeAccessoryViewsAndHandleInsets];
++    });
++}
++
+ - (void)setupTextView:(UITextView*)textView
+ {
+     if (textView != nil)
+@@ -442,12 +452,28 @@ -(void)setAddBottomView:(BOOL)addBottomView
      [self addBottomViewIfNecessary];
  }
  
@@ -93,7 +107,7 @@ index 800bd35..edb3030 100644
          [self addSubview:_bottomView];
          [self updateBottomViewFrame];
      }
-@@ -631,6 +650,7 @@ @implementation KeyboardTrackingViewManager
+@@ -631,6 +657,7 @@ @implementation KeyboardTrackingViewManager
  RCT_REMAP_VIEW_PROPERTY(manageScrollView, manageScrollView, BOOL)
  RCT_REMAP_VIEW_PROPERTY(requiresSameParentToManageScrollView, requiresSameParentToManageScrollView, BOOL)
  RCT_REMAP_VIEW_PROPERTY(addBottomView, addBottomView, BOOL)
@@ -101,6 +115,28 @@ index 800bd35..edb3030 100644
  RCT_REMAP_VIEW_PROPERTY(scrollToFocusedInput, scrollToFocusedInput, BOOL)
  RCT_REMAP_VIEW_PROPERTY(allowHitsOutsideBounds, allowHitsOutsideBounds, BOOL)
  
+@@ -687,6 +714,21 @@ - (UIView *)view
+      }];
+ }
+ 
++RCT_EXPORT_METHOD(resetTracking:(nonnull NSNumber *)reactTag)
++{
++    [self.bridge.uiManager addUIBlock:
++     ^(__unused RCTUIManager *uiManager, NSDictionary<NSNumber *, KeyboardTrackingView *> *viewRegistry) {
++         
++         KeyboardTrackingView *view = viewRegistry[reactTag];
++         if (!view || ![view isKindOfClass:[KeyboardTrackingView class]]) {
++             RCTLogError(@"Error: cannot find KeyboardTrackingView with tag #%@", reactTag);
++             return;
++         }
++         
++         [view resetTracking];
++     }];
++}
++
+ #pragma mark - helper methods
+ 
+ -(void)rejectPromise:(RCTPromiseRejectBlock)reject withErrorMessage:(NSString*)errorMessage errorCode:(NSInteger)errorCode
 diff --git a/node_modules/react-native-keyboard-tracking-view/react-native-keyboard-tracking-view.podspec b/node_modules/react-native-keyboard-tracking-view/react-native-keyboard-tracking-view.podspec
 new file mode 100644
 index 0000000..a6dbe01
@@ -127,3 +163,28 @@ index 0000000..a6dbe01
 +  s.dependency 'React'
 +end
 \ No newline at end of file
+diff --git a/node_modules/react-native-keyboard-tracking-view/src/KeyboardTrackingView.android.js b/node_modules/react-native-keyboard-tracking-view/src/KeyboardTrackingView.android.js
+index af15edf..1e1bd35 100644
+--- a/node_modules/react-native-keyboard-tracking-view/src/KeyboardTrackingView.android.js
++++ b/node_modules/react-native-keyboard-tracking-view/src/KeyboardTrackingView.android.js
+@@ -14,4 +14,5 @@ export default class KeyboardTrackingView extends PureComponent {
+     return {trackingViewHeight: 0, keyboardHeight: 0, contentTopInset: 0};
+   }
+   scrollToStart() {}
++  resetTracking() {}
+ }
+diff --git a/node_modules/react-native-keyboard-tracking-view/src/KeyboardTrackingView.ios.js b/node_modules/react-native-keyboard-tracking-view/src/KeyboardTrackingView.ios.js
+index 5e2c207..43bc252 100644
+--- a/node_modules/react-native-keyboard-tracking-view/src/KeyboardTrackingView.ios.js
++++ b/node_modules/react-native-keyboard-tracking-view/src/KeyboardTrackingView.ios.js
+@@ -30,4 +30,10 @@ export default class KeyboardTrackingView extends PureComponent {
+       KeyboardTrackingViewManager.scrollToStart(ReactNative.findNodeHandle(this.ref));
+     }
+   }
++
++  resetTracking() {
++    if (this.ref && KeyboardTrackingViewManager && KeyboardTrackingViewManager.resetTracking) {
++      KeyboardTrackingViewManager.resetTracking(ReactNative.findNodeHandle(this.ref));
++    }
++  }
+ }

yarn.lock

@@ -9505,19 +9505,14 @@ react-native-keyboard-aware-scroll-view@0.9.1:
     react-native-iphone-x-helper "^1.0.3"
 
 react-native-keyboard-input@^5.3.1:
-  version "5.3.1"
+  version "5.4.1"
-  resolved "https://registry.yarnpkg.com/react-native-keyboard-input/-/react-native-keyboard-input-5.3.1.tgz#e90f43e17c070535cb54cc0be66a247f177474fc"
+  resolved "https://registry.yarnpkg.com/react-native-keyboard-input/-/react-native-keyboard-input-5.4.1.tgz#c32d72e4fda83684b39cef7ef0657f821c1f015f"
-  integrity sha512-NdKgueDFetyh77CC8veXE9jgISxatKbWkOpe3wfyPjw9O0J/c7EI5CEjSp5/ICufkvY6oLVDsZrP6TngTxTrXw==
+  integrity sha512-IpHVgofQYEhjzFIJI2KlfHQ2u6Qq+WaSl5c5j4RZHlIyQtwGvOXfyEIY0llPABDXStp4Mq8Joj1Z/9UjLqGFIQ==
   dependencies:
     lodash "^4.17.4"
     react-native-keyboard-tracking-view "^5.5.0"
 
-react-native-keyboard-tracking-view@^5.5.0:
+react-native-keyboard-tracking-view@^5.5.0, react-native-keyboard-tracking-view@^5.6.1:
-  version "5.5.0"
-  resolved "https://registry.yarnpkg.com/react-native-keyboard-tracking-view/-/react-native-keyboard-tracking-view-5.5.0.tgz#87d28639f30e5b511de510e4063e476f23d6e4f2"
-  integrity sha512-e/tYhvccmLOSV+6qpU5Hlpn/U2gVu5K5F555oCUBBF229vv/V/fGoq2QyBnBEKmF9IKzBEOpzxBavUR3IfaKXw==
-
-react-native-keyboard-tracking-view@^5.6.1:
   version "5.6.1"
   resolved "https://registry.yarnpkg.com/react-native-keyboard-tracking-view/-/react-native-keyboard-tracking-view-5.6.1.tgz#287186f6ae6335baf83ad106c7779f68d1cc48c2"
   integrity sha512-uud94SDB2ffGWQHb2ehCIxNi1lmSOQneZ/ro3Zb6Nu6yEh4ljqr1fbRco+pU1RWzaM73uS32A3vPu3NuXjPceA==