[IMPROVE] Add emoji picker to iOS

app/containers/EmojiPicker/EmojiCategory.tsx

@@ -65,6 +65,7 @@ class EmojiCategory extends React.Component<IEmojiCategory> {
 				initialNumToRender={45}
 				removeClippedSubviews
 				{...scrollPersistTaps}
+				keyboardDismissMode={'none'}
 			/>
 		);
 	}

app/containers/EmojiPicker/index.tsx

@@ -17,7 +17,7 @@ import protectedFunction from '../../lib/methods/helpers/protectedFunction';
 import shortnameToUnicode from '../../lib/methods/helpers/shortnameToUnicode';
 import log from '../../lib/methods/helpers/log';
 import { themes } from '../../lib/constants';
-import { TSupportedThemes, withTheme } from '../../theme';
+import { TSupportedThemes } from '../../theme';
 import { IEmoji, TGetCustomEmoji, IApplicationState, ICustomEmojis, TFrequentlyUsedEmojiModel } from '../../definitions';
 
 interface IEmojiPickerProps {
@@ -198,7 +198,8 @@ class EmojiPicker extends Component<IEmojiPickerProps, IEmojiPickerState> {
 }
 
 const mapStateToProps = (state: IApplicationState) => ({
-	customEmojis: state.customEmojis
+	customEmojis: state.customEmojis,
+	baseUrl: state.share.server.server || state.server.server
 });
 
-export default connect(mapStateToProps)(withTheme(EmojiPicker));
+export default connect(mapStateToProps)(EmojiPicker);

app/containers/MessageBox/EmojiKeyboard.tsx

@@ -1,39 +1,28 @@
 import React from 'react';
 import { View } from 'react-native';
 import { KeyboardRegistry } from 'react-native-ui-lib/keyboard';
+import { Provider } from 'react-redux';
 
-import { store } from '../../lib/store/auxStore';
+import store from '../../lib/store';
 import EmojiPicker from '../EmojiPicker';
 import styles from './styles';
 import { themes } from '../../lib/constants';
-import { TSupportedThemes, withTheme } from '../../theme';
+import { TSupportedThemes } from '../../theme';
 
-interface IMessageBoxEmojiKeyboard {
-	theme: TSupportedThemes;
-}
-
-export default class EmojiKeyboard extends React.PureComponent<IMessageBoxEmojiKeyboard, any> {
-	private readonly baseUrl: string;
-
-	constructor(props: IMessageBoxEmojiKeyboard) {
-		super(props);
-		const state = store.getState();
-		this.baseUrl = state.share.server.server || state.server.server;
-	}
-
-	onEmojiSelected = (emoji: string) => {
+const EmojiKeyboard = ({ theme }: { theme: TSupportedThemes }) => {
+	const onEmojiSelected = (emoji: string) => {
 		KeyboardRegistry.onItemSelected('EmojiKeyboard', { emoji });
 	};
 
-	render() {
-		const { theme } = this.props;
-		return (
+	return (
+		<Provider store={store}>
 			<View
 				style={[styles.emojiKeyboardContainer, { borderTopColor: themes[theme].borderColor }]}
 				testID='messagebox-keyboard-emoji'>
-				<EmojiPicker onEmojiSelected={this.onEmojiSelected} baseUrl={this.baseUrl} theme={theme} />
+				<EmojiPicker onEmojiSelected={onEmojiSelected} theme={theme} />
 			</View>
-		);
-	}
-}
-KeyboardRegistry.registerKeyboard('EmojiKeyboard', () => withTheme(EmojiKeyboard));
+		</Provider>
+	);
+};
+
+KeyboardRegistry.registerKeyboard('EmojiKeyboard', () => EmojiKeyboard);

app/containers/MessageBox/RecordAudio.tsx

@@ -17,6 +17,7 @@ interface IMessageBoxRecordAudioProps {
 	permissionToUpload: boolean;
 	recordingCallback: Function;
 	onFinish: Function;
+	onStart: Function;
 }
 
 const RECORDING_EXTENSION = '.m4a';
@@ -116,6 +117,9 @@ export default class RecordAudio extends React.PureComponent<IMessageBoxRecordAu
 	};
 
 	startRecordingAudio = async () => {
+		const { onStart } = this.props;
+		onStart();
+
 		logEvent(events.ROOM_AUDIO_RECORD);
 		if (!this.isRecorderBusy) {
 			this.isRecorderBusy = true;

app/containers/MessageBox/RightButtons.android.tsx → app/containers/MessageBox/RightButtons.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { View } from 'react-native';
 
+import { isIOS } from '../../lib/methods/helpers';
 import { ActionsButton, SendButton } from './buttons';
 import styles from './styles';
 
@@ -18,7 +19,7 @@ const RightButtons = React.memo(({ showSend, submit, showMessageBoxActions, isAc
 	if (isActionsEnabled) {
 		return <ActionsButton onPress={showMessageBoxActions} />;
 	}
-	return <View style={styles.buttonsWhitespace} />;
+	return !isIOS ? <View style={styles.buttonsWhitespace} /> : null;
 });
 
 export default RightButtons;

app/containers/MessageBox/constants.ts

@@ -4,3 +4,5 @@ export const MENTIONS_TRACKING_TYPE_COMMANDS = '/';
 export const MENTIONS_TRACKING_TYPE_ROOMS = '#';
 export const MENTIONS_TRACKING_TYPE_CANNED = '!';
 export const MENTIONS_COUNT_TO_DISPLAY = 4;
+
+export const TIMEOUT_CLOSE_EMOJI = 300;

app/containers/MessageBox/index.tsx

@@ -19,11 +19,7 @@ import RecordAudio from './RecordAudio';
 import I18n from '../../i18n';
 import ReplyPreview from './ReplyPreview';
 import { themes } from '../../lib/constants';
-// @ts-ignore
-// eslint-disable-next-line import/extensions,import/no-unresolved
 import LeftButtons from './LeftButtons';
-// @ts-ignore
-// eslint-disable-next-line import/extensions,import/no-unresolved
 import RightButtons from './RightButtons';
 import { canUploadFile } from '../../lib/methods/helpers/media';
 import EventEmiter from '../../lib/methods/helpers/events';
@@ -37,12 +33,13 @@ import {
 	MENTIONS_TRACKING_TYPE_COMMANDS,
 	MENTIONS_TRACKING_TYPE_EMOJIS,
 	MENTIONS_TRACKING_TYPE_ROOMS,
-	MENTIONS_TRACKING_TYPE_USERS
+	MENTIONS_TRACKING_TYPE_USERS,
+	TIMEOUT_CLOSE_EMOJI
 } from './constants';
 import CommandsPreview from './CommandsPreview';
 import { getUserSelector } from '../../selectors/login';
 import Navigation from '../../lib/navigation/appNavigation';
-import { withActionSheet } from '../ActionSheet';
+import { TActionSheetOptionsItem, withActionSheet } from '../ActionSheet';
 import { sanitizeLikeString } from '../../lib/database/utils';
 import { CustomIcon } from '../CustomIcon';
 import { forceJpgExtension } from './forceJpgExtension';
@@ -58,14 +55,12 @@ import {
 } from '../../definitions';
 import { MasterDetailInsideStackParamList } from '../../stacks/MasterDetailStack/types';
 import { getPermalinkMessage, search, sendFileMessage } from '../../lib/methods';
-import { hasPermission, debounce, isAndroid, isTablet } from '../../lib/methods/helpers';
+import { hasPermission, debounce, isAndroid, isIOS, isTablet } from '../../lib/methods/helpers';
 import { Services } from '../../lib/services';
 import { TSupportedThemes } from '../../theme';
 import { ChatsStackParamList } from '../../stacks/types';
 
-if (isAndroid) {
-	require('./EmojiKeyboard');
-}
+require('./EmojiKeyboard');
 
 const imagePickerConfig = {
 	cropping: true,
@@ -270,6 +265,7 @@ class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
 			}, 500);
 		});
 		this.unsubscribeBlur = navigation.addListener('blur', () => {
+			this.closeEmoji();
 			this.component?.blur();
 		});
 	}
