[FIX] TypeScript's errors raised by HOCs (#3535)

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

app/AppContainer.tsx

@@ -3,7 +3,7 @@ import { NavigationContainer } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
 import { connect } from 'react-redux';
 
-import { SetUsernameStackParamList, StackParamList } from './navigationTypes';
+import { SetUsernameStackParamList, StackParamList } from './definitions/navigationTypes';
 import Navigation from './lib/Navigation';
 import { defaultHeader, getActiveRouteName, navigationTheme } from './utils/navigation';
 import { ROOT_INSIDE, ROOT_LOADING, ROOT_OUTSIDE, ROOT_SET_USERNAME } from './actions/app';

app/containers/BackgroundContainer/index.tsx

@@ -6,9 +6,9 @@ import sharedStyles from '../../views/Styles';
 import { themes } from '../../constants/colors';
 
 interface IBackgroundContainer {
-	text: string;
-	theme: string;
-	loading: boolean;
+	text?: string;
+	theme?: string;
+	loading?: boolean;
 }
 
 const styles = StyleSheet.create({
@@ -35,8 +35,8 @@ const styles = StyleSheet.create({
 const BackgroundContainer = ({ theme, text, loading }: IBackgroundContainer) => (
 	<View style={styles.container}>
 		<ImageBackground source={{ uri: `message_empty_${theme}` }} style={styles.image} />
-		{text ? <Text style={[styles.text, { color: themes[theme].auxiliaryTintColor }]}>{text}</Text> : null}
-		{loading ? <ActivityIndicator style={styles.text} color={themes[theme].auxiliaryTintColor} /> : null}
+		{text ? <Text style={[styles.text, { color: themes[theme!].auxiliaryTintColor }]}>{text}</Text> : null}
+		{loading ? <ActivityIndicator style={styles.text} color={themes[theme!].auxiliaryTintColor} /> : null}
 	</View>
 );
 

app/containers/HeaderButton/Common.tsx

@@ -29,9 +29,9 @@ export const CloseModal = React.memo(
 export const CancelModal = React.memo(({ onPress, testID }: Partial<IHeaderButtonCommon>) => (
 	<Container left>
 		{isIOS ? (
-			<Item title={I18n.t('Cancel')} onPress={onPress} testID={testID} />
+			<Item title={I18n.t('Cancel')} onPress={onPress!} testID={testID} />
 		) : (
-			<Item iconName='close' onPress={onPress} testID={testID} />
+			<Item iconName='close' onPress={onPress!} testID={testID} />
 		)}
 	</Container>
 ));
@@ -39,19 +39,19 @@ export const CancelModal = React.memo(({ onPress, testID }: Partial<IHeaderButto
 // Right
 export const More = React.memo(({ onPress, testID }: Partial<IHeaderButtonCommon>) => (
 	<Container>
-		<Item iconName='kebab' onPress={onPress} testID={testID} />
+		<Item iconName='kebab' onPress={onPress!} testID={testID} />
 	</Container>
 ));
 
 export const Download = React.memo(({ onPress, testID, ...props }: Partial<IHeaderButtonCommon>) => (
 	<Container>
-		<Item iconName='download' onPress={onPress} testID={testID} {...props} />
+		<Item iconName='download' onPress={onPress!} testID={testID} {...props} />
 	</Container>
 ));
 
 export const Preferences = React.memo(({ onPress, testID, ...props }: Partial<IHeaderButtonCommon>) => (
 	<Container>
-		<Item iconName='settings' onPress={onPress} testID={testID} {...props} />
+		<Item iconName='settings' onPress={onPress!} testID={testID} {...props} />
 	</Container>
 ));
 

app/containers/HeaderButton/HeaderButtonItem.tsx

@@ -8,12 +8,12 @@ import { themes } from '../../constants/colors';
 import sharedStyles from '../../views/Styles';
 
 interface IHeaderButtonItem {
-	title: string;
-	iconName: string;
-	onPress(): void;
-	testID: string;
-	theme: string;
-	badge(): void;
+	title?: string;
+	iconName?: string;
+	onPress: <T>(arg: T) => void;
+	testID?: string;
+	theme?: string;
+	badge?(): void;
 }
 
 export const BUTTON_HIT_SLOP = {
@@ -44,9 +44,9 @@ const Item = ({ title, iconName, onPress, testID, theme, badge }: IHeaderButtonI
 	<Touchable onPress={onPress} testID={testID} hitSlop={BUTTON_HIT_SLOP} style={styles.container}>
 		<>
 			{iconName ? (
-				<CustomIcon name={iconName} size={24} color={themes[theme].headerTintColor} />
+				<CustomIcon name={iconName} size={24} color={themes[theme!].headerTintColor} />
 			) : (
-				<Text style={[styles.title, { color: themes[theme].headerTintColor }]}>{title}</Text>
+				<Text style={[styles.title, { color: themes[theme!].headerTintColor }]}>{title}</Text>
 			)}
 			{badge ? badge() : null}
 		</>

app/containers/List/ListContainer.tsx

@@ -11,10 +11,10 @@ const styles = StyleSheet.create({
 });
 
 interface IListContainer {
-	children: JSX.Element;
+	children: React.ReactNode;
+	testID?: string;
 }
 const ListContainer = React.memo(({ children, ...props }: IListContainer) => (
-	// @ts-ignore
 	<ScrollView
 		contentContainerStyle={styles.container}
 		scrollIndicatorInsets={{ right: 1 }} // https://github.com/facebook/react-native/issues/26610#issuecomment-539843444

app/containers/List/ListHeader.tsx

@@ -20,13 +20,13 @@ const styles = StyleSheet.create({
 
 interface IListHeader {
 	title: string;
-	theme: string;
-	translateTitle: boolean;
+	theme?: string;
+	translateTitle?: boolean;
 }
 
 const ListHeader = React.memo(({ title, theme, translateTitle = true }: IListHeader) => (
 	<View style={styles.container}>
-		<Text style={[styles.title, { color: themes[theme].infoText }]} numberOfLines={1}>
+		<Text style={[styles.title, { color: themes[theme!].infoText }]} numberOfLines={1}>
 			{translateTitle ? I18n.t(title) : title}
 		</Text>
 	</View>

app/containers/List/ListIcon.tsx

 import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 
 import { themes } from '../../constants/colors';
 import { CustomIcon } from '../../lib/Icons';
@@ -7,11 +7,11 @@ import { withTheme } from '../../theme';
 import { ICON_SIZE } from './constants';
 
 interface IListIcon {
-	theme: string;
+	theme?: string;
 	name: string;
-	color: string;
-	style: object;
-	testID: string;
+	color?: string;
+	style?: StyleProp<ViewStyle>;
+	testID?: string;
 }
 
 const styles = StyleSheet.create({
@@ -23,7 +23,7 @@ const styles = StyleSheet.create({
 
 const ListIcon = React.memo(({ theme, name, color, style, testID }: IListIcon) => (
 	<View style={[styles.icon, style]}>
-		<CustomIcon name={name} color={color ?? themes[theme].auxiliaryText} size={ICON_SIZE} testID={testID} />
+		<CustomIcon name={name} color={color ?? themes[theme!].auxiliaryText} size={ICON_SIZE} testID={testID} />
 	</View>
 ));
 

app/containers/List/ListInfo.tsx

@@ -20,13 +20,13 @@ const styles = StyleSheet.create({
 
 interface IListHeader {
 	info: string;
-	theme: string;
-	translateInfo: boolean;
+	theme?: string;
+	translateInfo?: boolean;
 }
 
 const ListInfo = React.memo(({ info, theme, translateInfo = true }: IListHeader) => (
 	<View style={styles.container}>
-		<Text style={[styles.text, { color: themes[theme].infoText }]}>{translateInfo ? I18n.t(info) : info}</Text>
+		<Text style={[styles.text, { color: themes[theme!].infoText }]}>{translateInfo ? I18n.t(info) : info}</Text>
 	</View>
 ));
 

app/containers/List/ListItem.tsx

@@ -56,11 +56,11 @@ const styles = StyleSheet.create({
 interface IListItemContent {
 	title?: string;
 	subtitle?: string;
-	left?: Function;
-	right?: Function;
+	left?: () => JSX.Element | null;
+	right?: () => JSX.Element | null;
 	disabled?: boolean;
 	testID?: string;
-	theme: string;
+	theme?: string;
 	color?: string;
 	translateTitle?: boolean;
 	translateSubtitle?: boolean;
@@ -89,15 +89,15 @@ const Content = React.memo(
 			{left ? <View style={styles.leftContainer}>{left()}</View> : null}
 			<View style={styles.textContainer}>
 				<View style={styles.textAlertContainer}>
-					<Text style={[styles.title, { color: color || themes[theme].titleText }]} numberOfLines={1}>
+					<Text style={[styles.title, { color: color || themes[theme!].titleText }]} numberOfLines={1}>
 						{translateTitle ? I18n.t(title) : title}
 					</Text>
 					{alert ? (
-						<CustomIcon style={[styles.alertIcon, { color: themes[theme].dangerColor }]} size={ICON_SIZE} name='info' />
+						<CustomIcon style={[styles.alertIcon, { color: themes[theme!].dangerColor }]} size={ICON_SIZE} name='info' />
 					) : null}
 				</View>
 				{subtitle ? (
-					<Text style={[styles.subtitle, { color: themes[theme].auxiliaryText }]} numberOfLines={1}>
+					<Text style={[styles.subtitle, { color: themes[theme!].auxiliaryText }]} numberOfLines={1}>
 						{translateSubtitle ? I18n.t(subtitle) : subtitle}
 					</Text>
 				) : null}
@@ -112,38 +112,39 @@ const Content = React.memo(
 	)
 );
 
-interface IListItemButton {
+interface IListButtonPress {
+	onPress?: Function;
+}
+
+interface IListItemButton extends IListButtonPress {
 	title?: string;
-	onPress: Function;
 	disabled?: boolean;
-	theme: string;
-	backgroundColor: string;
+	theme?: string;
+	backgroundColor?: string;
 	underlayColor?: string;
 }
 
-const Button = React.memo(({ onPress, backgroundColor, underlayColor, ...props }: IListItemButton) => (
+const Button = React.memo<IListItemButton>(({ onPress, backgroundColor, underlayColor, ...props }: IListItemButton) => (
 	<Touch
-		onPress={() => onPress(props.title)}
-		style={{ backgroundColor: backgroundColor || themes[props.theme].backgroundColor }}
+		onPress={() => onPress!(props.title)}
+		style={{ backgroundColor: backgroundColor || themes[props.theme!].backgroundColor }}
 		underlayColor={underlayColor}
 		enabled={!props.disabled}
-		theme={props.theme}>
+		theme={props.theme!}>
 		<Content {...props} />
 	</Touch>
 ));
 
-interface IListItem {
-	onPress: Function;
-	theme: string;
-	backgroundColor: string;
+interface IListItem extends IListItemContent, IListButtonPress {
+	backgroundColor?: string;
 }
 
-const ListItem = React.memo(({ ...props }: IListItem) => {
+const ListItem = React.memo<IListItem>(({ ...props }: IListItem) => {
 	if (props.onPress) {
 		return <Button {...props} />;
 	}
 	return (
-		<View style={{ backgroundColor: props.backgroundColor || themes[props.theme].backgroundColor }}>
+		<View style={{ backgroundColor: props.backgroundColor || themes[props.theme!].backgroundColor }}>
 			<Content {...props} />
 		</View>
 	);

app/containers/List/ListSection.tsx

@@ -11,9 +11,9 @@ const styles = StyleSheet.create({
 });
 
 interface IListSection {
-	children: JSX.Element;
-	title: string;
-	translateTitle: boolean;
+	children: React.ReactNode;
+	title?: string;
+	translateTitle?: boolean;
 }
 
 const ListSection = React.memo(({ children, title, translateTitle }: IListSection) => (

app/containers/List/ListSeparator.tsx

 import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View, ViewStyle } from 'react-native';
 
 import { themes } from '../../constants/colors';
 import { withTheme } from '../../theme';
@@ -11,12 +11,12 @@ const styles = StyleSheet.create({
 });
 
 interface IListSeparator {
-	style: object;
-	theme: string;
+	style?: ViewStyle;
+	theme?: string;
 }
 
 const ListSeparator = React.memo(({ style, theme }: IListSeparator) => (
-	<View style={[styles.separator, style, { backgroundColor: themes[theme].separatorColor }]} />
+	<View style={[styles.separator, style, { backgroundColor: themes[theme!].separatorColor }]} />
 ));
 
 ListSeparator.displayName = 'List.Separator';

app/containers/Loading.tsx

@@ -19,7 +19,7 @@ const styles = StyleSheet.create({
 
 interface ILoadingProps {
 	visible: boolean;
-	theme: string;
+	theme?: string;
 }
 
 class Loading extends React.PureComponent<ILoadingProps, any> {
@@ -97,7 +97,7 @@ class Loading extends React.PureComponent<ILoadingProps, any> {
 
 		const opacityAnimation = opacity.interpolate({
 			inputRange: [0, 1],
-			outputRange: [0, themes[theme].backdropOpacity],
+			outputRange: [0, themes[theme!].backdropOpacity],
 			extrapolate: 'clamp'
 		});
 
@@ -109,7 +109,7 @@ class Loading extends React.PureComponent<ILoadingProps, any> {
 							{
 								// @ts-ignore
 								...StyleSheet.absoluteFill,
-								backgroundColor: themes[theme].backdropColor,
+								backgroundColor: themes[theme!].backdropColor,
 								opacity: opacityAnimation
 							}
 						]}

app/containers/MessageActions/Header.tsx

@@ -17,7 +17,7 @@ interface IHeader {
 	server: string;
 	message: object;
 	isMasterDetail: boolean;
-	theme: string;
+	theme?: string;
 }
 
 interface THeaderItem {
@@ -117,19 +117,19 @@ const Header = React.memo(({ handleReaction, server, message, isMasterDetail, th
 	const onReaction = ({ emoji }: { emoji: IEmoji }) => handleReaction(emoji, message);
 
 	const renderItem = useCallback(
-		({ item }) => <HeaderItem item={item} onReaction={onReaction} server={server} theme={theme} />,
+		({ item }) => <HeaderItem item={item} onReaction={onReaction} server={server} theme={theme!} />,
 		[]
 	);
 
-	const renderFooter = useCallback(() => <HeaderFooter onReaction={onReaction} theme={theme} />, []);
+	const renderFooter = useCallback(() => <HeaderFooter onReaction={onReaction} theme={theme!} />, []);
 
 	return (
-		<View style={[styles.container, { backgroundColor: themes[theme].focusedBackground }]}>
+		<View style={[styles.container, { backgroundColor: themes[theme!].focusedBackground }]}>
 			<FlatList
 				data={items}
 				renderItem={renderItem}
 				ListFooterComponent={renderFooter}
-				style={{ backgroundColor: themes[theme].focusedBackground }}
+				style={{ backgroundColor: themes[theme!].focusedBackground }}
 				keyExtractor={keyExtractor}
 				showsHorizontalScrollIndicator={false}
 				scrollEnabled={false}

app/containers/MessageActions/index.tsx

@@ -18,7 +18,7 @@ import events from '../../utils/log/events';
 
 interface IMessageActions {
 	room: {
-		rid: string | number;
+		rid: string;
 		autoTranslateLanguage: any;
 		autoTranslate: any;
 		reactWhenReadOnly: any;

app/containers/MessageBox/CommandsPreview/Item.tsx

@@ -14,7 +14,7 @@ interface IMessageBoxCommandsPreviewItem {
 		id: string;
 		value: string;
 	};
-	theme: string;
+	theme?: string;
 }
 
 const Item = ({ item, theme }: IMessageBoxCommandsPreviewItem) => {
@@ -37,7 +37,7 @@ const Item = ({ item, theme }: IMessageBoxCommandsPreviewItem) => {
 					{loading ? <ActivityIndicator theme={theme} /> : null}
 				</FastImage>
 			) : (
-				<CustomIcon name='attach' size={36} color={themes[theme].actionTintColor} />
+				<CustomIcon name='attach' size={36} color={themes[theme!].actionTintColor} />
 			)}
 		</TouchableOpacity>
 	);

app/containers/MessageBox/CommandsPreview/index.tsx

@@ -10,7 +10,7 @@ import { withTheme } from '../../../theme';
 interface IMessageBoxCommandsPreview {
 	commandPreview: [];
 	showCommandPreview: boolean;
-	theme: string;
+	theme?: string;
 }
 
 const CommandsPreview = React.memo(
@@ -21,7 +21,7 @@ const CommandsPreview = React.memo(
 		return (
 			<FlatList
 				testID='commandbox-container'
-				style={[styles.mentionList, { backgroundColor: themes[theme].messageboxBackground }]}
+				style={[styles.mentionList, { backgroundColor: themes[theme!].messageboxBackground }]}
 				data={commandPreview}
 				renderItem={({ item }) => <Item item={item} theme={theme} />}
 				keyExtractor={(item: any) => item.id}

app/containers/RoomHeader/RoomHeader.tsx

@@ -68,11 +68,11 @@ interface IRoomHeader {
 	tmid: string;
 	teamMain: boolean;
 	status: string;
-	theme: string;
+	theme?: string;
 	usersTyping: [];
 	isGroupChat: boolean;
 	parentTitle: string;
-	onPress: Function;
+	onPress: () => void;
 	testID: string;
 }
 
@@ -164,7 +164,7 @@ const Header = React.memo(
 			renderFunc = () => (
 				<View style={styles.titleContainer}>
 					<RoomTypeIcon type={prid ? 'discussion' : type} isGroupChat={isGroupChat} status={status} teamMain={teamMain} />
-					<Text style={[styles.subtitle, { color: themes[theme].auxiliaryText }]} numberOfLines={1}>
+					<Text style={[styles.subtitle, { color: themes[theme!].auxiliaryText }]} numberOfLines={1}>
 						{parentTitle}
 					</Text>
 				</View>
@@ -186,9 +186,15 @@ const Header = React.memo(
 					{tmid ? null : (
 						<RoomTypeIcon type={prid ? 'discussion' : type} isGroupChat={isGroupChat} status={status} teamMain={teamMain} />
 					)}
-					<HeaderTitle title={title} tmid={tmid} prid={prid} scale={scale} theme={theme} testID={testID} />
+					<HeaderTitle title={title} tmid={tmid} prid={prid} scale={scale} theme={theme!} testID={testID} />
 				</View>
-				<SubTitle usersTyping={tmid ? [] : usersTyping} subtitle={subtitle} theme={theme} renderFunc={renderFunc} scale={scale} />
+				<SubTitle
+					usersTyping={tmid ? [] : usersTyping}
+					subtitle={subtitle}
+					theme={theme!}
+					renderFunc={renderFunc}
+					scale={scale}
+				/>
 			</TouchableOpacity>
 		);
 	}

app/containers/RoomHeader/index.tsx

@@ -13,7 +13,7 @@ interface IRoomHeaderContainerProps {
 	prid: string;
 	tmid: string;
 	teamMain: boolean;
-	usersTyping: string;
+	usersTyping: [];
 	status: string;
 	statusText: string;
 	connecting: boolean;
@@ -79,14 +79,12 @@ class RoomHeaderContainer extends Component<IRoomHeaderContainerProps, any> {
 			teamMain,
 			prid,
 			tmid,
-			widthOffset,
 			status = 'offline',
 			statusText,
 			connecting,
 			connected,
 			usersTyping,
 			onPress,
-			roomUserId,
 			width,
 			height,
 			parentTitle,
@@ -115,9 +113,6 @@ class RoomHeaderContainer extends Component<IRoomHeaderContainerProps, any> {
 				width={width}
 				height={height}
 				usersTyping={usersTyping}
-				widthOffset={widthOffset}
-				roomUserId={roomUserId}
-				connecting={connecting}
 				parentTitle={parentTitle}
 				isGroupChat={isGroupChat}
 				testID={testID}

app/containers/RoomTypeIcon.tsx

 import React from 'react';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, ViewStyle } from 'react-native';
 
 import { CustomIcon } from '../lib/Icons';
 import { STATUS_COLORS, themes } from '../constants/colors';
@@ -13,13 +13,13 @@ const styles = StyleSheet.create({
 });
 
 interface IRoomTypeIcon {
-	theme: string;
+	theme?: string;
 	type: string;
-	isGroupChat: boolean;
-	teamMain: boolean;
-	status: string;
-	size: number;
-	style: any;
+	isGroupChat?: boolean;
+	teamMain?: boolean;
+	status?: string;
+	size?: number;
+	style?: ViewStyle;
 }
 
 const RoomTypeIcon = React.memo(({ type, isGroupChat, status, style, theme, teamMain, size = 16 }: IRoomTypeIcon) => {
@@ -27,11 +27,13 @@ const RoomTypeIcon = React.memo(({ type, isGroupChat, status, style, theme, team
 		return null;
 	}
 
-	const color = themes[theme].titleText;
+	const color = themes[theme!].titleText;
 	const iconStyle = [styles.icon, { color }, style];
 
 	if (type === 'd' && !isGroupChat) {
-		return <Status style={[iconStyle, { color: STATUS_COLORS[status] ?? STATUS_COLORS.offline }]} size={size} status={status} />;
+		return (
+			<Status style={[iconStyle, { color: STATUS_COLORS[status!] ?? STATUS_COLORS.offline }]} size={size} status={status!} />
+		);
 	}
 
 	// TODO: move this to a separate function

app/containers/SafeAreaView.tsx

@@ -12,16 +12,16 @@ const styles = StyleSheet.create({
 });
 
 interface ISafeAreaView {
-	testID: string;
-	theme: string;
-	vertical: boolean;
-	style: object;
-	children: JSX.Element;
+	testID?: string;
+	theme?: string;
+	vertical?: boolean;
+	style?: object;
+	children: React.ReactNode;
 }
 
 const SafeAreaView = React.memo(({ style, children, testID, theme, vertical = true, ...props }: ISafeAreaView) => (
 	<SafeAreaContext
-		style={[styles.view, { backgroundColor: themes[theme].auxiliaryBackground }, style]}
+		style={[styles.view, { backgroundColor: themes[theme!].auxiliaryBackground }, style]}
 		edges={vertical ? ['right', 'left'] : undefined}
 		testID={testID}
 		{...props}>