Fix scaling

app/utils/scaling.js

@@ -2,13 +2,12 @@ import { Dimensions } from 'react-native';
 
 import { isTablet } from './deviceInfo';
 
-const { width, height } = Dimensions.get('window');
-
 const guidelineBaseWidth = isTablet ? 600 : 375;
 const guidelineBaseHeight = isTablet ? 800 : 667;
 
-const scale = size => (width / guidelineBaseWidth) * size;
+// TODO: we need to refactor this
-const verticalScale = size => (height / guidelineBaseHeight) * size;
+const scale = (size, width) => (width / guidelineBaseWidth) * size;
-const moderateScale = (size, factor = 0.5) => size + (scale(size) - size) * factor;
+const verticalScale = (size, height) => (height / guidelineBaseHeight) * size;
+const moderateScale = (size, factor = 0.5, width) => size + (scale(size, width) - size) * factor;
 
 export { scale, verticalScale, moderateScale };

app/views/NewServerView/index.js

@@ -31,6 +31,7 @@ import SSLPinning from '../../utils/sslPinning';
 import RocketChat from '../../lib/rocketchat';
 import { isTablet } from '../../utils/deviceInfo';
 import { verticalScale, moderateScale } from '../../utils/scaling';
+import { withDimensions } from '../../dimensions';
 import ServerInput from './ServerInput';
 
 const styles = StyleSheet.create({
@@ -287,22 +288,26 @@ class NewServerView extends React.Component {
 
 	renderCertificatePicker = () => {
 		const { certificate } = this.state;
-		const { theme } = this.props;
+		const { theme, width, height } = this.props;
 		return (
 			<View
 				style={[
 					styles.certificatePicker,
 					{
-						marginBottom: verticalScale(32)
+						marginBottom: verticalScale(32, height)
 					}
 				]}>
-				<Text style={[styles.chooseCertificateTitle, { color: themes[theme].auxiliaryText, fontSize: moderateScale(13) }]}>
+				<Text
+					style={[
+						styles.chooseCertificateTitle,
+						{ color: themes[theme].auxiliaryText, fontSize: moderateScale(13, null, width) }
+					]}>
 					{certificate ? I18n.t('Your_certificate') : I18n.t('Do_you_have_a_certificate')}
 				</Text>
 				<TouchableOpacity
 					onPress={certificate ? this.handleRemove : this.chooseCertificate}
 					testID='new-server-choose-certificate'>
-					<Text style={[styles.chooseCertificate, { color: themes[theme].tintColor, fontSize: moderateScale(13) }]}>
+					<Text style={[styles.chooseCertificate, { color: themes[theme].tintColor, fontSize: moderateScale(13, null, width) }]}>
 						{certificate ?? I18n.t('Apply_Your_Certificate')}
 					</Text>
 				</TouchableOpacity>
@@ -311,7 +316,7 @@ class NewServerView extends React.Component {
 	};
 
 	render() {
-		const { connecting, theme, adding, root } = this.props;
+		const { connecting, theme, adding, root, width, height } = this.props;
 		const { text, connectingOpen, serversHistory } = this.state;
 		const marginTopHeader = adding && root === ROOT_NEW_SERVER ? 25 : 70;
 
@@ -322,9 +327,9 @@ class NewServerView extends React.Component {
 						style={[
 							styles.onboardingImage,
 							{
-								marginTop: isTablet ? 0 : verticalScale(marginTopHeader),
+								marginTop: isTablet ? 0 : verticalScale(marginTopHeader, height),
-								marginBottom: verticalScale(25),
+								marginBottom: verticalScale(25, height),
-								maxHeight: verticalScale(150)
+								maxHeight: verticalScale(150, height)
 							}
 						]}
 						source={require('../../static/images/logo.png')}
@@ -334,14 +339,18 @@ class NewServerView extends React.Component {
 					<Text
 						style={[
 							styles.title,
-							{ color: themes[theme].titleText, fontSize: moderateScale(22), marginBottom: verticalScale(8) }
+							{ color: themes[theme].titleText, fontSize: moderateScale(22, null, width), marginBottom: verticalScale(8, height) }
 						]}>
 						Rocket.Chat
 					</Text>
 					<Text
 						style={[
 							styles.subtitle,
-							{ color: themes[theme].controlText, fontSize: moderateScale(16), marginBottom: verticalScale(41) }
+							{
+								color: themes[theme].controlText,
+								fontSize: moderateScale(16, null, width),
+								marginBottom: verticalScale(41, height)
+							}
 						]}>
 						{I18n.t('Onboarding_subtitle')}
 					</Text>
@@ -368,7 +377,11 @@ class NewServerView extends React.Component {
 					<Text
 						style={[
 							styles.description,
-							{ color: themes[theme].auxiliaryText, fontSize: moderateScale(14), marginBottom: verticalScale(24) }
+							{
+								color: themes[theme].auxiliaryText,
+								fontSize: moderateScale(14, null, width),
+								marginBottom: verticalScale(24, height)
+							}
 						]}>
 						{I18n.t('Onboarding_join_open_description')}
 					</Text>
@@ -402,4 +415,4 @@ const mapDispatchToProps = dispatch => ({
 	inviteLinksClear: () => dispatch(inviteLinksClearAction())
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(withTheme(NewServerView));
+export default connect(mapStateToProps, mapDispatchToProps)(withDimensions(withTheme(NewServerView)));