feat: Add scaling strategy for components styles

Author: computationalcore

CHANGELOG.md

@@ -5,6 +5,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/).
 
 ## [2.1](../../releases/tag/v2.1)
 - Add Game Over screen sounds and animations based on Sound
+- Add scaling strategy for components styles
 
 ## [2.0](../../releases/tag/v2.0)
 - Add Category Selection

src/Scaling.js

@@ -0,0 +1,15 @@
+// App scaling setup used for styles
+import { Dimensions } from 'react-native';
+const { width, height } = Dimensions.get('window');
+
+//Guideline sizes are based on standard ~5" screen mobile device
+//const guidelineBaseWidth = 350;
+//const guidelineBaseHeight = 680;
+const guidelineBaseWidth = 500;
+const guidelineBaseHeight = 972;
+
+const scale = size => width / guidelineBaseWidth * size;
+const verticalScale = size => height / guidelineBaseHeight * size;
+const moderateScale = (size, factor = 0.5) => size + ( scale(size) - size ) * factor;
+
+export {scale, verticalScale, moderateScale};

src/components/AnswerStatus.js

@@ -7,6 +7,7 @@ import {
 } from 'react-native';
 import { Font } from 'expo';
 import LottieView from 'lottie-react-native';
+import { scale, moderateScale, verticalScale} from '../Scaling';
 
 const STATUS_FONT = require('../../assets/fonts/BadaboomBB_Reg.ttf');
 const CORRECT_ANIMATION = require('../../assets/animations/433-checked-done.json');
