update

android/.project

@@ -16,7 +16,7 @@
 	</natures>
 	<filteredResources>
 		<filter>
-			<id>1604642756813</id>
+			<id>0</id>
 			<name></name>
 			<type>30</type>
 			<matcher>

android/app/src/main/AndroidManifest.xml

@@ -15,7 +15,7 @@
         android:label="@string/app_name"
         android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
         android:launchMode="singleTask"
-        android:screenOrientation="portrait"
+        android:screenOrientation="landscape"
         android:windowSoftInputMode="adjustResize">
         <intent-filter>
             <action android:name="android.intent.action.MAIN" />

android/app/src/main/java/com/quiz/MainApplication.java

@@ -4,6 +4,10 @@ import android.app.Application;
 import android.content.Context;
 import com.facebook.react.PackageList;
 import com.facebook.react.ReactApplication;
+import com.jayli3n.toggleimmersivemode.ToggleImmersiveModePackage;
+import com.thebylito.navigationbarcolor.NavigationBarColorPackage;
+import com.oblador.vectoricons.VectorIconsPackage;
+import com.github.yamill.orientation.OrientationPackage;
 import com.facebook.react.ReactInstanceManager;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;

android/settings.gradle

 rootProject.name = 'Quiz'
+include ':react-native-android-immersive-mode'
+project(':react-native-android-immersive-mode').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-android-immersive-mode/android')
+include ':react-native-navigation-bar-color'
+project(':react-native-navigation-bar-color').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-navigation-bar-color/android')
+include ':react-native-vector-icons'
+project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
+include ':react-native-orientation'
+project(':react-native-orientation').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-orientation/android')
 apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
 include ':app'

config.js

@@ -2,8 +2,8 @@
 import {Dimensions} from 'react-native';
 
 const config = {
-  deviceWidth: Dimensions.get('window').width,
-  deviceHeight: Dimensions.get('window').height,
+  deviceWidth: Dimensions.get('window').height,
+  deviceHeight: Dimensions.get('window').width,
 };
 
 export default config;

ios/Podfile

@@ -8,6 +8,10 @@ target 'Quiz' do
 
   use_react_native!(:path => config["reactNativePath"])
 
+  pod 'react-native-orientation', :path => '../node_modules/react-native-orientation'
+
+  pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'
+
   target 'QuizTests' do
     inherit! :complete
     # Pods for testing

ios/Quiz/Info.plist

@@ -38,7 +38,7 @@
 		</dict>
 	</dict>
 	<key>NSLocationWhenInUseUsageDescription</key>
-	<string></string>
+	<string/>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
 	<key>UIRequiredDeviceCapabilities</key>
@@ -53,5 +53,24 @@
 	</array>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
+	<key>UIAppFonts</key>
+	<array>
+		<string>AntDesign.ttf</string>
+		<string>Entypo.ttf</string>
+		<string>EvilIcons.ttf</string>
+		<string>Feather.ttf</string>
+		<string>FontAwesome.ttf</string>
+		<string>FontAwesome5_Brands.ttf</string>
+		<string>FontAwesome5_Regular.ttf</string>
+		<string>FontAwesome5_Solid.ttf</string>
+		<string>Fontisto.ttf</string>
+		<string>Foundation.ttf</string>
+		<string>Ionicons.ttf</string>
+		<string>MaterialCommunityIcons.ttf</string>
+		<string>MaterialIcons.ttf</string>
+		<string>Octicons.ttf</string>
+		<string>SimpleLineIcons.ttf</string>
+		<string>Zocial.ttf</string>
+	</array>
 </dict>
 </plist>

package.json

@@ -17,10 +17,13 @@
     "quiz": "^0.1.0",
     "react": "^16.13.1",
     "react-native": "0.63.3",
+    "react-native-android-immersive-mode": "^1.3.0",
     "react-native-awesome-alerts": "^1.4.2",
     "react-native-elements": "^3.0.0-alpha.1",
     "react-native-gesture-handler": "^1.8.0",
     "react-native-multiple-select": "^0.5.6",
+    "react-native-navigation-bar-color": "^2.0.1",
+    "react-native-orientation": "^3.1.3",
     "react-native-reanimated": "^1.13.1",
     "react-native-safe-area-context": "^3.1.8",
     "react-native-screens": "^2.13.0",

style.js

