Refactor

app/containers/FormContainer.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Text, ScrollView, Keyboard, Image, StyleSheet, TouchableOpacity, View, Alert } from 'react-native';
+import { ScrollView, StyleSheet, View } from 'react-native';
 import PropTypes from 'prop-types';
 import { SafeAreaView } from 'react-navigation';
 
@@ -9,36 +9,11 @@ import scrollPersistTaps from '../utils/scrollPersistTaps';
 import KeyboardView from '../presentation/KeyboardView';
 import StatusBar from './StatusBar';
 import AppVersion from './AppVersion';
+import { isTablet } from '../utils/deviceInfo';
 
 const styles = StyleSheet.create({
-	title: {
-		...sharedStyles.textBold,
-		fontSize: 22,
-		letterSpacing: 0,
-		textAlign: 'auto'
-	},
-	inputContainer: {
-		marginTop: 24,
-		marginBottom: 32
-	},
-	backButton: {
-		position: 'absolute',
-		paddingHorizontal: 9,
-		left: 15
-	},
-	certificatePicker: {
-		flex: 1,
-		marginTop: 40,
-		alignItems: 'center',
-		justifyContent: 'center'
-	},
-	chooseCertificateTitle: {
-		fontSize: 15,
-		...sharedStyles.textRegular
-	},
-	chooseCertificate: {
-		fontSize: 15,
-		...sharedStyles.textSemibold
+	scrollView: {
+		height: '100%'
 	}
 });
 
@@ -47,12 +22,13 @@ const FormContainer = ({ children, theme }) => (
 		style={{ backgroundColor: themes[theme].backgroundColor }}
 		contentContainerStyle={sharedStyles.container}
 		keyboardVerticalOffset={128}
-		// key='login-view'
 	>
 		<StatusBar theme={theme} />
-		<ScrollView {...scrollPersistTaps} style={sharedStyles.container} contentContainerStyle={[sharedStyles.containerScrollView, { height: '100%' }]}>
-			<SafeAreaView style={sharedStyles.container} testID='new-server-view'>
-				{children}
+		<ScrollView {...scrollPersistTaps} style={sharedStyles.container} contentContainerStyle={[sharedStyles.containerScrollView, styles.scrollView]}>
+			<SafeAreaView style={sharedStyles.container}>
+				<View style={[sharedStyles.container, isTablet && sharedStyles.tabletScreenContent]}>
+					{children}
+				</View>
 			</SafeAreaView>
 			<AppVersion theme={theme} />
 		</ScrollView>
@@ -60,7 +36,8 @@ const FormContainer = ({ children, theme }) => (
 );
 
 FormContainer.propTypes = {
-	theme: PropTypes.string
+	theme: PropTypes.string,
+	children: PropTypes.element
 };
 
 export default FormContainer;

app/views/NewServerView.js

@@ -40,7 +40,7 @@ const styles = StyleSheet.create({
 		marginBottom: 32
 	},
 	certificatePicker: {
-		flex: 1,
+		// flex: 1,
 		marginBottom: 32,
 		alignItems: 'center',
 		justifyContent: 'flex-end'
@@ -264,7 +264,7 @@ class NewServerView extends React.Component {
 		const { text } = this.state;
 		return (
 			<FormContainer theme={theme}>
-				<View style={isTablet && sharedStyles.tabletScreenContent}>
+				<View style={{ flex: 1, justifyContent: 'center' }}>
 					<Text style={[styles.title, { color: themes[theme].titleText }]}>{I18n.t('Join_your_workspace')}</Text>
 					<TextInput
 						label='Enter workspace URL'

app/views/OnboardingView/index.js

@@ -110,26 +110,24 @@ class OnboardingView extends React.Component {
 		const { theme } = this.props;
 		return (
 			<FormContainer theme={theme}>
-				<View style={[sharedStyles.container, isTablet && sharedStyles.tabletScreenContent]}>
-					<Image style={styles.onboarding} source={{ uri: 'logo' }} fadeDuration={0} />
-					<Text style={[styles.title, { color: themes[theme].titleText }]}>{I18n.t('Onboarding_title')}</Text>
-					<Text style={[styles.subtitle, { color: themes[theme].controlText }]}>{I18n.t('Onboarding_subtitle')}</Text>
-					<Text style={[styles.description, { color: themes[theme].auxiliaryText }]}>{I18n.t('Onboarding_description')}</Text>
-					<View style={[styles.buttonsContainer]}>
-						<Button
-							title={I18n.t('Onboarding_join_workspace')}
-							type='primary'
-							onPress={this.connectServer}
-							theme={theme}
-						/>
-						<Button
-							title={I18n.t('Create_a_new_workspace')}
-							type='secondary'
-							backgroundColor={themes[theme].chatComponentBackground}
-							onPress={this.createWorkspace}
-							theme={theme}
-						/>
-					</View>
+				<Image style={styles.onboarding} source={{ uri: 'logo' }} fadeDuration={0} />
+				<Text style={[styles.title, { color: themes[theme].titleText }]}>{I18n.t('Onboarding_title')}</Text>
+				<Text style={[styles.subtitle, { color: themes[theme].controlText }]}>{I18n.t('Onboarding_subtitle')}</Text>
+				<Text style={[styles.description, { color: themes[theme].auxiliaryText }]}>{I18n.t('Onboarding_description')}</Text>
+				<View style={[styles.buttonsContainer]}>
+					<Button
+						title={I18n.t('Onboarding_join_workspace')}
+						type='primary'
+						onPress={this.connectServer}
+						theme={theme}
+					/>
+					<Button
+						title={I18n.t('Create_a_new_workspace')}
+						type='secondary'
+						backgroundColor={themes[theme].chatComponentBackground}
+						onPress={this.createWorkspace}
+						theme={theme}
+					/>
 				</View>
 			</FormContainer>
 		);

app/views/OnboardingView/styles.js

@@ -12,7 +12,7 @@ export default StyleSheet.create({
 	},
 	onboarding: {
 		alignSelf: 'center',
-		marginTop: !isTablet && verticalScale(116),
+		marginTop: isTablet ? 0 : verticalScale(116),
 		marginBottom: verticalScale(50),
 		maxHeight: verticalScale(150),
 		resizeMode: 'contain',

app/views/Styles.js

@@ -19,6 +19,7 @@ export default StyleSheet.create({
 		maxWidth: MAX_CONTENT_WIDTH
 	},
 	tabletScreenContent: {
+		justifyContent: 'center',
 		alignSelf: 'center',
 		width: MAX_SCREEN_CONTENT_WIDTH
 	},