@@ -104,14 +105,14 @@ const styles = StyleSheet.create({
     backgroundColor: 'rgba(255, 255, 255, 0.9)',
   },
   statusAnimation: {
-    width: 300,
-    height: 300
+    width: scale(300),
+    height: scale(300)
   },
   statusText: {
     fontFamily: "status-text",
-    fontSize: 40,
+    fontSize: moderateScale(40),
     textShadowRadius: 10,
-    marginTop: -60
+    marginTop: moderateScale(-60)
   },
   correctText: {
     color: '#00C871'

src/components/Button.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Text, TouchableOpacity } from 'react-native';
+import { scale, moderateScale } from '../Scaling';
 
 /**
  * This object sets default values to the optional props.
@@ -37,20 +38,20 @@ const Button = ({ onPress, children, style }) => {
 const styles = {
   textStyle: {
     flex: 1,
-    padding: 12,
+    padding: scale(12),
     color: '#ffffff',
-    fontSize: 24,
+    fontSize: moderateScale(24),
     fontWeight:'normal',
     textAlign: 'center',
     textShadowColor:'#000000',
     textShadowOffset:{width: 2, height: 2},
     textShadowRadius:0,
   },
   buttonStyle: {
-    height: 60,
+    height: moderateScale(60),
     alignSelf: 'stretch',
-    minHeight: 32,
-    margin: 10,
+    minHeight: moderateScale(32),
+    margin: scale(10),
     backgroundColor: 'rgba(64, 64, 255, 0.8)',
     borderRadius: 8
   }

src/components/Question.js

@@ -7,6 +7,7 @@ import {
   FlatList,
 } from 'react-native';
 import QuestionOptionItem from './QuestionOptionItem';
+import { scale, moderateScale, verticalScale} from '../Scaling';
 
 /**
  * This object is used for type checking the props of the component.
@@ -77,16 +78,16 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
-    marginLeft: 16,
-    marginRight: 16,
+    marginLeft: scale(16),
+    marginRight: scale(16),
   },
 
   questionData: {
-    padding: 16,
-    marginTop: 32,
-    marginBottom: 32,
+    padding: scale(16),
+    marginTop: scale(32),
+    marginBottom: scale(32),
     alignSelf: 'stretch',
-    maxHeight: 280,
+    maxHeight: verticalScale(280),
     borderWidth: 2,
     borderRadius: 8,
     borderColor: '#ffffff',
@@ -96,7 +97,7 @@ const styles = StyleSheet.create({
 
   questionDescription: {
     color: '#000',
-    fontSize: 20,
+    fontSize: moderateScale(20),
     textAlign: 'center',
   },
 

src/components/QuestionOptionItem.js

@@ -6,6 +6,7 @@ import {
   TouchableOpacity,
 } from 'react-native';
 import PropTypes from 'prop-types';
+import { scale, moderateScale } from '../Scaling';
 
 /**
  * This object is used for type checking the props of the component.
@@ -64,9 +65,9 @@ const styles = StyleSheet.create({
 
   quizOptionDescription: {
     flex: 1,
-    padding: 12,
+    padding: scale(12),
     color: '#ffffff',
-    fontSize: 24,
+    fontSize: moderateScale(24),
     fontWeight:'normal',
     textAlign: 'center',
     textShadowColor:'#000000',

src/components/TriviaLoader.js

@@ -7,6 +7,7 @@ import {
 } from 'react-native';
 import LottieView from 'lottie-react-native';
 import Button from './Button';
+import { scale, moderateScale, verticalScale} from '../Scaling';
 
 // Assets
 const BACKGROUND_IMAGE = require('../../assets/images/game_background.png');
@@ -100,28 +101,28 @@ const styles = StyleSheet.create({
     backgroundColor: 'rgba(255, 255, 255, 0.9)',
   },
   loaderAnimation: {
-    width: 200,
-    height: 200
+    width: moderateScale(200),
+    height: verticalScale(200)
   },
   errorAnimation: {
-    width: 100,
-    height: 100
+    width: moderateScale(100),
+    height: verticalScale(100)
   },
   loaderText: {
-    fontSize: 30,
+    fontSize: moderateScale(30),
     textShadowOffset: {width: -1, height: 1},
     textShadowRadius: 10,
     color: '#00AA38'
   },
   errorText: {
-    fontSize: 30,
+    fontSize: moderateScale(30),
     color: '#FF4423',
     textShadowOffset: {width: -1, height: 1},
     textShadowRadius: 10,
-    marginBottom: 10,
+    marginBottom: scale(10),
   },
   errorDescription: {
-    fontSize: 20,
+    fontSize: moderateScale(20),
     textAlign: 'center',
     marginBottom: 0,
   },

src/components/screens/GameOver.js

@@ -2,6 +2,7 @@ import React from 'react';
 import {
   View,
   Text,
+  ScrollView,
   StyleSheet,
   ImageBackground,
 } from 'react-native';
@@ -10,7 +11,7 @@ import { Audio, Font } from 'expo';
 import LottieView from 'lottie-react-native';
 import Button from '../Button';
 import { goToMainMenu, startGameSelection } from '../../actions';
-
+import { scale, moderateScale, verticalScale} from '../../Scaling';
 
 // Static assets
 const GOOD_ANIMATION = require('../../../assets/animations/677-trophy.json');
@@ -114,7 +115,10 @@ class GameOver extends React.Component {
             resizeMode="cover"
           >
           {(this.state.fontLoaded) &&
-            <View style={styles.gameOverData}>
+          <View style={styles.gameOverData}>
+            <ScrollView>
+
+          <View style={styles.gameOverInternal}>
               <Text style={styles.gameOverTitle}>GAME OVER</Text>
               <LottieView
                 style={styles.statusAnimation}
@@ -134,6 +138,8 @@ class GameOver extends React.Component {
                 Back to Main Menu
               </Button>
             </View>
+            </ScrollView>
+            </View>
           }
         </ImageBackground>
       </View>
@@ -156,9 +162,9 @@ const styles = StyleSheet.create({
     alignItems: 'center'
   },
   gameOverData: {
-    padding: 16,
-    marginTop: 32,
-    marginBottom: 32,
+    padding: scale(16),
+    marginTop: scale(32),
+    marginBottom: scale(32),
     alignSelf: 'stretch',
     alignItems: 'center',
     borderWidth: 2,
@@ -167,42 +173,47 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     backgroundColor: 'rgba(255, 255, 255, 0.9)',
   },
+  gameOverInternal: {
+    alignSelf: 'stretch',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
   gameOverMessage: {
-    fontSize: 28,
+    fontSize: moderateScale(28),
     textAlign: 'center',
     fontWeight: "900"
   },
   gameOverTitle: {
     fontFamily: "game-over-title",
     color: '#000000',
     textShadowOffset: {width: -1, height: 1},
-    textShadowRadius: 10,
-    fontSize: 78,
-    marginBottom: -40,
+    textShadowRadius: scale(10),
+    fontSize: moderateScale(78),
+    marginBottom: scale(-40),
     zIndex: 9999
   },
   gameScoreText: {
     fontFamily: 'game-over',
     fontWeight: "900",
-    fontSize: 32,
-    marginTop: 5,
-    marginBottom: 5,
+    fontSize: moderateScale(32),
+    marginTop: scale(5),
+    marginBottom: scale(5),
   },
   gameStatusText: {
     fontFamily: 'game-over',
-    fontSize: 24,
+    fontSize: moderateScale(24),
     fontWeight: "900",
     color: '#8f61f9',
     marginTop: 2,
     marginBottom: 2,
   },
   mainMenuButton: {
-    marginBottom: 50,
+    marginBottom: scale(50),
     backgroundColor: '#DC143C'
   },
   statusAnimation: {
-    width: 200,
-    height: 200
+    width: scale(200),
+    height: scale(200)
   },
 });
 

src/components/screens/MainMenu.js

@@ -10,6 +10,7 @@ import { connect } from 'react-redux';
 import { Font } from 'expo';
 import Button from '../Button';
 import { startGameSelection } from '../../actions';
+import { scale, moderateScale, verticalScale} from '../../Scaling';
 
 // Game background image
 const BACKGROUND_IMAGE = require('../../../assets/images/game_background.png');
@@ -93,20 +94,20 @@ const styles = StyleSheet.create({
   },
   gameTitleContainer: {
     flex: 1,
-    marginTop: 60,
+    marginTop: scale(60),
     alignSelf: 'center',
     justifyContent: 'flex-start',
   },
   gameTitle: {
     fontFamily: "game-title",
     color: '#000000',
-    fontSize: 60
+    fontSize: moderateScale(50)
   },
   playButton: {
-    marginBottom: 10
+    marginBottom: scale(10)
   },
   githubButton: {
-    marginBottom: 50,
+    marginBottom: scale(50),
     backgroundColor: '#DC143C'
   },
   imageBackground: {