backhandler

app/container/home/appraisal/sampleMenuAppraisal.js

@@ -10,6 +10,8 @@ import { Array } from '../../../library/Array';
 import AwesomeButton from "react-native-really-awesome-button";
 import Colors from '../../../library/colors';
 import api from '../../../service/api';
+import LinearGradient from 'react-native-linear-gradient';
+import Modal from "react-native-modal";
 
 export default class sampleMenuAppraisal extends Component {
     constructor(props) {
@@ -32,25 +34,22 @@ export default class sampleMenuAppraisal extends Component {
             collpaseSTNK: true,
             collapseFaktur: true,
             collapseSertifikat: true,
-            collapseUnit: true
+            collapseUnit: true,
+            alertBack: false
         }  
     }
 
     componentDidMount() {
-        BackHandler.addEventListener('hardwareBackPress', this._onBackPressed)
+        BackHandler.addEventListener('hardwareBackPress', this.handleBackButtonClick);
     }
 
     componentWillUnmount() {
-        BackHandler.removeEventListener('hardwareBackPress', this._onBackPressed)
+        BackHandler.removeEventListener('hardwareBackPress', this.handleBackButtonClick);
     }
 
-    _onBackPressed = () => {
-        api.create().postDraftAppraisal({
-            contract_id: this.state.data.contract_id
-        }).then((response) => { 
-            this.props.navigation.goBack()
-            return true 
-        })
+    handleBackButtonClick = () => {  
+        this.setState({ alertBack: true })
+        return true;
     }
 
     handlePenerimaanDate(date) {
@@ -71,10 +70,43 @@ export default class sampleMenuAppraisal extends Component {
         })
     }
 
+    draftDataBack(){
+        api.create().postDraftAppraisal({
+            contract_id: this.state.data.contract_id
+        }).then((response) => {
+            this.props.navigation.goBack()
+        })
+    }
+
     render() {
         let { data } = this.state
         return (
             <Container style={{ flex: 1, paddingHorizontal: 20 }}>
+                <Modal
+                    isVisible={this.state.alertBack}
+                    animationIn={"swing"}
+                    animationInTiming={1000}
+                    animationOut={"fadeOutDown"}
+                    animationOutTiming={500}
+                >
+                    <View style={{ backgroundColor: 'white', height: 250, width: '100%', alignSelf: 'center', alignItems: 'center', justifyContent: 'center', borderRadius: 20 }}>
+                        {/* <Image source={Images.warningCircleRed} style={{ width: 75, height: 75 }} /> */}
+                        <Text style={{ paddingTop: 10 }} >Kamu yakin tetap ingin keluar dari page ini?</Text>
+                        <View style={{ width: '100%', flexDirection: 'row', justifyContent: 'space-around', marginTop: 30, paddingHorizontal: 25 }}>
+                            <LinearGradient start={{ x: 0, y: 0 }} end={{ x: 0.9, y: 0.5 }}  colors={[Colors.yellowBasic, '#fcc000']}  style={{ borderRadius: 10, width: '40%' }}>
+                                <TouchableOpacity onPress={() => this.setState({ alertBack: false })} style={{ alignItems: 'center', justifyContent: 'center', height: 50 }}>
+                                    <Text style={{ color: 'white' }} >Tidak</Text>
+                                </TouchableOpacity>
+                            </LinearGradient>
+
+                            <LinearGradient start={{ x: 0, y: 0 }} end={{ x: 0.9, y: 0.5 }} colors={[Colors.yellowBasic, '#fcc000']}  style={{ borderRadius: 10, width: '40%' }}>
+                                <TouchableOpacity onPress={() => this.setState({ alertBack: false}, ()=> this.draftDataBack())} style={{ alignItems: 'center', justifyContent: 'center', height: 50 }}>
+                                    <Text style={{ color: 'white' }} >Ya</Text>
+                                </TouchableOpacity>
+                            </LinearGradient>
+                        </View>
+                    </View>
+                </Modal>
                 <ScrollView
                     showsVerticalScrollIndicator={false}
                 >

package.json

@@ -32,6 +32,7 @@
     "react-native-image-zoom-viewer": "^2.2.27",
     "react-native-linear-gradient": "^2.5.6",
     "react-native-material-dropdown": "^0.11.1",
+    "react-native-modal": "^11.5.4",
     "react-native-modal-datetime-picker": "^8.5.1",
     "react-native-modal-dropdown": "^0.7.0",
     "react-native-paper": "^3.6.0",