the latest update

GroupButton.js

-/* eslint-disable prettier/prettier */
-/* eslint-disable react-native/no-inline-styles */
-/* eslint-disable prettier/prettier */
-import React, {Component} from 'react';
-import {View, Text, StyleSheet} from 'react-native';
-import _ from 'lodash';
-import {SelectMultipleGroupButton} from 'react-native-selectmultiple-button';
-const multipleGroupData = [
-  {value: 'running'},
-  {value: 'riding'},
-  {value: 'reading'},
-  {value: 'coding'},
-  {value: 'Niuer'},
-];
-const radioGroupData = [
-  {value: 'Female', displayValue: 'F'},
-  {value: 'Male', displayValue: 'M'},
-  {value: 'Other', displayValue: 'O'},
-  {value: 'Rather not say', displayValue: 'R'},
-];
-
-const defaultSelectedIndex_group_insterest = [0, 1, 4];
-const defaultSelectedIndex_group_gender = [1];
-
-const ios_blue = '#007AFF';
-
-export default class GroupButton extends Component {
-  constructor(props) {
-    super(props);
-
-    var selectedValues1 = [];
-    defaultSelectedIndex_group_insterest.map((item) => {
-      selectedValues1.push(multipleGroupData[item].value);
-    });
-
-    this.state = {
-      multipleSelectedData: [],
-      multipleSelectedDataLimited: [],
-      radioSelectedData: '',
-      multipleSelectedData_group: selectedValues1,
-      multipleSelectedData_group_limited: [],
-      radioSelectedData_group:
-        radioGroupData[defaultSelectedIndex_group_gender[0]].value,
-    };
-  }
-
-  render() {
-    return (
-      <View style={{flex: 1}}>
-        <Text style={styles.welcome}>
-          implement the multiple-select buttons demo by
-          SelectMultipleGroupButton
-        </Text>
-        <Text style={{color: ios_blue, marginLeft: 10}}>
-          I like {_.join(this.state.multipleSelectedData_group, ', ')}
-        </Text>
-        <SelectMultipleGroupButton
-          defaultSelectedIndexes={defaultSelectedIndex_group_insterest}
-          containerViewStyle={{justifyContent: 'flex-start'}}
-          highLightStyle={{
-            borderColor: 'gray',
-            backgroundColor: 'transparent',
-            textColor: 'gray',
-            borderTintColor: ios_blue,
-            backgroundTintColor: 'transparent',
-            textTintColor: ios_blue,
-          }}
-          onSelectedValuesChange={(selectedValues) =>
-            this._groupButtonOnSelectedValuesChange(selectedValues)
-          }
-          group={multipleGroupData}
-        />
-
-        <Text style={{color: 'gray', marginLeft: 10, marginTop: 20}}>
-          Maximum 3(by yourself) limited
-        </Text>
-        <Text style={{color: ios_blue, marginLeft: 10}}>
-          I like {_.join(this.state.multipleSelectedData_group_limited, ', ')}
-        </Text>
-        <SelectMultipleGroupButton
-          containerViewStyle={{justifyContent: 'flex-start'}}
-          highLightStyle={{
-            borderColor: 'gray',
-            backgroundColor: 'transparent',
-            textColor: 'gray',
-            borderTintColor: ios_blue,
-            backgroundTintColor: 'transparent',
-            textTintColor: ios_blue,
-          }}
-          maximumNumberSelected={3}
-          onSelectedValuesChange={(selectedValues) =>
-            this._groupButtonOnSelectedValuesChange_limited(selectedValues)
-          }
-          group={multipleGroupData}
-        />
-        <View style={{height: 1, backgroundColor: 'gray', marginTop: 20}} />
-
-        <Text style={styles.welcome}>
-          implement the radio-select buttons demo by SelectMultipleGroupButton
-        </Text>
-        <Text style={{color: 'green', marginLeft: 10}}>
-          I am {this.state.radioSelectedData_group}
-        </Text>
-        <SelectMultipleGroupButton
-          multiple={false}
-          defaultSelectedIndexes={defaultSelectedIndex_group_gender}
-          containerViewStyle={{flexDirection: 'column', width: 100}}
-          highLightStyle={{
-            borderColor: 'gray',
-            backgroundColor: 'transparent',
-            textColor: 'gray',
-            borderTintColor: 'green',
-            backgroundTintColor: 'green',
-            textTintColor: 'white',
-          }}
-          buttonViewStyle={{width: 40, height: 40, borderRadius: 20}}
-          singleTap={(valueTap) => {
-            this._onRadioGroupButtonSingleTap(valueTap);
-          }}
-          group={radioGroupData}
-        />
-      </View>
-    );
-  }
-
-  _groupButtonOnSelectedValuesChange(selectedValues) {
-    this.setState({
-      multipleSelectedData_group: selectedValues,
-    });
-  }
-
-  _groupButtonOnSelectedValuesChange_limited(selectedValues) {
-    this.setState({
-      multipleSelectedData_group_limited: selectedValues,
-    });
-  }
-
-  _onRadioGroupButtonSingleTap(valueTap) {
-    this.setState({
-      radioSelectedData_group: valueTap,
-    });
-  }
-}
-
-const styles = StyleSheet.create({
-  welcome: {
-    margin: 10,
-    // marginTop: 30,
-    color: 'gray',
-  },
-});

