[REVERT] Show emoji keyboard on Android (#1738)

android/app/build.gradle

@@ -199,6 +199,7 @@ 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,6 +25,7 @@ import com.wix.reactnativenotifications.core.AppLifecycleFacade;
 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;
@@ -53,6 +54,7 @@ public class MainApplication extends Application implements ReactApplication, IN
       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,6 +6,8 @@ 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/EmojiKeyboard.js

+import React from 'react';
+import { View } from 'react-native';
+import { KeyboardRegistry } from 'react-native-keyboard-input';
+import PropTypes from 'prop-types';
+
+import store from '../../lib/createStore';
+import EmojiPicker from '../EmojiPicker';
+import styles from './styles';
+import { themes } from '../../constants/colors';
+import { withTheme } from '../../theme';
+
+export default class EmojiKeyboard extends React.PureComponent {
+	static propTypes = {
+		theme: PropTypes.string
+	};
+
+	constructor(props) {
+		super(props);
+		const state = store.getState();
+		this.baseUrl = state.server.server;
+	}
+
+	onEmojiSelected = (emoji) => {
+		KeyboardRegistry.onItemSelected('EmojiKeyboard', { emoji });
+	}
+
+	render() {
+		const { theme } = this.props;
+		return (
+			<View style={[styles.emojiKeyboardContainer, { borderTopColor: themes[theme].borderColor }]} testID='messagebox-keyboard-emoji'>
+				<EmojiPicker onEmojiSelected={this.onEmojiSelected} baseUrl={this.baseUrl} />
+			</View>
+		);
+	}
+}
+KeyboardRegistry.registerKeyboard('EmojiKeyboard', () => withTheme(EmojiKeyboard));

app/containers/MessageBox/LeftButtons.android.js

+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { CancelEditingButton, ToggleEmojiButton } from './buttons';
+
+const LeftButtons = React.memo(({
+	theme, showEmojiKeyboard, editing, editCancel, openEmoji, closeEmoji
+}) => {
+	if (editing) {
+		return <CancelEditingButton onPress={editCancel} theme={theme} />;
+	}
+	return (
+		<ToggleEmojiButton
+			show={showEmojiKeyboard}
+			open={openEmoji}
+			close={closeEmoji}
+			theme={theme}
+		/>
+	);
+});
+
+LeftButtons.propTypes = {
+	theme: PropTypes.string,
+	showEmojiKeyboard: PropTypes.bool,
+	openEmoji: PropTypes.func.isRequired,
+	closeEmoji: PropTypes.func.isRequired,
+	editing: PropTypes.bool,
+	editCancel: PropTypes.func.isRequired
+};
+
+export default LeftButtons;

app/containers/MessageBox/RightButtons.android.js

+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { SendButton, AudioButton, FileButton } from './buttons';
+
+const RightButtons = React.memo(({
+	theme, showSend, submit, recordAudioMessage, showFileActions
+}) => {
+	if (showSend) {
+		return <SendButton onPress={submit} theme={theme} />;
+	}
+	return (
+		<>
+			<AudioButton onPress={recordAudioMessage} theme={theme} />
+			<FileButton onPress={showFileActions} theme={theme} />
+		</>
+	);
+});
+
+RightButtons.propTypes = {
+	theme: PropTypes.string,
+	showSend: PropTypes.bool,
+	submit: PropTypes.func.isRequired,
+	recordAudioMessage: PropTypes.func.isRequired,
+	showFileActions: PropTypes.func.isRequired
+};
+
+export default RightButtons;

app/containers/MessageBox/buttons/ToggleEmojiButton.js

+import React from 'react';
+import PropTypes from 'prop-types';
+
+import BaseButton from './BaseButton';
+
+const ToggleEmojiButton = React.memo(({
+	theme, show, open, close
+}) => {
+	if (show) {
+		return (
+			<BaseButton
+				onPress={close}
+				testID='messagebox-close-emoji'
+				accessibilityLabel='Close_emoji_selector'
+				icon='keyboard'
+				theme={theme}
+			/>
+		);
+	}
+	return (
+		<BaseButton
+			onPress={open}
+			testID='messagebox-open-emoji'
+			accessibilityLabel='Open_emoji_selector'
+			icon='emoji'
+			theme={theme}
+		/>
+	);
+});
+
+ToggleEmojiButton.propTypes = {
+	theme: PropTypes.string,
+	show: PropTypes.bool,
+	open: PropTypes.func.isRequired,
+	close: PropTypes.func.isRequired
+};
+
+export default ToggleEmojiButton;

app/containers/MessageBox/buttons/index.js

 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,6 +98,7 @@ class MessageBox extends Component {
 		super(props);
 		this.state = {
 			mentions: [],
+			showEmojiKeyboard: false,
 			showSend: false,
 			recording: false,
 			trackingType: '',
@@ -169,6 +170,10 @@ class MessageBox extends Component {
 			this.setShowSend(true);
 		}
 
+		if (isAndroid) {
+			require('./EmojiKeyboard');
+		}
+
 		if (isTablet) {
 			EventEmiter.addEventListener(KEY_COMMAND, this.handleCommands);
 		}
@@ -193,7 +198,7 @@ class MessageBox extends Component {
 
 	shouldComponentUpdate(nextProps, nextState) {
 		const {
-			showSend, recording, mentions, file, commandPreview
+			showEmojiKeyboard, showSend, recording, mentions, file, commandPreview
 		} = this.state;
 
 		const {
@@ -214,6 +219,9 @@ class MessageBox extends Component {
 		if (nextProps.editing !== editing) {
 			return true;
 		}
+		if (nextState.showEmojiKeyboard !== showEmojiKeyboard) {
+			return true;
+		}
 		if (nextState.showSend !== showSend) {
 			return true;
 		}
@@ -307,6 +315,10 @@ class MessageBox extends Component {
 		}
 	}, 100)
 
+	onKeyboardResigned = () => {
+		this.closeEmoji();
+	}
+
 	onPressMention = (item) => {
 		if (!this.component) {
 			return;
@@ -351,6 +363,24 @@ 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);
@@ -585,6 +615,12 @@ class MessageBox extends Component {
 		this.clearInput();
 	}
 
+	openEmoji = async() => {
+		await this.setState({
+			showEmojiKeyboard: true
+		});
+	}
+
 	recordAudioMessage = async() => {
 		const recording = await Recording.permission();
 		this.setState({ recording });
@@ -609,6 +645,10 @@ class MessageBox extends Component {
 		}
 	}
 
+	closeEmoji = () => {
+		this.setState({ showEmojiKeyboard: false });
+	}
+
 	submit = async() => {
 		const {
 			onSubmit, rid: roomId, tmid
@@ -617,6 +657,7 @@ class MessageBox extends Component {
 
 		this.clearInput();
 		this.debouncedOnChangeText.stop();
+		this.closeEmoji();
 		this.stopTrackingMention();
 		this.handleTyping(false);
 		if (message.trim() === '') {
@@ -700,7 +741,10 @@ class MessageBox extends Component {
 	}
 
 	identifyMentionKeyword = (keyword, type) => {
-		this.setState({ trackingType: type });
+		this.setState({
+			showEmojiKeyboard: false,
+			trackingType: type
+		});
 		this.updateMentions(keyword, type);
 	}
 
@@ -734,7 +778,7 @@ class MessageBox extends Component {
 
 	renderContent = () => {
 		const {
-			recording, showSend, mentions, trackingType, commandPreview, showCommandPreview
+			recording, showEmojiKeyboard, showSend, mentions, trackingType, commandPreview, showCommandPreview
 		} = this.state;
 		const {
 			editing, message, replying, replyCancel, user, getCustomEmoji, theme
@@ -771,9 +815,12 @@ 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}
@@ -795,6 +842,7 @@ class MessageBox extends Component {
 							showSend={showSend}
 							submit={this.submit}
 							recordAudioMessage={this.recordAudioMessage}
+							showFileActions={this.showFileActions}
 						/>
 					</View>
 				</View>
@@ -804,7 +852,7 @@ class MessageBox extends Component {
 
 	render() {
 		console.count(`${ this.constructor.name }.render calls`);
-		const { file } = this.state;
+		const { showEmojiKeyboard, file } = this.state;
 		const { user, baseUrl, theme } = this.props;
 		return (
 			<MessageboxContext.Provider
@@ -815,16 +863,18 @@ class MessageBox extends Component {
 					onPressCommandPreview: this.onPressCommandPreview
 				}}
 			>
-				<KeyboardTrackingView
-					addBottomView
-					manageScrollView
-					scrollBehavior={2} // KeyboardTrackingScrollBehaviorFixedOffset
-					style={styles.trackingView}
+				<KeyboardAccessoryView
+					renderContent={this.renderContent}
+					kbInputRef={this.component}
+					kbComponent={showEmojiKeyboard ? 'EmojiKeyboard' : null}
+					onKeyboardResigned={this.onKeyboardResigned}
+					onItemSelected={this.onEmojiSelected}
+					trackInteractive
+					// revealKeyboardInteractive
 					requiresSameParentToManageScrollView
+					addBottomView
 					bottomViewColor={themes[theme].messageboxBackground}
-				>
-					{this.renderContent()}
-				</KeyboardTrackingView>
+				/>
 				<UploadModal
 					isVisible={(file && file.isVisible)}
 					file={file}

app/containers/MessageBox/styles.js

-import { StyleSheet, Platform } from 'react-native';
+import { StyleSheet } from 'react-native';
 
 import { isIOS } from '../../utils/deviceInfo';
 import sharedStyles from '../../views/Styles';
@@ -73,6 +73,10 @@ export default StyleSheet.create({
 		fontSize: 14,
 		...sharedStyles.textRegular
 	},
+	emojiKeyboardContainer: {
+		flex: 1,
+		borderTopWidth: StyleSheet.hairlineWidth
+	},
 	slash: {
 		height: 30,
 		width: 30,
@@ -99,15 +103,5 @@ export default StyleSheet.create({
 	},
 	scrollViewMention: {
 		maxHeight: SCROLLVIEW_MENTION_HEIGHT
-	},
-	trackingView: {
-		...Platform.select({
-			ios: {
-				position: 'absolute',
-				bottom: 0,
-				left: 0,
-				right: 0
-			}
-		})
 	}
 });

app/containers/message/index.js

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

ios/Podfile.lock

@@ -292,6 +292,8 @@ PODS:
   - react-native-jitsi-meet (2.0.4):
     - JitsiMeetSDK
     - React
+  - react-native-keyboard-input (5.3.1):
+    - React
   - react-native-keyboard-tracking-view (5.6.1):
     - React
   - react-native-notifications (2.0.6):
@@ -448,6 +450,7 @@ DEPENDENCIES:
   - "react-native-cameraroll (from `../node_modules/@react-native-community/cameraroll`)"
   - react-native-document-picker (from `../node_modules/react-native-document-picker`)
   - react-native-jitsi-meet (from `../node_modules/react-native-jitsi-meet`)
+  - react-native-keyboard-input (from `../node_modules/react-native-keyboard-input`)
   - react-native-keyboard-tracking-view (from `../node_modules/react-native-keyboard-tracking-view`)
   - react-native-notifications (from `../node_modules/react-native-notifications`)
   - react-native-orientation-locker (from `../node_modules/react-native-orientation-locker`)
@@ -583,6 +586,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-document-picker"
   react-native-jitsi-meet:
     :path: "../node_modules/react-native-jitsi-meet"
+  react-native-keyboard-input:
+    :path: "../node_modules/react-native-keyboard-input"
   react-native-keyboard-tracking-view:
     :path: "../node_modules/react-native-keyboard-tracking-view"
   react-native-notifications:
@@ -738,6 +743,7 @@ SPEC CHECKSUMS:
   react-native-cameraroll: 463aff54e37cff27ea76eb792e6f1fa43b876320
   react-native-document-picker: c36bf5f067a581657ecaf7124dcd921a8be19061
   react-native-jitsi-meet: 5bc06e8b65a7d04fd3705d5720f3b2ec66e49a29
+  react-native-keyboard-input: 2a01e0aceac330592bbe9b3101761bb9d8e6d1fb
   react-native-keyboard-tracking-view: 4bb67b89ccd327c7d9eab87f722880d2103a25a8
   react-native-notifications: 163ddedac6fcc8d850ea15b06abdadcacdff00f1
   react-native-orientation-locker: 23918c400376a7043e752c639c122fcf6bce8f1c

ios/Pods/Headers/Private/react-native-keyboard-input/Color+Interpolation.h

+../../../../../node_modules/react-native-keyboard-input/lib/ios/LNInterpolation/Color+Interpolation.h
\ No newline at end of file

ios/Pods/Headers/Private/react-native-keyboard-input/LNAnimator.h

+../../../../../node_modules/react-native-keyboard-input/lib/ios/LNInterpolation/LNAnimator.h
\ No newline at end of file

ios/Pods/Headers/Private/react-native-keyboard-input/LNInterpolable.h

+../../../../../node_modules/react-native-keyboard-input/lib/ios/LNInterpolation/LNInterpolable.h
\ No newline at end of file

ios/Pods/Headers/Private/react-native-keyboard-input/LNInterpolation.h

+../../../../../node_modules/react-native-keyboard-input/lib/ios/LNInterpolation/LNInterpolation.h
\ No newline at end of file

ios/Pods/Headers/Private/react-native-keyboard-input/NSValue+Interpolation.h

+../../../../../node_modules/react-native-keyboard-input/lib/ios/LNInterpolation/NSValue+Interpolation.h
\ No newline at end of file

ios/Pods/Headers/Private/react-native-keyboard-input/RCTCustomInputController.h

+../../../../../node_modules/react-native-keyboard-input/lib/ios/RCTCustomInputController/RCTCustomInputController.h
\ No newline at end of file