Chore: Migrate react-navigation to TypeScript (#3480)

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

app/AppContainer.tsx

@@ -3,6 +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 Navigation from './lib/Navigation';
 import { defaultHeader, getActiveRouteName, navigationTheme } from './utils/navigation';
 import { ROOT_INSIDE, ROOT_LOADING, ROOT_OUTSIDE, ROOT_SET_USERNAME } from './actions/app';
@@ -17,7 +18,7 @@ import { ThemeContext } from './theme';
 import { setCurrentScreen } from './utils/log';
 
 // SetUsernameStack
-const SetUsername = createStackNavigator();
+const SetUsername = createStackNavigator<SetUsernameStackParamList>();
 const SetUsernameStack = () => (
 	<SetUsername.Navigator screenOptions={defaultHeader}>
 		<SetUsername.Screen name='SetUsernameView' component={SetUsernameView} />
@@ -25,7 +26,7 @@ const SetUsernameStack = () => (
 );
 
 // App
-const Stack = createStackNavigator();
+const Stack = createStackNavigator<StackParamList>();
 const App = React.memo(({ root, isMasterDetail }: { root: string; isMasterDetail: boolean }) => {
 	if (!root) {
 		return null;

app/containers/ActionSheet/Provider.tsx

@@ -17,7 +17,7 @@ export const useActionSheet = () => useContext(context);
 
 const { Provider, Consumer } = context;
 
-export const withActionSheet = <P extends object>(Component: React.ComponentType<P>) =>
+export const withActionSheet = (Component: any): any =>
 	forwardRef((props: any, ref: ForwardedRef<any>) => (
 		<Consumer>{(contexts: any) => <Component {...props} {...contexts} ref={ref} />}</Consumer>
 	));

app/containers/EmojiPicker/index.tsx

@@ -31,7 +31,7 @@ interface IEmojiPickerProps {
 	customEmojis?: any;
 	style: object;
 	theme?: string;
-	onEmojiSelected?: Function;
+	onEmojiSelected?: ((emoji: any) => void) | ((keyboardId: any, params?: any) => void);
 	tabEmojiStyle?: object;
 }
 
@@ -201,4 +201,5 @@ const mapStateToProps = (state: any) => ({
 	customEmojis: state.customEmojis
 });
 
-export default connect(mapStateToProps)(withTheme(EmojiPicker));
+// TODO - remove this as any, at the new PR to fix the HOC erros
+export default connect(mapStateToProps)(withTheme(EmojiPicker)) as any;

app/containers/LoginServices.tsx

@@ -423,4 +423,4 @@ const mapStateToProps = (state: any) => ({
 	services: state.login.services
 });
 
-export default connect(mapStateToProps)(withTheme(LoginServices));
+export default connect(mapStateToProps)(withTheme(LoginServices)) as any;

app/containers/MessageBox/EmojiKeyboard.tsx

@@ -13,7 +13,7 @@ interface IMessageBoxEmojiKeyboard {
 }
 
 export default class EmojiKeyboard extends React.PureComponent<IMessageBoxEmojiKeyboard, any> {
-	private readonly baseUrl: any;
+	private readonly baseUrl: string;
 
 	constructor(props: IMessageBoxEmojiKeyboard) {
 		super(props);

app/containers/MessageBox/index.tsx

@@ -1124,4 +1124,4 @@ const dispatchToProps = {
 	typing: (rid: any, status: any) => userTypingAction(rid, status)
 };
 // @ts-ignore
-export default connect(mapStateToProps, dispatchToProps, null, { forwardRef: true })(withActionSheet(MessageBox));
+export default connect(mapStateToProps, dispatchToProps, null, { forwardRef: true })(withActionSheet(MessageBox)) as any;

app/containers/SearchBox.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, Text, TextInputProps, View } from 'react-native';
 import Touchable from 'react-native-platform-touchable';
 
 import TextInput from '../presentation/TextInput';
@@ -45,7 +45,7 @@ const styles = StyleSheet.create({
 });
 
 interface ISearchBox {
-	onChangeText: () => void;
+	onChangeText: TextInputProps['onChangeText'];
 	onSubmitEditing: () => void;
 	hasCancel: boolean;
 	onCancelPress: Function;

app/definitions/IAttachment.ts

@@ -0,0 +1,10 @@
+export interface IAttachment {
+	title: string;
+	type: string;
+	description: string;
+	title_link?: string;
+	image_url?: string;
+	image_type?: string;
+	video_url?: string;
+	video_type?: string;
+}

app/definitions/IMessage.ts

@@ -0,0 +1,3 @@
+export interface IMessage {
+	msg: string;
+}

app/definitions/IRocketChatRecord.ts

@@ -0,0 +1,4 @@
+export interface IRocketChatRecord {
+	id: string;
+	updatedAt: Date;
+}

app/definitions/IRoom.ts

@@ -0,0 +1,27 @@
+import { IRocketChatRecord } from './IRocketChatRecord';
+
+export enum RoomType {
+	GROUP = 'p',
+	DIRECT = 'd',
+	CHANNEL = 'c',
+	OMNICHANNEL = 'l',
+	THREAD = 'thread'
+}
+
+export interface IRoom extends IRocketChatRecord {
+	rid: string;
+	t: RoomType;
+	name: string;
+	fname: string;
+	prid?: string;
+	tmid?: string;
+	topic?: string;
+	teamMain?: boolean;
+	teamId?: string;
+	encrypted?: boolean;
+	visitor?: boolean;
+	autoTranslateLanguage?: boolean;
+	autoTranslate?: boolean;
+	observe?: Function;
+	usedCannedResponse: string;
+}

app/definitions/IServer.ts

@@ -0,0 +1,16 @@
+export interface IServer {
+	name: string;
+	iconURL: string;
+	useRealName: boolean;
+	FileUpload_MediaTypeWhiteList: string;
+	FileUpload_MaxFileSize: number;
+	roomsUpdatedAt: Date;
+	version: string;
+	lastLocalAuthenticatedSession: Date;
+	autoLock: boolean;
+	autoLockTime: number | null;
+	biometry: boolean | null;
+	uniqueID: string;
+	enterpriseModules: string;
+	E2E_Enable: boolean;
+}

app/dimensions.tsx

@@ -22,7 +22,7 @@ export interface IDimensionsContextProps {
 
 export const DimensionsContext = React.createContext<Partial<IDimensionsContextProps>>(Dimensions.get('window'));
 
-export function withDimensions(Component: any) {
+export function withDimensions(Component: any): any {
 	const DimensionsComponent = (props: any) => (
 		<DimensionsContext.Consumer>{contexts => <Component {...props} {...contexts} />}</DimensionsContext.Consumer>
 	);

app/ee/omnichannel/views/QueueListView.js

@@ -161,4 +161,5 @@ const mapStateToProps = state => ({
 	showAvatar: state.sortPreferences.showAvatar,
 	displayMode: state.sortPreferences.displayMode
 });
+
 export default connect(mapStateToProps)(withDimensions(withTheme(QueueListView)));

app/lib/rocketchat.js

@@ -24,7 +24,7 @@ import { selectServerFailure } from '../actions/server';
 import { useSsl } from '../utils/url';
 import EventEmitter from '../utils/events';
 import { updatePermission } from '../actions/permissions';
-import { TEAM_TYPE } from '../definition/ITeam';
+import { TEAM_TYPE } from '../definitions/ITeam';
 import { updateSettings } from '../actions/settings';
 import { compareServerVersion, methods } from './utils';
 import reduxStore from './createStore';

app/navigationTypes.ts

@@ -0,0 +1,45 @@
+import { NavigatorScreenParams } from '@react-navigation/core';
+
+import { IRoom } from './definitions/IRoom';
+import { IServer } from './definitions/IServer';
+import { IAttachment } from './definitions/IAttachment';
+import { MasterDetailInsideStackParamList } from './stacks/MasterDetailStack/types';
+import { OutsideParamList, InsideStackParamList } from './stacks/types';
+
+export type SetUsernameStackParamList = {
+	SetUsernameView: {
+		title: string;
+	};
+};
+
+export type StackParamList = {
+	AuthLoading: undefined;
+	OutsideStack: NavigatorScreenParams<OutsideParamList>;
+	InsideStack: NavigatorScreenParams<InsideStackParamList>;
+	MasterDetailStack: NavigatorScreenParams<MasterDetailInsideStackParamList>;
+	SetUsernameStack: NavigatorScreenParams<SetUsernameStackParamList>;
+};
+
+export type ShareInsideStackParamList = {
+	ShareListView: undefined;
+	ShareView: {
+		attachments: IAttachment[];
+		isShareView?: boolean;
+		isShareExtension: boolean;
+		serverInfo: IServer;
+		text: string;
+		room: IRoom;
+		thread: any; // TODO: Change
+	};
+	SelectServerView: undefined;
+};
+
+export type ShareOutsideStackParamList = {
+	WithoutServersView: undefined;
+};
+
+export type ShareAppStackParamList = {
+	AuthLoading?: undefined;
+	OutsideStack?: NavigatorScreenParams<ShareOutsideStackParamList>;
+	InsideStack?: NavigatorScreenParams<ShareInsideStackParamList>;
+};

app/share.tsx

@@ -25,6 +25,7 @@ import { setCurrentScreen } from './utils/log';
 import AuthLoadingView from './views/AuthLoadingView';
 import { DimensionsContext } from './dimensions';
 import debounce from './utils/debounce';
+import { ShareInsideStackParamList, ShareOutsideStackParamList, ShareAppStackParamList } from './navigationTypes';
 
 interface IDimensions {
 	width: number;
@@ -46,7 +47,7 @@ interface IState {
 	fontScale: number;
 }
 
-const Inside = createStackNavigator();
+const Inside = createStackNavigator<ShareInsideStackParamList>();
 const InsideStack = () => {
 	const { theme } = useContext(ThemeContext);
 
@@ -65,24 +66,19 @@ const InsideStack = () => {
 	);
 };
 
-const Outside = createStackNavigator();
+const Outside = createStackNavigator<ShareOutsideStackParamList>();
 const OutsideStack = () => {
 	const { theme } = useContext(ThemeContext);
 
 	return (
 		<Outside.Navigator screenOptions={{ ...defaultHeader, ...themedHeader(theme) }}>
-			<Outside.Screen
-				name='WithoutServersView'
-				component={WithoutServersView}
-				/* @ts-ignore*/
-				options={WithoutServersView.navigationOptions}
-			/>
+			<Outside.Screen name='WithoutServersView' component={WithoutServersView} options={WithoutServersView.navigationOptions} />
 		</Outside.Navigator>
 	);
 };
 
 // App
-const Stack = createStackNavigator();
+const Stack = createStackNavigator<ShareAppStackParamList>();
 export const App = ({ root }: any) => (
 	<Stack.Navigator screenOptions={{ headerShown: false, animationEnabled: false }}>
 		<>
@@ -112,7 +108,7 @@ class Root extends React.Component<{}, IState> {
 		this.init();
 	}
 
-	componentWillUnmount() {
+	componentWillUnmount(): void {
 		RocketChat.closeShareExtension();
 		unsubscribeTheme();
 	}

app/stacks/InsideStack.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
 import { I18nManager } from 'react-native';
-import { createStackNavigator } from '@react-navigation/stack';
+import { createStackNavigator, StackNavigationOptions } from '@react-navigation/stack';
 import { createDrawerNavigator } from '@react-navigation/drawer';
 
 import { ThemeContext } from '../theme';
 import { ModalAnimation, StackAnimation, defaultHeader, themedHeader } from '../utils/navigation';
 import Sidebar from '../views/SidebarView';
-
 // Chats Stack
 import RoomView from '../views/RoomView';
 import RoomsListView from '../views/RoomsListView';
@@ -37,10 +36,8 @@ import { themes } from '../constants/colors';
 import ProfileView from '../views/ProfileView';
 import UserPreferencesView from '../views/UserPreferencesView';
 import UserNotificationPrefView from '../views/UserNotificationPreferencesView';
-
 // Display Preferences View
 import DisplayPrefsView from '../views/DisplayPrefsView';
-
 // Settings Stack
 import SettingsView from '../views/SettingsView';
 import SecurityPrivacyView from '../views/SecurityPrivacyView';
@@ -49,21 +46,16 @@ import LanguageView from '../views/LanguageView';
 import ThemeView from '../views/ThemeView';
 import DefaultBrowserView from '../views/DefaultBrowserView';
 import ScreenLockConfigView from '../views/ScreenLockConfigView';
-
 // Admin Stack
 import AdminPanelView from '../views/AdminPanelView';
-
 // NewMessage Stack
 import NewMessageView from '../views/NewMessageView';
 import CreateChannelView from '../views/CreateChannelView';
-
 // E2ESaveYourPassword Stack
 import E2ESaveYourPasswordView from '../views/E2ESaveYourPasswordView';
 import E2EHowItWorksView from '../views/E2EHowItWorksView';
-
 // E2EEnterYourPassword Stack
 import E2EEnterYourPasswordView from '../views/E2EEnterYourPasswordView';
-
 // InsideStackNavigator
 import AttachmentView from '../views/AttachmentView';
 import ModalBlockView from '../views/ModalBlockView';
@@ -75,20 +67,33 @@ import QueueListView from '../ee/omnichannel/views/QueueListView';
 import AddChannelTeamView from '../views/AddChannelTeamView';
 import AddExistingChannelView from '../views/AddExistingChannelView';
 import SelectListView from '../views/SelectListView';
+import {
+	AdminPanelStackParamList,
+	ChatsStackParamList,
+	DisplayPrefStackParamList,
+	DrawerParamList,
+	E2EEnterYourPasswordStackParamList,
+	E2ESaveYourPasswordStackParamList,
+	InsideStackParamList,
+	NewMessageStackParamList,
+	ProfileStackParamList,
+	SettingsStackParamList
+} from './types';
 
 // ChatsStackNavigator
-const ChatsStack = createStackNavigator();
+const ChatsStack = createStackNavigator<ChatsStackParamList>();
 const ChatsStackNavigator = () => {
 	const { theme } = React.useContext(ThemeContext);
 	return (
-		<ChatsStack.Navigator screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...StackAnimation }}>
+		<ChatsStack.Navigator
+			screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...StackAnimation } as StackNavigationOptions}>
 			<ChatsStack.Screen name='RoomsListView' component={RoomsListView} />
 			<ChatsStack.Screen name='RoomView' component={RoomView} />
 			<ChatsStack.Screen name='RoomActionsView' component={RoomActionsView} options={RoomActionsView.navigationOptions} />
 			<ChatsStack.Screen name='SelectListView' component={SelectListView} options={SelectListView.navigationOptions} />
 			<ChatsStack.Screen name='RoomInfoView' component={RoomInfoView} options={RoomInfoView.navigationOptions} />
 			<ChatsStack.Screen name='RoomInfoEditView' component={RoomInfoEditView} options={RoomInfoEditView.navigationOptions} />
-			<ChatsStack.Screen name='RoomMembersView' component={RoomMembersView} options={RoomMembersView.navigationOptions} />
+			<ChatsStack.Screen name='RoomMembersView' component={RoomMembersView} />
 			<ChatsStack.Screen
 				name='SearchMessagesView'
 				component={SearchMessagesView}
@@ -126,13 +131,9 @@ const ChatsStackNavigator = () => {
 				component={ThreadMessagesView}
 				options={ThreadMessagesView.navigationOptions}
 			/>
-			<ChatsStack.Screen name='TeamChannelsView' component={TeamChannelsView} options={TeamChannelsView.navigationOptions} />
+			<ChatsStack.Screen name='TeamChannelsView' component={TeamChannelsView} />
 			<ChatsStack.Screen name='CreateChannelView' component={CreateChannelView} options={CreateChannelView.navigationOptions} />
-			<ChatsStack.Screen
-				name='AddChannelTeamView'
-				component={AddChannelTeamView}
-				options={AddChannelTeamView.navigationOptions}
-			/>
+			<ChatsStack.Screen name='AddChannelTeamView' component={AddChannelTeamView} />
 			<ChatsStack.Screen
 				name='AddExistingChannelView'
 				component={AddExistingChannelView}
@@ -141,32 +142,21 @@ const ChatsStackNavigator = () => {
 			<ChatsStack.Screen name='MarkdownTableView' component={MarkdownTableView} options={MarkdownTableView.navigationOptions} />
 			<ChatsStack.Screen name='ReadReceiptsView' component={ReadReceiptsView} options={ReadReceiptsView.navigationOptions} />
 			<ChatsStack.Screen name='QueueListView' component={QueueListView} options={QueueListView.navigationOptions} />
-			<ChatsStack.Screen
-				name='CannedResponsesListView'
-				component={CannedResponsesListView}
-				options={CannedResponsesListView.navigationOptions}
-			/>
-			<ChatsStack.Screen
-				name='CannedResponseDetail'
-				component={CannedResponseDetail}
-				options={CannedResponseDetail.navigationOptions}
-			/>
+			<ChatsStack.Screen name='CannedResponsesListView' component={CannedResponsesListView} />
+			<ChatsStack.Screen name='CannedResponseDetail' component={CannedResponseDetail} />
 		</ChatsStack.Navigator>
 	);
 };
 
 // ProfileStackNavigator
-const ProfileStack = createStackNavigator();
+const ProfileStack = createStackNavigator<ProfileStackParamList>();
 const ProfileStackNavigator = () => {
 	const { theme } = React.useContext(ThemeContext);
 	return (
-		<ProfileStack.Navigator screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...StackAnimation }}>
+		<ProfileStack.Navigator
+			screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...StackAnimation } as StackNavigationOptions}>
 			<ProfileStack.Screen name='ProfileView' component={ProfileView} options={ProfileView.navigationOptions} />
-			<ProfileStack.Screen
-				name='UserPreferencesView'
-				component={UserPreferencesView}
-				options={UserPreferencesView.navigationOptions}
-			/>
+			<ProfileStack.Screen name='UserPreferencesView' component={UserPreferencesView} />
 			<ProfileStack.Screen
 				name='UserNotificationPrefView'
 				component={UserNotificationPrefView}
@@ -178,18 +168,15 @@ const ProfileStackNavigator = () => {
 };
 
 // SettingsStackNavigator
-const SettingsStack = createStackNavigator();
+const SettingsStack = createStackNavigator<SettingsStackParamList>();
 const SettingsStackNavigator = () => {
 	const { theme } = React.useContext(ThemeContext);
 
 	return (
-		<SettingsStack.Navigator screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...StackAnimation }}>
+		<SettingsStack.Navigator
+			screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...StackAnimation } as StackNavigationOptions}>
 			<SettingsStack.Screen name='SettingsView' component={SettingsView} options={SettingsView.navigationOptions} />
-			<SettingsStack.Screen
-				name='SecurityPrivacyView'
-				component={SecurityPrivacyView}
-				options={SecurityPrivacyView.navigationOptions}
-			/>
+			<SettingsStack.Screen name='SecurityPrivacyView' component={SecurityPrivacyView} />
 			<SettingsStack.Screen
 				name='E2EEncryptionSecurityView'
 				component={E2EEncryptionSecurityView}
@@ -212,31 +199,33 @@ const SettingsStackNavigator = () => {
 };
 
 // AdminPanelStackNavigator
-const AdminPanelStack = createStackNavigator();
+const AdminPanelStack = createStackNavigator<AdminPanelStackParamList>();
 const AdminPanelStackNavigator = () => {
 	const { theme } = React.useContext(ThemeContext);
 
 	return (
-		<AdminPanelStack.Navigator screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...StackAnimation }}>
+		<AdminPanelStack.Navigator
+			screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...StackAnimation } as StackNavigationOptions}>
 			<AdminPanelStack.Screen name='AdminPanelView' component={AdminPanelView} options={AdminPanelView.navigationOptions} />
 		</AdminPanelStack.Navigator>
 	);
 };
 
 // DisplayPreferenceNavigator
-const DisplayPrefStack = createStackNavigator();
+const DisplayPrefStack = createStackNavigator<DisplayPrefStackParamList>();
 const DisplayPrefStackNavigator = () => {
 	const { theme } = React.useContext(ThemeContext);
 
 	return (
-		<DisplayPrefStack.Navigator screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...StackAnimation }}>
+		<DisplayPrefStack.Navigator
+			screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...StackAnimation } as StackNavigationOptions}>
 			<DisplayPrefStack.Screen name='DisplayPrefsView' component={DisplayPrefsView} />
 		</DisplayPrefStack.Navigator>
 	);
 };
 
 // DrawerNavigator
