RocketChat · Rohit3523 · Dec 16, 2024
diff --git a/app/stacks/MasterDetailStack/index.tsx b/app/stacks/MasterDetailStack/index.tsx
@@ -113,7 +113,6 @@ const ModalStackNavigator = React.memo(({ navigation }: INavigation) => {
 					component={RoomActionsView}
 					options={props => RoomActionsView.navigationOptions!({ ...props, isMasterDetail: true })}
 				/>
-				{/* @ts-ignore */}
 				<ModalStack.Screen name='RoomInfoView' component={RoomInfoView} />
 				<ModalStack.Screen name='ReportUserView' component={ReportUserView} />
 				{/* @ts-ignore */}
@@ -145,22 +144,17 @@ const ModalStackNavigator = React.memo(({ navigation }: INavigation) => {
 				<ModalStack.Screen name='NotificationPrefView' component={NotificationPrefView} />
 				<ModalStack.Screen name='E2EEToggleRoomView' component={E2EEToggleRoomView} />
 				<ModalStack.Screen name='ForwardMessageView' component={ForwardMessageView} />
-				{/* @ts-ignore */}
 				<ModalStack.Screen name='ForwardLivechatView' component={ForwardLivechatView} />
-				{/* @ts-ignore */}
 				<ModalStack.Screen name='CloseLivechatView' component={CloseLivechatView} />
 				<ModalStack.Screen name='CannedResponsesListView' component={CannedResponsesListView} />
-				{/* @ts-ignore */}
 				<ModalStack.Screen name='CannedResponseDetail' component={CannedResponseDetail} />
 				{/* @ts-ignore */}
 				<ModalStack.Screen name='LivechatEditView' component={LivechatEditView} options={LivechatEditView.navigationOptions} />
 				<ModalStack.Screen name='PickerView' component={PickerView} />
 				{/* @ts-ignore */}
 				<ModalStack.Screen name='ThreadMessagesView' component={ThreadMessagesView} />
-				{/* @ts-ignore */}
 				<ModalStack.Screen name='DiscussionsView' component={DiscussionsView} />
 				<ModalStack.Screen name='TeamChannelsView' component={TeamChannelsView} options={TeamChannelsView.navigationOptions} />
-				{/* @ts-ignore */}
 				<ModalStack.Screen name='MarkdownTableView' component={MarkdownTableView} />
 				<ModalStack.Screen
 					name='ReadReceiptsView'
@@ -169,7 +163,6 @@ const ModalStackNavigator = React.memo(({ navigation }: INavigation) => {
 					options={props => ReadReceiptsView.navigationOptions!({ ...props, isMasterDetail: true })}
 				/>
 				<ModalStack.Screen name='SettingsView' component={SettingsView} />
-				{/* @ts-ignore */}
 				<ModalStack.Screen name='LegalView' component={LegalView} />
 				<ModalStack.Screen name='LanguageView' component={LanguageView} />
 				<ModalStack.Screen name='ThemeView' component={ThemeView} />

diff --git a/app/stacks/OutsideStack.tsx b/app/stacks/OutsideStack.tsx
@@ -28,7 +28,6 @@ const _OutsideStack = () => {
 
 			<Outside.Screen name='LoginView' component={LoginView} />
 			<Outside.Screen name='ForgotPasswordView' component={ForgotPasswordView} />
-			{/* @ts-ignore */}
 			<Outside.Screen name='SendEmailConfirmationView' component={SendEmailConfirmationView} />
 			{/* @ts-ignore */}
 			<Outside.Screen name='RegisterView' component={RegisterView} options={RegisterView.navigationOptions} />

diff --git a/app/views/CannedResponseDetail.tsx b/app/views/CannedResponseDetail.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
-import { RouteProp } from '@react-navigation/native';
+import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
 import { StyleSheet, Text, View, ScrollView } from 'react-native';
 
 import I18n from '../i18n';
@@ -86,12 +86,10 @@ const Item = ({ label, content, theme, testID }: IItem) =>
 		</View>
 	) : null;
 
-interface ICannedResponseDetailProps {
-	navigation: NativeStackNavigationProp<ChatsStackParamList, 'CannedResponseDetail'>;
-	route: RouteProp<ChatsStackParamList, 'CannedResponseDetail'>;
-}
-
-const CannedResponseDetail = ({ navigation, route }: ICannedResponseDetailProps): JSX.Element => {
+const CannedResponseDetail = (): JSX.Element => {
+	const navigation = useNavigation<NativeStackNavigationProp<ChatsStackParamList, 'CannedResponseDetail'>>();
+	const route = useRoute<RouteProp<ChatsStackParamList, 'CannedResponseDetail'>>();
+
 	const { cannedResponse } = route?.params;
 	const { theme } = useTheme();
 	const { isMasterDetail } = useAppSelector(state => state.app);
@@ -100,7 +98,7 @@ const CannedResponseDetail = ({ navigation, route }: ICannedResponseDetailProps)
 		navigation.setOptions({
 			title: `!${cannedResponse?.shortcut}`
 		});
-	}, []);
+	}, [navigation, cannedResponse?.shortcut]);
 
 	const navigateToRoom = (item: ICannedResponse) => {
 		const { room } = route.params;

diff --git a/app/views/CloseLivechatView.tsx b/app/views/CloseLivechatView.tsx
@@ -1,8 +1,9 @@
 import React, { useState, useLayoutEffect } from 'react';
 import { StyleSheet, ScrollView, Text } from 'react-native';
 import { BlockContext } from '@rocket.chat/ui-kit';
+import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
+import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 
-import { IBaseScreen } from '../definitions';
 import I18n from '../i18n';
 import { ChatsStackParamList } from '../stacks/types';
 import { useTheme } from '../theme';
@@ -29,7 +30,10 @@ const styles = StyleSheet.create({
 	buttonMarginVertical: { marginVertical: 20 }
 });
 
-const CloseLivechatView = ({ navigation, route }: IBaseScreen<ChatsStackParamList, 'CloseLivechatView'>) => {
+const CloseLivechatView = () => {
+	const navigation = useNavigation<NativeStackNavigationProp<ChatsStackParamList, 'CloseLivechatView'>>();
+	const route = useRoute<RouteProp<ChatsStackParamList, 'CloseLivechatView'>>();
+
 	const rid = route.params?.rid;
 	const departmentInfo = route.params?.departmentInfo;
 	const tagsList = route.params?.tagsList;

diff --git a/app/views/DiscussionsView/index.tsx b/app/views/DiscussionsView/index.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { FlatList, StyleSheet } from 'react-native';
 import { NativeStackNavigationOptions, NativeStackNavigationProp } from '@react-navigation/native-stack';
-import { RouteProp } from '@react-navigation/core';
+import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
 
 import { IMessageFromServer, TThreadModel } from '../../definitions';
 import { ChatsStackParamList } from '../../stacks/types';
@@ -28,13 +28,10 @@ const styles = StyleSheet.create({
 	}
 });
 
-interface IDiscussionsViewProps {
-	navigation: NativeStackNavigationProp<ChatsStackParamList, 'DiscussionsView'>;
-	route: RouteProp<ChatsStackParamList, 'DiscussionsView'>;
-	item: TThreadModel;
-}
+const DiscussionsView = () => {
+	const navigation = useNavigation<NativeStackNavigationProp<ChatsStackParamList, 'DiscussionsView'>>();
+	const route = useRoute<RouteProp<ChatsStackParamList, 'DiscussionsView'>>();
 
-const DiscussionsView = ({ navigation, route }: IDiscussionsViewProps): React.ReactElement => {
 	const rid = route.params?.rid;
 	const t = route.params?.t;
 

diff --git a/app/views/LegalView.tsx b/app/views/LegalView.tsx
@@ -1,5 +1,7 @@
 import React, { useLayoutEffect } from 'react';
 import { useSelector } from 'react-redux';
+import { useNavigation } from '@react-navigation/native';
+import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 
 import I18n from '../i18n';
 import StatusBar from '../containers/StatusBar';
@@ -8,13 +10,10 @@ import { useTheme } from '../theme';
 import SafeAreaView from '../containers/SafeAreaView';
 import * as List from '../containers/List';
 import { OutsideParamList } from '../stacks/types';
-import { IBaseScreen, IApplicationState } from '../definitions';
+import { IApplicationState } from '../definitions';
 
-interface ILegalViewProps extends IBaseScreen<OutsideParamList, 'LegalView'> {
-	server: string;
-}
-
-const LegalView = ({ navigation }: ILegalViewProps): React.ReactElement => {
+const LegalView = () => {
+	const navigation = useNavigation<NativeStackNavigationProp<OutsideParamList, 'LegalView'>>();
 	const server = useSelector((state: IApplicationState) => state.server.server);
 	const { theme } = useTheme();
 

diff --git a/app/views/MarkdownTableView.tsx b/app/views/MarkdownTableView.tsx
@@ -1,15 +1,17 @@
 import React, { useEffect } from 'react';
 import { ScrollView } from 'react-native';
+import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
+import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 
 import I18n from '../i18n';
 import { isIOS } from '../lib/methods/helpers';
 import { useTheme } from '../theme';
 import { ChatsStackParamList } from '../stacks/types';
-import { IBaseScreen } from '../definitions';
 
-type IMarkdownTableViewProps = IBaseScreen<ChatsStackParamList, 'MarkdownTableView'>;
-
-const MarkdownTableView = ({ navigation, route }: IMarkdownTableViewProps): React.ReactElement => {
+const MarkdownTableView = (): React.ReactElement => {
+	const navigation = useNavigation<NativeStackNavigationProp<ChatsStackParamList, 'MarkdownTableView'>>();
+	const route = useRoute<RouteProp<ChatsStackParamList, 'MarkdownTableView'>>();
+
 	const renderRows = route.params?.renderRows;
 	const tableWidth = route.params?.tableWidth;
 	const { colors } = useTheme();
@@ -18,7 +20,7 @@ const MarkdownTableView = ({ navigation, route }: IMarkdownTableViewProps): Reac
 		navigation.setOptions({
 			title: I18n.t('Table')
 		});
-	}, []);
+	}, [navigation]);
 
 	if (isIOS) {
 		return (

diff --git a/app/views/SendEmailConfirmationView.tsx b/app/views/SendEmailConfirmationView.tsx
@@ -1,4 +1,6 @@
 import React, { useEffect, useState } from 'react';
+import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
+import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 
 import { OutsideParamList } from '../stacks/types';
 import { FormTextInput } from '../containers/TextInput';
@@ -8,12 +10,12 @@ import I18n from '../i18n';
 import FormContainer, { FormContainerInner } from '../containers/FormContainer';
 import log, { events, logEvent } from '../lib/methods/helpers/log';
 import sharedStyles from './Styles';
-import { IBaseScreen } from '../definitions';
 import { Services } from '../lib/services';
 
-type ISendEmailConfirmationViewProps = IBaseScreen<OutsideParamList, 'SendEmailConfirmationView'>;
+const SendEmailConfirmationView = () => {
+	const navigation = useNavigation<NativeStackNavigationProp<OutsideParamList, 'SendEmailConfirmationView'>>();
+	const route = useRoute<RouteProp<OutsideParamList, 'SendEmailConfirmationView'>>();
 
-const SendEmailConfirmationView = ({ navigation, route }: ISendEmailConfirmationViewProps): React.ReactElement => {
 	const [email, setEmail] = useState('');
 	const [invalidEmail, setInvalidEmail] = useState(true);
 	const [isFetching, setIsFetching] = useState(false);
@@ -51,7 +53,7 @@ const SendEmailConfirmationView = ({ navigation, route }: ISendEmailConfirmation
 		if (route.params?.user) {
 			validate(route.params.user);
 		}
-	}, []);
+	}, [navigation, route.params?.user]);
 
 	return (
 		<FormContainer testID='send-email-confirmation-view'>