@@ -330,6 +326,9 @@ class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
 		if (nextProps.theme !== theme) {
 			return true;
 		}
+		if (nextState.showEmojiKeyboard !== showEmojiKeyboard) {
+			return true;
+		}
 		if (!isFocused()) {
 			return false;
 		}
@@ -342,9 +341,6 @@ class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
 		if (nextProps.editing !== editing) {
 			return true;
 		}
-		if (nextState.showEmojiKeyboard !== showEmojiKeyboard) {
-			return true;
-		}
 		if (nextState.trackingType !== trackingType) {
 			return true;
 		}
@@ -809,7 +805,7 @@ class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
 		const { permissionToUpload } = this.state;
 		const { showActionSheet, goToCannedResponses } = this.props;
 
-		const options = [];
+		const options: TActionSheetOptionsItem[] = [];
 		if (goToCannedResponses) {
 			options.push({
 				title: I18n.t('Canned_Responses'),
@@ -847,7 +843,8 @@ class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
 			icon: 'discussions',
 			onPress: this.createDiscussion
 		});
-		showActionSheet({ options });
+
+		this.closeEmojiAndAction(showActionSheet, { options });
 	};
 
 	editCancel = () => {
@@ -883,6 +880,13 @@ class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
 		this.setState({ showEmojiKeyboard: false });
 	};
 
