[FIX] Messages Overlapping (Android) and MessageBox Scroll (iOS)

android/app/build.gradle

@@ -199,7 +199,6 @@ dependencies {
     addUnimodulesDependencies()
     implementation project(':watermelondb')
     implementation project(':reactnativenotifications')
-    implementation project(":reactnativekeyboardinput")
     implementation project(':@react-native-community_viewpager')
     implementation fileTree(dir: "libs", include: ["*.jar"])
     implementation "com.facebook.react:react-native:+"  // From node_modules

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

@@ -25,7 +25,6 @@
 import com.wix.reactnativenotifications.core.JsIOHelper;
 import com.wix.reactnativenotifications.core.notification.INotificationsApplication;
 import com.wix.reactnativenotifications.core.notification.IPushNotification;
-import com.wix.reactnativekeyboardinput.KeyboardInputPackage;
 
 import io.invertase.firebase.fabric.crashlytics.RNFirebaseCrashlyticsPackage;
 import io.invertase.firebase.analytics.RNFirebaseAnalyticsPackage;
@@ -54,7 +53,6 @@ protected List<ReactPackage> getPackages() {
       packages.add(new RNFirebaseCrashlyticsPackage());
       packages.add(new RNFirebaseAnalyticsPackage());
       packages.add(new RNFirebasePerformancePackage());
-      packages.add(new KeyboardInputPackage(MainApplication.this));
       packages.add(new RNNotificationsPackage(MainApplication.this));
       packages.add(new WatermelonDBPackage());
       packages.add(new RNCViewPagerPackage());

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')
 apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)

app/containers/MessageBox/buttons/index.js

@@ -1,12 +1,10 @@
 import CancelEditingButton from './CancelEditingButton';
-import ToggleEmojiButton from './ToggleEmojiButton';
 import SendButton from './SendButton';
 import AudioButton from './AudioButton';
 import FileButton from './FileButton';
 
 export {
 	CancelEditingButton,
-	ToggleEmojiButton,
 	SendButton,
 	AudioButton,
 	FileButton

app/containers/MessageBox/index.js

@@ -2,12 +2,12 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { View, Alert, Keyboard } from 'react-native';
 import { connect } from 'react-redux';
-import { KeyboardAccessoryView } from 'react-native-keyboard-input';
 import ImagePicker from 'react-native-image-crop-picker';
 import equal from 'deep-equal';
 import DocumentPicker from 'react-native-document-picker';
 import ActionSheet from 'react-native-action-sheet';
 import { Q } from '@nozbe/watermelondb';
+import { KeyboardTrackingView } from 'react-native-keyboard-tracking-view';
 
 import { generateTriggerId } from '../../lib/methods/actions';
 import TextInput from '../../presentation/TextInput';
@@ -98,7 +98,6 @@ class MessageBox extends Component {
 		super(props);
 		this.state = {
 			mentions: [],
-			showEmojiKeyboard: false,
 			showSend: false,
 			recording: false,
 			trackingType: '',
@@ -170,10 +169,6 @@ class MessageBox extends Component {
 			this.setShowSend(true);
 		}
 
-		if (isAndroid) {
-			require('./EmojiKeyboard');
-		}
-
 		if (isTablet) {
 			EventEmiter.addEventListener(KEY_COMMAND, this.handleCommands);
 		}
@@ -198,7 +193,7 @@ class MessageBox extends Component {
 
 	shouldComponentUpdate(nextProps, nextState) {
 		const {
-			showEmojiKeyboard, showSend, recording, mentions, file, commandPreview
+			showSend, recording, mentions, file, commandPreview
 		} = this.state;
 
 		const {
@@ -219,9 +214,6 @@ class MessageBox extends Component {
 		if (nextProps.editing !== editing) {
 			return true;
 		}
-		if (nextState.showEmojiKeyboard !== showEmojiKeyboard) {
-			return true;
-		}
 		if (nextState.showSend !== showSend) {
 			return true;
 		}
@@ -315,10 +307,6 @@ class MessageBox extends Component {
 		}
 	}, 100)
 
-	onKeyboardResigned = () => {
-		this.closeEmoji();
-	}
-
 	onPressMention = (item) => {
 		if (!this.component) {
 			return;
@@ -363,24 +351,6 @@ class MessageBox extends Component {
 		}
 	}
 
-	onEmojiSelected = (keyboardId, params) => {
-		const { text } = this;
-		const { emoji } = params;
-		let newText = '';
-
-		// if messagebox has an active cursor
-		if (this.component && this.component._lastNativeSelection) {
-			const { start, end } = this.component._lastNativeSelection;
-			const cursor = Math.max(start, end);
-			newText = `${ text.substr(0, cursor) }${ emoji }${ text.substr(cursor) }`;
-		} else {
-			// if messagebox doesn't have a cursor, just append selected emoji
-			newText = `${ text }${ emoji }`;
-		}
-		this.setInput(newText);
-		this.setShowSend(true);
-	}
-
 	getPermalink = async(message) => {
 		try {
 			return await RocketChat.getPermalinkMessage(message);
@@ -615,12 +585,6 @@ class MessageBox extends Component {
 		this.clearInput();
 	}
 
-	openEmoji = async() => {
-		await this.setState({
-			showEmojiKeyboard: true
-		});
-	}
-
 	recordAudioMessage = async() => {
 		const recording = await Recording.permission();
 		this.setState({ recording });
@@ -645,10 +609,6 @@ class MessageBox extends Component {
 		}
 	}
 
-	closeEmoji = () => {
-		this.setState({ showEmojiKeyboard: false });
-	}
-
 	submit = async() => {
 		const {
 			onSubmit, rid: roomId, tmid
@@ -657,7 +617,6 @@ class MessageBox extends Component {
 
 		this.clearInput();
 		this.debouncedOnChangeText.stop();
-		this.closeEmoji();
 		this.stopTrackingMention();
 		this.handleTyping(false);
 		if (message.trim() === '') {
@@ -741,10 +700,7 @@ class MessageBox extends Component {
 	}
 
 	identifyMentionKeyword = (keyword, type) => {
-		this.setState({
-			showEmojiKeyboard: false,
-			trackingType: type
-		});
+		this.setState({ trackingType: type });
 		this.updateMentions(keyword, type);
 	}
 
@@ -778,7 +734,7 @@ class MessageBox extends Component {
 
 	renderContent = () => {
 		const {
-			recording, showEmojiKeyboard, showSend, mentions, trackingType, commandPreview, showCommandPreview
+			recording, showSend, mentions, trackingType, commandPreview, showCommandPreview
 		} = this.state;
 		const {
 			editing, message, replying, replyCancel, user, getCustomEmoji, theme
@@ -815,12 +771,9 @@ class MessageBox extends Component {
 					>
 						<LeftButtons
 							theme={theme}
-							showEmojiKeyboard={showEmojiKeyboard}
 							editing={editing}
 							showFileActions={this.showFileActions}
 							editCancel={this.editCancel}
-							openEmoji={this.openEmoji}
-							closeEmoji={this.closeEmoji}
 						/>
 						<TextInput
 							ref={component => this.component = component}
@@ -842,7 +795,6 @@ class MessageBox extends Component {
 							showSend={showSend}
 							submit={this.submit}
 							recordAudioMessage={this.recordAudioMessage}
-							showFileActions={this.showFileActions}
 						/>
 					</View>
 				</View>
@@ -852,7 +804,7 @@ class MessageBox extends Component {
 
 	render() {
 		console.count(`${ this.constructor.name }.render calls`);
-		const { showEmojiKeyboard, file } = this.state;
+		const { file } = this.state;
 		const { user, baseUrl, theme } = this.props;
 		return (
 			<MessageboxContext.Provider
@@ -863,18 +815,16 @@ class MessageBox extends Component {
 					onPressCommandPreview: this.onPressCommandPreview
 				}}
 			>
-				<KeyboardAccessoryView
-					renderContent={this.renderContent}
-					kbInputRef={this.component}
-					kbComponent={showEmojiKeyboard ? 'EmojiKeyboard' : null}
-					onKeyboardResigned={this.onKeyboardResigned}
-					onItemSelected={this.onEmojiSelected}
-					trackInteractive
-					// revealKeyboardInteractive
-					requiresSameParentToManageScrollView
+				<KeyboardTrackingView
 					addBottomView
+					manageScrollView
+					scrollBehavior={2} // KeyboardTrackingScrollBehaviorFixedOffset
+					style={styles.trackingView}
+					requiresSameParentToManageScrollView
 					bottomViewColor={themes[theme].messageboxBackground}
-				/>
+				>
+					{this.renderContent()}
+				</KeyboardTrackingView>
 				<UploadModal
 					isVisible={(file && file.isVisible)}
 					file={file}