use variables

vds-app/App/components/Alert.js

@@ -1,7 +1,8 @@
-import React from "react";
-import { View, StyleSheet, Dimensions, Image } from "react-native";
+import React from "react"
+import { View, StyleSheet, Dimensions, Image } from "react-native"
+import { colors } from "../components/Variables"
 
-const screen = Dimensions.get("window");
+const screen = Dimensions.get("window")
 
 const styles = StyleSheet.create({
   container: {
@@ -15,7 +16,7 @@ const styles = StyleSheet.create({
     justifyContent: "center"
   },
   circle: {
-    backgroundColor: "#af321e",
+    backgroundColor: colors.red,
     width: screen.width / 2,
     height: screen.width / 2,
     borderRadius: screen.width / 2,
@@ -23,24 +24,24 @@ const styles = StyleSheet.create({
     justifyContent: "center"
   },
   circleCorrect: {
-    backgroundColor: "#28A125"
+    backgroundColor: colors.green
   },
   icon: {
     width: screen.width / 3
   }
-});
+})
 
 export const Alert = ({ correct, visible }) => {
-  if (!visible) return null;
+  if (!visible) return null
 
   const icon = correct
     ? require("../assets/check.png")
-    : require("../assets/close.png");
+    : require("../assets/close.png")
 
-  const circleStyles = [styles.circle];
+  const circleStyles = [styles.circle]
 
   if (correct) {
-    circleStyles.push(styles.circleCorrect);
+    circleStyles.push(styles.circleCorrect)
   }
 
   return (
@@ -49,5 +50,5 @@ export const Alert = ({ correct, visible }) => {
         <Image source={icon} style={styles.icon} resizeMode="contain" />
       </View>
     </View>
-  );
-};
+  )
+}

vds-app/App/components/Button.js

@@ -1,9 +1,10 @@
-import React from "react";
-import { View, TouchableOpacity, Text, StyleSheet } from "react-native";
+import React from "react"
+import { View, TouchableOpacity, Text, StyleSheet } from "react-native"
+import { colors } from "../components/Variables"
 
 const styles = StyleSheet.create({
   button: {
-    backgroundColor: "rgba(255, 255, 255, 0.3)",
+    backgroundColor: colors.white_alpha,
     borderRadius: 10,
     paddingHorizontal: 10,
     paddingVertical: 10,
@@ -13,7 +14,7 @@ const styles = StyleSheet.create({
     marginTop: 20
   },
   text: {
-    color: "#fff",
+    color: colors.white,
     fontSize: 20,
     textAlign: "center"
   },
@@ -23,14 +24,14 @@ const styles = StyleSheet.create({
     marginTop: 10,
     justifyContent: "space-between"
   }
-});
+})
 
 export const Button = ({ text, onPress = () => {} }) => (
   <TouchableOpacity onPress={onPress} style={styles.button}>
     <Text style={styles.text}>{text}</Text>
   </TouchableOpacity>
-);
+)
 
 export const ButtonContainer = ({ children }) => (
   <View style={styles.buttonContainer}>{children}</View>
-);
+)

vds-app/App/components/Results.js

@@ -1,7 +1,8 @@
-import React from "react";
-import { View, StyleSheet, Dimensions, Text } from "react-native";
+import React from "react"
+import { View, StyleSheet, Dimensions, Text } from "react-native"
+import { colors, texts } from "../components/Variables"
 
