[CHORE] Update react-navigation to v5

app/AppContainer.js

@@ -0,0 +1,117 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { NavigationContainer } from '@react-navigation/native';
+import { createStackNavigator } from '@react-navigation/stack';
+import { connect } from 'react-redux';
+import { SafeAreaProvider, initialWindowMetrics } from 'react-native-safe-area-context';
+
+import Navigation from './lib/Navigation';
+import { defaultHeader, getActiveRouteName, navigationTheme } from './utils/navigation';
+import {
+	ROOT_LOADING, ROOT_OUTSIDE, ROOT_NEW_SERVER, ROOT_INSIDE, ROOT_SET_USERNAME, ROOT_BACKGROUND
+} from './actions/app';
+
+// Stacks
+import AuthLoadingView from './views/AuthLoadingView';
+
+// SetUsername Stack
+import SetUsernameView from './views/SetUsernameView';
+
+import OutsideStack from './stacks/OutsideStack';
+import InsideStack from './stacks/InsideStack';
+import MasterDetailStack from './stacks/MasterDetailStack';
+import { ThemeContext } from './theme';
+import { setCurrentScreen } from './utils/log';
+
+// SetUsernameStack
+const SetUsername = createStackNavigator();
+const SetUsernameStack = () => (
+	<SetUsername.Navigator screenOptions={defaultHeader}>
+		<SetUsername.Screen
+			name='SetUsernameView'
+			component={SetUsernameView}
+		/>
+	</SetUsername.Navigator>
+);
+
+// App
+const Stack = createStackNavigator();
+const App = React.memo(({ root, isMasterDetail }) => {
+	if (!root) {
+		return null;
+	}
+
+	const { theme } = React.useContext(ThemeContext);
+	const navTheme = navigationTheme(theme);
+
+	React.useEffect(() => {
+		const state = Navigation.navigationRef.current.getRootState();
+		const currentRouteName = getActiveRouteName(state);
+		Navigation.routeNameRef.current = currentRouteName;
+		setCurrentScreen(currentRouteName);
+	}, []);
+
+	return (
+		<SafeAreaProvider initialMetrics={initialWindowMetrics}>
+			<NavigationContainer
+				theme={navTheme}
+				ref={Navigation.navigationRef}
+				onStateChange={(state) => {
+					const previousRouteName = Navigation.routeNameRef.current;
+					const currentRouteName = getActiveRouteName(state);
+					if (previousRouteName !== currentRouteName) {
+						setCurrentScreen(currentRouteName);
+					}
+					Navigation.routeNameRef.current = currentRouteName;
+				}}
+			>
+				<Stack.Navigator screenOptions={{ headerShown: false, animationEnabled: false }}>
+					<>
+						{root === ROOT_LOADING || root === ROOT_BACKGROUND ? (
+							<Stack.Screen
+								name='AuthLoading'
+								component={AuthLoadingView}
+							/>
+						) : null}
+						{root === ROOT_OUTSIDE || root === ROOT_NEW_SERVER ? (
+							<Stack.Screen
+								name='OutsideStack'
+								component={OutsideStack}
+							/>
+						) : null}
+						{root === ROOT_INSIDE && isMasterDetail ? (
+							<Stack.Screen
+								name='MasterDetailStack'
+								component={MasterDetailStack}
+							/>
+						) : null}
+						{root === ROOT_INSIDE && !isMasterDetail ? (
+							<Stack.Screen
+								name='InsideStack'
+								component={InsideStack}
+							/>
+						) : null}
+						{root === ROOT_SET_USERNAME ? (
+							<Stack.Screen
+								name='SetUsernameStack'
+								component={SetUsernameStack}
+							/>
+						) : null}
+					</>
+				</Stack.Navigator>
+			</NavigationContainer>
+		</SafeAreaProvider>
+	);
+});
+const mapStateToProps = state => ({
+	root: state.app.root,
+	isMasterDetail: state.app.isMasterDetail
+});
+
+App.propTypes = {
+	root: PropTypes.string,
+	isMasterDetail: PropTypes.bool
+};
+
+const AppContainer = connect(mapStateToProps)(App);
+export default AppContainer;

app/actions/actionsTypes.js

@@ -33,7 +33,7 @@ export const ROOMS = createRequestTypes('ROOMS', [
 	'CLOSE_SEARCH_HEADER'
 ]);
 export const ROOM = createRequestTypes('ROOM', ['SUBSCRIBE', 'UNSUBSCRIBE', 'LEAVE', 'DELETE', 'REMOVED', 'CLOSE', 'FORWARD', 'USER_TYPING']);
-export const APP = createRequestTypes('APP', ['START', 'READY', 'INIT', 'INIT_LOCAL_SETTINGS']);
+export const APP = createRequestTypes('APP', ['START', 'READY', 'INIT', 'INIT_LOCAL_SETTINGS', 'SET_MASTER_DETAIL']);
 export const MESSAGES = createRequestTypes('MESSAGES', ['REPLY_BROADCAST']);
 export const CREATE_CHANNEL = createRequestTypes('CREATE_CHANNEL', [...defaultTypes]);
 export const CREATE_DISCUSSION = createRequestTypes('CREATE_DISCUSSION', [...defaultTypes]);

app/actions/app.js

@@ -0,0 +1,41 @@
+import { APP } from './actionsTypes';
+
+export const ROOT_OUTSIDE = 'outside';
+export const ROOT_INSIDE = 'inside';
+export const ROOT_LOADING = 'loading';
+export const ROOT_NEW_SERVER = 'newServer';
+export const ROOT_SET_USERNAME = 'setUsername';
+export const ROOT_BACKGROUND = 'background';
+
+export function appStart({ root, ...args }) {
+	return {
+		type: APP.START,
+		root,
+		...args
+	};
+}
+
+export function appReady() {
+	return {
+		type: APP.READY
+	};
+}
+
+export function appInit() {
+	return {
+		type: APP.INIT
+	};
+}
+
+export function appInitLocalSettings() {
+	return {
+		type: APP.INIT_LOCAL_SETTINGS
+	};
+}
+
+export function setMasterDetail(isMasterDetail) {
+	return {
+		type: APP.SET_MASTER_DETAIL,
+		isMasterDetail
+	};
+}

