Outside working

app/stacks/OutsideStack.js

@@ -24,37 +24,37 @@ const OutsideStack = () => {
 			<Outside.Screen
 				name='OnboardingView'
 				component={OnboardingView}
-				// options={{ headerShown: false }}
+				options={OnboardingView.navigationOptions}
 			/>
 			<Outside.Screen
 				name='NewServerView'
 				component={NewServerView}
-				// options={{ headerShown: false }}
+				options={NewServerView.navigationOptions}
 			/>
 			<Outside.Screen
 				name='WorkspaceView'
 				component={WorkspaceView}
-				// options={WorkspaceView.navigationOptions}
+				options={WorkspaceView.navigationOptions}
 			/>
 			<Outside.Screen
 				name='LoginView'
 				component={LoginView}
-				// options={LoginView.navigationOptions}
+				options={LoginView.navigationOptions}
 			/>
 			<Outside.Screen
 				name='ForgotPasswordView'
 				component={ForgotPasswordView}
-				// options={ForgotPasswordView.navigationOptions}
+				options={ForgotPasswordView.navigationOptions}
 			/>
 			<Outside.Screen
 				name='RegisterView'
 				component={RegisterView}
-				// options={RegisterView.navigationOptions}
+				options={RegisterView.navigationOptions}
 			/>
 			<Outside.Screen
 				name='LegalView'
 				component={LegalView}
-				// options={LegalView.navigationOptions}
+				options={LegalView.navigationOptions}
 			/>
 		</Outside.Navigator>
 	);

app/utils/navigation.js

