Fix params

app/containers/StatusBar.js

@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 
 import { isIOS } from '../utils/deviceInfo';
 import { themes } from '../constants/colors';
-import { withTheme } from '../theme';
 
 const StatusBar = React.memo(({ theme }) => {
 	let barStyle = 'light-content';
@@ -18,4 +17,4 @@ StatusBar.propTypes = {
 	theme: PropTypes.string
 };
 
-export default withTheme(StatusBar);
+export default StatusBar;

app/stacks/InsideStack.js

@@ -5,7 +5,9 @@ import { createDrawerNavigator } from '@react-navigation/drawer';
 
 import { ThemeContext } from '../theme';
 import { SplitContext } from '../split';
-import { defaultHeader, themedHeader } from '../utils/navigation';
+import {
+	defaultHeader, themedHeader, modalAnimation, stackAnimation
+} from '../utils/navigation';
 import Toast from '../containers/Toast';
 import Sidebar from '../views/SidebarView';
 import NotificationBadge from '../notifications/inApp';
@@ -37,6 +39,7 @@ import SettingsView from '../views/SettingsView';
 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';
@@ -57,7 +60,7 @@ const ChatsStack = () => {
 	const { split } = React.useContext(SplitContext);
 
 	return (
-		<Chats.Navigator screenOptions={{ ...defaultHeader, ...themedHeader(theme) }}>
+		<Chats.Navigator screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...stackAnimation }}>
 			<Chats.Screen
 				name='RoomsListView'
 				component={RoomsListView}
@@ -66,7 +69,7 @@ const ChatsStack = () => {
 			<Chats.Screen
 				name='RoomView'
 				component={RoomView}
-				options={RoomView.navigationOptions}
+				options={props => RoomView.navigationOptions({ ...props, split, theme })}
 			/>
 			<Chats.Screen
 				name='RoomActionsView'
@@ -154,7 +157,7 @@ const ProfileStack = () => {
 	const { split } = React.useContext(SplitContext);
 
 	return (
-		<Profile.Navigator screenOptions={{ ...defaultHeader, ...themedHeader(theme) }}>
+		<Profile.Navigator screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...stackAnimation }}>
 			<Profile.Screen
 				name='ProfileView'
 				component={ProfileView}
@@ -171,7 +174,7 @@ const SettingsStack = () => {
 	const { split } = React.useContext(SplitContext);
 
 	return (
-		<Settings.Navigator screenOptions={{ ...defaultHeader, ...themedHeader(theme) }}>
+		<Settings.Navigator screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...stackAnimation }}>
 			<Settings.Screen
 				name='SettingsView'
 				component={SettingsView}
@@ -192,6 +195,11 @@ const SettingsStack = () => {
 				component={DefaultBrowserView}
 				options={DefaultBrowserView.navigationOptions}
 			/>
+			<Settings.Screen
+				name='ScreenLockConfigView'
+				component={ScreenLockConfigView}
+				options={ScreenLockConfigView.navigationOptions}
+			/>
 		</Settings.Navigator>
 	);
 };
@@ -202,7 +210,7 @@ const AdminPanelStack = () => {
 	const { theme } = React.useContext(ThemeContext);
 
 	return (
-		<AdminPanel.Navigator screenOptions={{ ...defaultHeader, ...themedHeader(theme) }}>
+		<AdminPanel.Navigator screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...stackAnimation }}>
 			<AdminPanel.Screen
 				name='AdminPanelView'
 				component={AdminPanelView}
@@ -229,7 +237,7 @@ const NewMessageStack = () => {
 	const { theme } = React.useContext(ThemeContext);
 
 	return (
-		<NewMessage.Navigator screenOptions={{ ...defaultHeader, ...themedHeader(theme) }}>
+		<NewMessage.Navigator screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...stackAnimation }}>
 			<NewMessage.Screen
 				name='NewMessageView'
 				component={NewMessageView}
@@ -238,7 +246,7 @@ const NewMessageStack = () => {
 			<NewMessage.Screen
 				name='SelectedUsersViewCreateChannel'
 				component={SelectedUsersView}
-				options={SelectedUsersView.navigationOptions}
+				options={props => SelectedUsersView.navigationOptions({ ...props })}
 			/>
 			<NewMessage.Screen
 				name='CreateChannelView'
@@ -255,7 +263,7 @@ const InsideStackModal = () => {
 	const { theme } = React.useContext(ThemeContext);
 
 	return (
-		<InsideStack.Navigator mode='modal' screenOptions={{ ...defaultHeader, ...themedHeader(theme) }}>
+		<InsideStack.Navigator mode='modal' screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...modalAnimation }}>
 			<InsideStack.Screen
 				name='ChatsDrawer'
 				component={ChatsDrawer}

app/utils/navigation.js

@@ -3,12 +3,17 @@ import { TransitionPresets } from '@react-navigation/stack';
 
 import { analytics, leaveBreadcrumb } from './log';
 import { themes } from '../constants/colors';
+import { isIOS } from './deviceInfo';
 
 export const defaultHeader = {
 	headerBackTitleVisible: false,
-	...TransitionPresets.SlideFromRightIOS
+	cardOverlayEnabled: true,
+	cardStyle: { backgroundColor: 'transparent' }
 };
 
+export const stackAnimation = TransitionPresets.SlideFromRightIOS;
+export const modalAnimation = TransitionPresets.ModalTransition;
+
 export const cardStyle = {
 	backgroundColor: 'rgba(0,0,0,0)'
 };

app/views/AdminPanelView/index.js

@@ -6,15 +6,13 @@ import { connect } from 'react-redux';
 import I18n from '../../i18n';
 import StatusBar from '../../containers/StatusBar';
 import { DrawerButton } from '../../containers/HeaderButton';
-import { themedHeader } from '../../utils/navigation';
 import { withTheme } from '../../theme';
 import { getUserSelector } from '../../selectors/login';
 import SafeAreaView from '../../containers/SafeAreaView';
 
 class AdminPanelView extends React.Component {
-	static navigationOptions = ({ navigation, screenProps }) => ({
-		...themedHeader(screenProps.theme),
-		headerLeft: <DrawerButton navigation={navigation} />,
+	static navigationOptions = ({ navigation }) => ({
+		headerLeft: () => <DrawerButton navigation={navigation} />,
 		title: I18n.t('Admin_Panel')
 	})
 

app/views/AttachmentView.js

@@ -13,7 +13,6 @@ import EventEmitter from '../utils/events';
 import I18n from '../i18n';
 import { withTheme } from '../theme';
 import ImageViewer from '../presentation/ImageViewer';
-import { themedHeader } from '../utils/navigation';
 import { themes } from '../constants/colors';
 import { formatAttachmentUrl } from '../lib/utils';
 import RCActivityIndicator from '../containers/ActivityIndicator';
@@ -28,15 +27,13 @@ const styles = StyleSheet.create({
 });
 
 class AttachmentView extends React.Component {
-	static navigationOptions = ({ navigation, screenProps }) => {
-		const { theme } = screenProps;
-		const attachment = navigation.getParam('attachment');
-		const from = navigation.getParam('from');
-		const handleSave = navigation.getParam('handleSave', () => {});
+	static navigationOptions = ({ navigation, route }) => {
+		const attachment = route.params?.attachment;
+		const from = route.params?.from;
+		const handleSave = route.params?.handleSave ?? (() => {});
 		const { title } = attachment;
 		const options = {
 			title: decodeURI(title),
-			...themedHeader(theme),
 			headerRight: <SaveButton testID='save-image' onPress={handleSave} />
 		};
 		if (from !== 'MessagesView') {
@@ -48,6 +45,7 @@ class AttachmentView extends React.Component {
 
 	static propTypes = {
 		navigation: PropTypes.object,
+		route: PropTypes.object,
 		theme: PropTypes.string,
 		baseUrl: PropTypes.string,
 		user: PropTypes.shape({
@@ -58,7 +56,7 @@ class AttachmentView extends React.Component {
 
 	constructor(props) {
 		super(props);
-		const attachment = props.navigation.getParam('attachment');
+		const attachment = props.route.params?.attachment;
 		this.state = { attachment, loading: true };
 	}
 
@@ -66,7 +64,7 @@ class AttachmentView extends React.Component {
 		const { navigation } = this.props;
 		navigation.setParams({ handleSave: this.handleSave });
 
-		this.willBlurListener = navigation.addListener('willBlur', () => {
+		this.unsubscribeBlur = navigation.addListener('blur', () => {
 			if (this.videoRef && this.videoRef.stopAsync) {
 				this.videoRef.stopAsync();
 			}
@@ -74,8 +72,8 @@ class AttachmentView extends React.Component {
 	}
 
 	componentWillUnmount() {
-		if (this.willBlurListener && this.willBlurListener.remove) {
-			this.willBlurListener.remove();
+		if (this.unsubscribeBlur) {
+			this.unsubscribeBlur();
 		}
 	}
 

app/views/CreateChannelView.js

@@ -73,13 +73,12 @@ const styles = StyleSheet.create({
 });
 
 class CreateChannelView extends React.Component {
-	static navigationOptions = ({ navigation, screenProps }) => {
-		const submit = navigation.getParam('submit', () => {});
-		const showSubmit = navigation.getParam('showSubmit');
+	static navigationOptions = ({ route }) => {
+		const submit = route.param?.submit ?? (() => {});
+		const showSubmit = route.param?.showSubmit ?? false;
 		return {
-			...themedHeader(screenProps.theme),
 			title: I18n.t('Create_Channel'),
-			headerRight: (
+			headerRight: () => (
 				showSubmit
 					? (
 						<CustomHeaderButtons>

app/views/CreateDiscussionView/index.js

@@ -12,7 +12,6 @@ import { CustomHeaderButtons, Item, CloseModalButton } from '../../containers/He
 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 TextInput from '../../containers/TextInput';
 import RocketChat from '../../lib/rocketchat';
@@ -27,11 +26,10 @@ import styles from './styles';
 import SafeAreaView from '../../containers/SafeAreaView';
 
 class CreateChannelView extends React.Component {
-	static navigationOptions = ({ navigation, screenProps }) => {
-		const submit = navigation.getParam('submit', () => {});
-		const showSubmit = navigation.getParam('showSubmit', navigation.getParam('message'));
+	static navigationOptions = ({ navigation, route }) => {
+		const submit = route.params?.submit ?? (() => {});
+		const showSubmit = route.params?.showSubmit ?? route.params?.message;
 		return {
-			...themedHeader(screenProps.theme),
 			title: I18n.t('Create_Discussion'),
 			headerRight: (
 				showSubmit

app/views/DirectoryView/index.js

@@ -14,7 +14,7 @@ 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';
@@ -25,14 +25,13 @@ import { getUserSelector } from '../../selectors/login';
 import SafeAreaView from '../../containers/SafeAreaView';
 
 class DirectoryView extends React.Component {
-	static navigationOptions = () => {
+	static navigationOptions = ({ navigation, split }) => {
 		const options = {
 			title: I18n.t('Directory')
 		};
-		// TODO: ?
-		// if (screenProps.split) {
-		// 	options.headerLeft = <CloseModalButton navigation={navigation} testID='directory-view-close' />;
-		// }
+		if (split) {
+			options.headerLeft = () => <CloseModalButton navigation={navigation} testID='directory-view-close' />;
+		}
 		return options;
 	}
 
@@ -229,7 +228,11 @@ class DirectoryView extends React.Component {
 		} = this.state;
 		const { isFederationEnabled, theme } = this.props;
 		return (
-			<SafeAreaView style={{ backgroundColor: themes[theme].backgroundColor }} testID='directory-view'>
+			<SafeAreaView
+				style={{ backgroundColor: themes[theme].backgroundColor }}
+				testID='directory-view'
+				theme={theme}
+			>
 				<StatusBar theme={theme} />
 				<FlatList
 					data={data}

app/views/ModalBlockView.js

@@ -57,22 +57,22 @@ const mapElementToState = ({ element, blockId, elements = [] }) => {
 const reduceState = (obj, el) => (Array.isArray(el[0]) ? { ...obj, ...Object.fromEntries(el) } : { ...obj, [el[0]]: el[1] });
 
 class ModalBlockView extends React.Component {
-	static navigationOptions = ({ navigation, screenProps }) => {
-		const { theme, closeModal } = screenProps;
-		const data = navigation.getParam('data');
-		const cancel = navigation.getParam('cancel', () => {});
-		const submitting = navigation.getParam('submitting', false);
+	static navigationOptions = ({ route }) => {
+		// const { theme, closeModal } = screenProps;
+		const data = route.params?.data;
+		// const cancel = route.params?.cancel ?? (() => {});
+		const submitting = route.params?.submitting ?? false;
 		const { view } = data;
 		const { title, submit, close } = view;
 		return {
 			title: textParser([title]),
-			...themedHeader(theme),
-			headerLeft: close ? (
+			headerLeft: close ? () => (
 				<CustomHeaderButtons>
 					<Item
 						title={textParser([close.text])}
 						style={styles.submit}
-						onPress={!submitting && (() => cancel({ closeModal }))}
+						// TODO: ?
+						// onPress={!submitting && (() => cancel({ closeModal }))}
 						testID='close-modal-uikit'
 					/>
 				</CustomHeaderButtons>
@@ -82,7 +82,7 @@ class ModalBlockView extends React.Component {
 					<Item
 						title={textParser([submit.text])}
 						style={styles.submit}
-						onPress={!submitting && (navigation.getParam('submit', () => {}))}
+						onPress={!submitting && (route.params?.submit ?? (() => {}))}
 						testID='submit-modal-uikit'
 					/>
 				</CustomHeaderButtons>
@@ -92,6 +92,7 @@ class ModalBlockView extends React.Component {
 
 	static propTypes = {
 		navigation: PropTypes.object,
+		route: PropTypes.object,
 		theme: PropTypes.string,
 		language: PropTypes.string,
 		user: PropTypes.shape({
@@ -103,8 +104,7 @@ class ModalBlockView extends React.Component {
 	constructor(props) {
 		super(props);
 		this.submitting = false;
-		const { navigation } = props;
-		const data = navigation.getParam('data');
+		const data = props.route.params?.data;
 		this.values = data.view.blocks.filter(filterInputFields).map(mapElementToState).reduce(reduceState, {});
 		this.state = {
 			data,
@@ -133,9 +133,9 @@ class ModalBlockView extends React.Component {
 	}
 
 	componentDidUpdate(prevProps) {
-		const { navigation } = this.props;
-		const oldData = prevProps.navigation.getParam('data', {});
-		const newData = navigation.getParam('data', {});
+		const { navigation, route } = this.props;
+		const oldData = prevProps.route.params?.data ?? {};
+		const newData = route.params?.data ?? {};
 		if (oldData.viewId !== newData.viewId) {
 			navigation.push('ModalBlockView', { data: newData });
 		}

app/views/NewMessageView.js

@@ -51,9 +51,8 @@ const styles = StyleSheet.create({
 });
 
 class NewMessageView extends React.Component {
-	static navigationOptions = ({ navigation, screenProps }) => ({
-		...themedHeader(screenProps.theme),
-		headerLeft: <CloseModalButton navigation={navigation} testID='new-message-view-close' />,
+	static navigationOptions = ({ navigation }) => ({
+		headerLeft: () => <CloseModalButton navigation={navigation} testID='new-message-view-close' />,
 		title: I18n.t('New_Message')
 	})
 

app/views/NewServerView.js

@@ -64,6 +64,7 @@ const styles = StyleSheet.create({
 });
 
 class NewServerView extends React.Component {
+	// TODO: ?
 	// static navigationOptions = ({ screenProps, navigation }) => {
 	// 	const previousServer = navigation.getParam('previousServer', null);
 	// 	const close = navigation.getParam('close', () => {});

app/views/PickerView.js

@@ -5,7 +5,6 @@ import {
 } from 'react-native';
 
 import I18n from '../i18n';
-import { themedHeader } from '../utils/navigation';
 import { withTheme } from '../theme';
 import { themes } from '../constants/colors';
 import debounce from '../utils/debounce';
@@ -57,29 +56,29 @@ Item.propTypes = {
 };
 
 class PickerView extends React.PureComponent {
-	static navigationOptions = ({ navigation, screenProps }) => ({
-		title: navigation.getParam('title', I18n.t('Select_an_option')),
-		...themedHeader(screenProps.theme)
+	static navigationOptions = ({ route }) => ({
+		title: route.params?.title ?? I18n.t('Select_an_option')
 	})
 
 	static propTypes = {
 		navigation: PropTypes.object,
+		route: PropTypes.object,
 		theme: PropTypes.string
 	}
 
 	constructor(props) {
 		super(props);
-		const data = props.navigation.getParam('data', []);
-		const value = props.navigation.getParam('value');
+		const data = props.route.params?.data ?? [];
+		const value = props.route.params?.value;
 		this.state = { data, value };
 
-		this.onSearch = props.navigation.getParam('onChangeText');
+		this.onSearch = props.route.params?.onChangeText;
 	}
 
 	onChangeValue = (value) => {
-		const { navigation } = this.props;
-		const goBack = navigation.getParam('goBack', true);
-		const onChange = navigation.getParam('onChangeValue', () => {});
+		const { navigation, route } = this.props;
+		const goBack = route.params?.goBack ?? true;
+		const onChange = route.params?.onChangeValue ?? (() => {});
 		onChange(value);
 		if (goBack) {
 			navigation.goBack();

app/views/ProfileView/index.js

@@ -6,7 +6,7 @@ import prompt from 'react-native-prompt-android';
 import SHA256 from 'js-sha256';
 import ImagePicker from 'react-native-image-crop-picker';
 import RNPickerSelect from 'react-native-picker-select';
-// import { HeaderBackButton } from 'react-navigation-stack';
+import { HeaderBackButton } from '@react-navigation/stack';
 import equal from 'deep-equal';
 
 import Touch from '../../utils/touch';
@@ -33,16 +33,15 @@ import { getUserSelector } from '../../selectors/login';
 import SafeAreaView from '../../containers/SafeAreaView';
 
 class ProfileView extends React.Component {
-	static navigationOptions = ({ navigation }) => ({
-		// headerLeft: screenProps.split ? (
-		// 	<HeaderBackButton
-		// 		onPress={() => navigation.navigate('SettingsView')}
-		// 		tintColor={themes[screenProps.theme].headerTintColor}
-		// 	/>
-		// ) : (
-		// 	<DrawerButton navigation={navigation} />
-		// ),
-		headerLeft: () => <DrawerButton navigation={navigation} />,
+	static navigationOptions = ({ navigation, split }) => ({
+		headerLeft: () => (split ? (
+			<HeaderBackButton
+				onPress={() => navigation.navigate('SettingsView')}
+				tintColor={themes.light.headerTintColor}
+			/>
+		) : (
+			<DrawerButton navigation={navigation} />
+		)),
 		title: I18n.t('Profile')
 	})
 

app/views/RoomActionsView/index.js

@@ -30,14 +30,13 @@ import { showConfirmationAlert, showErrorAlert } from '../../utils/info';
 import SafeAreaView from '../../containers/SafeAreaView';
 
 class RoomActionsView extends React.Component {
-	static navigationOptions = () => {
+	static navigationOptions = ({ navigation, split }) => {
 		const options = {
 			title: I18n.t('Actions')
 		};
-		// TODO: ?
-		// if (screenProps.split) {
-		// 	options.headerLeft = <CloseModalButton navigation={navigation} testID='room-actions-view-close' />;
-		// }
+		if (split) {
+			options.headerLeft = () => <CloseModalButton navigation={navigation} testID='room-actions-view-close' />;
+		}
 		return options;
 	}
 

app/views/RoomView/index.js

@@ -53,6 +53,7 @@ import { CONTAINER_TYPES } from '../../lib/methods/actions';
 import Banner from './Banner';
 import Navigation from '../../lib/Navigation';
 import SafeAreaView from '../../containers/SafeAreaView';
+import { withSplit } from '../../split';
 
 const stateAttrsUpdate = [
 	'joined',
@@ -71,7 +72,9 @@ 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 }) => {
+	static navigationOptions = ({
+		navigation, route, split, theme
+	}) => {
 		const rid = route.params?.rid ?? null;
 		const prid = route.params?.prid;
 		const title = route.params?.name;
@@ -123,10 +126,10 @@ class RoomView extends React.Component {
 					userId={userId}
 					token={token}
 					title={avatar}
-					theme='light' // TODO: ?
+					theme={theme}
 					t={t}
 					goRoomActionsView={goRoomActionsView}
-					split={false} // TODO: ?
+					split={split}
 				/>
 			)
 		};
@@ -149,7 +152,7 @@ class RoomView extends React.Component {
 		Hide_System_Messages: PropTypes.array,
 		baseUrl: PropTypes.string,
 		customEmojis: PropTypes.object,
-		screenProps: PropTypes.object,
+		split: PropTypes.bool,
 		theme: PropTypes.string,
 		replyBroadcast: PropTypes.func
 	};
@@ -755,15 +758,15 @@ class RoomView extends React.Component {
 
 	navToRoomInfo = (navParam) => {
 		const { room } = this.state;
-		const { navigation, user, screenProps } = this.props;
+		const { navigation, user, split } = this.props;
 		if (navParam.rid === user.id) {
 			return;
 		}
-		if (screenProps && screenProps.split) {
+		if (split) {
 			navigation.navigate('RoomActionsView', { rid: this.rid, t: this.t, room });
 			ModalNavigation.navigate('RoomInfoView', navParam);
 		} else {
-			navigation.push('RoomInfoView', navParam);
+			navigation.navigate('RoomInfoView', navParam);
 		}
 	}
 
@@ -1078,4 +1081,4 @@ const mapDispatchToProps = dispatch => ({
 	replyBroadcast: message => dispatch(replyBroadcastAction(message))
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(withTheme(RoomView));
+export default connect(mapStateToProps, mapDispatchToProps)(withSplit(withTheme(RoomView)));

app/views/ScreenLockConfigView.js

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

app/views/SelectServerView.js

@@ -13,7 +13,6 @@ import ServerItem, { ROW_HEIGHT } from '../presentation/ServerItem';
 import sharedStyles from './Styles';
 import RocketChat from '../lib/rocketchat';
 import { withTheme } from '../theme';
-import { themedHeader } from '../utils/navigation';
 import SafeAreaView from '../containers/SafeAreaView';
 
 const getItemLayout = (data, index) => ({ length: ROW_HEIGHT, offset: ROW_HEIGHT * index, index });
@@ -31,10 +30,9 @@ const styles = StyleSheet.create({
 });
 
 class SelectServerView extends React.Component {
-	static navigationOptions = ({ screenProps }) => ({
-		...themedHeader(screenProps.theme),
+	static navigationOptions = {
 		title: I18n.t('Select_Server')
-	})
+	}
 
 	static propTypes = {
 		server: PropTypes.string,

app/views/SelectedUsersView.js

@@ -43,7 +43,7 @@ class SelectedUsersView extends React.Component {
 		const nextAction = route.params?.nextAction ?? (() => {});
 		return {
 			title,
-			headerRight: (
+			headerRight: () => (
 				(!maxUsers || showButton) && (
 					<CustomHeaderButtons>
 						<Item title={buttonText} onPress={nextAction} testID='selected-users-view-submit' />

app/views/SetUsernameView.js

@@ -15,7 +15,6 @@ import scrollPersistTaps from '../utils/scrollPersistTaps';
 import I18n from '../i18n';
 import RocketChat from '../lib/rocketchat';
 import StatusBar from '../containers/StatusBar';
-import { themedHeader } from '../utils/navigation';
 import { withTheme } from '../theme';
 import { themes } from '../constants/colors';
 import { isTablet } from '../utils/deviceInfo';
@@ -31,13 +30,9 @@ const styles = StyleSheet.create({
 });
 
 class SetUsernameView extends React.Component {
-	static navigationOptions = ({ navigation, screenProps }) => {
-		const title = navigation.getParam('title');
-		return {
-			...themedHeader(screenProps.theme),
-			title
-		};
-	}
+	static navigationOptions = ({ route }) => ({
+		title: route.params?.title
+	})
 
 	static propTypes = {
 		navigation: PropTypes.object,

app/views/ShareListView/index.js

@@ -28,7 +28,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 SafeAreaView from '../../containers/SafeAreaView';
 
 const LIMIT = 50;
@@ -36,30 +35,29 @@ const getItemLayout = (data, index) => ({ length: ROW_HEIGHT, offset: ROW_HEIGHT
 const keyExtractor = item => item.rid;
 
 class ShareListView extends React.Component {
-	static navigationOptions = ({ navigation, screenProps }) => {
-		const searching = navigation.getParam('searching');
-		const initSearch = navigation.getParam('initSearch', () => {});
-		const cancelSearch = navigation.getParam('cancelSearch', () => {});
-		const search = navigation.getParam('search', () => {});
+	static navigationOptions = ({ route, theme }) => {
+		const searching = route.params?.searching;
+		const initSearch = route.params?.initSearch ?? (() => {});
+		const cancelSearch = route.params?.cancelSearch ?? (() => {});
+		const search = route.params?.search ?? (() => {});
 
 		if (isIOS) {
 			return {
-				headerStyle: { backgroundColor: themes[screenProps.theme].headerBackground },
-				headerTitle: (
+				headerStyle: { backgroundColor: themes[theme].headerBackground },
+				headerTitle: () => (
 					<ShareListHeader
 						searching={searching}
 						initSearch={initSearch}
 						cancelSearch={cancelSearch}
 						search={search}
-						theme={screenProps.theme}
+						theme={theme}
 					/>
 				)
 			};
 		}
 
 		return {
-			...themedHeader(screenProps.theme),
-			headerLeft: searching
+			headerLeft: () => (searching
 				? (
 					<CustomHeaderButtons left>
 						<Item title='cancel' iconName='cross' onPress={cancelSearch} />
@@ -70,9 +68,9 @@ class ShareListView extends React.Component {
 						onPress={ShareExtension.close}
 						testID='share-extension-close'
 					/>
-				),
-			headerTitle: <ShareListHeader searching={searching} search={search} theme={screenProps.theme} />,
-			headerRight: (
+				)),
+			headerTitle: () => <ShareListHeader searching={searching} search={search} theme={theme} />,
+			headerRight: () => (
 				searching
 					? null
 					: (

app/views/ShareView/index.js

@@ -16,28 +16,26 @@ import { CustomHeaderButtons, Item } from '../../containers/HeaderButton';
 import { isBlocked } from '../../utils/room';
 import { isReadOnly } from '../../utils/isReadOnly';
 import { withTheme } from '../../theme';
-import { themedHeader } from '../../utils/navigation';
 
 class ShareView extends React.Component {
-	static navigationOptions = ({ navigation, screenProps }) => {
-		const canSend = navigation.getParam('canSend', true);
+	static navigationOptions = ({ route }) => {
+		const canSend = route.params?.canSend ?? true;
 
 		return ({
 			title: I18n.t('Share'),
-			...themedHeader(screenProps.theme),
 			headerRight:
-				canSend
+				() => (canSend
 					? (
 						<CustomHeaderButtons>
 							<Item
 								title={I18n.t('Send')}
-								onPress={navigation.getParam('sendMessage')}
+								onPress={route.params?.sendMessage}
 								testID='send-message-share-view'
 								buttonStyle={styles.send}
 							/>
 						</CustomHeaderButtons>
 					)
-					: null
+					: null)
 		});
 	}
 

app/views/StatusView.js

@@ -17,7 +17,6 @@ import { LISTENER } from '../containers/Toast';
 import { themes } from '../constants/colors';
 import { withTheme } from '../theme';
 import { withSplit } from '../split';
-import { themedHeader } from '../utils/navigation';
 import { getUserSelector } from '../selectors/login';
 import { CustomHeaderButtons, Item, CancelModalButton } from '../containers/HeaderButton';
 import store from '../lib/createStore';
@@ -57,19 +56,18 @@ const styles = StyleSheet.create({
 });
 
 class StatusView extends React.Component {
-	static navigationOptions = ({ navigation, screenProps }) => ({
+	static navigationOptions = ({ route }) => ({
 		title: I18n.t('Edit_Status'),
-		headerLeft: <CancelModalButton onPress={navigation.getParam('close', () => {})} />,
-		headerRight: (
+		headerLeft: () => <CancelModalButton onPress={route.params?.close ?? (() => {})} />,
+		headerRight: () => (
 			<CustomHeaderButtons>
 				<Item
 					title={I18n.t('Done')}
-					onPress={navigation.getParam('submit', () => {})}
+					onPress={route.params?.submit ?? (() => {})}
 					testID='status-view-submit'
 				/>
 			</CustomHeaderButtons>
-		),
-		...themedHeader(screenProps.theme)
+		)
 	})
 
 	static propTypes = {

app/views/ThreadMessagesView/index.js

@@ -25,6 +25,7 @@ import { withTheme } from '../../theme';
 import ModalNavigation from '../../lib/ModalNavigation';
 import { getUserSelector } from '../../selectors/login';
 import SafeAreaView from '../../containers/SafeAreaView';
+import { withSplit } from '../../split';
 
 const Separator = React.memo(({ theme }) => <View style={[styles.separator, { backgroundColor: themes[theme].separatorColor }]} />);
 Separator.propTypes = {
@@ -46,7 +47,7 @@ class ThreadMessagesView extends React.Component {
 		useRealName: PropTypes.bool,
 		theme: PropTypes.string,
 		customEmojis: PropTypes.object,
-		screenProps: PropTypes.object
+		split: PropTypes.bool
 	}
 
 	constructor(props) {
@@ -283,11 +284,11 @@ class ThreadMessagesView extends React.Component {
 	}
 
 	navToRoomInfo = (navParam) => {
-		const { navigation, user, screenProps } = this.props;
+		const { navigation, user, split } = this.props;
 		if (navParam.rid === user.id) {
 			return;
 		}
-		if (screenProps && screenProps.split) {
+		if (split) {
 			navigation.navigate('RoomActionsView', { rid: this.rid, t: this.t });
 			ModalNavigation.navigate('RoomInfoView', navParam);
 		} else {
@@ -358,4 +359,4 @@ const mapStateToProps = state => ({
 	customEmojis: state.customEmojis
 });
 
-export default connect(mapStateToProps)(withTheme(ThreadMessagesView));
+export default connect(mapStateToProps)(withSplit(withTheme(ThreadMessagesView)));

app/views/WithoutServersView.js

@@ -9,7 +9,6 @@ import { CancelModalButton } from '../containers/HeaderButton';
 import sharedStyles from './Styles';
 import I18n from '../i18n';
 import { themes } from '../constants/colors';
-import { themedHeader } from '../utils/navigation';
 import { withTheme } from '../theme';
 
 const styles = StyleSheet.create({
@@ -31,15 +30,14 @@ const styles = StyleSheet.create({
 });
 
 class WithoutServerView extends React.Component {
-	static navigationOptions = ({ screenProps }) => ({
-		...themedHeader(screenProps.theme),
-		headerLeft: (
+	static navigationOptions = {
+		headerLeft: () => (
 			<CancelModalButton
 				onPress={ShareExtension.close}
 				testID='share-extension-close'
 			/>
 		)
-	})
+	}
 
 	static propTypes = {
 		theme: PropTypes.string