New reaction picker as bottom action sheet

app/containers/ActionSheet/ActionSheet.tsx

@@ -140,8 +140,8 @@ const ActionSheet = React.memo(
 						style={{ ...styles.container, ...bottomSheet }}
 						backgroundStyle={{ backgroundColor: colors.focusedBackground }}
 						onChange={index => index === -1 && onClose()}
-						// We need this to allow horizontal swipe gestures inside bottom sheet like in reaction picker
+						activeOffsetY={[-1, 1]}
-						enableContentPanningGesture={data?.enableContentPanningGesture ?? true}
+						failOffsetX={[-5, 5]}
 						{...androidTablet}
 					>
 						<BottomSheetContent options={data?.options} hide={hide} children={data?.children} hasCancel={data?.hasCancel} />

app/containers/EmojiPicker/EmojiCategory.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
-import { FlatList, Text, TouchableOpacity } from 'react-native';
+import { Text, TouchableOpacity } from 'react-native';
+import { BottomSheetFlatList } from '@gorhom/bottom-sheet';
+import { FlatList as GHFlatList } from 'react-native-gesture-handler';
 
 import shortnameToUnicode from '../../lib/methods/helpers/shortnameToUnicode';
 import styles from './styles';
@@ -10,7 +12,7 @@ import { IEmoji, IEmojiCategory } from '../../definitions/IEmoji';
 const MAX_EMOJI_SIZE = 50;
 
 const renderEmoji = (emoji: IEmoji, size: number, baseUrl: string) => {
-	if (emoji && emoji.isCustom) {
+	if (emoji?.isCustom || emoji?.name) {
 		return (
 			<CustomEmoji
 				style={[styles.customCategoryEmoji, { height: size - 16, width: size - 16 }]}
@@ -26,16 +28,21 @@ const renderEmoji = (emoji: IEmoji, size: number, baseUrl: string) => {
 	);
 };
 
-const EmojiCategory = React.memo(({ baseUrl, onEmojiSelected, emojis, width, tabsCount, ...props }: IEmojiCategory) => {
+const EmojiCategory = React.memo(
+	({ baseUrl, onEmojiSelected, emojis, width, tabsCount, isBottomSheet, ...props }: IEmojiCategory) => {
 		const emojiSize = width ? Math.min(width / tabsCount, MAX_EMOJI_SIZE) : MAX_EMOJI_SIZE;
 		const numColumns = Math.trunc(width ? width / emojiSize : tabsCount);
+
+		const FlatList = isBottomSheet ? BottomSheetFlatList : GHFlatList;
+
 		const renderItem = (emoji: IEmoji) => (
 			<TouchableOpacity
 				activeOpacity={0.7}
 				// @ts-ignore
 				key={emoji && emoji.isCustom ? emoji.content : emoji}
 				onPress={() => onEmojiSelected(emoji)}
-			testID={`reaction-picker-${emoji && emoji.isCustom ? emoji.content : emoji}`}>
+				testID={`reaction-picker-${emoji && emoji.isCustom ? emoji.content : emoji}`}
+			>
 				{renderEmoji(emoji, emojiSize, baseUrl)}
 			</TouchableOpacity>
 		);
@@ -60,6 +67,7 @@ const EmojiCategory = React.memo(({ baseUrl, onEmojiSelected, emojis, width, tab
 				keyboardDismissMode={'none'}
 			/>
 		);
-});
+	}
+);
 
 export default EmojiCategory;

app/containers/EmojiPicker/TabBar.tsx

@@ -14,19 +14,11 @@ const TabBar = React.memo(({ activeTab, tabs, goToPage, tabEmojiStyle }: ITabBar
 				<TouchableOpacity
 					activeOpacity={0.7}
 					key={tab}
-					onPress={() => {
+					onPress={() => goToPage?.(i)}
-						if (goToPage) {
-							goToPage(i);
-						}
-					}}
 					style={styles.tab}
 					testID={`reaction-picker-${tab}`}>
 					<Text style={[styles.tabEmoji, tabEmojiStyle]}>{tab}</Text>
-					{activeTab === i ? (
+					<View style={activeTab === i ? [styles.activeTabLine, { backgroundColor: colors.tintColor }] : styles.tabLine} />
-						<View style={[styles.activeTabLine, { backgroundColor: colors.tintColor }]} />
-					) : (
-						<View style={styles.tabLine} />
-					)}
 				</TouchableOpacity>
 			))}
 		</View>

app/containers/EmojiPicker/index.tsx

@@ -19,14 +19,15 @@ import { IEmoji, ICustomEmojis, TFrequentlyUsedEmojiModel } from '../../definiti
 import { useAppSelector } from '../../lib/hooks';
 import { IEmojiPickerProps, EventTypes } from './interfaces';
 
-const EmojiPicker = React.memo(({ onItemClicked, tabEmojiStyle, isEmojiKeyboard = false }: IEmojiPickerProps) => {
+const EmojiPicker = React.memo(
+	({ onItemClicked, tabEmojiStyle, isEmojiKeyboard = false, searching = false, searchedEmojis = [] }: IEmojiPickerProps) => {
 		const [frequentlyUsed, setFrequentlyUsed] = useState<IEmoji[]>([]);
 		const [show, setShow] = useState(false);
 		const [width, setWidth] = useState(null);
 		const { colors } = useTheme();
 
+		const baseUrl = useAppSelector(state => state.server?.server);
 		const allCustomEmojis: ICustomEmojis = useAppSelector(state => state.customEmojis);
-	const baseUrl = useAppSelector(state=>state.server?.server)
 		const customEmojis = Object.keys(allCustomEmojis)
 			.filter(item => item === allCustomEmojis[item].name)
 			.map(item => ({
@@ -56,7 +57,7 @@ const EmojiPicker = React.memo(({ onItemClicked, tabEmojiStyle, isEmojiKeyboard
 					const content = emoji;
 					_addFrequentlyUsed({ content, isCustom: false });
 					const shortname = `:${emoji}:`;
-				onItemClicked(EventTypes.EMOJI_PRESSED, shortnameToUnicode(shortname));
+					onItemClicked(EventTypes.EMOJI_PRESSED, shortnameToUnicode(shortname), shortname);
 				}
 			} catch (e) {
 				log(e);
@@ -127,6 +128,7 @@ const EmojiPicker = React.memo(({ onItemClicked, tabEmojiStyle, isEmojiKeyboard
 					baseUrl={baseUrl}
 					tabLabel={label}
 					tabsCount={tabsCount}
+					isBottomSheet={!isEmojiKeyboard}
 				/>
 			);
 		};
@@ -139,19 +141,33 @@ const EmojiPicker = React.memo(({ onItemClicked, tabEmojiStyle, isEmojiKeyboard
 
 		return (
 			<View onLayout={onLayout} style={{ flex: 1 }}>
+				{searching ? (
+					<EmojiCategory
+						emojis={searchedEmojis as IEmoji[]}
+						onEmojiSelected={(emoji: IEmoji) => handleEmojiSelect(emoji)}
+						style={styles.categoryContainer}
+						width={width}
+						baseUrl={baseUrl}
+						tabLabel={'searching'}
+						tabsCount={tabsCount}
+						isBottomSheet={!isEmojiKeyboard}
+					/>
+				) : (
 					<ScrollableTabView
 						renderTabBar={() => <TabBar tabEmojiStyle={tabEmojiStyle} />}
 						contentProps={{
 							keyboardShouldPersistTaps: 'always',
 							keyboardDismissMode: 'none'
 						}}
-				style={{ backgroundColor: colors.focusedBackground }}>
+						style={{ backgroundColor: colors.focusedBackground }}
+					>
 						{categories.tabs.map((tab: any, i) =>
 							i === 0 && frequentlyUsed.length === 0
 								? null // when no frequentlyUsed don't show the tab
 								: renderCategory(tab.category, i, tab.tabLabel, tabsCount)
 						)}
 					</ScrollableTabView>
+				)}
 				{isEmojiKeyboard && (
 					<Footer
 						onSearchPressed={() => onItemClicked(EventTypes.SEARCH_PRESSED)}
@@ -160,6 +176,7 @@ const EmojiPicker = React.memo(({ onItemClicked, tabEmojiStyle, isEmojiKeyboard
 				)}
 			</View>
 		);
-});
+	}
+);
 
 export default EmojiPicker;

app/containers/EmojiPicker/interfaces.ts

@@ -1,5 +1,7 @@
 import { StyleProp, TextStyle } from 'react-native';
 
+import { IEmoji } from '../../definitions';
+
 export enum EventTypes {
 	EMOJI_PRESSED = 'emojiPressed',
 	BACKSPACE_PRESSED = 'backspacePressed',
@@ -7,9 +9,11 @@ export enum EventTypes {
 }
 
 export interface IEmojiPickerProps {
-	onItemClicked: (event: EventTypes, emoji?: string) => void;
+	onItemClicked: (event: EventTypes, emoji?: string, shortname?: string) => void;
 	tabEmojiStyle?: StyleProp<TextStyle>;
 	isEmojiKeyboard?: boolean;
+	searching?: boolean;
+	searchedEmojis?: (string | IEmoji)[];
 }
 
 export interface IFooterProps {

app/containers/MessageBox/EmojiSearchbar.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { View, Text, TouchableOpacity, TextInput, FlatList } from 'react-native';
 import { orderBy } from 'lodash';
 
-import FormTextInput from '../TextInput/FormTextInput';
+import { FormTextInput } from '../TextInput/FormTextInput';
 import { useTheme } from '../../theme';
 import I18n from '../../i18n';
 import { CustomIcon } from '../CustomIcon';
@@ -31,7 +31,7 @@ const renderEmoji = (emoji: IEmoji, size: number, baseUrl: string) => {
 
 const EmojiSearchbar = React.forwardRef<TextInput, IEmojiSearchbarProps>(
 	({ openEmoji, onChangeText, emojis, onEmojiSelected, baseUrl }, ref) => {
-		const { colors, theme } = useTheme();
+		const { colors } = useTheme();
 		const [searchText, setSearchText] = useState<string>('');
 		const [frequentlyUsed, setFrequentlyUsed] = useState([]);
 
@@ -103,7 +103,6 @@ const EmojiSearchbar = React.forwardRef<TextInput, IEmojiSearchbarProps>(
 							style={[styles.emojiSearchbar, { backgroundColor: colors.passcodeButtonActive }]}
 							containerStyle={styles.textInputContainer}
 							value={searchText}
-							theme={theme}
 							onClearInput={() => handleTextChange('')}
 							iconRight={'search'}
 						/>

app/definitions/IEmoji.ts

@@ -36,6 +36,7 @@ export interface IEmojiCategory {
 	style: StyleProp<ImageStyle>;
 	tabLabel: string;
 	tabsCount: number;
+	isBottomSheet: boolean;
 }
 
 export type TGetCustomEmoji = (name: string) => any;

app/views/RoomView/ReactionPicker.tsx

@@ -1,87 +1,86 @@
 import React from 'react';
 import { View } from 'react-native';
-import { connect } from 'react-redux';
+import { Q } from '@nozbe/watermelondb';
-import Modal from 'react-native-modal';
 
 import EmojiPicker from '../../containers/EmojiPicker';
-import { isAndroid } from '../../lib/methods/helpers';
+import { useTheme } from '../../theme';
-import { themes } from '../../lib/constants';
-import { TSupportedThemes, withTheme } from '../../theme';
 import styles from './styles';
-import { IApplicationState } from '../../definitions';
 import { EventTypes } from '../../containers/EmojiPicker/interfaces';
-
+import { FormTextInput } from '../../containers/TextInput/FormTextInput';
-const margin = isAndroid ? 40 : 20;
+import I18n from '../../i18n';
-const maxSize = 400;
+import { sanitizeLikeString } from '../../lib/database/utils';
+import { emojis } from '../../containers/EmojiPicker/emojis';
+import database from '../../lib/database';
+import { debounce } from '../../lib/methods/helpers/debounce';
 
 interface IReactionPickerProps {
 	message?: any;
 	show: boolean;
-	isMasterDetail: boolean;
 	reactionClose: () => void;
 	onEmojiSelected: (shortname: string, id: string) => void;
 	width: number;
 	height: number;
-	theme: TSupportedThemes;
 }
 
-class ReactionPicker extends React.Component<IReactionPickerProps> {
+const MAX_EMOJIS_TO_DISPLAY = 20;
-	shouldComponentUpdate(nextProps: IReactionPickerProps) {
-		const { show, width, height } = this.props;
-		return nextProps.show !== show || width !== nextProps.width || height !== nextProps.height;
-	}
 
-	onEmojiSelected = (_eventType: EventTypes, emoji?: string, shortname?: string) => {
+const ReactionPicker = React.memo(({ onEmojiSelected, message, reactionClose }: IReactionPickerProps) => {
+	const { colors } = useTheme();
+	const [searchText, setSearchText] = React.useState<string>('');
+	const [searchedEmojis, setSearchedEmojis] = React.useState<any[]>([]);
+	const [searching, setSearching] = React.useState<boolean>(false);
+
+	const handleTextChange = (text: string) => {
+		setSearching(text !== '');
+		setSearchText(text);
+		searchEmojis(text);
+	};
+
+	const searchEmojis = debounce(async (keyword: string) => {
+		const likeString = sanitizeLikeString(keyword);
+		const whereClause = [];
+		if (likeString) {
+			whereClause.push(Q.where('name', Q.like(`${likeString}%`)));
+		}
+		const db = database.active;
+		const customEmojisCollection = db.get('custom_emojis');
+		const customEmojis = await (await customEmojisCollection.query(...whereClause).fetch()).slice(0, MAX_EMOJIS_TO_DISPLAY / 2);
+		const filteredEmojis = emojis.filter(emoji => emoji.indexOf(keyword) !== -1).slice(0, MAX_EMOJIS_TO_DISPLAY / 2);
+		const mergedEmojis = [...customEmojis, ...filteredEmojis];
+		setSearchedEmojis(mergedEmojis);
+	}, 300);
+
+	const handleEmojiSelect = (_eventType: EventTypes, emoji?: string, shortname?: string) => {
 		// standard emojis: `emoji` is unicode and `shortname` is :joy:
 		// custom emojis: only `emoji` is returned with shortname type (:joy:)
 		// to set reactions, we need shortname type
-		const { onEmojiSelected, message } = this.props;
 		if (message) {
 			// @ts-ignore
 			onEmojiSelected(shortname || emoji, message.id);
 		}
+		reactionClose();
 	};
 
-	render() {
+	return (
-		const { width, height, show, reactionClose, isMasterDetail, theme } = this.props;
+		<View style={[styles.reactionPickerContainer]} testID='reaction-picker'>
-
+			<View style={styles.searchbarContainer}>
-		let widthStyle = width - margin;
+				<FormTextInput
-		let heightStyle = Math.min(width, height) - margin * 2;
+					autoCapitalize='none'
-
+					autoCorrect={false}
-		if (isMasterDetail) {
+					blurOnSubmit
-			widthStyle = maxSize;
+					placeholder={I18n.t('Search_emoji')}
-			heightStyle = maxSize;
+					returnKeyType='search'
-		}
+					underlineColorAndroid='transparent'
-
+					onChangeText={handleTextChange}
-		return show ? (
+					style={[styles.reactionPickerSearchbar, { backgroundColor: colors.passcodeButtonActive }]}
-			<Modal
+					value={searchText}
-				isVisible={show}
+					onClearInput={() => handleTextChange('')}
-				style={{ alignItems: 'center' }}
+					iconRight={'search'}
-				onBackdropPress={reactionClose}
+				/>
-				onBackButtonPress={reactionClose}
-				animationIn='fadeIn'
-				animationOut='fadeOut'
-				backdropOpacity={themes[theme].backdropOpacity}
-			>
-				<View
-					style={[
-						styles.reactionPickerContainer,
-						{
-							width: widthStyle,
-							height: heightStyle
-						}
-					]}
-					testID='reaction-picker'
-				>
-					<EmojiPicker onItemClicked={this.onEmojiSelected} />
 			</View>
-			</Modal>
+			<EmojiPicker onItemClicked={handleEmojiSelect} searching={searching} searchedEmojis={searchedEmojis} />
-		) : null;
+		</View>
-	}
+	);
-}
-
-const mapStateToProps = (state: IApplicationState) => ({
-	isMasterDetail: state.app.isMasterDetail
 });
 
-export default connect(mapStateToProps)(withTheme(ReactionPicker));
+export default ReactionPicker;

app/views/RoomView/index.tsx

@@ -828,12 +828,32 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 		this.setState({ selectedMessage: undefined, replying: false, replyWithMention: false });
 	};
 
+	showReactionPicker = () => {
+		const { showActionSheet, width, height } = this.props;
+		const { reacting, selectedMessage } = this.state;
+		showActionSheet &&
+			showActionSheet({
+				children: (
+					<ReactionPicker
+						show={reacting}
+						message={selectedMessage}
+						onEmojiSelected={this.onReactionPress}
+						reactionClose={this.onReactionClose}
+						width={width}
+						height={height}
+					/>
+				),
+				snaps: [400, '100%']
+			});
+	};
+
 	onReactionInit = (message: TAnyMessageModel) => {
-		this.setState({ selectedMessage: message, reacting: true });
+		this.setState({ selectedMessage: message }, this.showReactionPicker);
 	};
 
 	onReactionClose = () => {
-		this.setState({ selectedMessage: undefined, reacting: false });
+		const { hideActionSheet } = this.props;
+		this.setState({ selectedMessage: undefined, reacting: false }, hideActionSheet);
 	};
 
 	onMessageLongPress = (message: TAnyMessageModel) => {
@@ -1493,8 +1513,8 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 
 	render() {
 		console.count(`${this.constructor.name}.render calls`);
-		const { room, selectedMessage, loading, reacting } = this.state;
+		const { room, loading } = this.state;
-		const { user, baseUrl, theme, navigation, Hide_System_Messages, width, height, serverVersion } = this.props;
+		const { user, baseUrl, theme, navigation, Hide_System_Messages, width, serverVersion } = this.props;
 		const { rid, t } = room;
 		let sysMes;
 		let bannerClosed;
@@ -1526,15 +1546,6 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 				/>
 				{this.renderFooter()}
 				{this.renderActions()}
-				<ReactionPicker
-					show={reacting}
-					message={selectedMessage}
-					onEmojiSelected={this.onReactionPress}
-					reactionClose={this.onReactionClose}
-					width={width}
-					height={height}
-					theme={theme}
-				/>
 				<UploadProgress rid={rid} user={user} baseUrl={baseUrl} width={width} />
 				<JoinCode ref={this.joinCode} onJoin={this.onJoin} rid={rid} t={t} theme={theme} />
 			</SafeAreaView>

app/views/RoomView/styles.ts

@@ -15,9 +15,7 @@ export default StyleSheet.create({
 		marginVertical: 15
 	},
 	reactionPickerContainer: {
-		borderRadius: 4,
+		height: '100%'
-		flexDirection: 'column',
-		overflow: 'hidden'
 	},
 	bannerContainer: {
 		paddingVertical: 12,
@@ -64,5 +62,12 @@ export default StyleSheet.create({
 	previewMode: {
 		fontSize: 16,
 		...sharedStyles.textMedium
+	},
+	searchbarContainer: {
+		marginBottom: 10,
+		paddingHorizontal: 15
+	},
+	reactionPickerSearchbar: {
+		paddingHorizontal: 20
 	}
 });