-const Drawer = createDrawerNavigator();
+const Drawer = createDrawerNavigator<DrawerParamList>();
 const DrawerNavigator = () => {
 	const { theme } = React.useContext(ThemeContext);
 
@@ -257,12 +246,13 @@ const DrawerNavigator = () => {
 };
 
 // NewMessageStackNavigator
-const NewMessageStack = createStackNavigator();
+const NewMessageStack = createStackNavigator<NewMessageStackParamList>();
 const NewMessageStackNavigator = () => {
 	const { theme } = React.useContext(ThemeContext);
 
 	return (
-		<NewMessageStack.Navigator screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...StackAnimation }}>
+		<NewMessageStack.Navigator
+			screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...StackAnimation } as StackNavigationOptions}>
 			<NewMessageStack.Screen name='NewMessageView' component={NewMessageView} options={NewMessageView.navigationOptions} />
 			<NewMessageStack.Screen name='SelectedUsersViewCreateChannel' component={SelectedUsersView} />
 			<NewMessageStack.Screen
@@ -276,12 +266,13 @@ const NewMessageStackNavigator = () => {
 };
 
 // E2ESaveYourPasswordStackNavigator
-const E2ESaveYourPasswordStack = createStackNavigator();
+const E2ESaveYourPasswordStack = createStackNavigator<E2ESaveYourPasswordStackParamList>();
 const E2ESaveYourPasswordStackNavigator = () => {
 	const { theme } = React.useContext(ThemeContext);
 
 	return (
-		<E2ESaveYourPasswordStack.Navigator screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...StackAnimation }}>
+		<E2ESaveYourPasswordStack.Navigator
+			screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...StackAnimation } as StackNavigationOptions}>
 			<E2ESaveYourPasswordStack.Screen
 				name='E2ESaveYourPasswordView'
 				component={E2ESaveYourPasswordView}
@@ -297,12 +288,13 @@ const E2ESaveYourPasswordStackNavigator = () => {
 };
 
 // E2EEnterYourPasswordStackNavigator
-const E2EEnterYourPasswordStack = createStackNavigator();
+const E2EEnterYourPasswordStack = createStackNavigator<E2EEnterYourPasswordStackParamList>();
 const E2EEnterYourPasswordStackNavigator = () => {
 	const { theme } = React.useContext(ThemeContext);
 
 	return (
-		<E2EEnterYourPasswordStack.Navigator screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...StackAnimation }}>
+		<E2EEnterYourPasswordStack.Navigator
+			screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...StackAnimation } as StackNavigationOptions}>
 			<E2EEnterYourPasswordStack.Screen
 				name='E2EEnterYourPasswordView'
 				component={E2EEnterYourPasswordView}
@@ -313,7 +305,7 @@ const E2EEnterYourPasswordStackNavigator = () => {
 };
 
 // InsideStackNavigator