alert.js

-/* eslint-disable prettier/prettier */
-import React from 'react';
-import {
-  StyleSheet,
-  Modal,
-  View,
-  Text,
-  TouchableOpacity,
-  Image,
-} from 'react-native';
-import PropTypes from 'prop-types';
-
-export default class alertBox extends React.Component {
-  onNegativeButtonPress = () => {
-    this.props.onPressNegativeButton();
-  };
-
-  onPositiveButtonPress = () => {
-    this.props.onPressPositiveButton();
-  };
-
-  render() {
-    return (
-      <Modal
-        visible={this.props.displayAlert}
-        transparent={true}
-        animationType={'fade'}>
-        <View style={styles.mainOuterComponent}>
-          <View style={styles.mainContainer}>
-            {/* First ROw - Alert Icon and Title */}
-            <View style={styles.topPart}>
-              <Text style={styles.alertTitleTextStyle}>
-                {`${this.props.alertTitleText}`}
-              </Text>
-            </View>
-            {/* Second Row - Alert Message Text */}
-            <View style={styles.middlePart}>
-              <Text style={styles.alertMessageTextStyle}>
-                {`${this.props.alertMessageText}`}
-              </Text>
-            </View>
-            {/* Third Row - Positive and Negative Button */}
-            <View style={styles.bottomPart}>
-              {this.props.displayPositiveButton && (
-                <TouchableOpacity
-                  onPress={this.onPositiveButtonPress}
-                  style={styles.alertMessageButtonStyle}>
-                  <Text style={styles.alertMessageButtonTextStyle}>
-                    {this.props.positiveButtonText}
-                  </Text>
-                </TouchableOpacity>
-              )}
-              {this.props.displayNegativeButton && (
-                <TouchableOpacity
-                  onPress={this.onNegativeButtonPress}
-                  style={styles.alertMessageButtonStyle}>
-                  <Text style={styles.alertMessageButtonTextStyle}>
-                    {this.props.negativeButtonText}
-                  </Text>
-                </TouchableOpacity>
-              )}
-            </View>
-          </View>
-        </View>
-      </Modal>
-    );
-  }
-}
-
-alertBox.propTypes = {
-  displayAlert: PropTypes.bool,
-  displayAlertIcon: PropTypes.bool,
-  alertTitleText: PropTypes.string,
-  alertMessageText: PropTypes.string,
-  displayPositiveButton: PropTypes.bool,
-  positiveButtonText: PropTypes.string,
-  displayNegativeButton: PropTypes.bool,
-  negativeButtonText: PropTypes.string,
-  onPressPositiveButton: PropTypes.func,
-  onPressNegativeButton: PropTypes.func,
-};
-
-// export default CustomAlertComponent;
-
-const styles = StyleSheet.create({
-  mainOuterComponent: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: '#00000088',
-  },
-  mainContainer: {
-    flexDirection: 'column',
-    height: '25%',
-    width: '80%',
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#404040',
-    // borderWidth: 2,
-    // borderColor: '#FF0000',
-    borderRadius: 10,
-    padding: 4,
-  },
-  topPart: {
-    flex: 0.5,
-    width: '100%',
-    flexDirection: 'row',
-    alignItems: 'center',
-    // borderWidth: 1,
-    // borderColor: '#00FF00',
-    paddingHorizontal: 2,
-    paddingVertical: 4,
-  },
-  middlePart: {
-    flex: 1,
-    width: '100%',
-    // borderWidth: 1,
-    // borderColor: '#FF6600',
-    padding: 4,
-    color: '#FFFFFF',
-    fontSize: 16,
-    marginVertical: 2,
-  },
-  bottomPart: {
-    flex: 0.5,
-    width: '100%',
-    // borderWidth: 1,
-    // borderColor: '#0066FF',
-    flexDirection: 'row',
-    padding: 4,
-    justifyContent: 'space-evenly',
-  },
-  alertIconStyle: {
-    // borderWidth: 1,
-    // borderColor: '#cc00cc',
-    height: 35,
-    width: 35,
-  },
-  alertTitleTextStyle: {
-    flex: 1,
-    textAlign: 'justify',
-    color: '#FFFFFF',
-    fontSize: 18,
-    fontWeight: 'bold',
-    // borderWidth: 1,
-    // borderColor: '#660066',
-    padding: 2,
-    marginHorizontal: 2,
-  },
-  alertMessageTextStyle: {
-    color: '#FFFFFF',
-    textAlign: 'justify',
-    fontSize: 16,
-    paddingHorizontal: 6,
-    paddingVertical: 2,
-  },
-  alertMessageButtonStyle: {
-    width: '30%',
-    paddingHorizontal: 6,
-    marginVertical: 4,
-    borderRadius: 10,
-    backgroundColor: '#80BFFF',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  alertMessageButtonTextStyle: {
-    fontSize: 14,
-    fontWeight: 'bold',
-    color: '#FFFFFF',
-  },
-});

