fixed .......

screens/quiz.js

@@ -601,20 +601,12 @@ class Quiz extends React.Component {
   };
 
   homeExit = async () => {
-    // this.props.navigation.navigate('1');
-      Alert.alert('Hold on!', 'Are you sure you want to quit?', [
-      {
-        text: 'Cancel',
-        onPress: () => null,
-        style: 'cancel',
-      },
-      { text: 'YES', onPress: () => [ this.props.navigation.navigate('1'), Orientation.lockToPortrait()]},
-    ]);
+   this.setState({showQuit: true});
 
   };
 
    backAction = () => {
-   this.setState({showDone: false});
+   this.setState({showDone: false, showQuit: false});
    this.props.navigation.navigate('1');
    Orientation.lockToPortrait();
   };
@@ -789,6 +781,65 @@ this.setState({records: []});
             height: '100%',
           }}>
 
+
+            <Modal transparent={true} visible={this.state.showQuit} animationType="slide">
+         <View style={{backgroundColor: '#000000aa', flex: 1}}>
+          <View
+              style={{
+                marginLeft: Dimensions.get('window').width * 0.35,
+                width : Dimensions.get('window').width * 0.4,
+                height : Dimensions.get('window').height * 0.4,
+                marginTop : Dimensions.get('window').height * 0.25,
+                alignItems: 'center',
+                backgroundColor:'white',
+                borderRadius: 10,
+                borderColor: 'black',
+                borderWidth: 5,
+              }}>
+
+              <Text style={{fontSize: 25,textAlign: 'center', marginTop: 5, color:'black'}}>Quit?</Text>
+              <View
+              style={{
+                alignItems: 'center',
+                flexDirection: 'row',
+                marginTop:15,
+              }}>
+               <TouchableOpacity style={{
+                backgroundColor: 'white',
+                padding: 15,
+                borderRadius: 10,
+                marginTop:10,
+                marginBottom:10,
+                borderTopColor:'black',
+                borderRightColor:'black',
+                borderWidth: 3,
+                marginRight:5,
+
+              }}
+                 onPress={() => this.backAction()}>
+                <Text style={{color: 'black'}}>YES</Text>
+              </TouchableOpacity>
+              <TouchableOpacity style={{
+                backgroundColor: 'white',
+                paddingLeft: 18,
+                paddingRight: 18,
+                paddingTop: 15,
+                paddingBottom: 15,
+                borderRadius: 10,
+                marginTop:10,
+                marginBottom:10,
+                borderWidth: 3,
+                borderTopColor:'black',
+                marginLeft:5,
+              }}
+              onPress={() => this.setState({showQuit: false})}>
+                <Text style={{color: 'black'}}>NO</Text>
+              </TouchableOpacity>
+              </View>
+            </View>
+          </View>
+        </Modal>
+
         <Modal transparent={true} visible={this.state.showC}  animationType="slide">
          <View style={{backgroundColor: '#000000aa', flex: 1}}>
           <View
@@ -863,33 +914,41 @@ this.setState({records: []});
           </View>
         </Modal>
 
-        <Modal transparent={true} visible={this.state.showDone} animationType="slide">
+   <Modal transparent={true} visible={this.state.showDone} animationType="slide">
          <View style={{backgroundColor: '#000000aa', flex: 1}}>
-           <View
+          <View
               style={{
-                marginTop: Dimensions.get('window').height * 0.25,
-                backgroundColor: 'white',
-                borderRadius: 5,
                 marginLeft: Dimensions.get('window').width * 0.3,
                 width : Dimensions.get('window').width * 0.4,
+                alignItems: 'center',
               }}>
-              <Text style={{fontSize: 20, margin:10}}>Well Done</Text>
-              <Text style={{fontSize: 15, marginLeft:10, color: 'green'}}>Correct : {this.state.correct}</Text>
-              <Text style={{fontSize: 15, marginLeft:10, color:'red'}}>Wrong: {this.state.wrong}</Text>
+                <ImageBackground
+          source={require('../img/doneAlert.png')}
+          style={{
+            width: '120%',
+            height: '98%',
+          }}>
+                   <Text style={{fontSize: 25,textAlign: 'center', marginTop:Dimensions.get('window').height * 0.42, marginLeft:65, color:'white'}}>Well Done</Text>
+              <Text style={{fontSize: 15, marginLeft:65, textAlign: 'center', color: 'green'}}>Correct : {this.state.correct}</Text>
+              <Text style={{fontSize: 15, marginLeft:65, textAlign: 'center', color:'red'}}>Wrong: {this.state.wrong}</Text>
               <View
               style={{
-                alignItems: 'flex-end',
+                alignItems: 'center',
+                marginLeft:70,
               }}>
               <TouchableOpacity style={{
-                backgroundColor: 'black',
+                backgroundColor: 'white',
+                borderColor: 'black',
                 padding: 15,
                 borderRadius: 5,
-                margin : 10,
+                marginTop:5,
+                marginBottom:10,
               }}
-               onPress={() => this.backAction()}>
-                <Text style={{color: 'white'}}>OK</Text>
+              onPress={() => this.backAction()}>
+                <Text style={{color: 'black'}}>OK</Text>
               </TouchableOpacity>
               </View>
+              </ImageBackground>
             </View>
           </View>
         </Modal>