Chore: Evaluate Icon - Typescript (#3982)

Co-authored-by: Diego Mello <diegolmello@gmail.com>

app/containers/ActionSheet/Item.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Text, View } from 'react-native';
 
 import { themes } from '../../lib/constants';
-import { CustomIcon } from '../../lib/Icons';
+import { CustomIcon, TIconsName } from '../CustomIcon';
 import { useTheme } from '../../theme';
 import { Button } from './Button';
 import styles from './styles';
@@ -10,7 +10,7 @@ import styles from './styles';
 export interface IActionSheetItem {
 	item: {
 		title: string;
-		icon: string;
+		icon: TIconsName;
 		danger?: boolean;
 		testID?: string;
 		onPress: () => void;

app/containers/ActionSheet/Provider.tsx

@@ -1,8 +1,9 @@
 import React, { ForwardedRef, forwardRef, useContext, useRef } from 'react';
 
 import ActionSheet from './ActionSheet';
+import { TIconsName } from '../CustomIcon';
 
-export type TActionSheetOptionsItem = { title: string; icon: string; onPress: () => void; danger?: boolean };
+export type TActionSheetOptionsItem = { title: string; icon: TIconsName; onPress: () => void; danger?: boolean };
 
 export type TActionSheetOptions = {
 	options: TActionSheetOptionsItem[];

app/containers/Check.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { StyleSheet } from 'react-native';
 
-import { CustomIcon } from '../lib/Icons';
+import { CustomIcon } from './CustomIcon';
 import { themes } from '../lib/constants';
 import { useTheme } from '../theme';
 

app/containers/CustomIcon/index.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
+import { TextProps } from 'react-native';
+
+import { mappedIcons } from './mappedIcons';
+
+const icoMoonConfig = require('./selection.json');
+
+export const IconSet = createIconSetFromIcoMoon(icoMoonConfig, 'custom', 'custom.ttf');
+
+export type TIconsName = keyof typeof mappedIcons;
+
+interface ICustomIcon extends TextProps {
+	name: TIconsName;
+	size: number;
+	color: string;
+}
+
+const CustomIcon = ({ name, size, color, testID, ...props }: ICustomIcon) => (
+	// @ts-ignore TODO remove this after update @types/react-native to 0.65.0
+	<IconSet name={name} size={size} color={color} {...props} />
+);
+export { CustomIcon };

app/containers/CustomIcon/mappedIcons.js

@@ -0,0 +1,202 @@
+export const mappedIcons = {
+	attach: 59676,
+	link: 59752,
+	'status-away': 59741,
+	'status-busy': 59742,
+	'status-loading': 59743,
+	'status-offline': 59744,
+	'status-online': 59745,
+	'teams-private': 59750,
+	'channel-auto-join': 59746,
+	'channel-move-to-team': 59747,
+	'lock-filled': 59748,
+	locker: 59749,
+	teams: 59751,
+	shield: 59661,
+	ignore: 59740,
+	'checkbox-unchecked': 59648,
+	'checkbox-checked': 59649,
+	'github-monochromatic': 59650,
+	'gitlab-monochromatic': 59651,
+	'google-monochromatic': 59652,
+	'linkedin-monochromatic': 59653,
+	'meteor-monochromatic': 59654,
+	'twitter-monochromatic': 59655,
+	administration: 59657,
+	'adobe-reader-monochromatic': 59658,
+	'all-contacts-in-channels': 59659,
+	'all-contacts-in-queue': 59660,
+	'apple-monochromatic': 59662,
+	apps: 59663,
+	'arrow-back': 59664,
+	'arrow-collapse': 59665,
+	'arrow-decrease': 59666,
+	'arrow-down-box': 59667,
+	'arrow-down-circle': 59668,
+	'arrow-down': 59669,
+	'arrow-expand': 59670,
+	'arrow-increase': 59671,
+	'arrow-looping': 59672,
+	'arrow-return': 59673,
+	'arrow-up-box': 59674,
+	'arrow-up': 59675,
+	'audio-disabled': 59677,
+	'audio-unavailable': 59678,
+	audio: 59679,
+	auditing: 59680,
+	auth: 59681,
+	avatar: 59682,
+	backspace: 59683,
+	bold: 59684,
+	book: 59685,
+	business: 59686,
+	calendar: 59687,
+	'camera-disabled': 59688,
+	'camera-filled': 59689,
+	'camera-photo': 59690,
+	'camera-unavailable': 59691,
+	camera: 59692,
+	'canned-response': 59693,
+	card: 59694,
+	'channel-private': 59695,
+	'channel-public': 59696,
+	'chat-close': 59697,
+	'chat-forward': 59698,
+	check: 59699,
+	'chevron-down': 59700,
+	'chevron-left-big': 59701,
+	'chevron-left': 59702,
+	'chevron-right': 59703,
+	'chevron-up': 59704,
+	'circle-check': 59705,
+	clipboard: 59706,
+	clock: 59707,
+	close: 59708,
+	'cloud-connectivity': 59709,
+	code: 59710,
+	contacts: 59711,
+	copy: 59712,
+	create: 59713,
+	dashboard: 59714,
+	delete: 59715,
+	desktop: 59716,
+	dialpad: 59717,
+	'directory-disabled': 59718,
+	directory: 59719,
+	discussions: 59720,
+	document: 59721,
+	donner: 59722,
+	download: 59723,
+	edit: 59724,
+	'emoji-bad-mood': 59725,
+	'emoji-neutral-mood': 59726,
+	emoji: 59727,
+	encrypted: 59728,
+	'engagement-dashboard': 59729,
+	'enterprise-feature': 59730,
+	'facebook-monochromatic': 59731,
+	'file-document': 59732,
+	'file-sheet': 59733,
+	filter: 59734,
+	fingerprint: 59735,
+	flag: 59736,
+	folder: 59737,
+	game: 59738,
+	'giphy-monochromatic': 59739,
+	'google-drive-monochromatic': 59756,
+	'group-by-type': 59757,
+	hamburguer: 59758,
+	history: 59759,
+	home: 59760,
+	image: 59761,
+	info: 59762,
+	'input-clear': 59763,
+	instance: 59764,
+	italic: 59765,
+	'jump-backward': 59766,
+	'jump-forward': 59767,
+	'jump-to-message': 59768,
+	kebab: 59769,
+	keyboard: 59770,
+	language: 59771,
+	'live-streaming': 59773,
+	live: 59774,
+	'livechat-monochromatic': 59775,
+	'log-view': 59778,
+	login: 59779,
+	logout: 59780,
+	mail: 59781,
+	marketplace: 59782,
+	meatballs: 59783,
+	mention: 59784,
+	'message-disabled': 59785,
+	message: 59786,
+	'microphone-disabled': 59787,
+	microphone: 59788,
+	mobile: 59789,
+	moon: 59790,
+	'move-to-the-queue': 59791,
+	'musical-note': 59792,
+	'new-window': 59793,
+	'notification-disabled': 59794,
+	notification: 59795,
+	omnichannel: 59796,
+	order: 59797,
+	'ordering-ascending': 59798,
+	'ordering-descending': 59800,
+	'pause-filled': 59802,
+	pause: 59803,
+	'phone-disabled': 59804,
+	'phone-end': 59805,
+	phone: 59806,
+	'pin-map': 59807,
+	pin: 59808,
+	Pipe: 59809,
+	'play-filled': 59810,
+	play: 59811,
+	prune: 59817,
+	queue: 59818,
+	quote: 59819,
+	'reaction-add': 59820,
+	record: 59821,
+	refresh: 59822,
+	search: 59823,
+	'send-filled': 59824,
+	send: 59825,
+	settings: 59826,
+	share: 59827,
+	'shield-check': 59828,
+	'shield-alt': 59829,
+	signal: 59830,
+	'sort-az': 59831,
+	sort: 59832,
+	'star-filled': 59833,
+	star: 59834,
+	strike: 59846,
+	sun: 59847,
+	support: 59848,
+	team: 59849,
+	threads: 59850,
+	total: 59851,
+	transcript: 59852,
+	underline: 59853,
+	undo: 59854,
+	Unlimited: 59855,
+	'unread-on-top-disabled': 59856,
+	'unread-on-top': 59857,
+	upload: 59858,
+	'user-add': 59859,
+	'user-forward': 59860,
+	user: 59861,
+	'view-condensed': 59862,
+	'view-extended': 59863,
+	'view-medium': 59864,
+	'waiting-on-me': 59865,
+	warning: 59866,
+	'whatsapp-monochromatic': 59868,
+	'wordpress-monochromatic': 59656,
+	workspaces: 59870,
+	zip: 59871,
+	add: 59872,
+	sms: 59753
+};

app/containers/HeaderButton/HeaderButtonItem.tsx

@@ -2,14 +2,14 @@ import React from 'react';
 import { Platform, StyleSheet, Text } from 'react-native';
 import Touchable from 'react-native-platform-touchable';
 
-import { CustomIcon } from '../../lib/Icons';
+import { CustomIcon, TIconsName } from '../CustomIcon';
 import { useTheme } from '../../theme';
 import { themes } from '../../lib/constants';
 import sharedStyles from '../../views/Styles';
 
 interface IHeaderButtonItem {
 	title?: string;
-	iconName?: string;
+	iconName?: TIconsName;
 	onPress?: <T>(arg: T) => void;
 	testID?: string;
 	badge?(): void;

app/containers/InAppNotification/NotifierComponent.tsx

@@ -6,7 +6,7 @@ import { Notifier } from 'react-native-notifier';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import Avatar from '../Avatar';
-import { CustomIcon } from '../../lib/Icons';
+import { CustomIcon } from '../CustomIcon';
 import sharedStyles from '../../views/Styles';
 import { themes } from '../../lib/constants';
 import { useTheme } from '../../theme';
@@ -136,7 +136,7 @@ const NotifierComponent = React.memo(({ notification, isMasterDetail }: INotifie
 				</>
 			</Touchable>
 			<Touchable onPress={hideNotification} hitSlop={BUTTON_HIT_SLOP} background={Touchable.SelectableBackgroundBorderless()}>
-				<CustomIcon name='close' style={[styles.close, { color: themes[theme].titleText }]} size={20} />
+				<CustomIcon name='close' size={20} color={themes[theme].titleText} style={styles.close} />
 			</Touchable>
 		</View>
 	);

app/containers/List/ListIcon.tsx

@@ -2,12 +2,12 @@ import React from 'react';
 import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 
 import { themes } from '../../lib/constants';
-import { CustomIcon } from '../../lib/Icons';
+import { CustomIcon, TIconsName } from '../CustomIcon';
 import { useTheme } from '../../theme';
 import { ICON_SIZE } from './constants';
 
 interface IListIcon {
-	name: string;
+	name: TIconsName;
 	color?: string | null;
 	style?: StyleProp<ViewStyle>;
 	testID?: string;

app/containers/List/ListItem.tsx

@@ -9,7 +9,7 @@ import I18n from '../../i18n';
 import { Icon } from '.';
 import { BASE_HEIGHT, ICON_SIZE, PADDING_HORIZONTAL } from './constants';
 import { useDimensions } from '../../dimensions';
-import { CustomIcon } from '../../lib/Icons';
+import { CustomIcon } from '../CustomIcon';
 
 const styles = StyleSheet.create({
 	container: {
@@ -100,7 +100,7 @@ const Content = React.memo(
 							{translateTitle && title ? I18n.t(title) : title}
 						</Text>
 						{alert ? (
-							<CustomIcon style={[styles.alertIcon, { color: themes[theme].dangerColor }]} size={ICON_SIZE} name='info' />
+							<CustomIcon name='info' size={ICON_SIZE} color={themes[theme].dangerColor} style={styles.alertIcon} />
 						) : null}
 					</View>
 					{subtitle ? (

app/containers/LoginServices.tsx

@@ -14,7 +14,7 @@ import Touch from '../utils/touch';
 import I18n from '../i18n';
 import random from '../utils/random';
 import { events, logEvent } from '../utils/log';
-import { CustomIcon } from '../lib/Icons';
+import { CustomIcon, TIconsName } from './CustomIcon';
 import { IServices } from '../selectors/login';
 import { OutsideParamList } from '../stacks/types';
 import { IApplicationState } from '../definitions';
@@ -345,7 +345,7 @@ class LoginServices extends React.PureComponent<ILoginServicesProps, ILoginServi
 		const { CAS_enabled, theme } = this.props;
 		let { name } = service;
 		name = name === 'meteor-developer' ? 'meteor' : name;
-		const icon = `${name}-monochromatic`;
+		const icon = `${name}-monochromatic` as TIconsName;
 		const isSaml = service.service === 'saml';
 		let onPress = () => {};
 

app/containers/MessageActions/Header.tsx

@@ -3,7 +3,7 @@ import { FlatList, StyleSheet, Text, View } from 'react-native';
 
 import { TSupportedThemes, useTheme } from '../../theme';
 import { themes } from '../../lib/constants';
-import { CustomIcon } from '../../lib/Icons';
+import { CustomIcon } from '../CustomIcon';
 import shortnameToUnicode from '../../utils/shortnameToUnicode';
 import CustomEmoji from '../EmojiPicker/CustomEmoji';
 import database from '../../lib/database';

app/containers/MessageBox/CommandsPreview/Item.tsx

@@ -3,7 +3,7 @@ import React, { useContext, useState } from 'react';
 import { TouchableOpacity } from 'react-native';
 
 import { themes } from '../../../lib/constants';
-import { CustomIcon } from '../../../lib/Icons';
+import { CustomIcon } from '../../CustomIcon';
 import { useTheme } from '../../../theme';
 import ActivityIndicator from '../../ActivityIndicator';
 import MessageboxContext from '../Context';

app/containers/MessageBox/Mentions/MentionHeaderList.tsx

@@ -3,7 +3,7 @@ import { ActivityIndicator, Text, TouchableOpacity, View } from 'react-native';
 
 import { themes } from '../../../lib/constants';
 import I18n from '../../../i18n';
-import { CustomIcon } from '../../../lib/Icons';
+import { CustomIcon } from '../../CustomIcon';
 import { useTheme } from '../../../theme';
 import sharedStyles from '../../../views/Styles';
 import MessageboxContext from '../Context';

app/containers/MessageBox/RecordAudio.tsx

@@ -8,7 +8,7 @@ import { activateKeepAwake, deactivateKeepAwake } from 'expo-keep-awake';
 import styles from './styles';
 import I18n from '../../i18n';
 import { themes } from '../../lib/constants';
-import { CustomIcon } from '../../lib/Icons';
+import { CustomIcon } from '../CustomIcon';
 import { events, logEvent } from '../../utils/log';
 import { TSupportedThemes } from '../../theme';
 

app/containers/MessageBox/ReplyPreview.tsx

@@ -4,7 +4,7 @@ import moment from 'moment';
 import { connect } from 'react-redux';
 
 import { MarkdownPreview } from '../markdown';
-import { CustomIcon } from '../../lib/Icons';
+import { CustomIcon } from '../CustomIcon';
 import sharedStyles from '../../views/Styles';
 import { themes } from '../../lib/constants';
 import { IMessage } from '../../definitions/IMessage';

app/containers/MessageBox/buttons/BaseButton.tsx

@@ -4,7 +4,7 @@ import { View } from 'react-native';
 
 import styles from '../styles';
 import i18n from '../../../i18n';
-import { CustomIcon } from '../../../lib/Icons';
+import { CustomIcon, TIconsName } from '../../CustomIcon';
 import { useTheme } from '../../../theme';
 import { themes } from '../../../lib/constants';
 
@@ -12,11 +12,11 @@ interface IBaseButton {
 	onPress(): void;
 	testID: string;
 	accessibilityLabel: string;
-	icon: string;
+	icon: TIconsName;
-	color: string;
+	color?: string;
 }
 
-const BaseButton = ({ accessibilityLabel, icon, color, ...props }: Partial<IBaseButton>) => {
+const BaseButton = ({ accessibilityLabel, icon, color, ...props }: IBaseButton) => {
 	const { theme } = useTheme();
 	return (
 		<BorderlessButton {...props} style={styles.actionButton}>

app/containers/MessageBox/index.tsx

@@ -46,7 +46,7 @@ import { getUserSelector } from '../../selectors/login';
 import Navigation from '../../lib/navigation/appNavigation';
 import { withActionSheet } from '../ActionSheet';
 import { sanitizeLikeString } from '../../lib/database/utils';
-import { CustomIcon } from '../../lib/Icons';
+import { CustomIcon } from '../CustomIcon';
 import { IMessage } from '../../definitions/IMessage';
 import { forceJpgExtension } from './forceJpgExtension';
 import { IBaseScreen, IPreviewItem, IUser, TSubscriptionModel, TThreadModel } from '../../definitions';

app/containers/Passcode/Base/Button.tsx

@@ -4,12 +4,12 @@ import { Text } from 'react-native';
 import styles from './styles';
 import { themes } from '../../../lib/constants';
 import Touch from '../../../utils/touch';
-import { CustomIcon } from '../../../lib/Icons';
+import { CustomIcon, TIconsName } from '../../CustomIcon';
 import { useTheme } from '../../../theme';
 
 interface IPasscodeButton {
 	text?: string;
-	icon?: string;
+	icon?: TIconsName;
 	disabled?: boolean;
 	onPress?: Function;
 }

app/containers/Passcode/Base/LockIcon.tsx

@@ -4,7 +4,7 @@ import { Row } from 'react-native-easy-grid';
 
 import styles from './styles';
 import { themes } from '../../../lib/constants';
-import { CustomIcon } from '../../../lib/Icons';
+import { CustomIcon } from '../../CustomIcon';
 import { useTheme } from '../../../theme';
 
 const LockIcon = React.memo(() => {

app/containers/ReactionsModal.tsx

@@ -5,7 +5,7 @@ import Touchable from 'react-native-platform-touchable';
 
 import Emoji from './message/Emoji';
 import I18n from '../i18n';
-import { CustomIcon } from '../lib/Icons';
+import { CustomIcon } from './CustomIcon';
 import sharedStyles from '../views/Styles';
 import { themes } from '../lib/constants';
 import { TSupportedThemes, useTheme, withTheme } from '../theme';
@@ -125,7 +125,7 @@ const ModalContent = React.memo(({ message, onClose, ...props }: IModalContent)
 			<SafeAreaView style={styles.safeArea}>
 				<Touchable onPress={onClose}>
 					<View style={styles.titleContainer}>
-						<CustomIcon style={[styles.closeButton, { color: themes[props.theme].buttonText }]} name='close' size={20} />
+						<CustomIcon name='close' size={20} color={themes[props.theme].buttonText} style={styles.closeButton} />
 						<Text style={[styles.title, { color: themes[props.theme].buttonText }]}>{I18n.t('Reactions')}</Text>
 					</View>
 				</Touchable>

app/containers/RoomItem/Actions.tsx

@@ -3,7 +3,7 @@ import { Animated, View } from 'react-native';
 import { RectButton } from 'react-native-gesture-handler';
 
 import { isRTL } from '../../i18n';
-import { CustomIcon } from '../../lib/Icons';
+import { CustomIcon } from '../CustomIcon';
 import { DisplayMode, themes } from '../../lib/constants';
 import styles, { ACTION_WIDTH, LONG_SWIPE, ROW_HEIGHT_CONDENSED } from './styles';
 import { ILeftActionsProps, IRightActionsProps } from './interfaces';

app/containers/RoomTypeIcon/OmnichannelRoomIcon.tsx

@@ -5,9 +5,13 @@ import { useSelector } from 'react-redux';
 
 import { OmnichannelSourceType, IApplicationState, IOmnichannelSource } from '../../definitions';
 import { STATUS_COLORS } from '../../lib/constants';
-import { CustomIcon } from '../../lib/Icons';
+import { CustomIcon, TIconsName } from '../CustomIcon';
 
-const iconMap = {
+interface IIconMap {
+	[key: string]: TIconsName;
+}
+
+const iconMap: IIconMap = {
 	widget: 'livechat-monochromatic',
 	email: 'mail',
 	sms: 'sms',

app/containers/RoomTypeIcon/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { StyleSheet, ViewStyle } from 'react-native';
 
 import { OmnichannelRoomIcon } from './OmnichannelRoomIcon';
-import { CustomIcon } from '../../lib/Icons';
+import { CustomIcon, TIconsName } from '../CustomIcon';
 import { STATUS_COLORS, themes } from '../../lib/constants';
 import Status from '../Status/Status';
 import { useTheme } from '../../theme';
@@ -46,7 +46,7 @@ const RoomTypeIcon = React.memo(({ type, isGroupChat, status, style, teamMain, s
 	}
 
 	// TODO: move this to a separate function
-	let icon = 'channel-private';
+	let icon: TIconsName = 'channel-private';
 	if (teamMain) {
 		icon = `teams${type === 'p' ? '-private' : ''}`;
 	} else if (type === 'discussion') {
@@ -61,7 +61,7 @@ const RoomTypeIcon = React.memo(({ type, isGroupChat, status, style, teamMain, s
 		}
 	}
 
-	return <CustomIcon name={icon} size={size} style={iconStyle} />;
+	return <CustomIcon name={icon} size={size} color={color} style={iconStyle} />;
 });
 
 export default RoomTypeIcon;

app/containers/SearchBox.tsx

@@ -4,7 +4,7 @@ import Touchable from 'react-native-platform-touchable';
 
 import { themes } from '../lib/constants';
 import I18n from '../i18n';
-import { CustomIcon } from '../lib/Icons';
+import { CustomIcon } from './CustomIcon';
 import TextInput from '../presentation/TextInput';
 import { useTheme } from '../theme';
 import { isIOS } from '../utils/deviceInfo';

app/containers/Status/Status.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { StyleProp, TextStyle } from 'react-native';
 
-import { CustomIcon } from '../../lib/Icons';
+import { CustomIcon, IconSet, TIconsName } from '../CustomIcon';
 import { STATUS_COLORS } from '../../lib/constants';
 import { IStatus } from './definition';
 
 const Status = React.memo(({ style, status = 'offline', size = 32, ...props }: Omit<IStatus, 'id'>) => {
-	const name = `status-${status}`;
+	const name: TIconsName = `status-${status}`;
-	const isNameValid = CustomIcon.hasIcon(name);
+	const isNameValid = IconSet.hasIcon(name);
 	const iconName = isNameValid ? name : 'status-offline';
 	const calculatedStyle: StyleProp<TextStyle> = [
 		{

app/containers/TextInput.tsx

@@ -5,7 +5,7 @@ import Touchable from 'react-native-platform-touchable';
 import sharedStyles from '../views/Styles';
 import TextInput from '../presentation/TextInput';
 import { themes } from '../lib/constants';
-import { CustomIcon } from '../lib/Icons';
+import { CustomIcon, TIconsName } from './CustomIcon';
 import ActivityIndicator from './ActivityIndicator';
 import { TSupportedThemes } from '../theme';
 
@@ -59,8 +59,8 @@ export interface IRCTextInputProps extends TextInputProps {
 	inputStyle?: StyleProp<TextStyle>;
 	inputRef?: React.Ref<RNTextInput>;
 	testID?: string;
-	iconLeft?: string;
+	iconLeft?: TIconsName;
-	iconRight?: string;
+	iconRight?: TIconsName;
 	left?: JSX.Element;
 	onIconRightPress?(): void;
 	theme: TSupportedThemes;
@@ -82,23 +82,24 @@ export default class RCTextInput extends React.PureComponent<IRCTextInputProps,
 
 	get iconLeft() {
 		const { testID, iconLeft, theme } = this.props;
-		return (
+		return iconLeft ? (
 			<CustomIcon
 				name={iconLeft}
-				testID={testID ? `${testID}-icon-left` : null}
+				testID={testID ? `${testID}-icon-left` : undefined}
-				style={[styles.iconContainer, styles.iconLeft, { color: themes[theme].bodyText }]}
 				size={20}
+				color={themes[theme].bodyText}
+				style={[styles.iconContainer, styles.iconLeft]}
 			/>
-		);
+		) : null;
 	}
 
 	get iconRight() {
 		const { iconRight, onIconRightPress, theme } = this.props;
-		return (
+		return iconRight ? (
 			<Touchable onPress={onIconRightPress} style={[styles.iconContainer, styles.iconRight]}>
-				<CustomIcon name={iconRight} style={{ color: themes[theme].bodyText }} size={20} />
+				<CustomIcon name={iconRight} size={20} color={themes[theme].bodyText} />
 			</Touchable>
-		);
+		) : null;
 	}
 
 	get iconPassword() {
@@ -108,9 +109,9 @@ export default class RCTextInput extends React.PureComponent<IRCTextInputProps,
 			<Touchable onPress={this.tooglePassword} style={[styles.iconContainer, styles.iconRight]}>
 				<CustomIcon
 					name={showPassword ? 'unread-on-top' : 'unread-on-top-disabled'}
-					testID={testID ? `${testID}-icon-right` : null}
+					testID={testID ? `${testID}-icon-right` : undefined}
-					style={{ color: themes[theme].auxiliaryText }}
 					size={20}
+					color={themes[theme].auxiliaryText}
 				/>
 			</Touchable>
 		);

app/containers/ThreadDetails.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { StyleSheet, Text, View, ViewStyle } from 'react-native';
 import Touchable from 'react-native-platform-touchable';
 
-import { CustomIcon } from '../lib/Icons';
+import { CustomIcon } from './CustomIcon';
 import { themes } from '../lib/constants';
 import sharedStyles from '../views/Styles';
 import { useTheme } from '../theme';

app/containers/UIKit/DatePicker.tsx

@@ -9,7 +9,7 @@ import Button from '../Button';
 import { textParser } from './utils';
 import { themes } from '../../lib/constants';
 import sharedStyles from '../../views/Styles';
-import { CustomIcon } from '../../lib/Icons';
+import { CustomIcon } from '../CustomIcon';
 import { isAndroid } from '../../utils/deviceInfo';
 import { useTheme } from '../../theme';
 import ActivityIndicator from '../ActivityIndicator';

app/containers/UIKit/MultiSelect/Chips.tsx

@@ -5,7 +5,7 @@ import FastImage from '@rocket.chat/react-native-fast-image';
 
 import { themes } from '../../../lib/constants';
 import { textParser } from '../utils';
-import { CustomIcon } from '../../../lib/Icons';
+import { CustomIcon } from '../../CustomIcon';
 import styles from './styles';
 import { IItemData } from '.';
 import { TSupportedThemes } from '../../../theme';

app/containers/UIKit/MultiSelect/Input.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Text, View } from 'react-native';
 import Touchable from 'react-native-platform-touchable';
 
-import { CustomIcon } from '../../../lib/Icons';
+import { CustomIcon } from '../../CustomIcon';
 import { themes } from '../../../lib/constants';
 import ActivityIndicator from '../../ActivityIndicator';
 import styles from './styles';

app/containers/UIKit/Overflow.tsx

@@ -3,7 +3,7 @@ import { FlatList, StyleSheet, Text } from 'react-native';
 import Popover from 'react-native-popover-view';
 import Touchable from 'react-native-platform-touchable';
 
-import { CustomIcon } from '../../lib/Icons';
+import { CustomIcon } from '../CustomIcon';
 import ActivityIndicator from '../ActivityIndicator';
 import { themes } from '../../lib/constants';
 import { useTheme } from '../../theme';

app/containers/UIKit/Select.tsx

@@ -4,7 +4,7 @@ import RNPickerSelect from 'react-native-picker-select';
 
 import sharedStyles from '../../views/Styles';
 import { themes } from '../../lib/constants';
-import { CustomIcon } from '../../lib/Icons';
+import { CustomIcon } from '../CustomIcon';
 import { textParser } from './utils';
 import { isAndroid, isIOS } from '../../utils/deviceInfo';
 import ActivityIndicator from '../ActivityIndicator';

app/containers/UserItem.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Pressable, StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native';
 
 import Avatar from './Avatar';
-import { CustomIcon } from '../lib/Icons';
+import { CustomIcon, TIconsName } from './CustomIcon';
 import sharedStyles from '../views/Styles';
 import { themes } from '../lib/constants';
 import { isIOS } from '../utils/deviceInfo';
@@ -46,7 +46,7 @@ interface IUserItem {
 	testID: string;
 	onLongPress?: () => void;
 	style?: StyleProp<ViewStyle>;
-	icon?: string | null;
+	icon?: TIconsName | null;
 	theme: TSupportedThemes;
 }
 
@@ -71,7 +71,7 @@ const UserItem = ({ name, username, onPress, testID, onLongPress, style, icon, t
 					@{username}
 				</Text>
 			</View>
-			{icon ? <CustomIcon name={icon} size={22} style={[styles.icon, { color: themes[theme].actionTintColor }]} /> : null}
+			{icon ? <CustomIcon name={icon} size={22} color={themes[theme].actionTintColor} style={styles.icon} /> : null}
 		</View>
 	</Pressable>
 );

app/containers/message/Audio.tsx

@@ -9,7 +9,7 @@ import { Sound } from 'expo-av/build/Audio/Sound';
 
 import Touchable from './Touchable';
 import Markdown from '../markdown';
-import { CustomIcon } from '../../lib/Icons';
+import { CustomIcon } from '../CustomIcon';
 import sharedStyles from '../../views/Styles';
 import { themes } from '../../lib/constants';
 import { isAndroid, isIOS } from '../../utils/deviceInfo';

app/containers/message/Broadcast.tsx

@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import { Text, View } from 'react-native';
 
 import Touchable from './Touchable';
-import { CustomIcon } from '../../lib/Icons';
+import { CustomIcon } from '../CustomIcon';
 import styles from './styles';
 import { BUTTON_HIT_SLOP } from './utils';
 import I18n from '../../i18n';

app/containers/message/CallButton.tsx

@@ -5,7 +5,7 @@ import Touchable from './Touchable';
 import { BUTTON_HIT_SLOP } from './utils';
 import styles from './styles';
 import I18n from '../../i18n';
-import { CustomIcon } from '../../lib/Icons';
+import { CustomIcon } from '../CustomIcon';
 import { themes } from '../../lib/constants';
 import { IMessageCallButton } from './interfaces';
 import { useTheme } from '../../theme';

app/containers/message/Components/CollapsibleQuote/index.tsx

@@ -6,7 +6,7 @@ import { StyleSheet, Text, View } from 'react-native';
 import { themes } from '../../../../lib/constants';
 import { IAttachment } from '../../../../definitions/IAttachment';
 import { TGetCustomEmoji } from '../../../../definitions/IEmoji';
-import { CustomIcon } from '../../../../lib/Icons';
+import { CustomIcon } from '../../../CustomIcon';
 import { useTheme } from '../../../../theme';
 import sharedStyles from '../../../../views/Styles';
 import Markdown from '../../../markdown';

app/containers/message/Discussion.tsx

@@ -5,7 +5,7 @@ import Touchable from './Touchable';
 import { BUTTON_HIT_SLOP, formatMessageCount } from './utils';
 import styles from './styles';
 import I18n from '../../i18n';
-import { CustomIcon } from '../../lib/Icons';
+import { CustomIcon } from '../CustomIcon';
 import { DISCUSSION } from './constants';
 import { themes } from '../../lib/constants';
 import MessageContext from './Context';

app/containers/message/Encrypted.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 
 import Touchable from './Touchable';
-import { CustomIcon } from '../../lib/Icons';
+import { CustomIcon } from '../CustomIcon';
 import { BUTTON_HIT_SLOP } from './utils';
 import MessageContext from './Context';
 import styles from './styles';

app/containers/message/MessageError.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 
 import Touchable from './Touchable';
-import { CustomIcon } from '../../lib/Icons';
+import { CustomIcon } from '../CustomIcon';
 import styles from './styles';
 import { BUTTON_HIT_SLOP } from './utils';
 import { themes } from '../../lib/constants';

app/containers/message/Reactions.tsx

@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import { Text, View } from 'react-native';
 
 import Touchable from './Touchable';
-import { CustomIcon } from '../../lib/Icons';
+import { CustomIcon } from '../CustomIcon';
 import styles from './styles';
 import Emoji from './Emoji';
 import { BUTTON_HIT_SLOP } from './utils';

app/containers/message/ReadReceipt.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { themes } from '../../lib/constants';
-import { CustomIcon } from '../../lib/Icons';
+import { CustomIcon } from '../CustomIcon';
 import styles from './styles';
 import { useTheme } from '../../theme';
 

app/containers/message/RepliedThread.tsx

@@ -1,7 +1,7 @@
 import React, { memo, useEffect, useState } from 'react';
 import { View } from 'react-native';
 
-import { CustomIcon } from '../../lib/Icons';
+import { CustomIcon } from '../CustomIcon';
 import styles from './styles';
 import { themes } from '../../lib/constants';
 import I18n from '../../i18n';

app/containers/message/Video.tsx

@@ -5,7 +5,7 @@ import { dequal } from 'dequal';
 import Touchable from './Touchable';
 import Markdown from '../markdown';
 import { isIOS } from '../../utils/deviceInfo';
-import { CustomIcon } from '../../lib/Icons';
+import { CustomIcon } from '../CustomIcon';
 import { themes } from '../../lib/constants';
 import MessageContext from './Context';
 import { fileDownload } from '../../utils/fileDownload';

app/ee/omnichannel/containers/OmnichannelHeader/OmnichannelQueue.tsx

@@ -3,7 +3,7 @@ import { View, Text } from 'react-native';
 
 import { useTheme } from '../../../../theme';
 import { themes } from '../../../../lib/constants';
-import { CustomIcon } from '../../../../lib/Icons';
+import { CustomIcon } from '../../../../containers/CustomIcon';
 import * as List from '../../../../containers/List';
 import styles from './styles';
 import UnreadBadge from '../../../../containers/UnreadBadge';

app/lib/Icons.js

@@ -1,7 +0,0 @@
-import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
-
-import icoMoonConfig from './selection.json';
-
-const CustomIcon = createIconSetFromIcoMoon(icoMoonConfig, 'custom', 'custom.ttf');
-
-export { CustomIcon };

app/views/CannedResponsesListView/Dropdown/DropdownItem.tsx

@@ -4,7 +4,7 @@ import { StyleSheet, Text, View } from 'react-native';
 import { themes } from '../../../lib/constants';
 import { useTheme } from '../../../theme';
 import Touch from '../../../utils/touch';
-import { CustomIcon } from '../../../lib/Icons';
+import { CustomIcon, TIconsName } from '../../../containers/CustomIcon';
 import sharedStyles from '../../Styles';
 
 export const ROW_HEIGHT = 44;
@@ -26,7 +26,7 @@ const styles = StyleSheet.create({
 
 interface IDropdownItem {
 	text: string;
-	iconName: string | null;
+	iconName: TIconsName | null;
 	onPress: () => void;
 }
 

app/views/ChangePasscodeView.tsx

@@ -10,7 +10,7 @@ import { useTheme } from '../theme';
 import { hasNotch, isTablet } from '../utils/deviceInfo';
 import { PasscodeChoose } from '../containers/Passcode';
 import EventEmitter from '../utils/events';
-import { CustomIcon } from '../lib/Icons';
+import { CustomIcon } from '../containers/CustomIcon';
 import { CHANGE_PASSCODE_EMITTER, themes } from '../lib/constants';
 
 const styles = StyleSheet.create({

app/views/DirectoryView/Options.tsx

@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import { Animated, Easing, Switch, Text, TouchableWithoutFeedback, View } from 'react-native';
 
 import Touch from '../../utils/touch';
-import { CustomIcon } from '../../lib/Icons';
+import { CustomIcon, TIconsName } from '../../containers/CustomIcon';
 import Check from '../../containers/Check';
 import I18n from '../../i18n';
 import { SWITCH_TRACK_COLOR, themes } from '../../lib/constants';
@@ -52,7 +52,7 @@ export default class DirectoryOptions extends PureComponent<IDirectoryOptionsPro
 	renderItem = (itemType: string) => {
 		const { changeType, type: propType, theme } = this.props;
 		let text = 'Users';
-		let icon = 'user';
+		let icon: TIconsName = 'user';
 		if (itemType === 'channels') {
 			text = 'Channels';
 			icon = 'channel-public';
@@ -70,7 +70,7 @@ export default class DirectoryOptions extends PureComponent<IDirectoryOptionsPro
 				theme={theme}
 				accessibilityLabel={I18n.t(text)}>
 				<View style={styles.dropdownItemContainer}>
-					<CustomIcon style={[styles.dropdownItemIcon, { color: themes[theme].bodyText }]} size={22} name={icon} />
+					<CustomIcon name={icon} size={22} color={themes[theme].bodyText} style={styles.dropdownItemIcon} />
 					<Text style={[styles.dropdownItemText, { color: themes[theme].bodyText }]}>{I18n.t(text)}</Text>
 					{propType === itemType ? <Check /> : null}
 				</View>
@@ -104,9 +104,10 @@ export default class DirectoryOptions extends PureComponent<IDirectoryOptionsPro
 							]}>
 							<Text style={[styles.dropdownToggleText, { color: themes[theme].auxiliaryText }]}>{I18n.t('Search_by')}</Text>
 							<CustomIcon
-								style={[styles.dropdownItemIcon, styles.inverted, { color: themes[theme].auxiliaryTintColor }]}
+								style={[styles.dropdownItemIcon, styles.inverted]}
 								size={22}
 								name='chevron-down'
+								color={themes[theme].auxiliaryTintColor}
 							/>
 						</View>
 					</Touch>

app/views/DirectoryView/index.tsx

@@ -12,7 +12,7 @@ import DirectoryItem from '../../containers/DirectoryItem';
 import sharedStyles from '../Styles';
 import I18n from '../../i18n';
 import SearchBox from '../../containers/SearchBox';
-import { CustomIcon } from '../../lib/Icons';
+import { CustomIcon, TIconsName } from '../../containers/CustomIcon';
 import StatusBar from '../../containers/StatusBar';
 import ActivityIndicator from '../../containers/ActivityIndicator';
 import * as HeaderButton from '../../containers/HeaderButton';
@@ -195,7 +195,7 @@ class DirectoryView extends React.Component<IDirectoryViewProps, IDirectoryViewS
 		const { type } = this.state;
 		const { theme } = this.props;
 		let text = 'Users';
-		let icon = 'user';
+		let icon: TIconsName = 'user';
 
 		if (type === 'channels') {
 			text = 'Channels';
@@ -217,12 +217,13 @@ class DirectoryView extends React.Component<IDirectoryViewProps, IDirectoryViewS
 							styles.toggleDropdownContainer,
 							{ borderColor: themes[theme].separatorColor }
 						]}>
-						<CustomIcon style={[styles.toggleDropdownIcon, { color: themes[theme].tintColor }]} size={20} name={icon} />
+						<CustomIcon name={icon} size={20} color={themes[theme].tintColor} style={styles.toggleDropdownIcon} />
 						<Text style={[styles.toggleDropdownText, { color: themes[theme].tintColor }]}>{I18n.t(text)}</Text>
 						<CustomIcon
 							name='chevron-down'
 							size={20}
-							style={[styles.toggleDropdownArrow, { color: themes[theme].auxiliaryTintColor }]}
+							color={themes[theme].auxiliaryTintColor}
+							style={styles.toggleDropdownArrow}
 						/>
 					</View>
 				</Touch>

app/views/DiscussionsView/DiscussionDetails.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
-import { CustomIcon } from '../../lib/Icons';
+import { CustomIcon } from '../../containers/CustomIcon';
 import sharedStyles from '../Styles';
 import { useTheme } from '../../theme';
 import { IMessageFromServer } from '../../definitions';

app/views/NewMessageView.tsx

@@ -15,7 +15,7 @@ import StatusBar from '../containers/StatusBar';
 import { IApplicationState, IBaseScreen, ISearch, TSubscriptionModel } from '../definitions';
 import I18n from '../i18n';
 import database from '../lib/database';
-import { CustomIcon } from '../lib/Icons';
+import { CustomIcon, TIconsName } from '../containers/CustomIcon';
 import Navigation from '../lib/navigation/appNavigation';
 import { compareServerVersion } from '../lib/methods/helpers/compareServerVersion';
 import UserItem from '../containers/UserItem';
@@ -51,7 +51,7 @@ interface IButton {
 	onPress: () => void;
 	testID: string;
 	title: string;
-	icon: string;
+	icon: TIconsName;
 	first?: boolean;
 }
 
@@ -187,7 +187,7 @@ class NewMessageView extends React.Component<INewMessageViewProps, INewMessageVi
 						styles.button,
 						{ borderColor: themes[theme].separatorColor }
 					]}>
-					<CustomIcon style={[styles.buttonIcon, { color: themes[theme].tintColor }]} size={24} name={icon} />
+					<CustomIcon name={icon} size={24} color={themes[theme].tintColor} style={styles.buttonIcon} />
 					<Text style={[styles.buttonText, { color: themes[theme].tintColor }]}>{title}</Text>
 				</View>
 			</Touch>

app/views/NewServerView/ServerInput/Item.tsx

@@ -3,7 +3,7 @@ import { StyleSheet, Text, View } from 'react-native';
 import { BorderlessButton } from 'react-native-gesture-handler';
 
 import { themes } from '../../../lib/constants';
-import { CustomIcon } from '../../../lib/Icons';
+import { CustomIcon } from '../../../containers/CustomIcon';
 import sharedStyles from '../../Styles';
 import Touch from '../../../utils/touch';
 import { TServerHistoryModel } from '../../../definitions/IServerHistory';

app/views/ProfileView/index.tsx

@@ -22,7 +22,7 @@ import I18n from '../../i18n';
 import Button from '../../containers/Button';
 import Avatar from '../../containers/Avatar';
 import { setUser as setUserAction } from '../../actions/login';
-import { CustomIcon } from '../../lib/Icons';
+import { CustomIcon } from '../../containers/CustomIcon';
 import * as HeaderButton from '../../containers/HeaderButton';
 import StatusBar from '../../containers/StatusBar';
 import { themes } from '../../lib/constants';

app/views/RoomInfoEditView/index.tsx

@@ -20,7 +20,7 @@ import { IApplicationState, IBaseScreen, ISubscription, SubscriptionType, TSubsc
 import { ERoomType } from '../../definitions/ERoomType';
 import I18n from '../../i18n';
 import database from '../../lib/database';
-import { CustomIcon } from '../../lib/Icons';
+import { CustomIcon } from '../../containers/CustomIcon';
 import KeyboardView from '../../containers/KeyboardView';
 import { TSupportedPermissions } from '../../reducers/permissions';
 import { ModalStackParamList } from '../../stacks/MasterDetailStack/types';

app/views/RoomInfoView/index.tsx

@@ -8,7 +8,7 @@ import { StackNavigationProp } from '@react-navigation/stack';
 import { CompositeNavigationProp, RouteProp } from '@react-navigation/native';
 import { Observable, Subscription } from 'rxjs';
 
-import { CustomIcon } from '../../lib/Icons';
+import { CustomIcon, TIconsName } from '../../containers/CustomIcon';
 import Status from '../../containers/Status';
 import Avatar from '../../containers/Avatar';
 import sharedStyles from '../Styles';
@@ -374,7 +374,7 @@ class RoomInfoView extends React.Component<IRoomInfoViewProps, IRoomInfoViewStat
 		);
 	};
 
-	renderButton = (onPress: () => void, iconName: string, text: string) => {
+	renderButton = (onPress: () => void, iconName: TIconsName, text: string) => {
 		const { theme } = this.props;
 
 		const onActionPress = async () => {

app/views/RoomMembersView/index.tsx

@@ -16,7 +16,7 @@ import { LISTENER } from '../../containers/Toast';
 import { IApplicationState, IBaseScreen, IUser, SubscriptionType, TRoomModel, TUserModel } from '../../definitions';
 import I18n from '../../i18n';
 import database from '../../lib/database';
-import { CustomIcon } from '../../lib/Icons';
+import { CustomIcon } from '../../containers/CustomIcon';
 import protectedFunction from '../../lib/methods/helpers/protectedFunction';
 import UserItem from '../../containers/UserItem';
 import { getUserSelector } from '../../selectors/login';

app/views/RoomView/Banner.tsx

@@ -4,7 +4,7 @@ import { BorderlessButton, ScrollView } from 'react-native-gesture-handler';
 import Modal from 'react-native-modal';
 
 import Markdown, { MarkdownPreview } from '../../containers/markdown';
-import { CustomIcon } from '../../lib/Icons';
+import { CustomIcon } from '../../containers/CustomIcon';
 import { themes } from '../../lib/constants';
 import styles from './styles';
 import { useTheme } from '../../theme';

app/views/RoomView/List/NavBottomFAB.tsx

@@ -3,7 +3,7 @@ import { StyleSheet, View } from 'react-native';
 import Animated, { call, cond, greaterOrEq, useCode } from 'react-native-reanimated';
 
 import { themes } from '../../../lib/constants';
-import { CustomIcon } from '../../../lib/Icons';
+import { CustomIcon } from '../../../containers/CustomIcon';
 import { useTheme } from '../../../theme';
 import Touch from '../../../utils/touch';
 import { hasNotch } from '../../../utils/deviceInfo';

app/views/RoomView/UploadProgress.tsx

@@ -6,7 +6,7 @@ import { Observable, Subscription } from 'rxjs';
 import database from '../../lib/database';
 import log from '../../utils/log';
 import I18n from '../../i18n';
-import { CustomIcon } from '../../lib/Icons';
+import { CustomIcon } from '../../containers/CustomIcon';
 import { themes } from '../../lib/constants';
 import sharedStyles from '../Styles';
 import { TSupportedThemes, withTheme } from '../../theme';

app/views/RoomsListView/Header/Header.tsx

@@ -5,7 +5,7 @@ import TextInput from '../../../presentation/TextInput';
 import I18n from '../../../i18n';
 import sharedStyles from '../../Styles';
 import { themes } from '../../../lib/constants';
-import { CustomIcon } from '../../../lib/Icons';
+import { CustomIcon } from '../../../containers/CustomIcon';
 import { isIOS, isTablet } from '../../../utils/deviceInfo';
 import { useOrientation } from '../../../dimensions';
 import { useTheme } from '../../../theme';

app/views/SelectListView.tsx

@@ -168,13 +168,14 @@ class SelectListView extends React.Component<ISelectListViewProps, ISelectListVi
 				size={ICON_SIZE}
 			/>
 		);
-		const showCheck = () => (
+		const showCheck = () =>
-			<List.Icon
+			checked !== '' ? (
-				testID={checked ? `${item.name}-checked` : `${item.name}-unchecked`}
+				<List.Icon
-				name={checked}
+					testID={checked ? `${item.name}-checked` : `${item.name}-unchecked`}
-				color={themes[theme].actionTintColor}
+					name={checked}
-			/>
+					color={themes[theme].actionTintColor}
-		);
+				/>
+			) : null;
 
 		return (
 			<>

app/views/ShareView/Header.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
 import I18n from '../../i18n';
-import { CustomIcon } from '../../lib/Icons';
+import { CustomIcon, TIconsName } from '../../containers/CustomIcon';
 import { themes } from '../../lib/constants';
 import { useTheme } from '../../theme';
 import { isAndroid, isTablet } from '../../utils/deviceInfo';
@@ -50,7 +50,7 @@ const Header = React.memo(({ room, thread }: IHeader) => {
 	} else {
 		type = room?.t;
 	}
-	let icon;
+	let icon: TIconsName;
 	if (type === 'discussion') {
 		icon = 'discussions';
 	} else if (type === 'thread') {

app/views/ShareView/Preview.tsx

@@ -4,7 +4,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { ScrollView, StyleSheet, Text } from 'react-native';
 import prettyBytes from 'pretty-bytes';
 
-import { CustomIcon } from '../../lib/Icons';
+import { CustomIcon, TIconsName } from '../../containers/CustomIcon';
 import { ImageViewer, types } from '../../presentation/ImageViewer';
 import { useDimensions, useOrientation } from '../../dimensions';
 import { getHeaderHeight } from '../../containers/Header';
@@ -37,7 +37,7 @@ const styles = StyleSheet.create({
 });
 
 interface IIconPreview {
-	iconName: string;
+	iconName: TIconsName;
 	title: string;
 	description?: string;
 	theme: TSupportedThemes;

app/views/ShareView/Thumbs.tsx

@@ -4,7 +4,7 @@ import { RectButton, TouchableNativeFeedback, TouchableOpacity } from 'react-nat
 
 import { BUTTON_HIT_SLOP } from '../../containers/message/utils';
 import { themes } from '../../lib/constants';
-import { CustomIcon } from '../../lib/Icons';
+import { CustomIcon } from '../../containers/CustomIcon';
 import { isIOS } from '../../utils/deviceInfo';
 import { THUMBS_HEIGHT } from './constants';
 import { allowPreview } from './utils';

app/views/SidebarView/index.tsx

@@ -10,7 +10,7 @@ import Status from '../../containers/Status/Status';
 import { events, logEvent } from '../../utils/log';
 import I18n from '../../i18n';
 import scrollPersistTaps from '../../utils/scrollPersistTaps';
-import { CustomIcon } from '../../lib/Icons';
+import { CustomIcon } from '../../containers/CustomIcon';
 import { themes } from '../../lib/constants';
 import { TSupportedThemes, withTheme } from '../../theme';
 import { getUserSelector } from '../../selectors/login';

app/views/TeamChannelsView.tsx

@@ -22,7 +22,7 @@ import { ERoomType } from '../definitions/ERoomType';
 import { withDimensions } from '../dimensions';
 import I18n from '../i18n';
 import database from '../lib/database';
-import { CustomIcon } from '../lib/Icons';
+import { CustomIcon } from '../containers/CustomIcon';
 import RoomItem, { ROW_HEIGHT } from '../containers/RoomItem';
 import { getUserSelector } from '../selectors/login';
 import { ChatsStackParamList } from '../stacks/types';

app/views/ThreadMessagesView/Dropdown/DropdownItem.tsx

@@ -4,7 +4,7 @@ import { StyleSheet, Text, View } from 'react-native';
 import { themes } from '../../../lib/constants';
 import { TSupportedThemes, withTheme } from '../../../theme';
 import Touch from '../../../utils/touch';
-import { CustomIcon } from '../../../lib/Icons';
+import { CustomIcon, TIconsName } from '../../../containers/CustomIcon';
 import sharedStyles from '../../Styles';
 
 const styles = StyleSheet.create({
@@ -24,7 +24,7 @@ const styles = StyleSheet.create({
 
 interface IDropdownItem {
 	text: string;
-	iconName: string | null;
+	iconName: TIconsName | null;
 	theme?: TSupportedThemes;
 	onPress: () => void;
 }

docs/icons.md

@@ -0,0 +1,15 @@
+# Icons
+
+Icons are generated using IcoMoon and react-native-vector-icons https://github.com/oblador/react-native-vector-icons#createiconsetfromicomoonconfig-fontfamily-fontfile
+
+# Typescript
+
+After icons are already working on the app, we need to get Typescript working properly.
+For that, we run a script to generate a new file containing the icons data (just like a `d.ts.`).
+
+```sh
+yarn build-icons-name
+```
+
+It maps all icons on `selection.json` and creates `mappedIcons.js`.
+With this file, Typescript provides autocompletes for the existing icons on our Icon Set and lint warnings in case we try to use a non-exiting one.

package.json

@@ -17,7 +17,8 @@
 		"precommit": "lint-staged",
 		"generate-source-maps-ios": "react-native bundle --platform ios --dev false --entry-file index.js --bundle-output ios-release.bundle --sourcemap-output ios-release.bundle.map",
 		"postinstall": "patch-package && jetify",
-		"prepare": "husky install"
+		"prepare": "husky install",
+		"build-icon-set": "node scripts/build-icon-set.js"
 	},
 	"lint-staged": {
 		"*.{js,ts,tsx}": [
@@ -158,6 +159,7 @@
 		"@types/react-native-config-reader": "^4.1.0",
 		"@types/react-native-platform-touchable": "^1.1.2",
 		"@types/react-native-scrollable-tab-view": "^0.10.2",
+		"@types/react-native-vector-icons": "^6.4.10",
 		"@types/react-redux": "^7.1.18",
 		"@types/react-test-renderer": "^17.0.1",
 		"@types/semver": "^7.3.9",

scripts/build-icon-set.js

@@ -0,0 +1,20 @@
+const fs = require('fs');
+const icoMoonConfig = require('../app/containers/CustomIcon/selection.json');
+
+let iconsName = 'export const mappedIcons = {\n';
+icoMoonConfig.icons.forEach((icon) => {
+	icon.properties.name.split(/\s*,\s*/g).forEach((name) => {
+		iconsName += `\t'${name}': ${icon.properties.code},\n`;
+	});
+});
+iconsName = `${iconsName.slice(0, -2) }\n};\n`;
+
+fs.writeFile('app/containers/CustomIcon/mappedIcons.js', iconsName, 'utf8', function (err) {
+	if (err) {
+		console.log('An error occurred while writing Object to File.');
+		console.log(err);
+		return;
+	}
+
+	console.log('🚀   Icons name generated.');
+});

yarn.lock

@@ -4672,6 +4672,14 @@
     "@types/react" "*"
     "@types/react-native" "*"
 
+"@types/react-native-vector-icons@^6.4.10":
+  version "6.4.10"
+  resolved "https://registry.yarnpkg.com/@types/react-native-vector-icons/-/react-native-vector-icons-6.4.10.tgz#9bfd6e64dd37b8119425496b5e53ff91d034efa9"
+  integrity sha512-z4sexbuZ7nmYsp7Z9YB5fSQoN3KFn6nZA3QsCkQLOYnVmVlxX4U22v/bM9Xx/6dOA1vClxoRZo2CFDX16uryXQ==
+  dependencies:
+    "@types/react" "*"
+    "@types/react-native" "*"
+
 "@types/react-native@*":
   version "0.65.0"
   resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.65.0.tgz#bef9ca619f421abafae891ac0629e27cbfe63b42"