[FIX] Keyboard not showing all emojis or showing cut emojis (#4919)

* fix the logic based on window width and make the keyboard dynamic

* fix var naming and math

* fix alignment of emojis

* add comment

* wip

app/containers/EmojiPicker/EmojiCategory.tsx

@@ -1,34 +1,31 @@
 import React from 'react';
-import { useWindowDimensions } from 'react-native';
 import { FlatList } from 'react-native-gesture-handler';
 
-import { EMOJI_BUTTON_SIZE } from './styles';
-import scrollPersistTaps from '../../lib/methods/helpers/scrollPersistTaps';
 import { IEmoji } from '../../definitions/IEmoji';
+import scrollPersistTaps from '../../lib/methods/helpers/scrollPersistTaps';
 import { PressableEmoji } from './PressableEmoji';
+import { EMOJI_BUTTON_SIZE } from './styles';
 
 interface IEmojiCategoryProps {
 	emojis: IEmoji[];
 	onEmojiSelected: (emoji: IEmoji) => void;
 	tabLabel?: string; // needed for react-native-scrollable-tab-view only
+	parentWidth: number;
 }
 
-const EmojiCategory = ({ onEmojiSelected, emojis }: IEmojiCategoryProps): React.ReactElement | null => {
-	const { width } = useWindowDimensions();
-
-	const numColumns = Math.trunc(width / EMOJI_BUTTON_SIZE);
-	const marginHorizontal = (width % EMOJI_BUTTON_SIZE) / 2;
-
-	const renderItem = ({ item }: { item: IEmoji }) => <PressableEmoji emoji={item} onPress={onEmojiSelected} />;
-
-	if (!width) {
+const EmojiCategory = ({ onEmojiSelected, emojis, parentWidth }: IEmojiCategoryProps): React.ReactElement | null => {
+	if (!parentWidth) {
 		return null;
 	}
 
+	const numColumns = Math.trunc(parentWidth / EMOJI_BUTTON_SIZE);
+	const marginHorizontal = (parentWidth % EMOJI_BUTTON_SIZE) / 2;
+
+	const renderItem = ({ item }: { item: IEmoji }) => <PressableEmoji emoji={item} onPress={onEmojiSelected} />;
+
 	return (
 		<FlatList
-			// needed to update the numColumns when the width changes
-			key={`emoji-category-${width}`}
+			key={`emoji-category-${parentWidth}`}
 			keyExtractor={item => (typeof item === 'string' ? item : item.name)}
 			data={emojis}
 			renderItem={renderItem}

app/containers/EmojiPicker/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { View } from 'react-native';
 import ScrollableTabView from 'react-native-scrollable-tab-view';
 
@@ -20,6 +20,8 @@ const EmojiPicker = ({
 	searchedEmojis = []
 }: IEmojiPickerProps): React.ReactElement | null => {
 	const { colors } = useTheme();
+	const [parentWidth, setParentWidth] = useState(0);
+
 	const { frequentlyUsed, loaded } = useFrequentlyUsedEmoji();
 
 	const allCustomEmojis: ICustomEmojis = useAppSelector(
@@ -50,7 +52,14 @@ const EmojiPicker = ({
 		if (!emojis.length) {
 			return null;
 		}
-		return <EmojiCategory emojis={emojis} onEmojiSelected={(emoji: IEmoji) => handleEmojiSelect(emoji)} tabLabel={label} />;
+		return (
+			<EmojiCategory
+				parentWidth={parentWidth}
+				emojis={emojis}
+				onEmojiSelected={(emoji: IEmoji) => handleEmojiSelect(emoji)}
+				tabLabel={label}
+			/>
+		);
 	};
 
 	if (!loaded) {
@@ -58,9 +67,13 @@ const EmojiPicker = ({
 	}
 
 	return (
-		<View style={styles.emojiPickerContainer}>
+		<View style={styles.emojiPickerContainer} onLayout={e => setParentWidth(e.nativeEvent.layout.width)}>
 			{searching ? (
-				<EmojiCategory emojis={searchedEmojis} onEmojiSelected={(emoji: IEmoji) => handleEmojiSelect(emoji)} />
+				<EmojiCategory
+					emojis={searchedEmojis}
+					onEmojiSelected={(emoji: IEmoji) => handleEmojiSelect(emoji)}
+					parentWidth={parentWidth}
+				/>
 			) : (
 				<ScrollableTabView
 					renderTabBar={() => <TabBar />}

app/containers/message/MessageAvatar.tsx

@@ -18,7 +18,7 @@ const MessageAvatar = React.memo(({ isHeader, avatar, author, small, navToRoomIn
 				style={small ? styles.avatarSmall : styles.avatar}
 				text={avatar ? '' : author.username}
 				size={small ? 20 : 36}
-				borderRadius={small ? 2 : 4}
+				borderRadius={4}
 				onPress={author._id === user.id ? undefined : () => navToRoomInfo(navParam)}
 				getCustomEmoji={getCustomEmoji}
 				avatar={avatar}

app/containers/message/Reply.tsx

@@ -247,6 +247,8 @@ const Reply = React.memo(
 				>
 					<View style={styles.attachmentContainer}>
 						<Title attachment={attachment} timeFormat={timeFormat} theme={theme} />
+						<Description attachment={attachment} getCustomEmoji={getCustomEmoji} theme={theme} />
+						<UrlImage image={attachment.thumb_url} />
 						<Attachments
 							attachments={attachment.attachments}
 							getCustomEmoji={getCustomEmoji}
@@ -255,8 +257,6 @@ const Reply = React.memo(
 							isReply
 							id={messageId}
 						/>
-						<UrlImage image={attachment.thumb_url} />
-						<Description attachment={attachment} getCustomEmoji={getCustomEmoji} theme={theme} />
 						<Fields attachment={attachment} getCustomEmoji={getCustomEmoji} theme={theme} />
 						{loading ? (
 							<View style={[styles.backdrop]}>

app/definitions/ISubscription.ts

@@ -102,7 +102,6 @@ export interface ISubscription {
 	onHold?: boolean;
 	source?: IOmnichannelSource;
 	hideMentionStatus?: boolean;
-	usersCount?: number;
 	// https://nozbe.github.io/WatermelonDB/Relation.html#relation-api
 	messages: RelationModified<TMessageModel>;
 	threads: RelationModified<TThreadModel>;

app/lib/database/model/Subscription.js

@@ -137,7 +137,5 @@ export default class Subscription extends Model {
 
 	@field('on_hold') onHold;
 
-	@field('users_count') usersCount;
-
 	@json('source', sanitizer) source;
 }

app/lib/database/model/migrations.js

@@ -257,15 +257,6 @@ export default schemaMigrations({
 					columns: [{ name: 'e2e_suggested_key', type: 'string', isOptional: true }]
 				})
 			]
-		},
-		{
-			toVersion: 21,
-			steps: [
-				addColumns({
-					table: 'subscriptions',
-					columns: [{ name: 'users_count', type: 'string', isOptional: true }]
-				})
-			]
 		}
 	]
 });

app/lib/database/schema/app.js

@@ -1,7 +1,7 @@
 import { appSchema, tableSchema } from '@nozbe/watermelondb';
 
 export default appSchema({
-	version: 21,
+	version: 20,
 	tables: [
 		tableSchema({
 			name: 'subscriptions',
@@ -63,8 +63,7 @@ export default appSchema({
 				{ name: 'team_main', type: 'boolean', isOptional: true }, // Use `Q.notEq(true)` to get false or null
 				{ name: 'on_hold', type: 'boolean', isOptional: true },
 				{ name: 'source', type: 'string', isOptional: true },
-				{ name: 'hide_mention_status', type: 'boolean', isOptional: true },
-				{ name: 'users_count', type: 'number', isOptional: true }
+				{ name: 'hide_mention_status', type: 'boolean', isOptional: true }
 			]
 		}),
 		tableSchema({

app/lib/methods/helpers/mergeSubscriptionsRooms.ts

@@ -85,9 +85,6 @@ export const merge = (
 		if (room && 'source' in room) {
 			mergedSubscription.source = room?.source;
 		}
-		if (room && 'usersCount' in room) {
-			mergedSubscription.usersCount = room.usersCount;
-		}
 	}
 
 	if (!mergedSubscription.name) {

app/views/RoomActionsView/index.tsx

@@ -85,7 +85,7 @@ interface IRoomActionsViewProps extends IActionSheetProvider, IBaseScreen<ChatsS
 
 interface IRoomActionsViewState {
 	room: TSubscriptionModel;
-	membersCount?: number;
+	membersCount: number;
 	member: Partial<IUser>;
 	joined: boolean;
 	canViewMembers: boolean;
@@ -152,7 +152,7 @@ class RoomActionsView extends React.Component<IRoomActionsViewProps, IRoomAction
 			this.roomObservable = room.observe();
 			this.subscription = this.roomObservable.subscribe(changes => {
 				if (this.mounted) {
-					this.setState({ room: changes, membersCount: changes.usersCount });
+					this.setState({ room: changes });
 				} else {
 					// @ts-ignore
 					this.state.room = changes;
@@ -1050,7 +1050,7 @@ class RoomActionsView extends React.Component<IRoomActionsViewProps, IRoomAction
 							<>
 								<List.Item
 									title='Members'
-									subtitle={membersCount && membersCount > 0 ? `${membersCount} ${I18n.t('members')}` : undefined}
+									subtitle={membersCount > 0 ? `${membersCount} ${I18n.t('members')}` : undefined}
 									onPress={() => this.onPressTouchable({ route: 'RoomMembersView', params: { rid, room, joined: this.joined } })}
 									testID='room-actions-members'
 									left={() => <List.Icon name='team' />}