[FIX] Messages overlapping and emoji keyboard not opening (#2670)

* Replace keyboard libs for react-native-ui-lib

* Apply Jitsi branch

* Require keyboard on bundle

* Update ui-lib

* chore: update deps

Co-authored-by: Djorkaeff Alexandre <djorkaeff.unb@gmail.com>

android/app/build.gradle

@@ -245,7 +245,6 @@ android {
 dependencies {
     addUnimodulesDependencies()
     implementation project(':watermelondb')
-    implementation project(":reactnativekeyboardinput")
     implementation project(':@react-native-community_viewpager')
     playImplementation project(':reactnativenotifications')
     playImplementation project(':@react-native-firebase_app')

android/app/src/main/java/chat/rocket/reactnative/MainApplication.java

@@ -11,7 +11,6 @@
 import com.facebook.soloader.SoLoader;
 import com.nozbe.watermelondb.WatermelonDBPackage;
 import com.reactnativecommunity.viewpager.RNCViewPagerPackage;
-import com.wix.reactnativekeyboardinput.KeyboardInputPackage;
 
 import org.unimodules.adapters.react.ModuleRegistryAdapter;
 import org.unimodules.adapters.react.ReactModuleRegistryProvider;
@@ -35,7 +34,6 @@ public boolean getUseDeveloperSupport() {
     protected List<ReactPackage> getPackages() {
       @SuppressWarnings("UnnecessaryLocalVariable")
       List<ReactPackage> packages = new PackageList(this).getPackages();
-      packages.add(new KeyboardInputPackage(MainApplication.this));
       packages.add(new WatermelonDBPackage());
       packages.add(new RNCViewPagerPackage());
       packages.add(new SSLPinningPackage());

android/settings.gradle

@@ -6,8 +6,6 @@ include ':watermelondb'
 project(':watermelondb').projectDir = new File(rootProject.projectDir, '../node_modules/@nozbe/watermelondb/native/android')
 include ':reactnativenotifications'
 project(':reactnativenotifications').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-notifications/android/app')
-include ':reactnativekeyboardinput'
-project(':reactnativekeyboardinput').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-keyboard-input/lib/android')
 include ':@react-native-community_viewpager'
 project(':@react-native-community_viewpager').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/viewpager/android')
 include ':@react-native-firebase_app'

app/containers/MessageBox/EmojiKeyboard.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View } from 'react-native';
-import { KeyboardRegistry } from 'react-native-keyboard-input';
+import { KeyboardRegistry } from 'react-native-ui-lib/keyboard';
 import PropTypes from 'prop-types';
 
 import store from '../../lib/createStore';

app/containers/MessageBox/index.js

@@ -4,7 +4,7 @@ import {
 	View, Alert, Keyboard, NativeModules, Text
 } from 'react-native';
 import { connect } from 'react-redux';
-import { KeyboardAccessoryView } from 'react-native-keyboard-input';
+import { KeyboardAccessoryView } from 'react-native-ui-lib/keyboard';
 import ImagePicker from 'react-native-image-crop-picker';
 import equal from 'deep-equal';
 import DocumentPicker from 'react-native-document-picker';
@@ -50,6 +50,10 @@ import { withActionSheet } from '../ActionSheet';
 import { sanitizeLikeString } from '../../lib/database/utils';
 import { CustomIcon } from '../../lib/Icons';
 
+if (isAndroid) {
+	require('./EmojiKeyboard');
+}
+
 const imagePickerConfig = {
 	cropping: true,
 	compressImageQuality: 0.8,
@@ -108,7 +112,7 @@ class MessageBox extends Component {
 			id: ''
 		},
 		sharing: false,
-		iOSScrollBehavior: NativeModules.KeyboardTrackingViewManager?.KeyboardTrackingScrollBehaviorFixedOffset,
+		iOSScrollBehavior: NativeModules.KeyboardTrackingViewTempManager?.KeyboardTrackingScrollBehaviorFixedOffset,
 		isActionsEnabled: true,
 		getCustomEmoji: () => {}
 	}
@@ -213,10 +217,6 @@ class MessageBox extends Component {
 			this.setShowSend(true);
 		}
 
-		if (isAndroid) {
-			require('./EmojiKeyboard');
-		}
-
 		if (isTablet) {
 			EventEmiter.addEventListener(KEY_COMMAND, this.handleCommands);
 		}

app/containers/message/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { KeyboardUtils } from 'react-native-keyboard-input';
+import { Keyboard } from 'react-native';
 
 import Message from './Message';
 import MessageContext from './Context';
@@ -117,7 +117,7 @@ class MessageContainer extends React.Component {
 		}
 
 		const { item, isThreadRoom } = this.props;
-		KeyboardUtils.dismiss();
+		Keyboard.dismiss();
 
 		if (((item.tlm || item.tmid) && !isThreadRoom)) {
 			this.onThreadPress();

ios/Podfile.lock

@@ -366,6 +366,8 @@ PODS:
     - React
   - react-native-background-timer (2.2.0):
     - React
+  - react-native-blur (0.8.0):
+    - React
   - react-native-cameraroll (4.0.0):
     - React
   - react-native-cookies (4.0.0):
@@ -378,6 +380,8 @@ PODS:
   - react-native-mmkv-storage (0.3.5):
     - MMKV (= 1.2.1)
     - React
+  - react-native-netinfo (5.9.9):
+    - React-Core
   - react-native-notifications (2.1.7):
     - React
   - react-native-orientation-locker (1.1.8):
@@ -455,9 +459,7 @@ PODS:
     - React-jsi (= 0.63.2)
   - ReactNativeART (1.2.0):
     - React
-  - ReactNativeKeyboardInput (6.0.0):
-    - React
-  - ReactNativeKeyboardTrackingView (5.7.0):
+  - ReactNativeUiLib (3.0.4):
     - React
   - rn-extensions-share (2.4.0):
     - React
@@ -471,6 +473,8 @@ PODS:
     - React
   - RNConfigReader (1.0.0):
     - React
+  - RNCPicker (1.8.1):
+    - React-Core
   - RNDateTimePicker (2.6.0):
     - React
   - RNDeviceInfo (5.6.2):
@@ -593,11 +597,13 @@ DEPENDENCIES:
   - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
   - react-native-appearance (from `../node_modules/react-native-appearance`)
   - react-native-background-timer (from `../node_modules/react-native-background-timer`)
+  - "react-native-blur (from `../node_modules/@react-native-community/blur`)"
   - "react-native-cameraroll (from `../node_modules/@react-native-community/cameraroll`)"
   - "react-native-cookies (from `../node_modules/@react-native-community/cookies`)"
   - react-native-document-picker (from `../node_modules/react-native-document-picker`)
   - react-native-jitsi-meet (from `../node_modules/react-native-jitsi-meet`)
   - react-native-mmkv-storage (from `../node_modules/react-native-mmkv-storage`)
+  - "react-native-netinfo (from `../node_modules/@react-native-community/netinfo`)"
   - react-native-notifications (from `../node_modules/react-native-notifications`)
   - react-native-orientation-locker (from `../node_modules/react-native-orientation-locker`)
   - react-native-restart (from `../node_modules/react-native-restart`)
@@ -616,14 +622,14 @@ DEPENDENCIES:
   - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
   - "ReactNativeART (from `../node_modules/@react-native-community/art`)"
-  - ReactNativeKeyboardInput (from `../node_modules/react-native-keyboard-input`)
-  - ReactNativeKeyboardTrackingView (from `../node_modules/react-native-keyboard-tracking-view`)
+  - ReactNativeUiLib (from `../node_modules/react-native-ui-lib/lib`)
   - rn-extensions-share (from `../node_modules/rn-extensions-share`)
   - rn-fetch-blob (from `../node_modules/rn-fetch-blob`)
   - RNBootSplash (from `../node_modules/react-native-bootsplash`)
   - "RNCAsyncStorage (from `../node_modules/@react-native-community/async-storage`)"
   - "RNCMaskedView (from `../node_modules/@react-native-community/masked-view`)"
   - RNConfigReader (from `../node_modules/react-native-config-reader`)
+  - "RNCPicker (from `../node_modules/@react-native-community/picker`)"
   - "RNDateTimePicker (from `../node_modules/@react-native-community/datetimepicker`)"
   - RNDeviceInfo (from `../node_modules/react-native-device-info`)
   - "RNFastImage (from `../node_modules/@rocket.chat/react-native-fast-image`)"
@@ -748,6 +754,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-appearance"
   react-native-background-timer:
     :path: "../node_modules/react-native-background-timer"
+  react-native-blur:
+    :path: "../node_modules/@react-native-community/blur"
   react-native-cameraroll:
     :path: "../node_modules/@react-native-community/cameraroll"
   react-native-cookies:
@@ -758,6 +766,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-jitsi-meet"
   react-native-mmkv-storage:
     :path: "../node_modules/react-native-mmkv-storage"
+  react-native-netinfo:
+    :path: "../node_modules/@react-native-community/netinfo"
   react-native-notifications:
     :path: "../node_modules/react-native-notifications"
   react-native-orientation-locker:
@@ -794,10 +804,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon"
   ReactNativeART:
     :path: "../node_modules/@react-native-community/art"
-  ReactNativeKeyboardInput:
-    :path: "../node_modules/react-native-keyboard-input"
-  ReactNativeKeyboardTrackingView:
-    :path: "../node_modules/react-native-keyboard-tracking-view"
+  ReactNativeUiLib:
+    :path: "../node_modules/react-native-ui-lib/lib"
   rn-extensions-share:
     :path: "../node_modules/rn-extensions-share"
   rn-fetch-blob:
@@ -810,6 +818,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/@react-native-community/masked-view"
   RNConfigReader:
     :path: "../node_modules/react-native-config-reader"
+  RNCPicker:
+    :path: "../node_modules/@react-native-community/picker"
   RNDateTimePicker:
     :path: "../node_modules/@react-native-community/datetimepicker"
   RNDeviceInfo:
@@ -928,11 +938,13 @@ SPEC CHECKSUMS:
   React-jsinspector: b14e62ebe7a66e9231e9581279909f2fc3db6606
   react-native-appearance: 0f0e5fc2fcef70e03d48c8fe6b00b9158c2ba8aa
   react-native-background-timer: 1f7d560647b40e6a60b01c452ba29c54bf581fc4
+  react-native-blur: cad4d93b364f91e7b7931b3fa935455487e5c33c
   react-native-cameraroll: ae0a7c0cc8462508855707ff623b1e789b692865
   react-native-cookies: d79e5015a5d3a38e08f5cb39c4948532be7e9c2b
   react-native-document-picker: 825552b827012282baf4b7cbf119d3b37a280c90
   react-native-jitsi-meet: f2407aca85566e031ee7b222e497ee5ecb6623de
   react-native-mmkv-storage: 48729fe90e850ef2fdc9d3714b7030c7c51d82b0
+  react-native-netinfo: 0212ce8604e88edf686f1481b925b17a42a52449
   react-native-notifications: ee8fd739853e72694f3af8b374c8ccb106b7b227
   react-native-orientation-locker: f0ca1a8e5031dab6b74bfb4ab33a17ed2c2fcb0d
   react-native-restart: d19a0f8d053d065fe64cd2baebb6487111c77149
@@ -951,14 +963,14 @@ SPEC CHECKSUMS:
   React-RCTVibration: 4d2e726957f4087449739b595f107c0d4b6c2d2d
   ReactCommon: a0a1edbebcac5e91338371b72ffc66aa822792ce
   ReactNativeART: 78edc68dd4a1e675338cd0cd113319cf3a65f2ab
-  ReactNativeKeyboardInput: c37e26821519869993b3b61844350feb9177ff37
-  ReactNativeKeyboardTrackingView: 02137fac3b2ebd330d74fa54ead48b14750a2306
+  ReactNativeUiLib: cde7263a7d308b60161cd286f95c9433e79f2f7d
   rn-extensions-share: 8db79372089567cbc5aefe8444869bbc808578d3
   rn-fetch-blob: f065bb7ab7fb48dd002629f8bdcb0336602d3cba
   RNBootSplash: b3836aa90c5bec690c6cd3c9ab355fcf98d0fe1d
   RNCAsyncStorage: d059c3ee71738c39834a627476322a5a8cd5bf36
   RNCMaskedView: 5a8ec07677aa885546a0d98da336457e2bea557f
   RNConfigReader: 396da6a6444182a76e8ae0930b9436c7575045cb
+  RNCPicker: 914b557e20b3b8317b084aca9ff4b4edb95f61e4
   RNDateTimePicker: e386ff4ef3300964ed0cad97ce6f206e0effbfdb
   RNDeviceInfo: ed8557a8bd6443cbc0ab5d375e6808a38a279744
   RNFastImage: f40d202ea2367239f71bc7cf11315f4bebab85b4