-const screen = Dimensions.get("window");
+const screen = Dimensions.get("window")
 
 const styles = StyleSheet.create({
   container: {
@@ -15,27 +16,27 @@ const styles = StyleSheet.create({
     justifyContent: "center"
   },
   box: {
-    backgroundColor: 'rgba(40, 160, 40, 0.9)',
+    backgroundColor: colors.green_alpha,
     width: screen.width / 1.1,
     height: screen.height / 2,
     borderRadius: 5,
-    borderColor: 'rgba(255, 255, 255, 0.5)',
+    borderColor: colors.white_alpha,
     borderWidth: 5,
     alignItems: "center",
     justifyContent: "center"
   },
   boxLooser: {
-    backgroundColor: 'rgba(175, 50, 30, 0.9)',
+    backgroundColor: colors.red_alpha,
     width: screen.width / 1.1,
     height: screen.height / 2,
     borderRadius: 5,
-    borderColor: 'rgba(255, 255, 255, 0.5)',
+    borderColor: colors.white_alpha,
     borderWidth: 5,
     alignItems: "center",
     justifyContent: "center"
   },
   text: {
-    color: "#fff",
+    color: colors.white,
     fontSize: 25,
     textAlign: "center",
     letterSpacing: -0.02,
@@ -47,15 +48,15 @@ const styles = StyleSheet.create({
     paddingVertical: 20
   },
   correct: {
-    color: "#28A125"
+    color: colors.green
   },
   wrong: {
-    color: "#af321e"
+    color: colors.red
   }
-});
+})
 
 export const Results = ({ correct, wrong, visible }) => {
-  if (!visible) return null;
+  if (!visible) return null
 
   const total = wrong+correct
   const percentage = (100/total) * correct
@@ -66,24 +67,24 @@ export const Results = ({ correct, wrong, visible }) => {
     <View style={styles.container}>
       <View style={boxStyle}>
         <Text style={styles.text}>
-          <Text style={styles.textLabel}>{`Corrette: `}</Text>
+          <Text style={styles.textLabel}>{`${texts.corrects}: `}</Text>
           <Text >
             {`${correct}`}
           </Text>
         </Text>
         <Text style={styles.text}>
-          <Text style={styles.textLabel}>{`Sbagliate: `}</Text>
+          <Text style={styles.textLabel}>{`${texts.wrongs}: `}</Text>
           <Text>
             {`${wrong}`}
           </Text>
         </Text>
         <Text style={styles.text}>
-          <Text style={styles.textLabel}>{`Percentuale: `}</Text>
+          <Text style={styles.textLabel}>{`${texts.percentage}: `}</Text>
           <Text >
             {`${Math.round(percentage)}%`}
           </Text>
         </Text>
       </View>
     </View>
-  );
-};
+  )
+}

vds-app/App/components/RowItem.js

@@ -1,19 +1,21 @@
-import React from "react";
-import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
+import React from "react"
+import { View, Text, TouchableOpacity, StyleSheet } from "react-native"
+import { colors } from "../components/Variables"
 
 const styles = StyleSheet.create({
   row: {
     paddingHorizontal: 15,
-    paddingVertical: 10,
-    backgroundColor: "#36B1F0",
-    marginBottom: 1
+    paddingVertical: 20,
+    backgroundColor: colors.blue,
+    borderBottomColor: colors.dark_blue,
+    borderBottomWidth: 1
   },
   text: {
     fontSize: 18,
-    color: "#fff",
-    fontWeight: "600"
+    color: colors.white,
+    fontWeight: "400"
   }
-});
+})
 
 export const RowItem = ({ onPress = () => {}, name, color }) => (
   <TouchableOpacity onPress={onPress} activeOpacity={0.8}>
@@ -21,4 +23,4 @@ export const RowItem = ({ onPress = () => {}, name, color }) => (
       <Text style={styles.text}>{name}</Text>
     </View>
   </TouchableOpacity>
-);
+)

vds-app/App/components/Variables.js

@@ -0,0 +1,31 @@
+export const colors = {
+  white: "#fff",
+  white_alpha: "rgba(255, 255, 255, 0.3)",
+  black: "#000",
+  blue: "#36b1f0",
+  dark_blue: "#15a7f0",
+  red: "#af321e",
+  red_alpha: "rgba(175, 50, 30, 0.9)",
+  green: "#28A125",
+  green_alpha: "rgba(40, 160, 40, 0.9)",
+  yellow: "#e1ff3c",
+  yellow_alpha: "rgba(225, 255, 60, 0.9)",
+  orange: "#ff9b32"
+}
+
+export const texts = {
+  quizzes: "Seleziona un quiz",
+  exam: "Simulazione esame",
+  corrects: "Corrette",
+  wrongs: "Sbagliate",
+  percentage: "Percentuale",
+  aerodynamics: "Aerodinamica",
+  first_aid: "Primo soccorso",
+  flight_safety: "Sicurezza in volo",
+  instruments: "Strumentazione",
+  legislation: "Normativa e legislazione",
+  materials: "Materiali",
+  meteorology: "Meteorologia e aerologia",
+  physiopathology: "Fisiopatologia del volo",
+  piloting_techniques: "Tecniche di pilotaggio"
+}

vds-app/App/index.js