@@ -3,13 +3,12 @@ import {StyleSheet} from 'react-native';
 import config from './config';
 export default StyleSheet.create({
   c1: {
-    height: '65%',
+    height: '70%',
     alignItems: 'center',
     borderColor: 'black',
   },
   cc1: {
     flexDirection: 'row',
-    marginTop: 15,
     marginLeft: 5,
   },
   t: {
@@ -17,7 +16,7 @@ export default StyleSheet.create({
   },
   c2: {
     flexDirection: 'row',
-    height: '25%',
+    height: '35%',
   },
 
   t1: {
@@ -47,12 +46,13 @@ export default StyleSheet.create({
     fontSize: 15,
   },
   logo: {
-    marginTop: 10,
-    height: config.deviceHeight * 0.4,
-    width: config.deviceWidth * 0.8,
+    height: config.deviceWidth * 0.5,
+    width: config.deviceHeight * 0.3,
     borderColor: 'black',
     borderWidth: 3,
     borderRadius: 10,
+    position: 'absolute',
+    marginTop: config.deviceWidth * 0.15,
   },
   correct: {
     width: 65,
@@ -87,8 +87,8 @@ export default StyleSheet.create({
     fontSize: 15,
   },
   submit: {
-    width: '30%',
-    marginTop: config.deviceHeight * 0.03,
+    width: '40%',
+    marginTop: config.deviceWidth * 0.055,
   },
   viewMain: {
     width: '20%',
@@ -100,16 +100,18 @@ export default StyleSheet.create({
 
   container: {
     flex: 1,
-    width: config.deviceWidth,
-    height: config.deviceHeight,
   },
   textStyle: {
     fontSize: 16,
     padding: 8,
     textAlign: 'center',
   },
+  buttonView: {
+    flexDirection: 'column',
+    marginLeft: config.deviceHeight * 0.7,
+  },
   buttonStyle: {
-    flex: 7,
+    width: config.deviceHeight * 0.074,
     alignItems: 'center',
     backgroundColor: 'white',
     borderRightWidth: 1,
@@ -117,7 +119,7 @@ export default StyleSheet.create({
     borderBottomWidth: 1,
   },
   selectedKeywordStyle: {
-    flex: 7,
+    width: config.deviceHeight * 0.074,
     alignItems: 'center',
     backgroundColor: '#EEA1E1',
     borderRightWidth: 1,
@@ -128,82 +130,165 @@ export default StyleSheet.create({
     alignItems: 'center',
     backgroundColor: 'black',
     height: '65%',
-    marginLeft: config.deviceWidth * 0.09,
-    width: '10%',
+    marginLeft: config.deviceHeight * 0.05,
+    width: '5%',
     position: 'absolute',
   },
   buttonB2: {
     alignItems: 'center',
     backgroundColor: 'black',
     height: '65%',
-    width: '10%',
-    marginLeft: config.deviceWidth * 0.233,
+    width: '5%',
+    marginLeft: config.deviceHeight * 0.122,
     position: 'absolute',
   },
   buttonB3: {
     alignItems: 'center',
     backgroundColor: 'black',
     height: '65%',
-    width: '10%',
-    marginLeft: config.deviceWidth * 0.52,
+    width: '5%',
+    marginLeft: config.deviceHeight * 0.27,
     position: 'absolute',
   },
 
   buttonB4: {
     alignItems: 'center',
     backgroundColor: 'black',
-    width: '10%',
+    width: '5%',
     height: '65%',
-    marginLeft: config.deviceWidth * 0.66,
+    marginLeft: config.deviceHeight * 0.345,
     position: 'absolute',
   },
   buttonB5: {
     alignItems: 'center',
     backgroundColor: 'black',
-    width: '10%',
+    width: '5%',
     height: '65%',
     marginBottom: 10,
-    marginLeft: config.deviceWidth * 0.805,
+    marginLeft: config.deviceHeight * 0.417,
     position: 'absolute',
   },
   SbuttonB1: {
     alignItems: 'center',
     backgroundColor: 'blue',
     height: '65%',
-    marginLeft: config.deviceWidth * 0.09,
-    width: '10%',
+    marginLeft: config.deviceHeight * 0.05,
+    width: '5%',
     position: 'absolute',
   },
   SbuttonB2: {
     alignItems: 'center',
     backgroundColor: 'blue',
     height: '65%',
-    width: '10%',
-    marginLeft: config.deviceWidth * 0.233,
+    width: '5%',
+    marginLeft: config.deviceHeight * 0.122,
     position: 'absolute',
   },
   SbuttonB3: {
     alignItems: 'center',
     backgroundColor: 'blue',
     height: '65%',
-    width: '10%',
-    marginLeft: config.deviceWidth * 0.52,
+    width: '5%',
+    marginLeft: config.deviceHeight * 0.27,
     position: 'absolute',
   },
   SbuttonB4: {
     alignItems: 'center',
     backgroundColor: 'blue',
-    width: '10%',
+    width: '5%',
     height: '65%',
-    marginLeft: config.deviceWidth * 0.66,
+    marginLeft: config.deviceHeight * 0.345,
     position: 'absolute',
   },
   SbuttonB5: {
     alignItems: 'center',
     backgroundColor: 'blue',
-    width: '10%',
+    width: '5%',
+    height: '65%',
+    marginLeft: config.deviceHeight * 0.417,
+    position: 'absolute',
+  },
+
+  buttonB11: {
+    alignItems: 'center',
+    backgroundColor: 'black',
+    height: '65%',
+    marginLeft: config.deviceHeight * 0.565,
+    width: '5%',
+    position: 'absolute',
+  },
+  buttonB21: {
+    alignItems: 'center',
+    backgroundColor: 'black',
+    height: '65%',
+    marginLeft: config.deviceHeight * 0.64,
+    width: '5%',
+    position: 'absolute',
+  },
+  buttonB31: {
+    alignItems: 'center',
+    backgroundColor: 'black',
+    height: '65%',
+    marginLeft: config.deviceHeight * 0.787,
+    width: '5%',
+    position: 'absolute',
+  },
+
+  buttonB41: {
+    alignItems: 'center',
+    backgroundColor: 'black',
+    width: '5%',
+    height: '65%',
+    marginLeft: config.deviceHeight * 0.862,
+    position: 'absolute',
+  },
+  buttonB51: {
+    alignItems: 'center',
+    backgroundColor: 'black',
+    width: '5%',
+    height: '65%',
+    marginBottom: 10,
+    marginLeft: config.deviceHeight * 0.935,
+    position: 'absolute',
+  },
+  SbuttonB11: {
+    alignItems: 'center',
+    backgroundColor: 'blue',
+    height: '65%',
+    marginLeft: config.deviceHeight * 0.565,
+    width: '5%',
+    position: 'absolute',
+  },
+  SbuttonB21: {
+    alignItems: 'center',
+    backgroundColor: 'blue',
+    height: '65%',
+    marginLeft: config.deviceHeight * 0.64,
+    width: '5%',
+    position: 'absolute',
+  },
+  SbuttonB31: {
+    alignItems: 'center',
+    backgroundColor: 'blue',
+    height: '65%',
+    marginLeft: config.deviceHeight * 0.787,
+    width: '5%',
+    position: 'absolute',
+  },
+  SbuttonB41: {
+    alignItems: 'center',
+    backgroundColor: 'blue',
+    width: '5%',
+    height: '65%',
+    marginLeft: config.deviceHeight * 0.862,
+    position: 'absolute',
+  },
+  SbuttonB51: {
+    alignItems: 'center',
+    backgroundColor: 'blue',
+    width: '5%',
     height: '65%',
-    marginLeft: config.deviceWidth * 0.805,
+    marginLeft: config.deviceHeight * 0.935,
     position: 'absolute',
   },
   boxScore: {
@@ -211,8 +296,8 @@ export default StyleSheet.create({
     alignItems: 'center',
     backgroundColor: 'white',
     padding: 50,
-    marginTop: '50%',
-    marginBottom: '10%',
+    marginTop: '5%',
+    marginBottom: '5%',
     borderRadius: 30,
   },
 });

totalScore.js

@@ -17,13 +17,6 @@ import {
 } from 'react-native';
 import styles from './style.js';
 import {useNavigation} from '@react-navigation/native';
-const NOTESWHITE = ['C', 'D', 'E', 'F', 'G', 'A', 'Cb'];
-const NOTESCC = ['Db'];
-const NOTESDD = ['Eb'];
-const NOTESFF = ['Gb'];
-const NOTESGG = ['Ab'];
-const NOTESAA = ['Bb'];
-const keywordsList = [];
 
 export default class TotalScore extends Component {
   constructor(props: Object) {
@@ -32,64 +25,14 @@ export default class TotalScore extends Component {
       timer: 0,
       correct: 0,
       wrong: 0,
-      keywordsList: '',
     };
   }
-  toggleKeyword = (keyword) => {
-    let list = keywordsList;
-    let index = -1;
-    if ((index = keywordsList.indexOf(keyword)) !== -1) {
-      list.splice(index, 1);
-      console.log(list);
-    } else {
-      list.push(keyword);
-      console.log(list);
-    }
-    this.setState({keywordsList: list});
-  };
-
-  removeArray = () => {
-    keywordsList.splice(0, keywordsList.length);
-    console.log(keywordsList);
-    this.setState({
-      timer: 0,
-    });
-  };
-
-  onSubmit = () => {
-    console.log(keywordsList.toString());
-    if (keywordsList.toString() === 'Gb,Ab,Bb,Cb,Db,F') {
-      this.setState((prevState) => ({
-        correct: prevState.correct + 1,
-        timer: 0,
-      }));
-      Alert.alert('Correct!');
-      keywordsList.splice(0, keywordsList.length);
-      this.props.navigation.navigate('1', {
-        c: this.state.correct + 1,
-        w: this.state.wrong,
-      });
-    } else {
-      console.log('wrong');
-      this.setState((prevState) => ({wrong: prevState.wrong + 2, timer: 0}));
-      keywordsList.splice(0, keywordsList.length);
-      Alert.alert('Try Again!');
-      this.props.navigation.navigate('1', {
-        c: this.state.correct + 1,
-        w: this.state.wrong,
-      });
-    }
-  };
 
   componentDidMount() {
     this.setState({
       correct: this.props.route.params.c,
       wrong: this.props.route.params.w,
     });
-    this.interval = setInterval(
-      () => this.setState((prevState) => ({timer: prevState.timer + 1})),
-      1500,
-    );
   }
 
   componentWillUnmount() {
@@ -116,22 +59,18 @@ export default class TotalScore extends Component {
     } = styles;
     return (
       <View style={styles.container}>
-        <ImageBackground
-          source={require('./img/background.jpg')}
-          style={{width: '100%', height: '100%'}}>
-          <View style={styles.c1}>
-            <View style={styles.boxScore}>
-              <Text style={{fontSize: 20}}>Total Score </Text>
-              <Text>Correct :{this.state.correct}</Text>
-              <Text>Wrong :{this.state.wrong}</Text>
-            </View>
-            <Button
-              title="START AGAIN"
-              color="#E07EF9"
-              onPress={() => this.props.navigation.navigate('1')}
-            />
+        <View style={styles.c1}>
+          <View style={styles.boxScore}>
+            <Text style={{fontSize: 20}}>Total Score </Text>
+            <Text>Correct :{this.state.correct}</Text>
+            <Text>Wrong :{this.state.wrong}</Text>
           </View>
-        </ImageBackground>
+          <Button
+            title="START AGAIN"
+            color="#E07EF9"
+            onPress={() => this.props.navigation.navigate('1')}
+          />
+        </View>
       </View>
     );
   }

yarn.lock

@@ -6009,6 +6009,11 @@ react-is@^17.0.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.1.tgz#5b3531bd76a645a4c9fb6e693ed36419e3301339"
   integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==
 
+react-native-android-immersive-mode@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/react-native-android-immersive-mode/-/react-native-android-immersive-mode-1.3.0.tgz#09ea88b6407724deec3e6532f76aee704b930741"
+  integrity sha512-ADKzigTK+xfr31LIw5iIro/4Yp/h+9gawndO1RUcXGqp94OhctP3XzRjVvGUTbZl7DDxBpfTgRrJPt1ZXZ3fGQ==
+
 react-native-awesome-alerts@^1.4.2:
   version "1.4.2"
   resolved "https://registry.yarnpkg.com/react-native-awesome-alerts/-/react-native-awesome-alerts-1.4.2.tgz#197c61a403bbe0bda8d4ddf7c9eaf41bba03f321"
@@ -6075,6 +6080,16 @@ react-native-multiple-select@^0.5.6:
   dependencies:
     prop-types "^15.7.2"
 
+react-native-navigation-bar-color@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/react-native-navigation-bar-color/-/react-native-navigation-bar-color-2.0.1.tgz#ee2be25cc37105f7da355717b0a9a32c9c059ae6"
+  integrity sha512-1kE/oxWt+HYjRxdZdvke9tJ365xaee5n3+euOQA1En8zQuSbOxiE4SYEGM7TeaWnmLJ0l37mRnPHaB2H4mGh0A==
+
+react-native-orientation@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/react-native-orientation/-/react-native-orientation-3.1.3.tgz#d45803841fe94b6cce9acbe904fd5ca191a3711e"
+  integrity sha512-A0h0E+2f95X4avmhaBG1ZT8WDxBACA/q//JN2eF1E7kq8AJVxt5XDiavv+aSBkBlqFsfF3bIS+T/DB5mXmnxuA==
+
 react-native-ratings@^7.3.0:
   version "7.3.0"
   resolved "https://registry.yarnpkg.com/react-native-ratings/-/react-native-ratings-7.3.0.tgz#32e11e4ed944ba8adbbc995d601df3f131619b6f"