stash

app/containers/SafeAreaView.js

@@ -6,17 +6,19 @@ import { themes } from '../constants/colors';
 
 const styles = StyleSheet.create({
 	view: {
-		flex: 1,
+		flex: 1
+	},
+	vertical: {
 		paddingTop: 0,
 		paddingBottom: 0
 	}
 });
 
 const SafeAreaView = React.memo(({
-	style, children, testID, theme, ...props
+	style, children, testID, theme, vertical = true, ...props
 }) => (
 	<SafeAreaContext
-		style={[styles.view, { backgroundColor: themes[theme].auxiliaryBackground }, style]}
+		style={[styles.view, vertical && styles.vertical, { backgroundColor: themes[theme].auxiliaryBackground }, style]}
 		testID={testID}
 		{...props}
 	>
@@ -27,6 +29,7 @@ const SafeAreaView = React.memo(({
 SafeAreaView.propTypes = {
 	testID: PropTypes.string,
 	theme: PropTypes.string,
+	vertical: PropTypes.bool,
 	style: PropTypes.object,
 	children: PropTypes.element
 };

app/stacks/InsideStack.js

@@ -68,7 +68,7 @@ const ChatsStack = () => {
 				component={RoomView}
 				options={RoomView.navigationOptions}
 			/>
-			{/* <Chats.Screen
+			<Chats.Screen
 				name='RoomActionsView'
 				component={RoomActionsView}
 				options={RoomActionsView.navigationOptions}
@@ -142,7 +142,7 @@ const ChatsStack = () => {
 				name='ReadReceiptsView'
 				component={ReadReceiptsView}
 				options={ReadReceiptsView.navigationOptions}
-			/> */}
+			/>
 		</Chats.Navigator>
 	);
 };

app/views/AuthLoadingView.js

@@ -24,8 +24,8 @@ const styles = StyleSheet.create({
 	}
 });
 
-export default React.memo(withTheme(({ theme, navigation }) => {
-	const text = navigation.getParam('text');
+export default React.memo(withTheme(({ theme, route }) => {
+	const text = route.params?.text;
 	return (
 		<View style={[styles.container, { backgroundColor: themes[theme].backgroundColor }]}>
 			<StatusBar theme={theme} />

app/views/AutoTranslateView/index.js

@@ -14,7 +14,6 @@ import Separator from '../../containers/Separator';
 import { SWITCH_TRACK_COLOR, themes } from '../../constants/colors';
 import scrollPersistTaps from '../../utils/scrollPersistTaps';
 import { withTheme } from '../../theme';
-import { themedHeader } from '../../utils/navigation';
 import SafeAreaView from '../../containers/SafeAreaView';
 
 const styles = StyleSheet.create({
@@ -49,20 +48,19 @@ SectionSeparator.propTypes = {
 };
 
 class AutoTranslateView extends React.Component {
-	static navigationOptions = ({ screenProps }) => ({
-		title: I18n.t('Auto_Translate'),
-		...themedHeader(screenProps.theme)
-	})
+	static navigationOptions = {
+		title: I18n.t('Auto_Translate')
+	}
 
 	static propTypes = {
-		navigation: PropTypes.object,
+		route: PropTypes.object,
 		theme: PropTypes.string
 	}
 
 	constructor(props) {
 		super(props);
-		this.rid = props.navigation.getParam('rid');
-		const room = props.navigation.getParam('room');
+		this.rid = props.route.params?.rid;
+		const room = props.route.params?.room;
 
 		if (room && room.observe) {
 			this.roomObservable = room.observe();

app/views/DefaultBrowserView.js

@@ -60,10 +60,9 @@ const styles = StyleSheet.create({
 });
 
 class DefaultBrowserView extends React.Component {
-	static navigationOptions = ({ screenProps }) => ({
-		title: I18n.t('Default_browser'),
-		...themedHeader(screenProps.theme)
-	})
+	static navigationOptions = {
+		title: I18n.t('Default_browser')
+	}
 
 	static propTypes = {
 		theme: PropTypes.string

app/views/DirectoryView/index.js

@@ -14,26 +14,25 @@ import SearchBox from '../../containers/SearchBox';
 import { CustomIcon } from '../../lib/Icons';
 import StatusBar from '../../containers/StatusBar';
 import ActivityIndicator from '../../containers/ActivityIndicator';
-import { CloseModalButton } from '../../containers/HeaderButton';
+// import { CloseModalButton } from '../../containers/HeaderButton';
 import debounce from '../../utils/debounce';
 import log from '../../utils/log';
 import Options from './Options';
 import { withTheme } from '../../theme';
 import { themes } from '../../constants/colors';
 import styles from './styles';
-import { themedHeader } from '../../utils/navigation';
 import { getUserSelector } from '../../selectors/login';
 import SafeAreaView from '../../containers/SafeAreaView';
 
 class DirectoryView extends React.Component {
-	static navigationOptions = ({ navigation, screenProps }) => {
+	static navigationOptions = () => {
 		const options = {
-			...themedHeader(screenProps.theme),
 			title: I18n.t('Directory')
 		};
-		if (screenProps.split) {
-			options.headerLeft = <CloseModalButton navigation={navigation} testID='directory-view-close' />;
-		}
+		// TODO: ?
+		// if (screenProps.split) {
+		// 	options.headerLeft = <CloseModalButton navigation={navigation} testID='directory-view-close' />;
+		// }
 		return options;
 	}
 

app/views/ForgotPasswordView.js

@@ -11,11 +11,13 @@ import I18n from '../i18n';
 import RocketChat from '../lib/rocketchat';
 import { withTheme } from '../theme';
 import { themes } from '../constants/colors';
-import { themedHeader } from '../utils/navigation';
 import FormContainer, { FormContainerInner } from '../containers/FormContainer';
-import { LegalButton } from '../containers/HeaderButton';
 
 class ForgotPasswordView extends React.Component {
+	static navigatonOptions = ({ route }) => ({
+		title: route.params.title
+	})
+
 	static propTypes = {
 		navigation: PropTypes.object,
 		theme: PropTypes.string
@@ -107,8 +109,4 @@ class ForgotPasswordView extends React.Component {
 	}
 }
 
-ForgotPasswordView.navigatonOptions = ({ route }) => ({
-	title: route.params.title
-});
-
 export default withTheme(ForgotPasswordView);

app/views/InviteUsersEditView/index.js

@@ -16,7 +16,6 @@ import I18n from '../../i18n';
 import StatusBar from '../../containers/StatusBar';
 import { themes } from '../../constants/colors';
 import { withTheme } from '../../theme';
-import { themedHeader } from '../../utils/navigation';
 import Separator from '../../containers/Separator';
 import SafeAreaView from '../../containers/SafeAreaView';
 
@@ -60,13 +59,13 @@ const OPTIONS = {
 };
 
 class InviteUsersView extends React.Component {
-	static navigationOptions = ({ screenProps }) => ({
-		title: I18n.t('Invite_users'),
-		...themedHeader(screenProps.theme)
-	})
+	static navigationOptions = {
+		title: I18n.t('Invite_users')
+	}
 
 	static propTypes = {
 		navigation: PropTypes.object,
+		route: PropTypes.object,
 		theme: PropTypes.string,
 		timeDateFormat: PropTypes.string,
 		createInviteLink: PropTypes.func,
@@ -75,7 +74,7 @@ class InviteUsersView extends React.Component {
 
 	constructor(props) {
 		super(props);
-		this.rid = props.navigation.getParam('rid');
+		this.rid = props.route.params?.rid;
 	}
 
 	onValueChangePicker = (key, value) => {

app/views/InviteUsersView/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { View, Share, ScrollView, SafeAreaView } from 'react-native';
-// import { SafeAreaView } from 'react-navigation';
+import { View, Share, ScrollView } from 'react-native';
 import moment from 'moment';
 import { connect } from 'react-redux';
 
@@ -18,16 +17,16 @@ import I18n from '../../i18n';
 import StatusBar from '../../containers/StatusBar';
 import { themes } from '../../constants/colors';
 import { withTheme } from '../../theme';
-import { themedHeader } from '../../utils/navigation';
+import SafeAreaView from '../../containers/SafeAreaView';
 
 class InviteUsersView extends React.Component {
-	static navigationOptions = ({ screenProps }) => ({
-		title: I18n.t('Invite_users'),
-		...themedHeader(screenProps.theme)
-	})
+	static navigationOptions = {
+		title: I18n.t('Invite_users')
+	}
 
 	static propTypes = {
 		navigation: PropTypes.object,
+		route: PropTypes.object,
 		theme: PropTypes.string,
 		timeDateFormat: PropTypes.string,
 		invite: PropTypes.object,
@@ -37,7 +36,7 @@ class InviteUsersView extends React.Component {
 
 	constructor(props) {
 		super(props);
-		this.rid = props.navigation.getParam('rid');
+		this.rid = props.route.params?.rid;
 	}
 
 	componentDidMount() {
@@ -100,7 +99,7 @@ class InviteUsersView extends React.Component {
 			theme, invite
 		} = this.props;
 		return (
-			<SafeAreaView style={[styles.container, { backgroundColor: themes[theme].backgroundColor }]} forceInset={{ vertical: 'never' }}>
+			<SafeAreaView style={{ backgroundColor: themes[theme].backgroundColor }} theme={theme}>
 				<ScrollView
 					{...scrollPersistTaps}
 					style={{ backgroundColor: themes[theme].auxiliaryBackground }}

app/views/InviteUsersView/styles.js

@@ -1,9 +1,6 @@
 import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
-	container: {
-		flex: 1
-	},
 	innerContainer: {
 		padding: 20,
 		paddingBottom: 0

app/views/LanguageView/index.js

@@ -15,7 +15,6 @@ import ListItem from '../../containers/ListItem';
 import Separator from '../../containers/Separator';
 import { themes } from '../../constants/colors';
 import { withTheme } from '../../theme';
-import { themedHeader } from '../../utils/navigation';
 import { appStart as appStartAction } from '../../actions';
 import { getUserSelector } from '../../selectors/login';
 import database from '../../lib/database';
@@ -59,10 +58,9 @@ const LANGUAGES = [
 ];
 
 class LanguageView extends React.Component {
-	static navigationOptions = ({ screenProps }) => ({
-		title: I18n.t('Change_Language'),
-		...themedHeader(screenProps.theme)
-	})
+	static navigationOptions = {
+		title: I18n.t('Change_Language')
+	}
 
 	static propTypes = {
 		user: PropTypes.object,

app/views/LoginView.js

@@ -51,6 +51,11 @@ const styles = StyleSheet.create({
 });
 
 class LoginView extends React.Component {
+	static navigatonOptions = ({ route, navigation }) => ({
+		title: route.params.title,
+		headerRight: () => <LegalButton testID='login-view-more' navigation={navigation} />
+	})
+
 	static propTypes = {
 		navigation: PropTypes.object,
 		Site_Name: PropTypes.string,
@@ -220,9 +225,4 @@ const mapDispatchToProps = dispatch => ({
 	loginRequest: params => dispatch(loginRequestAction(params))
 });
 
-LoginView.navigatonOptions = ({ route, navigation }) => ({
-	title: route.params.title,
-	headerRight: () => <LegalButton testID='login-view-more' navigation={navigation} />
-});
-
 export default connect(mapStateToProps, mapDispatchToProps)(withTheme(LoginView));

app/views/MarkdownTableView.js

@@ -6,23 +6,21 @@ import I18n from '../i18n';
 import { isIOS } from '../utils/deviceInfo';
 import { themes } from '../constants/colors';
 import { withTheme } from '../theme';
-import { themedHeader } from '../utils/navigation';
 
 class MarkdownTableView extends React.Component {
-	static navigationOptions = ({ screenProps }) => ({
-		...themedHeader(screenProps.theme),
+	static navigationOptions = {
 		title: I18n.t('Table')
-	});
+	}
 
 	static propTypes = {
-		navigation: PropTypes.object,
+		route: PropTypes.object,
 		theme: PropTypes.string
 	}
 
 	render() {
-		const { navigation, theme } = this.props;
-		const renderRows = navigation.getParam('renderRows');
-		const tableWidth = navigation.getParam('tableWidth');
+		const { route, theme } = this.props;
+		const renderRows = route.params?.renderRows;
+		const tableWidth = route.params?.tableWidth;
 
 		if (isIOS) {
 			return (

app/views/MessagesView/index.js

@@ -15,7 +15,6 @@ import getFileUrlFromMessage from '../../lib/methods/helpers/getFileUrlFromMessa
 import { themes } from '../../constants/colors';
 import { withTheme } from '../../theme';
 import { withSplit } from '../../split';
-import { themedHeader } from '../../utils/navigation';
 import { getUserSelector } from '../../selectors/login';
 import SafeAreaView from '../../containers/SafeAreaView';
 
@@ -23,15 +22,15 @@ const ACTION_INDEX = 0;
 const CANCEL_INDEX = 1;
 
 class MessagesView extends React.Component {
-	static navigationOptions = ({ navigation, screenProps }) => ({
-		title: I18n.t(navigation.state.params.name),
-		...themedHeader(screenProps.theme)
+	static navigationOptions = ({ route }) => ({
+		title: I18n.t(route.params?.name)
 	});
 
 	static propTypes = {
 		user: PropTypes.object,
 		baseUrl: PropTypes.string,
 		navigation: PropTypes.object,
+		route: PropTypes.object,
 		customEmojis: PropTypes.object,
 		theme: PropTypes.string,
 		split: PropTypes.bool
@@ -44,9 +43,9 @@ class MessagesView extends React.Component {
 			messages: [],
 			fileLoading: true
 		};
-		this.rid = props.navigation.getParam('rid');
-		this.t = props.navigation.getParam('t');
-		this.content = this.defineMessagesViewContent(props.navigation.getParam('name'));
+		this.rid = props.route.params?.rid;
+		this.t = props.route.params?.t;
+		this.content = this.defineMessagesViewContent(props.route.params?.name);
 	}
 
 	componentDidMount() {

app/views/NewServerView.js

@@ -64,6 +64,20 @@ const styles = StyleSheet.create({
 });
 
 class NewServerView extends React.Component {
+	// static navigationOptions = ({ screenProps, navigation }) => {
+	// 	const previousServer = navigation.getParam('previousServer', null);
+	// 	const close = navigation.getParam('close', () => {});
+	// 	return {
+	// 		headerLeft: previousServer ? <CloseModalButton navigation={navigation} onPress={close} testID='new-server-view-close' /> : undefined,
+	// 		title: I18n.t('Workspaces'),
+	// 		...themedHeader(screenProps.theme)
+	// 	};
+	// }
+
+	static navigationOptions = {
+		title: I18n.t('Workspaces')
+	}
+
 	static propTypes = {
 		navigation: PropTypes.object,
 		theme: PropTypes.string,
@@ -345,18 +359,4 @@ const mapDispatchToProps = dispatch => ({
 	appStart: root => dispatch(appStartAction(root))
 });
 
-// static navigationOptions = ({ screenProps, navigation }) => {
-// 	const previousServer = navigation.getParam('previousServer', null);
-// 	const close = navigation.getParam('close', () => {});
-// 	return {
-// 		headerLeft: previousServer ? <CloseModalButton navigation={navigation} onPress={close} testID='new-server-view-close' /> : undefined,
-// 		title: I18n.t('Workspaces'),
-// 		...themedHeader(screenProps.theme)
-// 	};
-// }
-
-NewServerView.navigationOptions = {
-	title: I18n.t('Workspaces')
-};
-
 export default connect(mapStateToProps, mapDispatchToProps)(withTheme(NewServerView));

app/views/NotificationPreferencesView/index.js

@@ -14,7 +14,6 @@ import scrollPersistTaps from '../../utils/scrollPersistTaps';
 import styles from './styles';
 import RocketChat from '../../lib/rocketchat';
 import { withTheme } from '../../theme';
-import { themedHeader } from '../../utils/navigation';
 import protectedFunction from '../../lib/methods/helpers/protectedFunction';
 import SafeAreaView from '../../containers/SafeAreaView';
 
@@ -139,21 +138,21 @@ const OPTIONS = {
 };
 
 class NotificationPreferencesView extends React.Component {
-	static navigationOptions = ({ screenProps }) => ({
-		title: I18n.t('Notification_Preferences'),
-		...themedHeader(screenProps.theme)
-	})
+	static navigationOptions = {
+		title: I18n.t('Notification_Preferences')
+	}
 
 	static propTypes = {
 		navigation: PropTypes.object,
+		route: PropTypes.object,
 		theme: PropTypes.string
 	};
 
 	constructor(props) {
 		super(props);
 		this.mounted = false;
-		this.rid = props.navigation.getParam('rid');
-		const room = props.navigation.getParam('room');
+		this.rid = props.route.params?.rid;
+		const room = props.route.params?.room;
 		this.state = {
 			room: room || {}
 		};

app/views/OnboardingView/index.js

@@ -16,6 +16,10 @@ import { withTheme } from '../../theme';
 import FormContainer, { FormContainerInner } from '../../containers/FormContainer';
 
 class OnboardingView extends React.Component {
+	static navigationOptions = {
+		headerShown: false
+	};
+
 	static propTypes = {
 		navigation: PropTypes.object,
 		appStart: PropTypes.func,
@@ -97,8 +101,4 @@ const mapDispatchToProps = dispatch => ({
 	appStart: root => dispatch(appStartAction(root))
 });
 
-OnboardingView.navigationOptions = {
-	headerShown: false
-};
-
 export default connect(null, mapDispatchToProps)(withTheme(OnboardingView));

app/views/ProfileView/index.js

@@ -29,13 +29,11 @@ import { DrawerButton } from '../../containers/HeaderButton';
 import StatusBar from '../../containers/StatusBar';
 import { themes } from '../../constants/colors';
 import { withTheme } from '../../theme';
-import { themedHeader } from '../../utils/navigation';
 import { getUserSelector } from '../../selectors/login';
 import SafeAreaView from '../../containers/SafeAreaView';
 
 class ProfileView extends React.Component {
-	static navigationOptions = ({ navigation, screenProps }) => ({
-		...themedHeader(screenProps.theme),
+	static navigationOptions = ({ navigation }) => ({
 		// headerLeft: screenProps.split ? (
 		// 	<HeaderBackButton
 		// 		onPress={() => navigation.navigate('SettingsView')}
@@ -44,6 +42,7 @@ class ProfileView extends React.Component {
 		// ) : (
 		// 	<DrawerButton navigation={navigation} />
 		// ),
+		headerLeft: () => <DrawerButton navigation={navigation} />,
 		title: I18n.t('Profile')
 	})
 

app/views/ReadReceiptView/index.js

@@ -12,19 +12,17 @@ import I18n from '../../i18n';
 import RocketChat from '../../lib/rocketchat';
 import StatusBar from '../../containers/StatusBar';
 import { withTheme } from '../../theme';
-import { themedHeader } from '../../utils/navigation';
 import { themes } from '../../constants/colors';
 import { getUserSelector } from '../../selectors/login';
 import SafeAreaView from '../../containers/SafeAreaView';
 
 class ReadReceiptView extends React.Component {
-	static navigationOptions = ({ screenProps }) => ({
-		title: I18n.t('Read_Receipt'),
-		...themedHeader(screenProps.theme)
-	})
+	static navigationOptions = {
+		title: I18n.t('Read_Receipt')
+	}
 
 	static propTypes = {
-		navigation: PropTypes.object,
+		route: PropTypes.object,
 		Message_TimeFormat: PropTypes.string,
 		baseUrl: PropTypes.string,
 		user: PropTypes.object,
@@ -33,7 +31,7 @@ class ReadReceiptView extends React.Component {
 
 	constructor(props) {
 		super(props);
-		this.messageId = props.navigation.getParam('messageId');
+		this.messageId = props.route.params?.messageId;
 		this.state = {
 			loading: false,
 			receipts: []

app/views/RegisterView.js

@@ -53,14 +53,10 @@ const styles = StyleSheet.create({
 });
 
 class RegisterView extends React.Component {
-	static navigationOptions = ({ navigation, screenProps }) => {
-		const title = navigation.getParam('title', 'Rocket.Chat');
-		return {
-			...themedHeader(screenProps.theme),
-			title,
-			headerRight: <LegalButton navigation={navigation} testID='register-view-more' />
-		};
-	}
+	static navigatonOptions = ({ route, navigation }) => ({
+		title: route.params.title,
+		headerRight: () => <LegalButton testID='register-view-more' navigation={navigation} />
+	});
 
 	static propTypes = {
 		navigation: PropTypes.object,
@@ -342,9 +338,4 @@ const mapDispatchToProps = dispatch => ({
 	loginRequest: params => dispatch(loginRequestAction(params))
 });
 
-RegisterView.navigatonOptions = ({ route, navigation }) => ({
-	title: route.params.title,
-	headerRight: () => <LegalButton testID='register-view-more' navigation={navigation} />
-});
-
 export default connect(mapStateToProps, mapDispatchToProps)(withTheme(RegisterView));

app/views/RoomActionsView/index.js

@@ -23,7 +23,6 @@ import DisclosureIndicator from '../../containers/DisclosureIndicator';
 import StatusBar from '../../containers/StatusBar';
 import { themes } from '../../constants/colors';
 import { withTheme } from '../../theme';
-import { themedHeader } from '../../utils/navigation';
 import { CloseModalButton } from '../../containers/HeaderButton';
 import { getUserSelector } from '../../selectors/login';
 import Markdown from '../../containers/markdown';
@@ -31,20 +30,21 @@ import { showConfirmationAlert, showErrorAlert } from '../../utils/info';
 import SafeAreaView from '../../containers/SafeAreaView';
 
 class RoomActionsView extends React.Component {
-	static navigationOptions = ({ navigation, screenProps }) => {
+	static navigationOptions = () => {
 		const options = {
-			...themedHeader(screenProps.theme),
 			title: I18n.t('Actions')
 		};
-		if (screenProps.split) {
-			options.headerLeft = <CloseModalButton navigation={navigation} testID='room-actions-view-close' />;
-		}
+		// TODO: ?
+		// if (screenProps.split) {
+		// 	options.headerLeft = <CloseModalButton navigation={navigation} testID='room-actions-view-close' />;
+		// }
 		return options;
 	}
 
 	static propTypes = {
 		baseUrl: PropTypes.string,
 		navigation: PropTypes.object,
+		route: PropTypes.object,
 		user: PropTypes.shape({
 			id: PropTypes.string,
 			token: PropTypes.string
@@ -59,10 +59,10 @@ class RoomActionsView extends React.Component {
 	constructor(props) {
 		super(props);
 		this.mounted = false;
-		const room = props.navigation.getParam('room');
-		const member = props.navigation.getParam('member');
-		this.rid = props.navigation.getParam('rid');
-		this.t = props.navigation.getParam('t');
+		const room = props.route.params?.room;
+		const member = props.route.params?.member;
+		this.rid = props.route.params?.rid;
+		this.t = props.route.params?.t;
 		this.state = {
 			room: room || { rid: this.rid, t: this.t },
 			membersCount: 0,

app/views/RoomInfoEditView/index.js

@@ -26,7 +26,6 @@ import random from '../../utils/random';
 import log from '../../utils/log';
 import I18n from '../../i18n';
 import StatusBar from '../../containers/StatusBar';
-import { themedHeader } from '../../utils/navigation';
 import { themes } from '../../constants/colors';
 import { withTheme } from '../../theme';
 import { MultiSelect } from '../../containers/UIKit/MultiSelect';
@@ -49,13 +48,12 @@ const PERMISSIONS_ARRAY = [
 ];
 
 class RoomInfoEditView extends React.Component {
-	static navigationOptions = ({ screenProps }) => ({
-		title: I18n.t('Room_Info_Edit'),
-		...themedHeader(screenProps.theme)
-	})
+	static navigationOptions = {
+		title: I18n.t('Room_Info_Edit')
+	}
 
 	static propTypes = {
-		navigation: PropTypes.object,
+		route: PropTypes.object,
 		deleteRoom: PropTypes.func,
 		serverVersion: PropTypes.string,
 		theme: PropTypes.string
@@ -101,8 +99,8 @@ class RoomInfoEditView extends React.Component {
 
 	// eslint-disable-next-line react/sort-comp
 	loadRoom = async() => {
-		const { navigation } = this.props;
-		const rid = navigation.getParam('rid', null);
+		const { route } = this.props;
+		const rid = route.params?.rid;
 		if (!rid) {
 			return;
 		}

app/views/RoomInfoView/index.js

@@ -1,9 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { View, Text, ScrollView, SafeAreaView } from 'react-native';
+import { View, Text, ScrollView } from 'react-native';
 import { BorderlessButton } from 'react-native-gesture-handler';
 import { connect } from 'react-redux';
-// import { SafeAreaView } from 'react-navigation';
 import UAParser from 'ua-parser-js';
 import _ from 'lodash';
 
@@ -22,7 +21,6 @@ import log from '../../utils/log';
 import { themes } from '../../constants/colors';
 import { withTheme } from '../../theme';
 import { withSplit } from '../../split';
-import { themedHeader } from '../../utils/navigation';
 import { getUserSelector } from '../../selectors/login';
 import Markdown from '../../containers/markdown';
 import Navigation from '../../lib/Navigation';
@@ -31,6 +29,7 @@ import Livechat from './Livechat';
 import Channel from './Channel';
 import Item from './Item';
 import Direct from './Direct';
+import SafeAreaView from '../../containers/SafeAreaView';
 
 const PERMISSION_EDIT_ROOM = 'edit-room';
 const getRoomTitle = (room, type, name, username, statusText, theme) => (type === 'd'
@@ -50,15 +49,14 @@ const getRoomTitle = (room, type, name, username, statusText, theme) => (type ==
 );
 
 class RoomInfoView extends React.Component {
-	static navigationOptions = ({ navigation, screenProps }) => {
-		const t = navigation.getParam('t');
-		const rid = navigation.getParam('rid');
-		const room = navigation.getParam('room');
-		const roomUser = navigation.getParam('roomUser');
-		const showEdit = navigation.getParam('showEdit', t === 'l');
+	static navigationOptions = ({ navigation, route }) => {
+		const t = route.params?.t;
+		const rid = route.params?.rid;
+		const room = route.params?.room;
+		const roomUser = route.params?.roomUser;
+		const showEdit = route.params?.showEdit;
 		return {
 			title: t === 'd' ? I18n.t('User_Info') : I18n.t('Room_Info'),
-			...themedHeader(screenProps.theme),
 			headerRight: showEdit
 				? (
 					<CustomHeaderButtons>
@@ -75,6 +73,7 @@ class RoomInfoView extends React.Component {
 
 	static propTypes = {
 		navigation: PropTypes.object,
+		route: PropTypes.object,
 		user: PropTypes.shape({
 			id: PropTypes.string,
 			token: PropTypes.string
@@ -87,10 +86,10 @@ class RoomInfoView extends React.Component {
 
 	constructor(props) {
 		super(props);
-		const room = props.navigation.getParam('room');
-		const roomUser = props.navigation.getParam('member');
-		this.rid = props.navigation.getParam('rid');
-		this.t = props.navigation.getParam('t');
+		const room = props.route.params?.room;
+		const roomUser = props.route.params?.member;
+		this.rid = props.route.params?.rid;
+		this.t = props.route.params?.t;
 		this.state = {
 			room: room || { rid: this.rid, t: this.t },
 			roomUser: roomUser || {}
@@ -327,8 +326,8 @@ class RoomInfoView extends React.Component {
 			<ScrollView style={[styles.scroll, { backgroundColor: themes[theme].backgroundColor }]}>
 				<StatusBar theme={theme} />
 				<SafeAreaView
-					style={[styles.container, { backgroundColor: themes[theme].backgroundColor }]}
-					forceInset={{ vertical: 'never' }}
+					style={{ backgroundColor: themes[theme].backgroundColor }}
+					theme={theme}
 					testID='room-info-view'
 				>
 					<View style={[styles.avatarContainer, this.isDirect && styles.avatarContainerDirectRoom, { backgroundColor: themes[theme].auxiliaryBackground }]}>

app/views/RoomMembersView/index.js

@@ -21,7 +21,6 @@ import { CustomHeaderButtons, Item } from '../../containers/HeaderButton';
 import StatusBar from '../../containers/StatusBar';
 import ActivityIndicator from '../../containers/ActivityIndicator';
 import { withTheme } from '../../theme';
-import { themedHeader } from '../../utils/navigation';
 import { themes } from '../../constants/colors';
 import { getUserSelector } from '../../selectors/login';
 import SafeAreaView from '../../containers/SafeAreaView';
@@ -29,13 +28,12 @@ import SafeAreaView from '../../containers/SafeAreaView';
 const PAGE_SIZE = 25;
 
 class RoomMembersView extends React.Component {
-	static navigationOptions = ({ navigation, screenProps }) => {
-		const toggleStatus = navigation.getParam('toggleStatus', () => {});
-		const allUsers = navigation.getParam('allUsers');
+	static navigationOptions = ({ route }) => {
+		const toggleStatus = route.params?.toggleStatus ?? (() => {});
+		const allUsers = route.params?.allUsers;
 		const toggleText = allUsers ? I18n.t('Online') : I18n.t('All');
 		return {
 			title: I18n.t('Members'),
-			...themedHeader(screenProps.theme),
 			headerRight: (
 				<CustomHeaderButtons>
 					<Item title={toggleText} onPress={toggleStatus} testID='room-members-view-toggle-status' />
@@ -46,6 +44,7 @@ class RoomMembersView extends React.Component {
 
 	static propTypes = {
 		navigation: PropTypes.object,
+		route: PropTypes.object,
 		rid: PropTypes.string,
 		members: PropTypes.array,
 		baseUrl: PropTypes.string,
@@ -63,8 +62,8 @@ class RoomMembersView extends React.Component {
 		this.CANCEL_INDEX = 0;
 		this.MUTE_INDEX = 1;
 		this.actionSheetOptions = [''];
-		const { rid } = props.navigation.state.params;
-		const room = props.navigation.getParam('room');
+		const rid = props.route.params?.rid;
+		const room = props.route.params?.room;
 		this.state = {
 			isLoading: false,
 			allUsers: false,

app/views/RoomView/index.js

@@ -71,6 +71,67 @@ const stateAttrsUpdate = [
 const roomAttrsUpdate = ['f', 'ro', 'blocked', 'blocker', 'archived', 'muted', 'jitsiTimeout', 'announcement', 'sysMes', 'topic', 'name', 'fname', 'roles', 'bannerClosed', 'visitor'];
 
 class RoomView extends React.Component {
+	static navigationOptions = ({ navigation, route }) => {
+		const rid = route.params?.rid ?? null;
+		const prid = route.params?.prid;
+		const title = route.params?.name;
+		const subtitle = route.params?.subtitle;
+		const t = route.params?.t;
+		const tmid = route.params?.tmid;
+		const baseUrl = route.params?.baseUrl;
+		const userId = route.params?.userId;
+		const token = route.params?.token;
+		const avatar = route.params?.avatar;
+		const toggleFollowThread = route.params?.toggleFollowThread ?? (() => {});
+		const goRoomActionsView = route.params?.goRoomActionsView ?? (() => {});
+		const unreadsCount = route.params?.unreadsCount ?? null;
+		const roomUserId = route.params?.roomUserId;
+		const visitor = route.params?.visitor;
+		if (!rid) {
+			return {};
+		}
+		return {
+			headerTitle: () => (
+				<RoomHeaderView
+					rid={rid}
+					prid={prid}
+					tmid={tmid}
+					title={title}
+					subtitle={subtitle}
+					type={t}
+					widthOffset={tmid ? 95 : 130}
+					roomUserId={roomUserId}
+					visitor={visitor}
+					goRoomActionsView={goRoomActionsView}
+				/>
+			),
+			headerRight: () => (
+				<RightButtons
+					rid={rid}
+					tmid={tmid}
+					t={t}
+					navigation={navigation}
+					toggleFollowThread={toggleFollowThread}
+				/>
+			),
+			headerLeft: () => (
+				<RoomHeaderLeft
+					tmid={tmid}
+					unreadsCount={unreadsCount}
+					navigation={navigation}
+					baseUrl={baseUrl}
+					userId={userId}
+					token={token}
+					title={avatar}
+					theme='light' // TODO: ?
+					t={t}
+					goRoomActionsView={goRoomActionsView}
+					split={false} // TODO: ?
+				/>
+			)
+		};
+	}
+
 	static propTypes = {
 		navigation: PropTypes.object,
 		route: PropTypes.object,
@@ -1017,65 +1078,4 @@ const mapDispatchToProps = dispatch => ({
 	replyBroadcast: message => dispatch(replyBroadcastAction(message))
 });
 
-RoomView.navigationOptions = ({ navigation, route }) => {
-	const rid = route.params?.rid ?? null;
-	const prid = route.params?.prid;
-	const title = route.params?.name;
-	const subtitle = route.params?.subtitle;
-	const t = route.params?.t;
-	const tmid = route.params?.tmid;
-	const baseUrl = route.params?.baseUrl;
-	const userId = route.params?.userId;
-	const token = route.params?.token;
-	const avatar = route.params?.avatar;
-	const toggleFollowThread = route.params?.toggleFollowThread ?? (() => {});
-	const goRoomActionsView = route.params?.goRoomActionsView ?? (() => {});
-	const unreadsCount = route.params?.unreadsCount ?? null;
-	const roomUserId = route.params?.roomUserId;
-	const visitor = route.params?.visitor;
-	if (!rid) {
-		return {};
-	}
-	return {
-		headerTitle: () => (
-			<RoomHeaderView
-				rid={rid}
-				prid={prid}
-				tmid={tmid}
-				title={title}
-				subtitle={subtitle}
-				type={t}
-				widthOffset={tmid ? 95 : 130}
-				roomUserId={roomUserId}
-				visitor={visitor}
-				goRoomActionsView={goRoomActionsView}
-			/>
-		),
-		headerRight: () => (
-			<RightButtons
-				rid={rid}
-				tmid={tmid}
-				t={t}
-				navigation={navigation}
-				toggleFollowThread={toggleFollowThread}
-			/>
-		),
-		headerLeft: () => (
-			<RoomHeaderLeft
-				tmid={tmid}
-				unreadsCount={unreadsCount}
-				navigation={navigation}
-				baseUrl={baseUrl}
-				userId={userId}
-				token={token}
-				title={avatar}
-				theme='light' // TODO: ?
-				t={t}
-				goRoomActionsView={goRoomActionsView}
-				split={false} // TODO: ?
-			/>
-		)
-	};
-};
-
 export default connect(mapStateToProps, mapDispatchToProps)(withTheme(RoomView));

app/views/RoomsListView/index.js

@@ -99,6 +99,51 @@ const getItemLayout = (data, index) => ({
 const keyExtractor = item => item.rid;
 
 class RoomsListView extends React.Component {
+	static navigationOptions = ({ route, navigation }) => {
+		const searching = route.params?.searching;
+		const cancelSearch = route.params?.cancelSearch ?? (() => {});
+		const onPressItem = route.params?.onPressItem ?? (() => {});
+		const initSearching = route.params?.initSearching ?? (() => {});
+
+		return {
+			headerLeft: () => (searching && isAndroid ? (
+				<CustomHeaderButtons left>
+					<Item
+						title='cancel'
+						iconName='cross'
+						onPress={cancelSearch}
+					/>
+				</CustomHeaderButtons>
+			) : (
+				<DrawerButton
+					navigation={navigation}
+					testID='rooms-list-view-sidebar'
+				/>
+			)),
+			headerTitle: () => <RoomsListHeaderView />,
+			headerRight: () => (searching && isAndroid ? null : (
+				<CustomHeaderButtons>
+					{isAndroid ? (
+						<Item
+							title='search'
+							iconName='magnifier'
+							onPress={initSearching}
+						/>
+					) : null}
+					<Item
+						title='new'
+						iconName='edit-rounded'
+						onPress={() => navigation.navigate('NewMessageStack', {
+							screen: 'NewMessageView',
+							params: { onPressItem }
+						})}
+						testID='rooms-list-view-create-channel'
+					/>
+				</CustomHeaderButtons>
+			))
+		};
+	}
+
 	static propTypes = {
 		navigation: PropTypes.object,
 		user: PropTypes.shape({
@@ -835,49 +880,4 @@ const mapDispatchToProps = dispatch => ({
 	closeServerDropdown: () => dispatch(closeServerDropdownAction())
 });
 
-RoomsListView.navigationOptions = ({ route, navigation }) => {
-	const searching = route.params?.searching;
-	const cancelSearch = route.params?.cancelSearch ?? (() => {});
-	const onPressItem = route.params?.onPressItem ?? (() => {});
-	const initSearching = route.params?.initSearching ?? (() => {});
-
-	return {
-		headerLeft: () => (searching && isAndroid ? (
-			<CustomHeaderButtons left>
-				<Item
-					title='cancel'
-					iconName='cross'
-					onPress={cancelSearch}
-				/>
-			</CustomHeaderButtons>
-		) : (
-			<DrawerButton
-				navigation={navigation}
-				testID='rooms-list-view-sidebar'
-			/>
-		)),
-		headerTitle: () => <RoomsListHeaderView />,
-		headerRight: () => (searching && isAndroid ? null : (
-			<CustomHeaderButtons>
-				{isAndroid ? (
-					<Item
-						title='search'
-						iconName='magnifier'
-						onPress={initSearching}
-					/>
-				) : null}
-				<Item
-					title='new'
-					iconName='edit-rounded'
-					onPress={() => navigation.navigate('NewMessageStack', {
-						screen: 'NewMessageView',
-						params: { onPressItem }
-					})}
-					testID='rooms-list-view-create-channel'
-				/>
-			</CustomHeaderButtons>
-		))
-	};
-};
-
 export default connect(mapStateToProps, mapDispatchToProps)(withTheme(withSplit(RoomsListView)));

app/views/SearchMessagesView/index.js

@@ -17,18 +17,17 @@ import StatusBar from '../../containers/StatusBar';
 import log from '../../utils/log';
 import { themes } from '../../constants/colors';
 import { withTheme } from '../../theme';
-import { themedHeader } from '../../utils/navigation';
 import { getUserSelector } from '../../selectors/login';
 import SafeAreaView from '../../containers/SafeAreaView';
 
 class SearchMessagesView extends React.Component {
-	static navigationOptions = ({ screenProps }) => ({
-		title: I18n.t('Search'),
-		...themedHeader(screenProps.theme)
-	})
+	static navigationOptions = {
+		title: I18n.t('Search')
+	}
 
 	static propTypes = {
 		navigation: PropTypes.object,
+		route: PropTypes.object,
 		user: PropTypes.object,
 		baseUrl: PropTypes.string,
 		customEmojis: PropTypes.object,
@@ -42,7 +41,7 @@ class SearchMessagesView extends React.Component {
 			messages: [],
 			searchText: ''
 		};
-		this.rid = props.navigation.getParam('rid');
+		this.rid = props.route.params?.rid;
 	}
 
 	shouldComponentUpdate(nextProps, nextState) {

app/views/SelectedUsersView.js

@@ -19,7 +19,6 @@ import StatusBar from '../containers/StatusBar';
 import { themes } from '../constants/colors';
 import { animateNextTransition } from '../utils/layoutAnimation';
 import { withTheme } from '../theme';
-import { themedHeader } from '../utils/navigation';
 import { getUserSelector } from '../selectors/login';
 import {
 	reset as resetAction,
@@ -36,14 +35,13 @@ const styles = StyleSheet.create({
 });
 
 class SelectedUsersView extends React.Component {
-	static navigationOptions = ({ navigation, screenProps }) => {
-		const title = navigation.getParam('title', I18n.t('Select_Users'));
-		const buttonText = navigation.getParam('buttonText', I18n.t('Next'));
-		const showButton = navigation.getParam('showButton', false);
-		const maxUsers = navigation.getParam('maxUsers');
-		const nextAction = navigation.getParam('nextAction', () => {});
+	static navigationOptions = ({ route }) => {
+		const title = route.params?.title ?? I18n.t('Select_Users');
+		const buttonText = route.params?.buttonText ?? I18n.t('Next');
+		const showButton = route.params?.showButton ?? false;
+		const maxUsers = route.params?.maxUsers;
+		const nextAction = route.params?.nextAction ?? (() => {});
 		return {
-			...themedHeader(screenProps.theme),
 			title,
 			headerRight: (
 				(!maxUsers || showButton) && (
@@ -69,6 +67,7 @@ class SelectedUsersView extends React.Component {
 			name: PropTypes.string
 		}),
 		navigation: PropTypes.object,
+		route: PropTypes.object,
 		theme: PropTypes.string
 	};
 
@@ -76,7 +75,7 @@ class SelectedUsersView extends React.Component {
 		super(props);
 		this.init();
 
-		const maxUsers = props.navigation.getParam('maxUsers');
+		const maxUsers = props.route.params?.maxUsers;
 		this.state = {
 			maxUsers,
 			search: [],

app/views/SettingsView/index.js

@@ -55,13 +55,12 @@ SectionSeparator.propTypes = {
 };
 
 class SettingsView extends React.Component {
-	static navigationOptions = ({ navigation, screenProps }) => ({
-		...themedHeader(screenProps.theme),
-		headerLeft: screenProps.split ? (
+	static navigationOptions = ({ navigation, split }) => ({
+		headerLeft: () => (split ? (
 			<CloseModalButton navigation={navigation} testID='settings-view-close' />
 		) : (
 			<DrawerButton navigation={navigation} />
-		),
+		)),
 		title: I18n.t('Settings')
 	});
 

app/views/SidebarView/index.js

@@ -147,21 +147,21 @@ class Sidebar extends Component {
 				<SidebarItem
 					text={I18n.t('Chats')}
 					left={<CustomIcon name='message' size={20} color={themes[theme].titleText} />}
-					onPress={() => this.sidebarNavigate('RoomsListView')}
+					onPress={() => this.sidebarNavigate('ChatsStack')}
 					testID='sidebar-chats'
 					current={activeItemKey === 'ChatsStack'}
 				/>
 				<SidebarItem
 					text={I18n.t('Profile')}
 					left={<CustomIcon name='user' size={20} color={themes[theme].titleText} />}
-					onPress={() => this.sidebarNavigate('ProfileView')}
+					onPress={() => this.sidebarNavigate('ProfileStack')}
 					testID='sidebar-profile'
 					current={activeItemKey === 'ProfileStack'}
 				/>
 				<SidebarItem
 					text={I18n.t('Settings')}
 					left={<CustomIcon name='cog' size={20} color={themes[theme].titleText} />}
-					onPress={() => this.sidebarNavigate('SettingsView')}
+					onPress={() => this.sidebarNavigate('SettingsStack')}
 					testID='sidebar-settings'
 					current={activeItemKey === 'SettingsStack'}
 				/>
@@ -169,7 +169,7 @@ class Sidebar extends Component {
 					<SidebarItem
 						text={I18n.t('Admin_Panel')}
 						left={<CustomIcon name='shield-alt' size={20} color={themes[theme].titleText} />}
-						onPress={() => this.sidebarNavigate('AdminPanelView')}
+						onPress={() => this.sidebarNavigate('AdminPanelStack')}
 						testID='sidebar-settings'
 						current={activeItemKey === 'AdminPanelStack'}
 					/>
@@ -200,7 +200,7 @@ class Sidebar extends Component {
 			return null;
 		}
 		return (
-			<SafeAreaView testID='sidebar-view' style={{ backgroundColor: themes[theme].focusedBackground }} theme={theme}>
+			<SafeAreaView testID='sidebar-view' style={{ backgroundColor: themes[theme].focusedBackground }} vertical={false} theme={theme}>
 				<ScrollView
 					style={[
 						styles.container,

app/views/ThemeView.js

@@ -69,10 +69,9 @@ const styles = StyleSheet.create({
 });
 
 class ThemeView extends React.Component {
-	static navigationOptions = ({ screenProps }) => ({
-		title: I18n.t('Theme'),
-		...themedHeader(screenProps.theme)
-	})
+	static navigationOptions = {
+		title: I18n.t('Theme')
+	}
 
 	static propTypes = {
 		theme: PropTypes.string,

app/views/ThreadMessagesView/index.js

@@ -22,7 +22,6 @@ import debounce from '../../utils/debounce';
 import protectedFunction from '../../lib/methods/helpers/protectedFunction';
 import { themes } from '../../constants/colors';
 import { withTheme } from '../../theme';
-import { themedHeader } from '../../utils/navigation';
 import ModalNavigation from '../../lib/ModalNavigation';
 import { getUserSelector } from '../../selectors/login';
 import SafeAreaView from '../../containers/SafeAreaView';
@@ -35,14 +34,14 @@ Separator.propTypes = {
 const API_FETCH_COUNT = 50;
 
 class ThreadMessagesView extends React.Component {
-	static navigationOptions = ({ screenProps }) => ({
-		...themedHeader(screenProps.theme),
+	static navigationOptions = {
 		title: I18n.t('Threads')
-	});
+	}
 
 	static propTypes = {
 		user: PropTypes.object,
 		navigation: PropTypes.object,
+		route: PropTypes.object,
 		baseUrl: PropTypes.string,
 		useRealName: PropTypes.bool,
 		theme: PropTypes.string,
@@ -53,8 +52,8 @@ class ThreadMessagesView extends React.Component {
 	constructor(props) {
 		super(props);
 		this.mounted = false;
-		this.rid = props.navigation.getParam('rid');
-		this.t = props.navigation.getParam('t');
+		this.rid = props.route.params?.rid;
+		this.t = props.route.params?.t;
 		this.state = {
 			loading: false,
 			end: false,

app/views/WorkspaceView/index.js

@@ -13,6 +13,10 @@ import ServerAvatar from './ServerAvatar';
 import { getShowLoginButton } from '../../selectors/login';
 
 class WorkspaceView extends React.Component {
+	static navigationOptions = {
+		title: I18n.t('Your_workspace')
+	}
+
 	static propTypes = {
 		navigation: PropTypes.object,
 		theme: PropTypes.string,
@@ -88,8 +92,4 @@ const mapStateToProps = state => ({
 	showLoginButton: getShowLoginButton(state)
 });
 
-WorkspaceView.navigationOptions = {
-	title: I18n.t('Your_workspace')
-};
-
 export default connect(mapStateToProps)(withTheme(WorkspaceView));