@@ -1,26 +1,32 @@
-import { createStackNavigator, createAppContainer } from "react-navigation";
+import { createStackNavigator, createAppContainer } from "react-navigation"
 
-import QuizIndex from "./screens/QuizIndex";
-import Quiz from "./screens/Quiz";
+import QuizIndex from "./screens/QuizIndex"
+import Quiz from "./screens/Quiz"
+import { colors, texts} from "./components/Variables"
 
 const MainStack = createStackNavigator({
   QuizIndex: {
     screen: QuizIndex,
     navigationOptions: {
-      headerTitle: "Quizzes"
+      headerTitle: texts.quizzes,
+      headerTintColor: colors.white,
+      backgroundColor: colors.dark_blue,
+      headerStyle: {
+        backgroundColor: colors.dark_blue
+      }
     }
   },
   Quiz: {
     screen: Quiz,
     navigationOptions: ({ navigation }) => ({
       headerTitle: navigation.getParam("title"),
-      headerTintColor: "#fff",
+      headerTintColor: colors.white,
       headerStyle: {
         backgroundColor: navigation.getParam("color"),
         borderBottomColor: navigation.getParam("color")
       }
     })
   }
-});
+})
 
-export default createAppContainer(MainStack);
+export default createAppContainer(MainStack)

vds-app/App/screens/Quiz.js

@@ -1,27 +1,28 @@
 import React from "react"
-import { View, StyleSheet, StatusBar, Text, SafeAreaView } from "react-native"
+import { View, ScrollView, StyleSheet, StatusBar, Text, SafeAreaView } from "react-native"
 
 import { Button, ButtonContainer } from "../components/Button"
 import { Alert } from "../components/Alert"
 import { Results } from "../components/Results"
+import { colors } from "../components/Variables"
 
 const styles = StyleSheet.create({
   container: {
-    backgroundColor: "#36B1F0",
+    backgroundColor: colors.blue,
     flex: 1,
     paddingHorizontal: 20
   },
   text: {
-    color: "#fff",
+    color: colors.white,
     fontSize: 20,
     textAlign: "center",
-    letterSpacing: -0.02,
     fontWeight: "600",
-    paddingVertical: 20
+    paddingVertical: 20,
+    marginTop: 20,
   },
   safearea: {
     flex: 1,
-    marginTop: 30,
+    marginTop: 20,
     justifyContent: "space-between"
   }
 })