+	closeEmojiAndAction = (action?: Function, params?: any) => {
+		const { showEmojiKeyboard } = this.state;
+
+		this.closeEmoji();
+		setTimeout(() => action && action(params), showEmojiKeyboard && isIOS ? TIMEOUT_CLOSE_EMOJI : null);
+	};
+
 	submit = async () => {
 		const { tshow } = this.state;
 		const { onSubmit, rid: roomId, tmid, showSend, sharing } = this.props;
@@ -1089,6 +1093,7 @@ class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
 					recordingCallback={this.recordingCallback}
 					onFinish={this.finishAudioMessage}
 					permissionToUpload={permissionToUpload}
+					onStart={this.closeEmoji}
 				/>
 			);
 
@@ -1112,14 +1117,11 @@ class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
 		const textInputAndButtons = !recording ? (
 			<>
 				<LeftButtons
-					theme={theme}
 					showEmojiKeyboard={showEmojiKeyboard}
 					editing={editing}
-					showMessageBoxActions={this.showMessageBoxActions}
 					editCancel={this.editCancel}
 					openEmoji={this.openEmoji}
 					closeEmoji={this.closeEmoji}
-					isActionsEnabled={isActionsEnabled}
 				/>
 				<TextInput
 					ref={component => (this.component = component)}
@@ -1138,7 +1140,6 @@ class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
 					{...isAndroidTablet}
 				/>
 				<RightButtons
-					theme={theme}
 					showSend={showSend}
 					submit={this.submit}
 					showMessageBoxActions={this.showMessageBoxActions}
@@ -1187,6 +1188,7 @@ class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
 					renderContent={this.renderContent}
 					kbInputRef={this.component}
 					kbComponent={showEmojiKeyboard ? 'EmojiKeyboard' : null}
+					kbInitialProps={{ theme }}
 					onKeyboardResigned={this.onKeyboardResigned}
 					onItemSelected={this.onEmojiSelected}
 					trackInteractive

app/containers/message/index.tsx

@@ -58,6 +58,7 @@ interface IMessageContainerProps {
 	jumpToMessage?: (link: string) => void;
 	onPress?: () => void;
 	theme: TSupportedThemes;
+	closeEmojiAndAction?: (action?: Function, params?: any) => void;
 }
 
 interface IMessageContainerState {
@@ -114,6 +115,14 @@ class MessageContainer extends React.Component<IMessageContainerProps, IMessageC
 		}
 	}
 
+	closeEmojiAndAction = () => {
+		const { closeEmojiAndAction } = this.props;
+
+		if (closeEmojiAndAction) {
+			closeEmojiAndAction(this.onPress);
+		}
+	};
+
 	onPress = debounce(
 		() => {
 			const { onPress } = this.props;
@@ -373,7 +382,7 @@ class MessageContainer extends React.Component<IMessageContainerProps, IMessageC
 				value={{
 					user,
 					baseUrl,
-					onPress: this.onPress,
+					onPress: this.closeEmojiAndAction,
 					onLongPress: this.onLongPress,
 					reactionInit: this.reactionInit,
 					onErrorPress: this.onErrorPress,

app/views/RoomView/ReactionPicker.tsx

@@ -14,7 +14,6 @@ const margin = isAndroid ? 40 : 20;
 const maxSize = 400;
 
 interface IReactionPickerProps {
-	baseUrl: string;
 	message?: any;
 	show: boolean;
 	isMasterDetail: boolean;
@@ -42,7 +41,7 @@ class ReactionPicker extends React.Component<IReactionPickerProps> {
 	};
 
 	render() {
-		const { width, height, show, baseUrl, reactionClose, isMasterDetail, theme } = this.props;
+		const { width, height, show, reactionClose, isMasterDetail, theme } = this.props;
 
 		let widthStyle = width - margin;
 		let heightStyle = Math.min(width, height) - margin * 2;
@@ -70,15 +69,14 @@ class ReactionPicker extends React.Component<IReactionPickerProps> {
 						}
 					]}
 					testID='reaction-picker'>
-					<EmojiPicker theme={theme} onEmojiSelected={this.onEmojiSelected} baseUrl={baseUrl} />
+					<EmojiPicker theme={theme} onEmojiSelected={this.onEmojiSelected} />
 				</View>
 			</Modal>
 		) : null;
 	}
 }
 
 const mapStateToProps = (state: IApplicationState) => ({
-	baseUrl: state.server.server,
 	isMasterDetail: state.app.isMasterDetail
 });