@@ -4,7 +4,7 @@ import { analytics, leaveBreadcrumb } from './log';
 import { themes } from '../constants/colors';
 
 export const defaultHeader = {
-	headerBackTitle: null
+	headerBackTitleVisible: false
 };
 
 export const cardStyle = {

app/views/AuthenticationWebView.js

@@ -6,29 +6,20 @@ import parse from 'url-parse';
 
 import RocketChat from '../lib/rocketchat';
 import { isIOS } from '../utils/deviceInfo';
-import { CloseModalButton } from '../containers/HeaderButton';
 import StatusBar from '../containers/StatusBar';
 import ActivityIndicator from '../containers/ActivityIndicator';
 import { withTheme } from '../theme';
-import { themedHeader } from '../utils/navigation';
 import debounce from '../utils/debounce';
+import { LegalButton, CloseModalButton } from '../containers/HeaderButton';
 
 const userAgent = isIOS
 	? 'Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1'
 	: 'Mozilla/5.0 (Linux; Android 6.0.1; SM-G920V Build/MMB29K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.98 Mobile Safari/537.36';
 
 class AuthenticationWebView extends React.PureComponent {
-	static navigationOptions = ({ navigation, screenProps }) => {
-		const authType = navigation.getParam('authType', 'oauth');
-		return {
-			...themedHeader(screenProps.theme),
-			headerLeft: <CloseModalButton navigation={navigation} />,
-			title: authType === 'saml' || authType === 'cas' ? 'SSO' : 'OAuth'
-		};
-	}
-
 	static propTypes = {
 		navigation: PropTypes.object,
+		route: PropTypes.object,
 		server: PropTypes.string,
 		theme: PropTypes.string
 	}
@@ -39,7 +30,6 @@ class AuthenticationWebView extends React.PureComponent {
 			logging: false,
 			loading: false
 		};
-		this.authType = props.navigation.getParam('authType', 'oauth');
 		this.redirectRegex = new RegExp(`(?=.*(${ props.server }))(?=.*(credentialToken))(?=.*(credentialSecret))`, 'g');
 	}
 
@@ -76,14 +66,15 @@ class AuthenticationWebView extends React.PureComponent {
 
 	onNavigationStateChange = (webViewState) => {
 		const url = decodeURIComponent(webViewState.url);
-		if (this.authType === 'saml' || this.authType === 'cas') {
+		const { route } = this.props;
-			const { navigation } = this.props;
+		const { authType } = route.params;
-			const ssoToken = navigation.getParam('ssoToken');
+		if (authType === 'saml' || authType === 'cas') {
+			const { ssoToken } = route.params;
 			const parsedUrl = parse(url, true);
 			// ticket -> cas / validate & saml_idp_credentialToken -> saml
 			if (parsedUrl.pathname?.includes('validate') || parsedUrl.query?.ticket || parsedUrl.query?.saml_idp_credentialToken) {
 				let payload;
-				if (this.authType === 'saml') {
+				if (authType === 'saml') {
 					const token = parsedUrl.query?.saml_idp_credentialToken || ssoToken;
 					const credentialToken = { credentialToken: token };
 					payload = { ...credentialToken, saml: true };
@@ -94,7 +85,7 @@ class AuthenticationWebView extends React.PureComponent {
 			}
 		}
 
-		if (this.authType === 'oauth') {
+		if (authType === 'oauth') {
 			if (this.redirectRegex.test(url)) {
 				const parts = url.split('#');
 				const credentials = JSON.parse(parts[1]);
@@ -105,13 +96,13 @@ class AuthenticationWebView extends React.PureComponent {
 
 	render() {
 		const { loading } = this.state;
-		const { navigation, theme } = this.props;
+		const { route, theme } = this.props;
-		const uri = navigation.getParam('url');
+		const { url } = route.params;
 		return (
 			<>
 				<StatusBar theme={theme} />
 				<WebView
-					source={{ uri }}
+					source={{ uri: url }}
 					userAgent={userAgent}
 					onNavigationStateChange={this.onNavigationStateChange}
 					onLoadStart={() => {
@@ -131,4 +122,12 @@ const mapStateToProps = state => ({
 	server: state.server.server
 });
 
+AuthenticationWebView.navigationOptions = ({ route, navigation }) => {
+	const { authType } = route.params;
+	return {
+		headerLeft: () => <CloseModalButton navigation={navigation} />,
+		title: authType === 'saml' || authType === 'cas' ? 'SSO' : 'OAuth'
+	};
+};
+
 export default connect(mapStateToProps)(withTheme(AuthenticationWebView));

app/views/ForgotPasswordView.js

@@ -13,16 +13,9 @@ 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 navigationOptions = ({ navigation, screenProps }) => {
-		const title = navigation.getParam('title', 'Rocket.Chat');
-		return {
-			title,
-			...themedHeader(screenProps.theme)
-		};
-	}
-
 	static propTypes = {
 		navigation: PropTypes.object,
 		theme: PropTypes.string
@@ -114,4 +107,8 @@ class ForgotPasswordView extends React.Component {
 	}
 }
 
+ForgotPasswordView.navigatonOptions = ({ route }) => ({
+	title: route.params.title
+});
+
 export default withTheme(ForgotPasswordView);

app/views/LegalView.js

@@ -52,11 +52,6 @@ Separator.propTypes = {
 };
 
 class LegalView extends React.Component {
-	static navigationOptions = ({ screenProps }) => ({
-		title: I18n.t('Legal'),
-		...themedHeader(screenProps.theme)
-	})
-
 	static propTypes = {
 		server: PropTypes.string,
 		theme: PropTypes.string
@@ -120,4 +115,8 @@ const mapStateToProps = state => ({
 	server: state.server.server
 });
 
+LegalView.navigationOptions = {
+	title: I18n.t('Legal')
+};
+
 export default connect(mapStateToProps)(withTheme(LegalView));

app/views/LoginView.js

@@ -51,15 +51,6 @@ const styles = StyleSheet.create({
 });
 
 class LoginView extends React.Component {
-	static navigationOptions = ({ navigation, screenProps }) => {
-		const title = navigation.getParam('title', 'Rocket.Chat');
-		return {
-			...themedHeader(screenProps.theme),
-			title,
-			headerRight: <LegalButton testID='login-view-more' navigation={navigation} />
-		};
-	}
-
 	static propTypes = {
 		navigation: PropTypes.object,
 		Site_Name: PropTypes.string,
@@ -229,4 +220,9 @@ 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/NewServerView.js

@@ -28,7 +28,6 @@ import log from '../utils/log';
 import { animateNextTransition } from '../utils/layoutAnimation';
 import { withTheme } from '../theme';
 import { setBasicAuth, BASIC_AUTH_KEY } from '../utils/fetch';
-import { themedHeader } from '../utils/navigation';
 import { CloseModalButton } from '../containers/HeaderButton';
 
 const styles = StyleSheet.create({
@@ -65,16 +64,6 @@ 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 propTypes = {
 		navigation: PropTypes.object,
 		theme: PropTypes.string,
@@ -88,8 +77,9 @@ class NewServerView extends React.Component {
 
 	constructor(props) {
 		super(props);
-		this.previousServer = props.navigation.getParam('previousServer');
+		// TODO: add server logic
-		props.navigation.setParams({ close: this.close, previousServer: this.previousServer });
+		// this.previousServer = props.route.params?.previousServer;
+		// props.navigation.setParams({ close: this.close, previousServer: this.previousServer });
 
 		// Cancel
 		this.options = [I18n.t('Cancel')];
@@ -355,4 +345,18 @@ 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/OnboardingView/index.js

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

app/views/RegisterView.js

@@ -342,4 +342,9 @@ 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/WorkspaceView/index.js

@@ -9,16 +9,10 @@ import styles from './styles';
 import { themes } from '../../constants/colors';
 import { withTheme } from '../../theme';
 import FormContainer, { FormContainerInner } from '../../containers/FormContainer';
-import { themedHeader } from '../../utils/navigation';
 import ServerAvatar from './ServerAvatar';
 import { getShowLoginButton } from '../../selectors/login';
 
 class WorkspaceView extends React.Component {
-	static navigationOptions = ({ screenProps }) => ({
-		title: I18n.t('Your_workspace'),
-		...themedHeader(screenProps.theme)
-	})
-
 	static propTypes = {
 		navigation: PropTypes.object,
 		theme: PropTypes.string,
@@ -94,4 +88,8 @@ const mapStateToProps = state => ({
 	showLoginButton: getShowLoginButton(state)
 });
 
+WorkspaceView.navigationOptions = {
+	title: I18n.t('Your_workspace')
+};
+
 export default connect(mapStateToProps)(withTheme(WorkspaceView));