@@ -90,8 +91,7 @@ class Quiz extends React.Component {
     const question = questions.filter(item => item.id == this.state.activeQuestionId)[0] || questions[0]
 
     return (
-      <View
-        style={[
+      <ScrollView style={[
           styles.container,
           { backgroundColor: this.props.navigation.getParam("color") }
         ]}
@@ -125,7 +125,7 @@ class Quiz extends React.Component {
           wrong={this.state.wrongCount}
           visible={this.state.results}
         />
-      </View>
+      </ScrollView>
     )
   }
 }

vds-app/App/screens/QuizIndex.js

@@ -1,84 +1,99 @@
-import React from "react";
-import { ScrollView, StatusBar } from "react-native";
+import React from "react"
+import { ScrollView, StatusBar } from "react-native"
 
-import testQuestions from "../data/test";
-import aerodynamicsQuestions from "../data/aerodynamics";
-import firstAidQuestions from "../data/firstAid";
-import flightSafetyQuestions from "../data/flightSafety";
-import instrumentsQuestions from "../data/instruments";
-import legislationQuestions from "../data/legislation";
-import materialsQuestions from "../data/materials";
-import meteorologyQuestions from "../data/meteorology";
-import physiopathologyQuestions from "../data/physiopathology";
-import pilotingTechniquesQuestions from "../data/pilotingTechniques";
+import testQuestions from "../data/test"
+import aerodynamicsQuestions from "../data/aerodynamics"
+import firstAidQuestions from "../data/firstAid"
+import flightSafetyQuestions from "../data/flightSafety"
+import instrumentsQuestions from "../data/instruments"
+import legislationQuestions from "../data/legislation"
+import materialsQuestions from "../data/materials"
+import meteorologyQuestions from "../data/meteorology"
+import physiopathologyQuestions from "../data/physiopathology"
+import pilotingTechniquesQuestions from "../data/pilotingTechniques"
 
-import { RowItem } from "../components/RowItem";
+import { RowItem } from "../components/RowItem"
+import { colors, texts } from "../components/Variables"
 
 export default ({ navigation }) => (
-  <ScrollView>
+  <ScrollView style={[{ backgroundColor: colors.dark_blue }]}>
     <StatusBar barStyle="dark-content" />
-    <RowItem name="Aerodinamica" color="#36b1f0" onPress={() =>
+    <RowItem name={texts.aerodynamics} color={colors.blue} onPress={() =>
       navigation.navigate("Quiz", {
-        title: "Aerodinamica",
+        title: texts.aerodynamics,
         questions: aerodynamicsQuestions,
-        color: "#36b1f0"
+        color: colors.blue
       })}/>
 
-    <RowItem name="Primo soccorso" color="#36b1f0" onPress={() =>
+    <RowItem name={texts.first_aid} color={colors.blue} onPress={() =>
       navigation.navigate("Quiz", {
-        title: "Primo soccorso",
+        title: texts.first_aid,
         questions: firstAidQuestions,
-        color: "#36b1f0"
+        color: colors.blue
       })}/>
 
-    <RowItem name="Sicurezza in volo" color="#36b1f0" onPress={() =>
+    <RowItem name={texts.flight_safety} color={colors.blue} onPress={() =>
       navigation.navigate("Quiz", {
-        title: "Sicurezza in volo",
+        title: texts.flight_safety,
         questions: flightSafetyQuestions,
-        color: "#36b1f0"
+        color: colors.blue
       })}/>
 
-    <RowItem name="Strumentazione" color="#36b1f0" onPress={() =>
+    <RowItem name={texts.instruments} color={colors.blue} onPress={() =>
       navigation.navigate("Quiz", {
-        title: "Strumentazione",
+        title: texts.instruments,
         questions: instrumentsQuestions,
-        color: "#36b1f0"
+        color: colors.blue
       })}/>
 
-    <RowItem name="Materiali" color="#36b1f0" onPress={() =>
+    <RowItem name={texts.legislation} color={colors.blue} onPress={() =>
       navigation.navigate("Quiz", {
-        title: "Materiali",
+        title: texts.legislation,
+        questions: legislationQuestions,
+        color: colors.blue
+      })}/>
+
+    <RowItem name={texts.materials} color={colors.blue} onPress={() =>
+      navigation.navigate("Quiz", {
+        title: texts.materials,
         questions: materialsQuestions,
-        color: "#36b1f0"
+        color: colors.blue
       })}/>
 
-    <RowItem name="Meteorologia e aerologia" color="#36b1f0" onPress={() =>
+    <RowItem name={texts.meteorology} color={colors.blue} onPress={() =>
       navigation.navigate("Quiz", {
-        title: "Meteorologia e aerologia",
+        title: texts.meteorology,
         questions: meteorologyQuestions,
-        color: "#36b1f0"
+        color: colors.blue
       })}/>
 
-    <RowItem name="Fisiopatologia del volo" color="#36b1f0" onPress={() =>
+    <RowItem name={texts.physiopathology} color={colors.blue} onPress={() =>
       navigation.navigate("Quiz", {
-        title: "Fisiopatologia del volo",
+        title: texts.physiopathology,
         questions: physiopathologyQuestions,
-        color: "#36b1f0"
+        color: colors.blue
+      })}/>
+
+    <RowItem name={texts.piloting_techniques} color={colors.blue} onPress={() =>
+      navigation.navigate("Quiz", {
+        title: texts.piloting_techniques,
+        questions: pilotingTechniquesQuestions,
+        color: colors.blue
       })}/>
 
-    <RowItem name="Tecniche di pilotaggio" color="#36b1f0" onPress={() =>
+    <RowItem name={texts.exam} color={colors.blue} onPress={() =>
       navigation.navigate("Quiz", {
-        title: "Tecniche di pilotaggio",
+        title: texts.exam,
         questions: pilotingTechniquesQuestions,
-        color: "#36b1f0"
+        color: colors.blue
       })}/>
 
-    <RowItem name="TEST" color="#36b1f0" onPress={() =>
+    <RowItem name="TEST" color={colors.orange} onPress={() =>
       navigation.navigate("Quiz", {
         title: "TEST",
         questions: testQuestions,
-        color: "#36b1f0"
+        color: colors.orange
       })}/>
 
   </ScrollView>
-);
+)