-const InsideStack = createStackNavigator();
+const InsideStack = createStackNavigator<InsideStackParamList>();
 const InsideStackNavigator = () => {
 	const { theme } = React.useContext(ThemeContext);
 

app/stacks/MasterDetailStack/ModalContainer.tsx

@@ -1,10 +1,17 @@
 import React from 'react';
 import { StyleSheet, TouchableWithoutFeedback, View } from 'react-native';
-import PropTypes from 'prop-types';
+import { StackNavigationProp } from '@react-navigation/stack';
+import { NavigationContainerProps } from '@react-navigation/core';
 
 import sharedStyles from '../../views/Styles';
 import { themes } from '../../constants/colors';
 
+interface IModalContainer extends NavigationContainerProps {
+	navigation: StackNavigationProp<any>;
+	children: React.ReactNode;
+	theme: string;
+}
+
 const styles = StyleSheet.create({
 	root: {
 		flex: 1,
@@ -12,11 +19,11 @@ const styles = StyleSheet.create({
 		justifyContent: 'center'
 	},
 	backdrop: {
-		...StyleSheet.absoluteFill
+		...StyleSheet.absoluteFillObject
 	}
 });
 
-export const ModalContainer = ({ navigation, children, theme }) => (
+export const ModalContainer = ({ navigation, children, theme }: IModalContainer): JSX.Element => (
 	<View style={[styles.root, { backgroundColor: `${themes[theme].backdropColor}70` }]}>
 		<TouchableWithoutFeedback onPress={() => navigation.pop()}>
 			<View style={styles.backdrop} />
@@ -24,9 +31,3 @@ export const ModalContainer = ({ navigation, children, theme }) => (
 		<View style={sharedStyles.modalFormSheet}>{children}</View>
 	</View>
 );
-
-ModalContainer.propTypes = {
-	navigation: PropTypes.object,
-	children: PropTypes.element,
-	theme: PropTypes.string
-};

app/stacks/MasterDetailStack/index.tsx

@@ -1,12 +1,10 @@
 import React, { useEffect } from 'react';
-import PropTypes from 'prop-types';
 import { useIsFocused } from '@react-navigation/native';
-import { createStackNavigator } from '@react-navigation/stack';
+import { createStackNavigator, StackNavigationOptions, StackNavigationProp } from '@react-navigation/stack';
 import { createDrawerNavigator } from '@react-navigation/drawer';
 
 import { ThemeContext } from '../../theme';
 import { FadeFromCenterModal, StackAnimation, defaultHeader, themedHeader } from '../../utils/navigation';
-
 // Chats Stack
 import RoomView from '../../views/RoomView';
 import RoomsListView from '../../views/RoomsListView';
@@ -46,7 +44,6 @@ import UserPreferencesView from '../../views/UserPreferencesView';
 import UserNotificationPrefView from '../../views/UserNotificationPreferencesView';
 import SecurityPrivacyView from '../../views/SecurityPrivacyView';
 import E2EEncryptionSecurityView from '../../views/E2EEncryptionSecurityView';
-
 // InsideStackNavigator
 import AttachmentView from '../../views/AttachmentView';
 import ModalBlockView from '../../views/ModalBlockView';
@@ -63,9 +60,15 @@ import AddChannelTeamView from '../../views/AddChannelTeamView';
 import AddExistingChannelView from '../../views/AddExistingChannelView';
 import SelectListView from '../../views/SelectListView';
 import { ModalContainer } from './ModalContainer';
+import {
+	MasterDetailChatsStackParamList,
+	MasterDetailDrawerParamList,
+	MasterDetailInsideStackParamList,
+	ModalStackParamList
+} from './types';
 
 // ChatsStackNavigator
-const ChatsStack = createStackNavigator();
+const ChatsStack = createStackNavigator<MasterDetailChatsStackParamList>();
 const ChatsStackNavigator = React.memo(() => {
 	const { theme } = React.useContext(ThemeContext);
 
@@ -82,28 +85,35 @@ const ChatsStackNavigator = React.memo(() => {
 	}, [isFocused]);
 
 	return (
-		<ChatsStack.Navigator screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...StackAnimation }}>
+		<ChatsStack.Navigator
+			screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...StackAnimation } as StackNavigationOptions}>
 			<ChatsStack.Screen name='RoomView' component={RoomView} options={{ headerShown: false }} />
 		</ChatsStack.Navigator>
 	);
 });
 
 // DrawerNavigator
-const Drawer = createDrawerNavigator();
+const Drawer = createDrawerNavigator<MasterDetailDrawerParamList>();
 const DrawerNavigator = React.memo(() => (
 	<Drawer.Navigator
+		// @ts-ignore
 		drawerContent={({ navigation, state }) => <RoomsListView navigation={navigation} state={state} />}
 		drawerType='permanent'>
 		<Drawer.Screen name='ChatsStackNavigator' component={ChatsStackNavigator} />
 	</Drawer.Navigator>
 ));
 
-const ModalStack = createStackNavigator();
-const ModalStackNavigator = React.memo(({ navigation }) => {
+export interface INavigation {
+	navigation: StackNavigationProp<ModalStackParamList>;
+}
+
+const ModalStack = createStackNavigator<ModalStackParamList>();
+const ModalStackNavigator = React.memo(({ navigation }: INavigation) => {
 	const { theme } = React.useContext(ThemeContext);
 	return (
 		<ModalContainer navigation={navigation} theme={theme}>
-			<ModalStack.Navigator screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...StackAnimation }}>
+			<ModalStack.Navigator
+				screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...StackAnimation } as StackNavigationOptions}>
 				<ModalStack.Screen
 					name='RoomActionsView'
 					component={RoomActionsView}
@@ -120,11 +130,7 @@ const ModalStackNavigator = React.memo(({ navigation }) => {
 				/>
 				<ModalStack.Screen name='SelectedUsersView' component={SelectedUsersView} />
 				<ModalStack.Screen name='InviteUsersView' component={InviteUsersView} options={InviteUsersView.navigationOptions} />
-				<ModalStack.Screen
-					name='AddChannelTeamView'
-					component={AddChannelTeamView}
-					options={AddChannelTeamView.navigationOptions}
-				/>
+				<ModalStack.Screen name='AddChannelTeamView' component={AddChannelTeamView} />
 				<ModalStack.Screen
 					name='AddExistingChannelView'
 					component={AddExistingChannelView}
@@ -162,16 +168,8 @@ const ModalStackNavigator = React.memo(({ navigation }) => {
 					component={ForwardLivechatView}
 					options={ForwardLivechatView.navigationOptions}
 				/>
-				<ModalStack.Screen
-					name='CannedResponsesListView'
-					component={CannedResponsesListView}
-					options={CannedResponsesListView.navigationOptions}
-				/>
-				<ModalStack.Screen
-					name='CannedResponseDetail'
-					component={CannedResponseDetail}
-					options={CannedResponseDetail.navigationOptions}
-				/>
+				<ModalStack.Screen name='CannedResponsesListView' component={CannedResponsesListView} />
+				<ModalStack.Screen name='CannedResponseDetail' component={CannedResponseDetail} />
 				<ModalStack.Screen name='LivechatEditView' component={LivechatEditView} options={LivechatEditView.navigationOptions} />
 				<ModalStack.Screen name='PickerView' component={PickerView} options={PickerView.navigationOptions} />
 				<ModalStack.Screen name='ThreadMessagesView' component={ThreadMessagesView} />
@@ -226,21 +224,13 @@ const ModalStackNavigator = React.memo(({ navigation }) => {
 					component={E2EEnterYourPasswordView}
 					options={E2EEnterYourPasswordView.navigationOptions}
 				/>
-				<ModalStack.Screen
-					name='UserPreferencesView'
-					component={UserPreferencesView}
-					options={UserPreferencesView.navigationOptions}
-				/>
+				<ModalStack.Screen name='UserPreferencesView' component={UserPreferencesView} />
 				<ModalStack.Screen
 					name='UserNotificationPrefView'
 					component={UserNotificationPrefView}
 					options={UserNotificationPrefView.navigationOptions}
 				/>
-				<ModalStack.Screen
-					name='SecurityPrivacyView'
-					component={SecurityPrivacyView}
-					options={SecurityPrivacyView.navigationOptions}
-				/>
+				<ModalStack.Screen name='SecurityPrivacyView' component={SecurityPrivacyView} />
 				<ModalStack.Screen
 					name='E2EEncryptionSecurityView'
 					component={E2EEncryptionSecurityView}
@@ -251,16 +241,14 @@ const ModalStackNavigator = React.memo(({ navigation }) => {
 	);
 });
 
-ModalStackNavigator.propTypes = {
-	navigation: PropTypes.object
-};
-
 // InsideStackNavigator
-const InsideStack = createStackNavigator();
+const InsideStack = createStackNavigator<MasterDetailInsideStackParamList>();
 const InsideStackNavigator = React.memo(() => {
 	const { theme } = React.useContext(ThemeContext);
 	return (
-		<InsideStack.Navigator mode='modal' screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...FadeFromCenterModal }}>
+		<InsideStack.Navigator
+			mode='modal'
+			screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...FadeFromCenterModal } as StackNavigationOptions}>
 			<InsideStack.Screen name='DrawerNavigator' component={DrawerNavigator} options={{ headerShown: false }} />
 			<InsideStack.Screen name='ModalStackNavigator' component={ModalStackNavigator} options={{ headerShown: false }} />
 			<InsideStack.Screen name='AttachmentView' component={AttachmentView} />

app/stacks/MasterDetailStack/types.ts

@@ -0,0 +1,203 @@
+import { TextInputProps } from 'react-native';
+import { NavigatorScreenParams } from '@react-navigation/core';
+
+import { IAttachment } from '../../definitions/IAttachment';
+import { IMessage } from '../../definitions/IMessage';
+import { IRoom, RoomType } from '../../definitions/IRoom';
+
+export type MasterDetailChatsStackParamList = {
+	RoomView: {
+		rid: string;
+		t: RoomType;
+		tmid?: string;
+		message?: string;
+		name?: string;
+		fname?: string;
+		prid?: string;
+		room: IRoom;
+		jumpToMessageId?: string;
+		jumpToThreadId?: string;
+		roomUserId?: string;
+	};
+};
+
+export type MasterDetailDrawerParamList = {
+	ChatsStackNavigator: NavigatorScreenParams<MasterDetailChatsStackParamList>;
+};
+
+export type ModalStackParamList = {
+	RoomActionsView: {
+		room: IRoom;
+		member: any;
+		rid: string;
+		t: RoomType;
+		joined: boolean;
+	};
+	RoomInfoView: {
+		room: IRoom;
+		member: any;
+		rid: string;
+		t: RoomType;
+	};
+	SelectListView: {
+		data: any;
+		title: string;
+		infoText: string;
+		nextAction: Function;
+		showAlert: boolean;
+		isSearch: boolean;
+		onSearch: Function;
+		isRadio?: boolean;
+	};
+	RoomInfoEditView: {
+		rid: string;
+	};
+	RoomMembersView: {
+		rid: string;
+		room: IRoom;
+	};
+	SearchMessagesView: {
+		rid: string;
+		t: RoomType;
+		encrypted?: boolean;
+		showCloseModal?: boolean;
+	};
+	SelectedUsersView: {
+		maxUsers: number;
+		showButton: boolean;
+		title: string;
+		buttonText: string;
+		nextAction: Function;
+	};
+	InviteUsersView: {
+		rid: string;
+	};
+	AddChannelTeamView: {
+		teamId?: string;
+		teamChannels: []; // TODO: Change
+	};
+	AddExistingChannelView: {
+		teamId?: boolean;
+	};
+	InviteUsersEditView: {
+		rid: string;
+	};
+	MessagesView: {
+		rid: string;
+		t: RoomType;
+		name: string;
+	};
+	AutoTranslateView: {
+		rid: string;
+		room: IRoom;
+	};
+	DirectoryView: undefined;
+	QueueListView: undefined;
+	NotificationPrefView: {
+		rid: string;
+		room: IRoom;
+	};
+	VisitorNavigationView: {
+		rid: string;
+	};
+	ForwardLivechatView: {
+		rid: string;
+	};
+	CannedResponsesListView: {
+		rid: string;
+	};
+	CannedResponseDetail: {
+		cannedResponse: {
+			shortcut: string;
+			text: string;
+			scopeName: string;
+			tags: string[];
+		};
+		room: IRoom;
+	};
+	LivechatEditView: {
+		room: IRoom;
+		roomUser: any; // TODO: Change
+	};
+	PickerView: {
+		title: string;
+		data: []; // TODO: Change
+		value: any; // TODO: Change
+		onChangeText: TextInputProps['onChangeText'];
+		goBack: Function;
+		onChangeValue: Function;
+	};
+	ThreadMessagesView: {
+		rid: string;
+		t: RoomType;
+	};
+	TeamChannelsView: {
+		teamId: string;
+	};
+	MarkdownTableView: {
+		renderRows: Function;
+		tableWidth: number;
+	};
+	ReadReceiptsView: {
+		messageId: string;
+	};
+	SettingsView: undefined;
+	LanguageView: undefined;
+	ThemeView: undefined;
+	DefaultBrowserView: undefined;
+	ScreenLockConfigView: undefined;
+	StatusView: undefined;
+	ProfileView: undefined;
+	DisplayPrefsView: undefined;
+	AdminPanelView: undefined;
+	NewMessageView: undefined;
+	SelectedUsersViewCreateChannel: {
+		maxUsers: number;
+		showButton: boolean;
+		title: string;
+		buttonText: string;
+		nextAction: Function;
+	}; // TODO: Change
+	CreateChannelView: {
+		isTeam?: boolean; // TODO: To check
+		teamId?: string;
+	};
+	CreateDiscussionView: {
+		channel: IRoom;
+		message: IMessage;
+		showCloseModal: boolean;
+	};
+	E2ESaveYourPasswordView: undefined;
+	E2EHowItWorksView: {
+		showCloseModal: boolean;
+	};
+	E2EEnterYourPasswordView: undefined;
+	UserPreferencesView: undefined;
+	UserNotificationPrefView: undefined;
+	SecurityPrivacyView: undefined;
+	E2EEncryptionSecurityView: undefined;
+};
+
+export type MasterDetailInsideStackParamList = {
+	DrawerNavigator: NavigatorScreenParams<Partial<MasterDetailDrawerParamList>>; // TODO: Change
+	ModalStackNavigator: NavigatorScreenParams<ModalStackParamList>;
+	AttachmentView: {
+		attachment: IAttachment;
+	};
+	ModalBlockView: {
+		data: any; // TODO: Change
+	};
+	JitsiMeetView: {
+		rid: string;
+		url: string;
+		onlyAudio?: boolean;
+	};
+	ShareView: {
+		attachments: IAttachment[];
+		isShareView?: boolean;
+		serverInfo: {};
+		text: string;
+		room: IRoom;
+		thread: any; // TODO: Change
+	};
+};

app/stacks/OutsideStack.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
-import { createStackNavigator } from '@react-navigation/stack';
+import { createStackNavigator, StackNavigationOptions } from '@react-navigation/stack';
 import { connect } from 'react-redux';
 
 import { ThemeContext } from '../theme';
 import { ModalAnimation, StackAnimation, defaultHeader, themedHeader } from '../utils/navigation';
-
 // Outside Stack
 import NewServerView from '../views/NewServerView';
 import WorkspaceView from '../views/WorkspaceView';
@@ -14,37 +13,34 @@ import SendEmailConfirmationView from '../views/SendEmailConfirmationView';
 import RegisterView from '../views/RegisterView';
 import LegalView from '../views/LegalView';
 import AuthenticationWebView from '../views/AuthenticationWebView';
+import { OutsideModalParamList, OutsideParamList } from './types';
 
 // Outside
-const Outside = createStackNavigator();
+const Outside = createStackNavigator<OutsideParamList>();
 const _OutsideStack = () => {
 	const { theme } = React.useContext(ThemeContext);
 
 	return (
-		<Outside.Navigator screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...StackAnimation }}>
+		<Outside.Navigator screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...StackAnimation } as StackNavigationOptions}>
 			<Outside.Screen name='NewServerView' component={NewServerView} options={NewServerView.navigationOptions} />
 			<Outside.Screen name='WorkspaceView' component={WorkspaceView} options={WorkspaceView.navigationOptions} />
 			<Outside.Screen name='LoginView' component={LoginView} options={LoginView.navigationOptions} />
 			<Outside.Screen name='ForgotPasswordView' component={ForgotPasswordView} options={ForgotPasswordView.navigationOptions} />
-			<Outside.Screen
-				name='SendEmailConfirmationView'
-				component={SendEmailConfirmationView}
-				options={SendEmailConfirmationView.navigationOptions}
-			/>
+			<Outside.Screen name='SendEmailConfirmationView' component={SendEmailConfirmationView} />
 			<Outside.Screen name='RegisterView' component={RegisterView} options={RegisterView.navigationOptions} />
 			<Outside.Screen name='LegalView' component={LegalView} options={LegalView.navigationOptions} />
 		</Outside.Navigator>
 	);
 };
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state: any) => ({
 	root: state.app.root
 });
 
 const OutsideStack = connect(mapStateToProps)(_OutsideStack);
 
 // OutsideStackModal
-const OutsideModal = createStackNavigator();
+const OutsideModal = createStackNavigator<OutsideModalParamList>();
 const OutsideStackModal = () => {
 	const { theme } = React.useContext(ThemeContext);
 

app/stacks/types.ts

@@ -0,0 +1,275 @@
+import { NavigatorScreenParams } from '@react-navigation/core';
+import { TextInputProps } from 'react-native';
+import Model from '@nozbe/watermelondb/Model';
+
+import { IOptionsField } from '../views/NotificationPreferencesView/options';
+import { IServer } from '../definitions/IServer';
+import { IAttachment } from '../definitions/IAttachment';
+import { IMessage } from '../definitions/IMessage';
+import { IRoom, RoomType } from '../definitions/IRoom';
+
+export type ChatsStackParamList = {
+	RoomsListView: undefined;
+	RoomView: {
+		rid: string;
+		t: RoomType;
+		tmid?: string;
+		message?: string;
+		name?: string;
+		fname?: string;
+		prid?: string;
+		room: IRoom;
+		jumpToMessageId?: string;
+		jumpToThreadId?: string;
+		roomUserId?: string;
+	};
+	RoomActionsView: {
+		room: IRoom;
+		member: any;
+		rid: string;
+		t: RoomType;
+		joined: boolean;
+	};
+	SelectListView: {
+		data: any;
+		title: string;
+		infoText: string;
+		nextAction: Function;
+		showAlert: boolean;
+		isSearch: boolean;
+		onSearch: Function;
+		isRadio?: boolean;
+	};
+	RoomInfoView: {
+		room: IRoom;
+		member: any;
+		rid: string;
+		t: RoomType;
+	};
+	RoomInfoEditView: {
+		rid: string;
+	};
+	RoomMembersView: {
+		rid: string;
+		room: IRoom;
+	};
+	SearchMessagesView: {
+		rid: string;
+		t: RoomType;
+		encrypted?: boolean;
+		showCloseModal?: boolean;
+	};
+	SelectedUsersView: {
+		maxUsers?: number;
+		showButton?: boolean;
+		title?: string;
+		buttonText?: string;
+		nextAction?: Function;
+	};
+	InviteUsersView: {
+		rid: string;
+	};
+	InviteUsersEditView: {
+		rid: string;
+	};
+	MessagesView: {
+		rid: string;
+		t: RoomType;
+		name: string;
+	};
+	AutoTranslateView: {
+		rid: string;
+		room: IRoom;
+	};
+	DirectoryView: undefined;
+	NotificationPrefView: {
+		rid: string;
+		room: Model;
+	};
+	VisitorNavigationView: {
+		rid: string;
+	};
+	ForwardLivechatView: {
+		rid: string;
+	};
+	LivechatEditView: {
+		room: IRoom;
+		roomUser: any; // TODO: Change
+	};
+	PickerView: {
+		title: string;
+		data: IOptionsField[];
+		value?: any; // TODO: Change
+		onChangeText?: ((text: string) => IOptionsField[]) | ((term?: string) => Promise<any>);
+		goBack?: boolean;
+		onChangeValue: Function;
+	};
+	ThreadMessagesView: {
+		rid: string;
+		t: RoomType;
+	};
+	TeamChannelsView: {
+		teamId: string;
+	};
+	CreateChannelView: {
+		isTeam?: boolean; // TODO: To check
+		teamId?: string;
+	};
+	AddChannelTeamView: {
+		teamId?: string;
+		teamChannels: []; // TODO: Change
+	};
+	AddExistingChannelView: {
+		teamId?: string;
+		teamChannels: []; // TODO: Change
+	};
+	MarkdownTableView: {
+		renderRows: (drawExtraBorders?: boolean) => JSX.Element;
+		tableWidth: number;
+	};
+	ReadReceiptsView: {
+		messageId: string;
+	};
+	QueueListView: undefined;
+	CannedResponsesListView: {
+		rid: string;
+	};
+	CannedResponseDetail: {
+		cannedResponse: {
+			shortcut: string;
+			text: string;
+			scopeName: string;
+			tags: string[];
+		};
+		room: IRoom;
+	};
+};
+
+export type ProfileStackParamList = {
+	ProfileView: undefined;
+	UserPreferencesView: undefined;
+	UserNotificationPrefView: undefined;
+	PickerView: {
+		title: string;
+		data: IOptionsField[];
+		value: any; // TODO: Change
+		onChangeText?: TextInputProps['onChangeText'];
+		goBack?: Function;
+		onChangeValue: Function;
+	};
+};
+
+export type SettingsStackParamList = {
+	SettingsView: undefined;
+	SecurityPrivacyView: undefined;
+	E2EEncryptionSecurityView: undefined;
+	LanguageView: undefined;
+	ThemeView: undefined;
+	DefaultBrowserView: undefined;
+	ScreenLockConfigView: undefined;
+	ProfileView: undefined;
+	DisplayPrefsView: undefined;
+};
+
+export type AdminPanelStackParamList = {
+	AdminPanelView: undefined;
+};
+
+export type DisplayPrefStackParamList = {
+	DisplayPrefsView: undefined;
+};
+
+export type DrawerParamList = {
+	ChatsStackNavigator: NavigatorScreenParams<ChatsStackParamList>;
+	ProfileStackNavigator: NavigatorScreenParams<ProfileStackParamList>;
+	SettingsStackNavigator: NavigatorScreenParams<SettingsStackParamList>;
+	AdminPanelStackNavigator: NavigatorScreenParams<AdminPanelStackParamList>;
+	DisplayPrefStackNavigator: NavigatorScreenParams<DisplayPrefStackParamList>;
+};
+
+export type NewMessageStackParamList = {
+	NewMessageView: undefined;
+	SelectedUsersViewCreateChannel: {
+		maxUsers?: number;
+		showButton?: boolean;
+		title?: string;
+		buttonText?: string;
+		nextAction?: Function;
+	}; // TODO: Change
+	CreateChannelView: {
+		isTeam?: boolean; // TODO: To check
+		teamId?: string;
+	};
+	CreateDiscussionView: {
+		channel: IRoom;
+		message: IMessage;
+		showCloseModal: boolean;
+	};
+};
+
+export type E2ESaveYourPasswordStackParamList = {
+	E2ESaveYourPasswordView: undefined;
+	E2EHowItWorksView?: {
+		showCloseModal?: boolean;
+	};
+};
+
+export type E2EEnterYourPasswordStackParamList = {
+	E2EEnterYourPasswordView: undefined;
+};
+
+export type InsideStackParamList = {
+	DrawerNavigator: NavigatorScreenParams<DrawerParamList>;
+	NewMessageStackNavigator: NavigatorScreenParams<NewMessageStackParamList>;
+	E2ESaveYourPasswordStackNavigator: NavigatorScreenParams<E2ESaveYourPasswordStackParamList>;
+	E2EEnterYourPasswordStackNavigator: NavigatorScreenParams<E2EEnterYourPasswordStackParamList>;
+	AttachmentView: {
+		attachment: IAttachment;
+	};
+	StatusView: undefined;
+	ShareView: {
+		attachments: IAttachment[];
+		isShareView?: boolean;
+		isShareExtension: boolean;
+		serverInfo: IServer;
+		text: string;
+		room: IRoom;
+		thread: any; // TODO: Change
+	};
+	ModalBlockView: {
+		data: any; // TODO: Change;
+	};
+	JitsiMeetView: {
+		rid: string;
+		url: string;
+		onlyAudio?: boolean;
+	};
+};
+
+export type OutsideParamList = {
+	NewServerView: undefined;
+	WorkspaceView: undefined;
+	LoginView: {
+		title: string;
+		username?: string;
+	};
+	ForgotPasswordView: {
+		title: string;
+	};
+	SendEmailConfirmationView: {
+		user?: string;
+	};
+	RegisterView: {
+		title: string;
+	};
+	LegalView: undefined;
+};
+
+export type OutsideModalParamList = {
+	OutsideStack: NavigatorScreenParams<OutsideParamList>;
+	AuthenticationWebView: {
+		authType: string;
+		url: string;
+		ssoToken?: string;
+	};
+};

app/theme.tsx

@@ -12,7 +12,7 @@ interface IThemeContextProps {
 
 export const ThemeContext = React.createContext<IThemeContextProps>({ theme: 'light' });
 
-export function withTheme(Component: any) {
+export function withTheme(Component: any): any {
 	const ThemedComponent = (props: any) => (
 		<ThemeContext.Consumer>{contexts => <Component {...props} {...contexts} />}</ThemeContext.Consumer>
 	);

app/utils/fileDownload/index.ts

@@ -5,13 +5,7 @@ import EventEmitter from '../events';
 import { LISTENER } from '../../containers/Toast';
 import I18n from '../../i18n';
 import { DOCUMENTS_PATH, DOWNLOAD_PATH } from '../../constants/localPath';
-
-interface IAttachment {
-	title: string;
-	title_link: string;
-	type: string;
-	description: string;
-}
+import { IAttachment } from '../../definitions/IAttachment';
 
 export const getLocalFilePathFromFile = (localPath: string, attachment: IAttachment): string => `${localPath}${attachment.title}`;
 

app/views/AddChannelTeamView.tsx

@@ -2,6 +2,7 @@ import React, { useEffect } from 'react';
 import { StackNavigationOptions, StackNavigationProp } from '@react-navigation/stack';
 import { RouteProp } from '@react-navigation/native';
 import { connect } from 'react-redux';
+import { CompositeNavigationProp } from '@react-navigation/core';
 
 import * as List from '../containers/List';
 import StatusBar from '../containers/StatusBar';
@@ -9,16 +10,24 @@ import { useTheme } from '../theme';
 import * as HeaderButton from '../containers/HeaderButton';
 import SafeAreaView from '../containers/SafeAreaView';
 import I18n from '../i18n';
-
-type TNavigation = StackNavigationProp<any, 'AddChannelTeamView'>;
+import { ChatsStackParamList, DrawerParamList, NewMessageStackParamList } from '../stacks/types';
 
 interface IAddChannelTeamView {
-	route: RouteProp<{ AddChannelTeamView: { teamId: string; teamChannels: object[] } }, 'AddChannelTeamView'>;
-	navigation: TNavigation;
+	navigation: CompositeNavigationProp<
+		StackNavigationProp<ChatsStackParamList, 'AddChannelTeamView'>,
+		CompositeNavigationProp<StackNavigationProp<NewMessageStackParamList>, StackNavigationProp<DrawerParamList>>
+	>;
+	route: RouteProp<ChatsStackParamList, 'AddChannelTeamView'>;
 	isMasterDetail: boolean;
 }
 
-const setHeader = (navigation: TNavigation, isMasterDetail: boolean) => {
+const setHeader = ({
+	navigation,
+	isMasterDetail
+}: {
+	navigation: StackNavigationProp<ChatsStackParamList, 'AddChannelTeamView'>;
+	isMasterDetail: boolean;
+}) => {
 	const options: StackNavigationOptions = {
 		headerTitle: I18n.t('Add_Channel_to_Team')
 	};
@@ -35,7 +44,7 @@ const AddChannelTeamView = ({ navigation, route, isMasterDetail }: IAddChannelTe
 	const { theme } = useTheme();
 
 	useEffect(() => {
-		setHeader(navigation, isMasterDetail);
+		setHeader({ navigation, isMasterDetail });
 	}, []);
 
 	return (

app/views/AddExistingChannelView.tsx

@@ -21,6 +21,7 @@ import { animateNextTransition } from '../utils/layoutAnimation';
 import { goRoom } from '../utils/goRoom';
 import { showErrorAlert } from '../utils/info';
 import debounce from '../utils/debounce';
+import { ChatsStackParamList } from '../stacks/types';
 
 interface IAddExistingChannelViewState {
 	// TODO: refactor with Room Model
@@ -31,8 +32,8 @@ interface IAddExistingChannelViewState {
 }
 
 interface IAddExistingChannelViewProps {
-	navigation: StackNavigationProp<any, 'AddExistingChannelView'>;
-	route: RouteProp<{ AddExistingChannelView: { teamId: string } }, 'AddExistingChannelView'>;
+	navigation: StackNavigationProp<ChatsStackParamList, 'AddExistingChannelView'>;
+	route: RouteProp<ChatsStackParamList, 'AddExistingChannelView'>;
 	theme: string;
 	isMasterDetail: boolean;
 	addTeamChannelPermission: string[];
@@ -41,7 +42,7 @@ interface IAddExistingChannelViewProps {
 const QUERY_SIZE = 50;
 
 class AddExistingChannelView extends React.Component<IAddExistingChannelViewProps, IAddExistingChannelViewState> {
-	private teamId: string;
+	private teamId?: string;
 	constructor(props: IAddExistingChannelViewProps) {
 		super(props);
 		this.query();

app/views/AdminPanelView/index.tsx

@@ -9,6 +9,7 @@ import * as HeaderButton from '../../containers/HeaderButton';
 import { withTheme } from '../../theme';
 import { getUserSelector } from '../../selectors/login';
 import SafeAreaView from '../../containers/SafeAreaView';
+import { AdminPanelStackParamList } from '../../stacks/types';
 
 interface IAdminPanelViewProps {
 	baseUrl: string;
@@ -16,7 +17,7 @@ interface IAdminPanelViewProps {
 }
 
 interface INavigationOptions {
-	navigation: DrawerScreenProps<any>;
+	navigation: DrawerScreenProps<AdminPanelStackParamList, 'AdminPanelView'>;
 	isMasterDetail: boolean;
 }
 

app/views/AttachmentView.tsx

@@ -24,6 +24,8 @@ import { getUserSelector } from '../selectors/login';
 import { withDimensions } from '../dimensions';
 import { getHeaderHeight } from '../containers/Header';
 import StatusBar from '../containers/StatusBar';
+import { InsideStackParamList } from '../stacks/types';
+import { IAttachment } from '../definitions/IAttachment';
 
 const styles = StyleSheet.create({
 	container: {
@@ -31,24 +33,14 @@ const styles = StyleSheet.create({
 	}
 });
 
-// TODO: refactor when react-navigation is done
-export interface IAttachment {
-	title: string;
-	title_link?: string;
-	image_url?: string;
-	image_type?: string;
-	video_url?: string;
-	video_type?: string;
-}
-
 interface IAttachmentViewState {
 	attachment: IAttachment;
 	loading: boolean;
 }
 
 interface IAttachmentViewProps {
-	navigation: StackNavigationProp<any, 'AttachmentView'>;
-	route: RouteProp<{ AttachmentView: { attachment: IAttachment } }, 'AttachmentView'>;
+	navigation: StackNavigationProp<InsideStackParamList, 'AttachmentView'>;
+	route: RouteProp<InsideStackParamList, 'AttachmentView'>;
 	theme: string;
 	baseUrl: string;
 	width: number;

app/views/AuthenticationWebView.tsx

@@ -4,7 +4,9 @@ import { connect } from 'react-redux';
 import parse from 'url-parse';
 import { StackNavigationProp } from '@react-navigation/stack';
 import { WebViewMessage } from 'react-native-webview/lib/WebViewTypes';
+import { RouteProp } from '@react-navigation/core';
 
+import { OutsideModalParamList } from '../stacks/types';
 import RocketChat from '../lib/rocketchat';
 import { isIOS } from '../utils/deviceInfo';
 import StatusBar from '../containers/StatusBar';
@@ -41,17 +43,9 @@ window.addEventListener('popstate', function() {
 });
 `;
 
-interface IRoute {
-	params: {
-		authType: string;
-		url: string;
-		ssoToken?: string;
-	};
-}
-
 interface INavigationOption {
-	navigation: StackNavigationProp<any, 'AuthenticationWebView'>;
-	route: IRoute;
+	navigation: StackNavigationProp<OutsideModalParamList, 'AuthenticationWebView'>;
+	route: RouteProp<OutsideModalParamList, 'AuthenticationWebView'>;
 }
 
 interface IAuthenticationWebView extends INavigationOption {

app/views/AutoTranslateView/index.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { FlatList, StyleSheet, Switch } from 'react-native';
+import { RouteProp } from '@react-navigation/core';
 
+import { ChatsStackParamList } from '../../stacks/types';
 import RocketChat from '../../lib/rocketchat';
 import I18n from '../../i18n';
 import StatusBar from '../../containers/StatusBar';
@@ -9,6 +11,7 @@ import { SWITCH_TRACK_COLOR, themes } from '../../constants/colors';
 import { withTheme } from '../../theme';
 import SafeAreaView from '../../containers/SafeAreaView';
 import { events, logEvent } from '../../utils/log';
+import { IRoom } from '../../definitions/IRoom';
 
 const styles = StyleSheet.create({
 	list: {
@@ -16,19 +19,8 @@ const styles = StyleSheet.create({
 	}
 });
 
-interface IRoom {
-	observe: Function;
-	autoTranslateLanguage: boolean;
-	autoTranslate: boolean;
-}
-
 interface IAutoTranslateViewProps {
-	route: {
-		params: {
-			rid?: string;
-			room?: IRoom;
-		};
-	};
+	route: RouteProp<ChatsStackParamList, 'AutoTranslateView'>;
 	theme: string;
 }
 

app/views/CreateChannelView.tsx

@@ -25,6 +25,7 @@ import { events, logEvent } from '../utils/log';
 import SafeAreaView from '../containers/SafeAreaView';
 import RocketChat from '../lib/rocketchat';
 import sharedStyles from './Styles';
+import { ChatsStackParamList } from '../stacks/types';
 
 const styles = StyleSheet.create({
 	container: {
@@ -91,8 +92,8 @@ interface ICreateChannelViewState {
 }
 
 interface ICreateChannelViewProps {
-	navigation: StackNavigationProp<any, 'CreateChannelView'>;
-	route: RouteProp<{ CreateChannelView: { isTeam: boolean; teamId: string } }, 'CreateChannelView'>;
+	navigation: StackNavigationProp<ChatsStackParamList, 'CreateChannelView'>;
+	route: RouteProp<ChatsStackParamList, 'CreateChannelView'>;
 	baseUrl: string;
 	create: (data: ICreateFunction) => void;
 	removeUser: (user: IOtherUser) => void;
@@ -118,7 +119,7 @@ interface ISwitch extends SwitchProps {
 }
 
 class CreateChannelView extends React.Component<ICreateChannelViewProps, ICreateChannelViewState> {
-	private teamId: string;
+	private teamId?: string;
 
 	constructor(props: ICreateChannelViewProps) {
 		super(props);
@@ -240,7 +241,7 @@ class CreateChannelView extends React.Component<ICreateChannelViewProps, ICreate
 			broadcast,
 			encrypted,
 			isTeam,
-			teamId: this.teamId
+			teamId: this.teamId!
 		});
 
 		Review.pushPositiveEvent();

app/views/CreateDiscussionView/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { ScrollView, Switch, Text } from 'react-native';
+import { StackNavigationOptions } from '@react-navigation/stack';
 
 import Loading from '../../containers/Loading';
 import KeyboardView from '../../presentation/KeyboardView';
@@ -89,7 +90,7 @@ class CreateChannelView extends React.Component<ICreateChannelViewProps, any> {
 				  )
 				: null,
 			headerLeft: showCloseModal ? () => <HeaderButton.CloseModal navigation={navigation} /> : undefined
-		});
+		} as StackNavigationOptions);
 	};
 
 	submit = () => {

app/views/CreateDiscussionView/interfaces.ts

@@ -1,14 +1,11 @@
+import { RouteProp } from '@react-navigation/core';
+import { StackNavigationProp } from '@react-navigation/stack';
+
+import { NewMessageStackParamList } from '../../stacks/types';
+
 export interface ICreateChannelViewProps {
-	navigation: any;
-	route: {
-		params?: {
-			channel: string;
-			message: {
-				msg: string;
-			};
-			showCloseModal: boolean;
-		};
-	};
+	navigation: StackNavigationProp<NewMessageStackParamList, 'CreateDiscussionView'>;
+	route: RouteProp<NewMessageStackParamList, 'CreateDiscussionView'>;
 	server: string;
 	user: {
 		id: string;

app/views/DirectoryView/index.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import { FlatList, Text, View } from 'react-native';
 import { connect } from 'react-redux';
+import { StackNavigationProp } from '@react-navigation/stack';
 
+import { ChatsStackParamList } from '../../stacks/types';
 import * as List from '../../containers/List';
 import Touch from '../../utils/touch';
 import RocketChat from '../../lib/rocketchat';
@@ -24,7 +26,7 @@ import styles from './styles';
 import Options from './Options';
 
 interface IDirectoryViewProps {
-	navigation: object;
+	navigation: StackNavigationProp<ChatsStackParamList, 'DirectoryView'>;
 	baseUrl: string;
 	isFederationEnabled: boolean;
 	user: {

app/views/E2EEnterYourPasswordView.tsx

@@ -17,6 +17,7 @@ import KeyboardView from '../presentation/KeyboardView';
 import StatusBar from '../containers/StatusBar';
 import { events, logEvent } from '../utils/log';
 import sharedStyles from './Styles';
+import { E2EEnterYourPasswordStackParamList } from '../stacks/types';
 
 const styles = StyleSheet.create({
 	container: {
@@ -36,7 +37,7 @@ interface IE2EEnterYourPasswordViewState {
 interface IE2EEnterYourPasswordViewProps {
 	encryptionDecodeKey: (password: string) => void;
 	theme: string;
-	navigation: StackNavigationProp<any, 'E2EEnterYourPasswordView'>;
+	navigation: StackNavigationProp<E2EEnterYourPasswordStackParamList, 'E2EEnterYourPasswordView'>;
 }
 
 class E2EEnterYourPasswordView extends React.Component<IE2EEnterYourPasswordViewProps, IE2EEnterYourPasswordViewState> {

app/views/E2EHowItWorksView.tsx

@@ -9,6 +9,7 @@ import * as HeaderButton from '../containers/HeaderButton';
 import Markdown from '../containers/markdown';
 import { withTheme } from '../theme';
 import I18n from '../i18n';
+import { E2ESaveYourPasswordStackParamList } from '../stacks/types';
 
 const styles = StyleSheet.create({
 	container: {
@@ -23,8 +24,8 @@ const styles = StyleSheet.create({
 });
 
 interface INavigation {
-	navigation: StackNavigationProp<any, 'E2EHowItWorksView'>;
-	route: RouteProp<{ E2EHowItWorksView: { showCloseModal: boolean } }, 'E2EHowItWorksView'>;
+	navigation: StackNavigationProp<E2ESaveYourPasswordStackParamList, 'E2EHowItWorksView'>;
+	route: RouteProp<E2ESaveYourPasswordStackParamList, 'E2EHowItWorksView'>;
 }
 
 interface IE2EHowItWorksViewProps extends INavigation {

app/views/E2ESaveYourPasswordView.tsx

@@ -19,6 +19,7 @@ import Button from '../containers/Button';
 import { withTheme } from '../theme';
 import I18n from '../i18n';
 import sharedStyles from './Styles';
+import { E2ESaveYourPasswordStackParamList } from '../stacks/types';
 
 const styles = StyleSheet.create({
 	container: {
@@ -60,7 +61,7 @@ interface IE2ESaveYourPasswordViewState {
 
 interface IE2ESaveYourPasswordViewProps {
 	server: string;
-	navigation: StackNavigationProp<any, 'E2ESaveYourPasswordView'>;
+	navigation: StackNavigationProp<E2ESaveYourPasswordStackParamList, 'E2ESaveYourPasswordView'>;
 	encryptionSetBanner(): void;
 	theme: string;
 }

app/views/ForgotPasswordView.tsx

@@ -14,6 +14,7 @@ import { themes } from '../constants/colors';
 import FormContainer, { FormContainerInner } from '../containers/FormContainer';
 import { events, logEvent } from '../utils/log';
 import sharedStyles from './Styles';
+import { OutsideParamList } from '../stacks/types';
 
 interface IForgotPasswordViewState {
 	email: string;
@@ -22,8 +23,8 @@ interface IForgotPasswordViewState {
 }
 
 interface IForgotPasswordViewProps {
-	navigation: StackNavigationProp<any, 'ForgotPasswordView'>;
-	route: RouteProp<{ ForgotPasswordView: { title: string } }, 'ForgotPasswordView'>;
+	navigation: StackNavigationProp<OutsideParamList, 'ForgotPasswordView'>;
+	route: RouteProp<OutsideParamList, 'ForgotPasswordView'>;
 	theme: string;
 }
 

app/views/ForwardLivechatView.tsx

@@ -14,6 +14,7 @@ import OrSeparator from '../containers/OrSeparator';
 import Input from '../containers/UIKit/MultiSelect/Input';
 import { forwardRoom as forwardRoomAction } from '../actions/room';
 import { ILivechatDepartment } from './definition/ILivechatDepartment';
+import { ChatsStackParamList } from '../stacks/types';
 
 const styles = StyleSheet.create({
 	container: {
@@ -47,8 +48,8 @@ interface IParsedData {
 }
 
 interface IForwardLivechatViewProps {
-	navigation: StackNavigationProp<any, 'ForwardLivechatView'>;
-	route: RouteProp<{ ForwardLivechatView: { rid: string } }, 'ForwardLivechatView'>;
+	navigation: StackNavigationProp<ChatsStackParamList, 'ForwardLivechatView'>;
+	route: RouteProp<ChatsStackParamList, 'ForwardLivechatView'>;
 	theme: string;
 	forwardRoom: (rid: string, transferData: ITransferData) => void;
 }

app/views/InviteUsersEditView/index.tsx

@@ -19,6 +19,7 @@ import { withTheme } from '../../theme';
 import SafeAreaView from '../../containers/SafeAreaView';
 import { events, logEvent } from '../../utils/log';
 import styles from './styles';
+import { ChatsStackParamList } from '../../stacks/types';
 
 const OPTIONS = {
 	days: [
@@ -67,9 +68,9 @@ const OPTIONS = {
 	]
 };
 
-interface IInviteUsersEditView {
-	navigation: StackNavigationProp<any, 'InviteUsersEditView'>;
-	route: RouteProp<{ InviteUsersEditView: { rid: string } }, 'InviteUsersEditView'>;
+interface IInviteUsersEditViewProps {
+	navigation: StackNavigationProp<ChatsStackParamList, 'InviteUsersEditView'>;
+	route: RouteProp<ChatsStackParamList, 'InviteUsersEditView'>;
 	theme: string;
 	createInviteLink(rid: string): void;
 	inviteLinksSetParams(params: { [key: string]: number }): void;
@@ -77,14 +78,14 @@ interface IInviteUsersEditView {
 	maxUses: number;
 }
 
-class InviteUsersView extends React.Component<IInviteUsersEditView, any> {
+class InviteUsersEditView extends React.Component<IInviteUsersEditViewProps, any> {
 	static navigationOptions = (): StackNavigationOptions => ({
 		title: I18n.t('Invite_users')
 	});
 
 	private rid: string;
 
-	constructor(props: IInviteUsersEditView) {
+	constructor(props: IInviteUsersEditViewProps) {
 		super(props);
 		this.rid = props.route.params?.rid;
 	}
@@ -160,4 +161,4 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
 	createInviteLink: (rid: string) => dispatch(inviteLinksCreateAction(rid))
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(withTheme(InviteUsersView));
+export default connect(mapStateToProps, mapDispatchToProps)(withTheme(InviteUsersEditView));

app/views/InviteUsersView/index.tsx

@@ -6,6 +6,7 @@ import { StackNavigationProp, StackNavigationOptions } from '@react-navigation/s
 import { RouteProp } from '@react-navigation/core';
 import { Dispatch } from 'redux';
 
+import { ChatsStackParamList } from '../../stacks/types';
 import {
 	inviteLinksClear as inviteLinksClearAction,
 	inviteLinksCreate as inviteLinksCreateAction
@@ -22,9 +23,9 @@ import SafeAreaView from '../../containers/SafeAreaView';
 import { events, logEvent } from '../../utils/log';
 import styles from './styles';
 
-interface IInviteUsersView {
-	navigation: StackNavigationProp<any, 'InviteUsersView'>;
-	route: RouteProp<any, 'InviteUsersView'>;
+interface IInviteUsersViewProps {
+	navigation: StackNavigationProp<ChatsStackParamList, 'InviteUsersView'>;
+	route: RouteProp<ChatsStackParamList, 'InviteUsersView'>;
 	theme: string;
 	timeDateFormat: string;
 	invite: {
@@ -36,14 +37,14 @@ interface IInviteUsersView {
 	createInviteLink(rid: string): void;
 	clearInviteLink(): void;
 }
-class InviteUsersView extends React.Component<IInviteUsersView, any> {
+class InviteUsersView extends React.Component<IInviteUsersViewProps, any> {
 	private rid: string;
 
 	static navigationOptions: StackNavigationOptions = {
 		title: I18n.t('Invite_users')
 	};
 
-	constructor(props: IInviteUsersView) {
+	constructor(props: IInviteUsersViewProps) {
 		super(props);
 		this.rid = props.route.params?.rid;
 	}

app/views/JitsiMeetView.tsx

@@ -12,6 +12,7 @@ import ActivityIndicator from '../containers/ActivityIndicator';
 import { events, logEvent } from '../utils/log';
 import { isAndroid, isIOS } from '../utils/deviceInfo';
 import { withTheme } from '../theme';
+import { InsideStackParamList } from '../stacks/types';
 
 const formatUrl = (url: string, baseUrl: string, uriSize: number, avatarAuthURLFragment: string) =>
 	`${baseUrl}/avatar/${url}?format=png&width=${uriSize}&height=${uriSize}${avatarAuthURLFragment}`;
@@ -25,8 +26,8 @@ interface IJitsiMeetViewState {
 }
 
 interface IJitsiMeetViewProps {
-	navigation: StackNavigationProp<any, 'JitsiMeetView'>;
-	route: RouteProp<{ JitsiMeetView: { rid: string; url: string; onlyAudio?: boolean } }, 'JitsiMeetView'>;
+	navigation: StackNavigationProp<InsideStackParamList, 'JitsiMeetView'>;
+	route: RouteProp<InsideStackParamList, 'JitsiMeetView'>;
 	baseUrl: string;
 	theme: string;
 	user: {

app/views/LoginView.tsx

@@ -15,6 +15,7 @@ import TextInput from '../containers/TextInput';
 import { loginRequest as loginRequestAction } from '../actions/login';
 import LoginServices from '../containers/LoginServices';
 import sharedStyles from './Styles';
+import { OutsideParamList } from '../stacks/types';
 
 const styles = StyleSheet.create({
 	registerDisabled: {
@@ -47,9 +48,9 @@ const styles = StyleSheet.create({
 	}
 });
 
-interface IProps {
-	navigation: StackNavigationProp<any>;
-	route: RouteProp<any, 'RegisterView'>;
+interface ILoginViewProps {
+	navigation: StackNavigationProp<OutsideParamList, 'LoginView'>;
+	route: RouteProp<OutsideParamList, 'LoginView'>;
 	Site_Name: string;
 	Accounts_RegistrationForm: string;
 	Accounts_RegistrationForm_LinkReplacementText: string;
@@ -67,15 +68,15 @@ interface IProps {
 	inviteLinkToken: string;
 }
 
-class LoginView extends React.Component<IProps, any> {
+class LoginView extends React.Component<ILoginViewProps, any> {
 	private passwordInput: any;
 
-	static navigationOptions = ({ route, navigation }: Partial<IProps>) => ({
+	static navigationOptions = ({ route, navigation }: ILoginViewProps) => ({
 		title: route?.params?.title ?? 'Rocket.Chat',
 		headerRight: () => <HeaderButton.Legal testID='login-view-more' navigation={navigation} />
 	});
 
-	constructor(props: IProps) {
+	constructor(props: ILoginViewProps) {
 		super(props);
 		this.state = {
 			user: props.route.params?.username ?? '',
@@ -83,7 +84,7 @@ class LoginView extends React.Component<IProps, any> {
 		};
 	}
 
-	UNSAFE_componentWillReceiveProps(nextProps: IProps) {
+	UNSAFE_componentWillReceiveProps(nextProps: ILoginViewProps) {
 		const { error } = this.props;
 		if (nextProps.failure && !dequal(error, nextProps.error)) {
 			if (nextProps.error?.error === 'error-invalid-email') {

app/views/MarkdownTableView.tsx

@@ -7,12 +7,10 @@ import I18n from '../i18n';
 import { isIOS } from '../utils/deviceInfo';
 import { themes } from '../constants/colors';
 import { withTheme } from '../theme';
+import { ChatsStackParamList } from '../stacks/types';
 
 interface IMarkdownTableViewProps {
-	route: RouteProp<
-		{ MarkdownTableView: { renderRows: (drawExtraBorders?: boolean) => JSX.Element; tableWidth: number } },
-		'MarkdownTableView'
-	>;
+	route: RouteProp<ChatsStackParamList, 'MarkdownTableView'>;
 	theme: string;
 }
 

app/views/MessagesView/index.tsx

@@ -3,8 +3,9 @@ import { FlatList, Text, View } from 'react-native';
 import { connect } from 'react-redux';
 import { dequal } from 'dequal';
 import { StackNavigationProp } from '@react-navigation/stack';
-import { RouteProp } from '@react-navigation/core';
+import { CompositeNavigationProp, RouteProp } from '@react-navigation/core';
 
+import { MasterDetailInsideStackParamList } from '../../stacks/MasterDetailStack/types';
 import Message from '../../containers/message';
 import ActivityIndicator from '../../containers/ActivityIndicator';
 import I18n from '../../i18n';
@@ -18,22 +19,19 @@ import { withActionSheet } from '../../containers/ActionSheet';
 import SafeAreaView from '../../containers/SafeAreaView';
 import getThreadName from '../../lib/methods/getThreadName';
 import styles from './styles';
-
-type TMessagesViewRouteParams = {
-	MessagesView: {
-		rid: string;
-		t: string;
-		name: string;
-	};
-};
+import { ChatsStackParamList } from '../../stacks/types';
+import { IRoom, RoomType } from '../../definitions/IRoom';
 
 interface IMessagesViewProps {
 	user: {
 		id: string;
 	};
 	baseUrl: string;
-	navigation: StackNavigationProp<any, 'MessagesView'>;
-	route: RouteProp<TMessagesViewRouteParams, 'MessagesView'>;
+	navigation: CompositeNavigationProp<
+		StackNavigationProp<ChatsStackParamList, 'MessagesView'>,
+		StackNavigationProp<MasterDetailInsideStackParamList>
+	>;
+	route: RouteProp<ChatsStackParamList, 'MessagesView'>;
 	customEmojis: { [key: string]: string };
 	theme: string;
 	showActionSheet: Function;
@@ -41,6 +39,14 @@ interface IMessagesViewProps {
 	isMasterDetail: boolean;
 }
 
+interface IRoomInfoParam {
+	room: IRoom;
+	member: any;
+	rid: string;
+	t: RoomType;
+	joined: boolean;
+}
+
 interface IMessagesViewState {
 	loading: boolean;
 	messages: [];
@@ -65,17 +71,22 @@ interface IMessageItem {
 }
 
 interface IParams {
-	rid?: string;
-	jumpToMessageId: string;
-	t?: string;
-	room: any;
+	rid: string;
+	t: RoomType;
 	tmid?: string;
+	message?: string;
 	name?: string;
+	fname?: string;
+	prid?: string;
+	room: IRoom;
+	jumpToMessageId?: string;
+	jumpToThreadId?: string;
+	roomUserId?: string;
 }
 
 class MessagesView extends React.Component<IMessagesViewProps, any> {
-	private rid?: string;
-	private t?: string;
+	private rid: string;
+	private t: RoomType;
 	private content: any;
 	private room: any;
 
@@ -121,7 +132,7 @@ class MessagesView extends React.Component<IMessagesViewProps, any> {
 		});
 	};
 
-	navToRoomInfo = (navParam: { rid: string }) => {
+	navToRoomInfo = (navParam: IRoomInfoParam) => {
 		const { navigation, user } = this.props;
 		if (navParam.rid === user.id) {
 			return;
@@ -147,7 +158,7 @@ class MessagesView extends React.Component<IMessagesViewProps, any> {
 				...params,
 				tmid: item.tmid,
 				name: await getThreadName(this.rid, item.tmid, item._id),
-				t: 'thread'
+				t: RoomType.THREAD
 			};
 			navigation.push('RoomView', params);
 		} else {

app/views/NewServerView/index.tsx

@@ -33,6 +33,7 @@ import { isTablet } from '../../utils/deviceInfo';
 import { verticalScale, moderateScale } from '../../utils/scaling';
 import { withDimensions } from '../../dimensions';
 import ServerInput from './ServerInput';
+import { OutsideParamList } from '../../stacks/types';
 
 const styles = StyleSheet.create({
 	onboardingImage: {
@@ -73,7 +74,7 @@ export interface IServer extends Model {
 }
 
 interface INewServerView {
-	navigation: StackNavigationProp<any, 'NewServerView'>;
+	navigation: StackNavigationProp<OutsideParamList, 'NewServerView'>;
 	theme: string;
 	connecting: boolean;
 	connectServer(server: string, username?: string, fromServerHistory?: boolean): void;

app/views/NotificationPreferencesView/index.tsx

@@ -17,6 +17,7 @@ import SafeAreaView from '../../containers/SafeAreaView';
 import log, { events, logEvent } from '../../utils/log';
 import sharedStyles from '../Styles';
 import { OPTIONS } from './options';
+import { ChatsStackParamList } from '../../stacks/types';
 
 const styles = StyleSheet.create({
 	pickerText: {
@@ -26,16 +27,8 @@ const styles = StyleSheet.create({
 });
 
 interface INotificationPreferencesView {
-	navigation: StackNavigationProp<any, 'NotificationPreferencesView'>;
-	route: RouteProp<
-		{
-			NotificationPreferencesView: {
-				rid: string;
-				room: Model;
-			};
-		},
-		'NotificationPreferencesView'
-	>;
+	navigation: StackNavigationProp<ChatsStackParamList, 'NotificationPrefView'>;
+	route: RouteProp<ChatsStackParamList, 'NotificationPrefView'>;
 	theme: string;
 }
 

app/views/NotificationPreferencesView/options.ts

@@ -1,4 +1,4 @@
-interface IOptionsField {
+export interface IOptionsField {
 	label: string;
 	value: string | number;
 	second?: number;

app/views/PickerView.tsx

@@ -11,6 +11,8 @@ import * as List from '../containers/List';
 import SearchBox from '../containers/SearchBox';
 import SafeAreaView from '../containers/SafeAreaView';
 import sharedStyles from './Styles';
+import { ChatsStackParamList } from '../stacks/types';
+import { IOptionsField } from './NotificationPreferencesView/options';
 
 const styles = StyleSheet.create({
 	search: {
@@ -25,37 +27,21 @@ const styles = StyleSheet.create({
 	}
 });
 
-interface IData {
-	label: string;
-	value: string;
-	second?: string;
-}
-
 interface IItem {
-	item: IData;
+	item: IOptionsField;
 	selected: boolean;
 	onItemPress: () => void;
 	theme: string;
 }
 
 interface IPickerViewState {
-	data: IData[];
+	data: IOptionsField[];
 	value: string;
 }
 
-interface IParams {
-	title: string;
-	value: string;
-	data: IData[];
-	onChangeText: (value: string) => IData[];
-	goBack: boolean;
-	onChange: Function;
-	onChangeValue: (value: string) => void;
-}
-
 interface IPickerViewProps {
-	navigation: StackNavigationProp<any, 'PickerView'>;
-	route: RouteProp<{ PickerView: IParams }, 'PickerView'>;
+	navigation: StackNavigationProp<ChatsStackParamList, 'PickerView'>;
+	route: RouteProp<ChatsStackParamList, 'PickerView'>;
 	theme: string;
 }
 
@@ -69,7 +55,7 @@ const Item = React.memo(({ item, selected, onItemPress, theme }: IItem) => (
 ));
 
 class PickerView extends React.PureComponent<IPickerViewProps, IPickerViewState> {
-	private onSearch: (text: string) => IData[];
+	private onSearch?: ((text: string) => IOptionsField[]) | ((term?: string | undefined) => Promise<any>);
 
 	static navigationOptions = ({ route }: IPickerViewProps) => ({
 		title: route.params?.title ?? I18n.t('Select_an_option')
@@ -126,13 +112,13 @@ class PickerView extends React.PureComponent<IPickerViewProps, IPickerViewState>
 				{this.renderSearch()}
 				<FlatList
 					data={data}
-					keyExtractor={item => item.value}
+					keyExtractor={item => item.value as string}
 					renderItem={({ item }) => (
 						<Item
 							item={item}
 							theme={theme}
 							selected={!this.onSearch && (value || data[0]?.value) === item.value}
-							onItemPress={() => this.onChangeValue(item.value)}
+							onItemPress={() => this.onChangeValue(item.value as string)}
 						/>
 					)}
 					ItemSeparatorComponent={List.Separator}

app/views/ProfileView/interfaces.ts

@@ -1,6 +1,8 @@
 import { StackNavigationProp } from '@react-navigation/stack';
 import React from 'react';
 
+import { ProfileStackParamList } from '../../stacks/types';
+
 export interface IUser {
 	id: string;
 	name: string;
@@ -31,14 +33,12 @@ export interface IAvatarButton {
 }
 
 export interface INavigationOptions {
-	navigation: StackNavigationProp<any, 'ProfileView'>;
+	navigation: StackNavigationProp<ProfileStackParamList, 'ProfileView'>;
 	isMasterDetail?: boolean;
 }
 
 export interface IProfileViewProps {
 	user: IUser;
-	navigation: StackNavigationProp<any, 'ProfileView'>;
-	isMasterDetail?: boolean;
 	baseUrl: string;
 	Accounts_AllowEmailChange: boolean;
 	Accounts_AllowPasswordChange: boolean;

app/views/ReadReceiptView/index.tsx

@@ -16,6 +16,7 @@ import { withTheme } from '../../theme';
 import { themes } from '../../constants/colors';
 import SafeAreaView from '../../containers/SafeAreaView';
 import styles from './styles';
+import { ChatsStackParamList } from '../../stacks/types';
 
 interface IReceipts {
 	_id: string;
@@ -36,8 +37,8 @@ interface IReadReceiptViewState {
 }
 
 interface INavigationOption {
-	navigation: StackNavigationProp<any, 'ReadReceiptView'>;
-	route: RouteProp<{ ReadReceiptView: { messageId: string } }, 'ReadReceiptView'>;
+	navigation: StackNavigationProp<ChatsStackParamList, 'ReadReceiptsView'>;
+	route: RouteProp<ChatsStackParamList, 'ReadReceiptsView'>;
 	isMasterDetail: boolean;
 }
 

app/views/RegisterView.tsx

@@ -5,6 +5,7 @@ import { RouteProp } from '@react-navigation/core';
 import { connect } from 'react-redux';
 import RNPickerSelect from 'react-native-picker-select';
 
+import { OutsideParamList } from '../stacks/types';
 import log, { events, logEvent } from '../utils/log';
 import Button from '../containers/Button';
 import I18n from '../i18n';
@@ -51,8 +52,8 @@ const styles = StyleSheet.create({
 });
 
 interface IProps {
-	navigation: StackNavigationProp<any>;
-	route: RouteProp<any, 'RegisterView'>;
+	navigation: StackNavigationProp<OutsideParamList, 'RegisterView'>;
+	route: RouteProp<OutsideParamList, 'RegisterView'>;
 	server: string;
 	Site_Name: string;
 	Gitlab_URL: string;

app/views/SearchMessagesView/index.tsx

@@ -1,11 +1,13 @@
 import React from 'react';
 import { StackNavigationOptions, StackNavigationProp } from '@react-navigation/stack';
-import { RouteProp } from '@react-navigation/core';
+import { CompositeNavigationProp, RouteProp } from '@react-navigation/core';
 import { FlatList, Text, View } from 'react-native';
 import { Q } from '@nozbe/watermelondb';
 import { connect } from 'react-redux';
 import { dequal } from 'dequal';
 
+import { IRoom, RoomType } from '../../definitions/IRoom';
+import { IAttachment } from '../../definitions/IAttachment';
 import RCTextInput from '../../containers/TextInput';
 import ActivityIndicator from '../../containers/ActivityIndicator';
 import Markdown from '../../containers/markdown';
@@ -13,7 +15,7 @@ import debounce from '../../utils/debounce';
 import RocketChat from '../../lib/rocketchat';
 import Message from '../../containers/message';
 import scrollPersistTaps from '../../utils/scrollPersistTaps';
-import { IMessage, IMessageAttachments } from '../../containers/message/interfaces';
+import { IMessage } from '../../containers/message/interfaces';
 import I18n from '../../i18n';
 import StatusBar from '../../containers/StatusBar';
 import log from '../../utils/log';
@@ -29,26 +31,30 @@ import getRoomInfo from '../../lib/methods/getRoomInfo';
 import { isIOS } from '../../utils/deviceInfo';
 import { compareServerVersion, methods } from '../../lib/utils';
 import styles from './styles';
+import { InsideStackParamList, ChatsStackParamList } from '../../stacks/types';
 
 const QUERY_SIZE = 50;
 
-type TRouteParams = {
-	SearchMessagesView: {
-		showCloseModal?: boolean;
-		rid: string;
-		t?: string;
-		encrypted?: boolean;
-	};
-};
-
 interface ISearchMessagesViewState {
 	loading: boolean;
 	messages: IMessage[];
 	searchText: string;
 }
+
+interface IRoomInfoParam {
+	room: IRoom;
+	member: any;
+	rid: string;
+	t: RoomType;
+	joined: boolean;
+}
+
 interface INavigationOption {
-	navigation: StackNavigationProp<any, 'SearchMessagesView'>;
-	route: RouteProp<TRouteParams, 'SearchMessagesView'>;
+	navigation: CompositeNavigationProp<
+		StackNavigationProp<ChatsStackParamList, 'SearchMessagesView'>,
+		StackNavigationProp<InsideStackParamList>
+	>;
+	route: RouteProp<ChatsStackParamList, 'SearchMessagesView'>;
 }
 
 interface ISearchMessagesViewProps extends INavigationOption {
@@ -183,12 +189,12 @@ class SearchMessagesView extends React.Component<ISearchMessagesViewProps, ISear
 		return null;
 	};
 
-	showAttachment = (attachment: IMessageAttachments) => {
+	showAttachment = (attachment: IAttachment) => {
 		const { navigation } = this.props;
 		navigation.navigate('AttachmentView', { attachment });
 	};
 
-	navToRoomInfo = (navParam: IMessage) => {
+	navToRoomInfo = (navParam: IRoomInfoParam) => {
 		const { navigation, user } = this.props;
 		if (navParam.rid === user.id) {
 			return;

app/views/SendEmailConfirmationView.tsx

@@ -1,6 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import { StackNavigationProp } from '@react-navigation/stack';
+import { RouteProp } from '@react-navigation/core';
 
+import { OutsideParamList } from '../stacks/types';
 import TextInput from '../containers/TextInput';
 import Button from '../containers/Button';
 import { showErrorAlert } from '../utils/info';
@@ -12,16 +14,12 @@ import FormContainer, { FormContainerInner } from '../containers/FormContainer';
 import log, { events, logEvent } from '../utils/log';
 import sharedStyles from './Styles';
 
-interface ISendEmailConfirmationView {
-	navigation: StackNavigationProp<any, 'SendEmailConfirmationView'>;
-	route: {
-		params: {
-			user?: string;
-		};
-	};
+interface ISendEmailConfirmationViewProps {
+	navigation: StackNavigationProp<OutsideParamList, 'SendEmailConfirmationView'>;
+	route: RouteProp<OutsideParamList, 'SendEmailConfirmationView'>;
 }
 
-const SendEmailConfirmationView = ({ navigation, route }: ISendEmailConfirmationView): JSX.Element => {
+const SendEmailConfirmationView = ({ navigation, route }: ISendEmailConfirmationViewProps): JSX.Element => {
 	const [email, setEmail] = useState('');
 	const [invalidEmail, setInvalidEmail] = useState(true);
 	const [isFetching, setIsFetching] = useState(false);

app/views/SettingsView/index.tsx

@@ -5,6 +5,7 @@ import FastImage from '@rocket.chat/react-native-fast-image';
 import CookieManager from '@react-native-cookies/cookies';
 import { StackNavigationProp } from '@react-navigation/stack';
 
+import { SettingsStackParamList } from '../../stacks/types';
 import { logout as logoutAction } from '../../actions/login';
 import { selectServerRequest as selectServerRequestAction } from '../../actions/server';
 import { themes } from '../../constants/colors';
@@ -29,8 +30,8 @@ import database from '../../lib/database';
 import { isFDroidBuild } from '../../constants/environment';
 import { getUserSelector } from '../../selectors/login';
 
-interface IProps {
-	navigation: StackNavigationProp<any, 'SettingsView'>;
+interface ISettingsViewProps {
+	navigation: StackNavigationProp<SettingsStackParamList, 'SettingsView'>;
 	server: {
 		version: string;
 		server: string;
@@ -46,8 +47,8 @@ interface IProps {
 	appStart: Function;
 }
 
-class SettingsView extends React.Component<IProps, any> {
-	static navigationOptions = ({ navigation, isMasterDetail }: Partial<IProps>) => ({
+class SettingsView extends React.Component<ISettingsViewProps, any> {
+	static navigationOptions = ({ navigation, isMasterDetail }: ISettingsViewProps) => ({
 		headerLeft: () =>
 			isMasterDetail ? (
 				<HeaderButton.CloseModal navigation={navigation} testID='settings-view-close' />
@@ -117,7 +118,7 @@ class SettingsView extends React.Component<IProps, any> {
 		});
 	};
 
-	navigateToScreen = (screen: string) => {
+	navigateToScreen = (screen: keyof SettingsStackParamList) => {
 		/* @ts-ignore */
 		logEvent(events[`SE_GO_${screen.replace('View', '').toUpperCase()}`]);
 		const { navigation } = this.props;

app/views/ShareView/index.tsx

@@ -5,6 +5,7 @@ import { NativeModules, Text, View } from 'react-native';
 import { connect } from 'react-redux';
 import ShareExtension from 'rn-extensions-share';
 
+import { InsideStackParamList } from '../../stacks/types';
 import { themes } from '../../constants/colors';
 import I18n from '../../i18n';
 import Loading from '../../containers/Loading';
@@ -25,7 +26,8 @@ import Thumbs from './Thumbs';
 import Preview from './Preview';
 import Header from './Header';
 import styles from './styles';
-import { IAttachment, IServer } from './interfaces';
+import { IAttachment } from './interfaces';
+import { IRoom } from '../../definitions/IRoom';
 
 interface IShareViewState {
 	selected: IAttachment;
@@ -33,30 +35,15 @@ interface IShareViewState {
 	readOnly: boolean;
 	attachments: IAttachment[];
 	text: string;
-	// TODO: Refactor when migrate room
-	room: any;
-	thread: any;
+	room: IRoom;
+	thread: any; // change
 	maxFileSize: number;
 	mediaAllowList: number;
 }
 
 interface IShareViewProps {
-	// TODO: Refactor after react-navigation
-	navigation: StackNavigationProp<any, 'ShareView'>;
-	route: RouteProp<
-		{
-			ShareView: {
-				attachments: IAttachment[];
-				isShareView?: boolean;
-				isShareExtension: boolean;
-				serverInfo: IServer;
-				text: string;
-				room: any;
-				thread: any; // change
-			};
-		},
-		'ShareView'
-	>;
+	navigation: StackNavigationProp<InsideStackParamList, 'ShareView'>;
+	route: RouteProp<InsideStackParamList, 'ShareView'>;
 	theme: string;
 	user: {
 		id: string;

app/views/ShareView/interfaces.ts

@@ -13,21 +13,3 @@ export interface IUseDimensions {
 	width: number;
 	height: number;
 }
-
-// TODO: move this to specific folder
-export interface IServer {
-	name: string;
-	iconURL: string;
-	useRealName: boolean;
-	FileUpload_MediaTypeWhiteList: string;
-	FileUpload_MaxFileSize: number;
-	roomsUpdatedAt: Date;
-	version: string;
-	lastLocalAuthenticatedSession: Date;
-	autoLock: boolean;
-	autoLockTime: number | null;
-	biometry: boolean | null;
-	uniqueID: string;
-	enterpriseModules: string;
-	E2E_Enable: boolean;
-}

app/views/SidebarView/index.tsx

@@ -18,6 +18,7 @@ import SafeAreaView from '../../containers/SafeAreaView';
 import Navigation from '../../lib/Navigation';
 import SidebarItem from './SidebarItem';
 import styles from './styles';
+import { DrawerParamList } from '../../stacks/types';
 
 interface ISeparatorProps {
 	theme: string;
@@ -34,8 +35,8 @@ interface ISidebarState {
 
 interface ISidebarProps {
 	baseUrl: string;
-	navigation: DrawerNavigationProp<any, 'Sidebar'>;
-	state: DrawerNavigationState<any>;
+	navigation: DrawerNavigationProp<DrawerParamList>;
+	state: DrawerNavigationState<DrawerParamList>;
 	Site_Name: string;
 	user: {
 		statusText: string;
@@ -305,4 +306,4 @@ const mapStateToProps = (state: any) => ({
 	viewPrivilegedSettingPermission: state.permissions['view-privileged-setting']
 });
 
-export default connect(mapStateToProps)(withTheme(Sidebar));
+export default connect(mapStateToProps)(withTheme(Sidebar)) as any;

app/views/UserNotificationPreferencesView/index.tsx

@@ -14,6 +14,7 @@ import ActivityIndicator from '../../containers/ActivityIndicator';
 import { getUserSelector } from '../../selectors/login';
 import sharedStyles from '../Styles';
 import { OPTIONS } from './options';
+import { ProfileStackParamList } from '../../stacks/types';
 
 const styles = StyleSheet.create({
 	pickerText: {
@@ -34,7 +35,7 @@ interface IUserNotificationPreferencesViewState {
 }
 
 interface IUserNotificationPreferencesViewProps {
-	navigation: StackNavigationProp<any, 'UserNotificationPreferencesView'>;
+	navigation: StackNavigationProp<ProfileStackParamList, 'UserNotificationPrefView'>;
 	theme: string;
 	user: {
 		id: string;

app/views/UserPreferencesView/index.tsx

@@ -11,9 +11,10 @@ import * as List from '../../containers/List';
 import { SWITCH_TRACK_COLOR } from '../../constants/colors';
 import { getUserSelector } from '../../selectors/login';
 import RocketChat from '../../lib/rocketchat';
+import { ProfileStackParamList } from '../../stacks/types';
 
 interface IUserPreferencesViewProps {
-	navigation: StackNavigationProp<any, 'UserPreferencesView'>;
+	navigation: StackNavigationProp<ProfileStackParamList, 'UserPreferencesView'>;
 }
 
 const UserPreferencesView = ({ navigation }: IUserPreferencesViewProps): JSX.Element => {
@@ -26,7 +27,7 @@ const UserPreferencesView = ({ navigation }: IUserPreferencesViewProps): JSX.Ele
 		});
 	}, []);
 
-	const navigateToScreen = (screen: string) => {
+	const navigateToScreen = (screen: keyof ProfileStackParamList) => {
 		logEvent(events.UP_GO_USER_NOTIFICATION_PREF);
 		navigation.navigate(screen);
 	};

app/views/WithoutServersView.tsx

@@ -26,7 +26,11 @@ const styles = StyleSheet.create({
 	}
 });
 
-class WithoutServerView extends React.Component<any, any> {
+interface IWithoutServerViewProps {
+	theme: string;
+}
+
+class WithoutServerView extends React.Component<IWithoutServerViewProps> {
 	static navigationOptions = () => ({
 		title: 'Rocket.Chat',
 		headerLeft: () => <HeaderButton.CancelModal onPress={ShareExtension.close} testID='share-extension-close' />

app/views/WorkspaceView/index.tsx

@@ -2,7 +2,9 @@ import React from 'react';
 import { Text, View } from 'react-native';
 import { StackNavigationProp, StackNavigationOptions } from '@react-navigation/stack';
 import { connect } from 'react-redux';
+import { CompositeNavigationProp } from '@react-navigation/core';
 
+import { OutsideModalParamList, OutsideParamList } from '../../stacks/types';
 import I18n from '../../i18n';
 import Button from '../../containers/Button';
 import { themes } from '../../constants/colors';
@@ -13,8 +15,10 @@ import ServerAvatar from './ServerAvatar';
 import styles from './styles';
 
 interface IWorkSpaceProp {
-	// TODO: waiting for the RootStackParamList https://reactnavigation.org/docs/typescript/#type-checking-screens
-	navigation: StackNavigationProp<any, 'WorkspaceView'>;
+	navigation: CompositeNavigationProp<
+		StackNavigationProp<OutsideParamList, 'WorkspaceView'>,
+		StackNavigationProp<OutsideModalParamList>
+	>;
 	theme: string;
 	Site_Name: string;
 	Site_Url: string;