config.js

+/* eslint-disable prettier/prettier */
+import {Dimensions} from 'react-native';
+
+const config = {
+  deviceWidth: Dimensions.get('window').width,
+  deviceHeight: Dimensions.get('window').height,
+};
+
+export default config;

context.js

-/* eslint-disable prettier/prettier */
-import React from 'react';
-
-export default React.createContext({
-  wrong: 0,
-  correct: 0,
-  tasks: [],
-  addNewTask: (task) => {},
-  deleteTask: (taskId) => {},
-});

quiz1.js

@@ -14,6 +14,7 @@ import {
   Alert,
 } from 'react-native';
 import styles from './style.js';
+import config from './config';
 import {useNavigation} from '@react-navigation/native';
 const NOTESWHITE = ['C', 'D', 'E', 'F', 'G', 'A', 'B'];
 const NOTESCC = ['C#'];
@@ -94,7 +95,7 @@ export default class Quiz1 extends Component {
 
   render() {
     const {
-      container1,
+      container,
       selectedKeywordStyle,
       buttonStyle,
       textStyle,

quiz10.js

@@ -100,7 +100,7 @@ export default class Quiz10 extends Component {
 
   render() {
     const {
-      container1,
+      container,
       selectedKeywordStyle,
       buttonStyle,
       textStyle,

quiz11.js

@@ -100,7 +100,7 @@ export default class Quiz11 extends Component {
 
   render() {
     const {
-      container1,
+      container,
       selectedKeywordStyle,
       buttonStyle,
       textStyle,

quiz12.js

@@ -100,7 +100,7 @@ export default class Quiz12 extends Component {
 
   render() {
     const {
-      container1,
+      container,
       selectedKeywordStyle,
       buttonStyle,
       textStyle,

quiz13.js

@@ -100,7 +100,7 @@ export default class Quiz13 extends Component {
 
   render() {
     const {
-      container1,
+      container,
       selectedKeywordStyle,
       buttonStyle,
       textStyle,

quiz14.js

@@ -100,7 +100,7 @@ export default class Quiz14 extends Component {
 
   render() {
     const {
-      container1,
+      container,
       selectedKeywordStyle,
       buttonStyle,
       textStyle,

quiz2.js

@@ -98,7 +98,7 @@ export default class Quiz2 extends Component {
 
   render() {
     const {
-      container1,
+      container,
       selectedKeywordStyle,
       buttonStyle,
       textStyle,

quiz3.js

@@ -100,7 +100,7 @@ export default class Quiz3 extends Component {
 
   render() {
     const {
-      container1,
+      container,
       selectedKeywordStyle,
       buttonStyle,
       textStyle,

quiz4.js

@@ -100,7 +100,7 @@ export default class Quiz4 extends Component {
 
   render() {
     const {
-      container1,
+      container,
       selectedKeywordStyle,
       buttonStyle,
       textStyle,

quiz5.js

@@ -100,7 +100,7 @@ export default class Quiz5 extends Component {
 
   render() {
     const {
-      container1,
+      container,
       selectedKeywordStyle,
       buttonStyle,
       textStyle,

quiz6.js

@@ -100,7 +100,7 @@ export default class Quiz6 extends Component {
 
   render() {
     const {
-      container1,
+      container,
       selectedKeywordStyle,
       buttonStyle,
       textStyle,

quiz7.js

@@ -100,7 +100,7 @@ export default class Quiz7 extends Component {
 
   render() {
     const {
-      container1,
+      container,
       selectedKeywordStyle,
       buttonStyle,
       textStyle,

quiz8.js

@@ -100,7 +100,7 @@ export default class Quiz8 extends Component {
 
   render() {
     const {
-      container1,
+      container,
       selectedKeywordStyle,
       buttonStyle,
       textStyle,

quiz9.js

@@ -100,7 +100,7 @@ export default class Quiz9 extends Component {
 
   render() {
     const {
-      container1,
+      container,
       selectedKeywordStyle,
       buttonStyle,
       textStyle,

style.js

 /* eslint-disable prettier/prettier */
 import {StyleSheet} from 'react-native';
+import config from './config';
 export default StyleSheet.create({
   c1: {
     height: '65%',
@@ -8,7 +9,7 @@ export default StyleSheet.create({
   },
   cc1: {
     flexDirection: 'row',
-    marginTop: 20,
+    marginTop: 15,
     marginLeft: 5,
   },
   t: {
@@ -18,12 +19,7 @@ export default StyleSheet.create({
     flexDirection: 'row',
     height: '25%',
   },
-  c3: {
-    paddingTop: 30,
-    height: '10%',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
+
   t1: {
     color: 'black',
     paddingTop: 120,
@@ -52,8 +48,8 @@ export default StyleSheet.create({
   },
   logo: {
     marginTop: 10,
-    width: 250,
-    height: 250,
+    height: config.deviceHeight * 0.4,
+    width: config.deviceWidth * 0.8,
     borderColor: 'black',
     borderWidth: 3,
     borderRadius: 10,
@@ -92,7 +88,7 @@ export default StyleSheet.create({
   },
   submit: {
     width: '30%',
-    marginTop: 22,
+    marginTop: config.deviceHeight * 0.03,
   },
   viewMain: {
     width: '20%',
@@ -102,11 +98,10 @@ export default StyleSheet.create({
     position: 'absolute',
   },
 
-  container1: {
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-    flexWrap: 'wrap',
-    paddingTop: 50,
+  container: {
+    flex: 1,
+    width: config.deviceWidth,
+    height: config.deviceHeight,
   },
   textStyle: {
     fontSize: 16,
@@ -129,29 +124,11 @@ export default StyleSheet.create({
     borderColor: 'black',
     borderBottomWidth: 1,
   },
-  buttonStyle1: {
-    flex: 7,
-    alignItems: 'center',
-    backgroundColor: 'black',
-    borderRightWidth: 1,
-    borderColor: 'black',
-    borderBottomWidth: 1,
-    position: 'absolute',
-  },
-  selectedKeywordStylec: {
-    flex: 7,
-    alignItems: 'center',
-    backgroundColor: 'blue',
-    borderRightWidth: 1,
-    borderColor: 'black',
-    borderBottomWidth: 1,
-    position: 'absolute',
-  },
   buttonB1: {
     alignItems: 'center',
     backgroundColor: 'black',
     height: '65%',
-    marginLeft: 32,
+    marginLeft: config.deviceWidth * 0.09,
     width: '10%',
     position: 'absolute',
   },
@@ -160,7 +137,7 @@ export default StyleSheet.create({
     backgroundColor: 'black',
     height: '65%',
     width: '10%',
-    marginLeft: 85,
+    marginLeft: config.deviceWidth * 0.233,
     position: 'absolute',
   },
   buttonB3: {
@@ -168,7 +145,7 @@ export default StyleSheet.create({
     backgroundColor: 'black',
     height: '65%',
     width: '10%',
-    marginLeft: 185,
+    marginLeft: config.deviceWidth * 0.52,
     position: 'absolute',
   },
 
@@ -177,7 +154,7 @@ export default StyleSheet.create({
     backgroundColor: 'black',
     width: '10%',
     height: '65%',
-    marginLeft: 238,
+    marginLeft: config.deviceWidth * 0.66,
     position: 'absolute',
   },
   buttonB5: {
@@ -186,14 +163,14 @@ export default StyleSheet.create({
     width: '10%',
     height: '65%',
     marginBottom: 10,
-    marginLeft: 289,
+    marginLeft: config.deviceWidth * 0.805,
     position: 'absolute',
   },
   SbuttonB1: {
     alignItems: 'center',
     backgroundColor: 'blue',
     height: '65%',
-    marginLeft: 32,
+    marginLeft: config.deviceWidth * 0.09,
     width: '10%',
     position: 'absolute',
   },
@@ -202,7 +179,7 @@ export default StyleSheet.create({
     backgroundColor: 'blue',
     height: '65%',
     width: '10%',
-    marginLeft: 85,
+    marginLeft: config.deviceWidth * 0.233,
     position: 'absolute',
   },
   SbuttonB3: {
@@ -210,7 +187,7 @@ export default StyleSheet.create({
     backgroundColor: 'blue',
     height: '65%',
     width: '10%',
-    marginLeft: 185,
+    marginLeft: config.deviceWidth * 0.52,
     position: 'absolute',
   },
   SbuttonB4: {
@@ -218,7 +195,7 @@ export default StyleSheet.create({
     backgroundColor: 'blue',
     width: '10%',
     height: '65%',
-    marginLeft: 238,
+    marginLeft: config.deviceWidth * 0.66,
     position: 'absolute',
   },
   SbuttonB5: {
@@ -226,8 +203,7 @@ export default StyleSheet.create({
     backgroundColor: 'blue',
     width: '10%',
     height: '65%',
-    marginBottom: 10,
-    marginLeft: 289,
+    marginLeft: config.deviceWidth * 0.805,
     position: 'absolute',
   },
   boxScore: {

totalScore.js

@@ -99,7 +99,7 @@ export default class TotalScore extends Component {
 
   render() {
     const {
-      container1,
+      container,
       selectedKeywordStyle,
       buttonStyle,
       textStyle,