diff --git a/app/share.tsx b/app/share.tsx
index f347c5ae5..7c6933912 100644
--- a/app/share.tsx
+++ b/app/share.tsx
@@ -72,7 +72,7 @@ const OutsideStack = () => {
 
 	return (
 		<Outside.Navigator screenOptions={{ ...defaultHeader, ...themedHeader(theme) }}>
-			<Outside.Screen name='WithoutServersView' component={WithoutServersView} options={WithoutServersView.navigationOptions} />
+			<Outside.Screen name='WithoutServersView' component={WithoutServersView} />
 		</Outside.Navigator>
 	);
 };
diff --git a/app/views/WithoutServersView.tsx b/app/views/WithoutServersView.tsx
index 91cfe1319..362229765 100644
--- a/app/views/WithoutServersView.tsx
+++ b/app/views/WithoutServersView.tsx
@@ -1,12 +1,12 @@
-import React from 'react';
+import React, { useLayoutEffect } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import ShareExtension from 'rn-extensions-share';
+import { useNavigation } from '@react-navigation/native';
 
 import * as HeaderButton from '../containers/HeaderButton';
-import sharedStyles from './Styles';
 import I18n from '../i18n';
-import { themes } from '../lib/constants';
-import { TSupportedThemes, withTheme } from '../theme';
+import { useTheme } from '../theme';
+import sharedStyles from './Styles';
 
 const styles = StyleSheet.create({
 	container: {
@@ -26,27 +26,25 @@ const styles = StyleSheet.create({
 	}
 });
 
-interface IWithoutServerViewProps {
-	theme: TSupportedThemes;
-}
+const WithoutServerView = (): React.ReactElement => {
+	const navigation = useNavigation();
+	const { colors } = useTheme();
 
-class WithoutServerView extends React.Component<IWithoutServerViewProps> {
-	static navigationOptions = () => ({
-		title: 'Rocket.Chat',
-		headerLeft: () => <HeaderButton.CancelModal onPress={ShareExtension.close} testID='share-extension-close' />
-	});
+	useLayoutEffect(() => {
+		navigation.setOptions({
+			title: 'Rocket.Chat',
+			headerLeft: () => <HeaderButton.CancelModal onPress={ShareExtension.close} testID='share-extension-close' />
+		});
+	}, [navigation]);
 
-	render() {
-		const { theme } = this.props;
-		return (
-			<View style={[styles.container, { backgroundColor: themes[theme].backgroundColor }]}>
-				<Text style={[styles.title, { color: themes[theme].titleText }]}>{I18n.t('Without_Servers')}</Text>
-				<Text style={[styles.content, { color: themes[theme].titleText }]}>
-					{I18n.t('You_need_to_access_at_least_one_RocketChat_server_to_share_something')}
-				</Text>
-			</View>
-		);
-	}
-}
+	return (
+		<View style={[styles.container, { backgroundColor: colors.backgroundColor }]}>
+			<Text style={[styles.title, { color: colors.titleText }]}>{I18n.t('Without_Servers')}</Text>
+			<Text style={[styles.content, { color: colors.titleText }]}>
+				{I18n.t('You_need_to_access_at_least_one_RocketChat_server_to_share_something')}
+			</Text>
+		</View>
+	);
+};
 
-export default withTheme(WithoutServerView);
+export default WithoutServerView;