Chore: Hooks app/views/DefaultBrowserView

app/stacks/InsideStack.tsx

@@ -178,11 +178,7 @@ const SettingsStackNavigator = () => {
 			/>
 			<SettingsStack.Screen name='LanguageView' component={LanguageView} options={LanguageView.navigationOptions} />
 			<SettingsStack.Screen name='ThemeView' component={ThemeView} />
-			<SettingsStack.Screen
-				name='DefaultBrowserView'
-				component={DefaultBrowserView}
-				options={DefaultBrowserView.navigationOptions}
-			/>
+			<SettingsStack.Screen name='DefaultBrowserView' component={DefaultBrowserView} />
 			<SettingsStack.Screen
 				name='ScreenLockConfigView'
 				component={ScreenLockConfigView}

app/stacks/MasterDetailStack/index.tsx

@@ -177,11 +177,7 @@ const ModalStackNavigator = React.memo(({ navigation }: INavigation) => {
 				/>
 				<ModalStack.Screen name='LanguageView' component={LanguageView} options={LanguageView.navigationOptions} />
 				<ModalStack.Screen name='ThemeView' component={ThemeView} />
-				<ModalStack.Screen
-					name='DefaultBrowserView'
-					component={DefaultBrowserView}
-					options={DefaultBrowserView.navigationOptions}
-				/>
+				<ModalStack.Screen name='DefaultBrowserView' component={DefaultBrowserView} />
 				<ModalStack.Screen
 					name='ScreenLockConfigView'
 					component={ScreenLockConfigView}

app/views/DefaultBrowserView/Item.tsx

@@ -0,0 +1,34 @@
+import React, { memo } from 'react';
+
+import I18n from '../../i18n';
+import { TSupportedThemes } from '../../theme';
+import { themes } from '../../lib/constants';
+import * as List from '../../containers/List';
+import { IBrowsersValues, TValue } from '.';
+
+interface IRenderItem extends IBrowsersValues {
+	browser: string | null;
+	theme: TSupportedThemes;
+	changeDefaultBrowser: (newBrowser: TValue) => void;
+}
+
+const Item = memo(({ title, value, browser, changeDefaultBrowser, theme }: IRenderItem) => {
+	let isSelected = false;
+	if (!browser && value === 'systemDefault:') {
+		isSelected = true;
+	} else {
+		isSelected = browser === value;
+	}
+
+	return (
+		<List.Item
+			title={I18n.t(title, { defaultValue: title })}
+			onPress={() => changeDefaultBrowser(value)}
+			testID={`default-browser-view-${title}`}
+			right={() => (isSelected ? <List.Icon name='check' color={themes[theme].tintColor} /> : null)}
+			translateTitle={false}
+		/>
+	);
+});
+
+export default Item;

app/views/DefaultBrowserView/index.tsx

@@ -0,0 +1,118 @@
+import React, { useCallback, useEffect, useLayoutEffect, useState } from 'react';
+import { FlatList, Linking } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+
+import I18n from '../../i18n';
+import { useTheme } from '../../theme';
+import StatusBar from '../../containers/StatusBar';
+import * as List from '../../containers/List';
+import { DEFAULT_BROWSER_KEY } from '../../lib/methods/helpers/openLink';
+import { isIOS } from '../../lib/methods/helpers';
+import SafeAreaView from '../../containers/SafeAreaView';
+import UserPreferences from '../../lib/methods/userPreferences';
+import { events, logEvent } from '../../lib/methods/helpers/log';
+import Item from './Item';
+
+export type TValue = 'inApp' | 'systemDefault:' | 'googlechrome:' | 'firefox:' | 'brave:';
+
+export interface IBrowsersValues {
+	title: string;
+	value: TValue;
+}
+
+const DEFAULT_BROWSERS: IBrowsersValues[] = [
+	{
+		title: 'In_app',
+		value: 'inApp'
+	},
+	{
+		title: isIOS ? 'Safari' : 'Browser',
+		value: 'systemDefault:'
+	}
+];
+
+const BROWSERS: IBrowsersValues[] = [
+	{
+		title: 'Chrome',
+		value: 'googlechrome:'
+	},
+	{
+		title: 'Firefox',
+		value: 'firefox:'
+	},
+	{
+		title: 'Brave',
+		value: 'brave:'
+	}
+];
+
+const DefaultBrowserView = () => {
+	const [browser, setBrowser] = useState<string | null>(null);
+	const [supported, setSupported] = useState<IBrowsersValues[]>([]);
+
+	const { theme } = useTheme();
+	const navigation = useNavigation();
+
+	useLayoutEffect(() => {
+		navigation.setOptions({
+			title: I18n.t('Close_Chat')
+		});
+	}, [navigation]);
+
+	useEffect(() => {
+		const getBrowser = UserPreferences.getString(DEFAULT_BROWSER_KEY);
+		setBrowser(getBrowser);
+
+		if (isIOS) {
+			BROWSERS.forEach(browser => {
+				const { value } = browser;
+				Linking.canOpenURL(value).then(installed => {
+					if (installed) {
+						setSupported(supported => [...supported, browser]);
+					}
+				});
+			});
+		}
+	}, []);
+
+	const changeDefaultBrowser = useCallback((newBrowser: TValue) => {
+		logEvent(events.DB_CHANGE_DEFAULT_BROWSER, { browser: newBrowser });
+		try {
+			const browser = newBrowser || 'systemDefault:';
+			UserPreferences.setString(DEFAULT_BROWSER_KEY, browser);
+			setBrowser(browser);
+		} catch {
+			logEvent(events.DB_CHANGE_DEFAULT_BROWSER_F);
+		}
+	}, []);
+
+	return (
+		<SafeAreaView testID='default-browser-view'>
+			<StatusBar />
+			<FlatList
+				data={DEFAULT_BROWSERS.concat(supported)}
+				keyExtractor={item => item.value}
+				contentContainerStyle={List.styles.contentContainerStyleFlatList}
+				renderItem={({ item }) => (
+					<Item
+						browser={browser}
+						theme={theme}
+						changeDefaultBrowser={changeDefaultBrowser}
+						title={item.title}
+						value={item.value}
+					/>
+				)}
+				ListHeaderComponent={
+					<>
+						<List.Header title='Choose_where_you_want_links_be_opened' />
+						<List.Separator />
+					</>
+				}
+				ListFooterComponent={List.Separator}
+				ItemSeparatorComponent={List.Separator}
+			/>
+		</SafeAreaView>
+	);
+};
+
+export default DefaultBrowserView;