app/actions/server.js

@@ -44,9 +44,10 @@ export function serverFailure(err) {
 	};
 }
 
-export function serverInitAdd() {
+export function serverInitAdd(previousServer) {
 	return {
-		type: SERVER.INIT_ADD
+		type: SERVER.INIT_ADD,
+		previousServer
 	};
 }
 

app/commands.js

@@ -1,5 +1,5 @@
 /* eslint-disable no-bitwise */
-import { constants } from 'react-native-keycommands';
+import KeyCommands, { constants } from 'react-native-keycommands';
 
 import I18n from './i18n';
 
@@ -17,7 +17,7 @@ const KEY_ADD_SERVER = __DEV__ ? 'l' : 'n';
 const KEY_SEND_MESSAGE = '\r';
 const KEY_SELECT = '123456789';
 
-export const defaultCommands = [
+const keyCommands = [
 	{
 		// Focus messageBox
 		input: KEY_TYPING,
@@ -29,10 +29,7 @@ export const defaultCommands = [
 		input: KEY_SEND_MESSAGE,
 		modifierFlags: 0,
 		discoverabilityTitle: I18n.t('Send')
-	}
-];
-
-export const keyCommands = [
+	},
 	{
 		// Open Preferences Modal
 		input: KEY_PREFERENCES,
@@ -139,6 +136,10 @@ export const keyCommands = [
 	})))
 ];
 
+export const setKeyCommands = () => KeyCommands.setKeyCommands(keyCommands);
+
+export const deleteKeyCommands = () => KeyCommands.deleteKeyCommands(keyCommands);
+
 export const KEY_COMMAND = 'KEY_COMMAND';
 
 export const commandHandle = (event, key, flags = []) => {

app/constants/tablet.js

@@ -1,4 +1,3 @@
 export const MAX_SIDEBAR_WIDTH = 321;
-export const MAX_CONTENT_WIDTH = '90%';
 export const MAX_SCREEN_CONTENT_WIDTH = '50%';
-export const MIN_WIDTH_SPLIT_LAYOUT = 700;
+export const MIN_WIDTH_MASTER_DETAIL_LAYOUT = 700;

app/containers/FormContainer.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { ScrollView, StyleSheet, View } from 'react-native';
 import PropTypes from 'prop-types';
-import { SafeAreaView } from 'react-navigation';
 
 import { themes } from '../constants/colors';
 import sharedStyles from '../views/Styles';
@@ -10,6 +9,7 @@ import KeyboardView from '../presentation/KeyboardView';
 import StatusBar from './StatusBar';
 import AppVersion from './AppVersion';
 import { isTablet } from '../utils/deviceInfo';
+import SafeAreaView from './SafeAreaView';
 
 const styles = StyleSheet.create({
 	scrollView: {
@@ -31,7 +31,7 @@ const FormContainer = ({ children, theme, testID }) => (
 	>
 		<StatusBar theme={theme} />
 		<ScrollView {...scrollPersistTaps} style={sharedStyles.container} contentContainerStyle={[sharedStyles.containerScrollView, styles.scrollView]}>
-			<SafeAreaView style={sharedStyles.container} forceInset={{ top: 'never' }} testID={testID}>
+			<SafeAreaView testID={testID} theme={theme} style={{ backgroundColor: themes[theme].backgroundColor }}>
 				{children}
 				<AppVersion theme={theme} />
 			</SafeAreaView>

app/containers/Header/index.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { View, StyleSheet } from 'react-native';
+import { themes } from '../../constants/colors';
+import { themedHeader } from '../../utils/navigation';
+import { isIOS } from '../../utils/deviceInfo';
+
+// Get from https://github.com/react-navigation/react-navigation/blob/master/packages/stack/src/views/Header/HeaderSegment.tsx#L69
+export const headerHeight = isIOS ? 44 : 56;
+
+const styles = StyleSheet.create({
+	container: {
+		height: headerHeight,
+		flexDirection: 'row',
+		justifyContent: 'center',
+		elevation: 4
+	}
+});
+
+const Header = ({
+	theme, headerLeft, headerTitle, headerRight
+}) => (
+	<SafeAreaView style={{ backgroundColor: themes[theme].headerBackground }} edges={['top', 'left', 'right']}>
+		<View style={[styles.container, { ...themedHeader(theme).headerStyle }]}>
+			{headerLeft ? headerLeft() : null}
+			{headerTitle ? headerTitle() : null}
+			{headerRight ? headerRight() : null}
+		</View>
+	</SafeAreaView>
+);
+
+Header.propTypes = {
+	theme: PropTypes.string,
+	headerLeft: PropTypes.element,
+	headerTitle: PropTypes.element,
+	headerRight: PropTypes.element
+};
+
+export default Header;

app/containers/LoginServices.js

@@ -5,7 +5,6 @@ import {
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { Base64 } from 'js-base64';
-import { withNavigation } from 'react-navigation';
 
 import { withTheme } from '../theme';
 import sharedStyles from '../views/Styles';
@@ -361,4 +360,4 @@ const mapDispatchToProps = dispatch => ({
 	loginRequest: params => dispatch(loginRequestAction(params))
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(withTheme(withNavigation(LoginServices)));
+export default connect(mapStateToProps, mapDispatchToProps)(withTheme(LoginServices));