OrderDetails.js

import React, { Component } from 'react';
import { View, Text, StyleSheet, Alert, ScrollView, Dimensions, TouchableOpacity, Platform, Linking } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import firebase from "react-native-firebase";
import { withNavigation } from 'react-navigation';

import MapView, { Marker } from 'react-native-maps';

const { width } = Dimensions.get("window")
const { height } = Dimensions.get("window")

class OrderDetails extends Component {
    constructor(props) {
        super(props);
        this.state = {
            currentUser: null,
            title: this.props.navigation.state.params.title,
            description: this.props.navigation.state.params.description,
            date: this.props.navigation.state.params.date,
            time: this.props.navigation.state.params.time,
            status: this.props.navigation.state.params.status,
            gKey: this.props.navigation.state.params.gKey,
            price: this.props.navigation.state.params.price,
            region: this.props.navigation.state.params.region,
            btnColor: "#5ed81c",
            mobileNumber: null,

        }
    }
    componentDidMount() {
        console.log("currentNav:",this.props.navigation);
        console.log("parentNav:",this.props.navigation.dangerouslyGetParent().dangerouslyGetParent());
        // console.log(this.props.navigation.dangerouslyGetParent().dangerouslyGetParent())
        // this.props.navigation.dangerouslyGetParent().dangerouslyGetParent().dangerouslyGetParent().setParams({showHeader:false})

        if (this.state.status === "Completed") {
            this.setState({ btnColor: "#c6c6c6" })
        }
        const currentUser = firebase.auth().currentUser.uid;
        this.setState({ currentUser });
        const curentUserData = firebase.database().ref(`providers/${currentUser}`)
        curentUserData.on("value", (snapshot) => {
            this.setState({ mobileNumber: snapshot.val().mobileNumber })
        })
        
    }

    // componentDidUpdate(){
    //     console.log(this.props.navigation.dangerouslyGetParent().setParams({showHeader:false}))
    // }
    _completeOrder = () => {
        const { gKey, currentUser } = this.state;

        firebase.database().ref(`AcceptedOrders/${currentUser}/${gKey}`).update({
            statusInfo: "Completed",
        }, (error) => {
            if (error) {
                // The write failed...
                console.log(error);
            } else {
                // Data saved successfully!
                console.log("Data saved successfully");
            }
        }
        ).then(() => {
            alert("Great work!");
            this.props.navigation.navigate("AcceptedOrders")
        })

    }
    _RemoveOrder = () => {
        const currentUser = firebase.auth().currentUser.uid;
        const { gKey } = this.state;
        firebase.database().ref(`AcceptedOrders/${currentUser}`).child(`${gKey}`).remove();
    }
    _openMap = () => {
        const { region } = this.state;
        console.log('open directions');
        // Linking.openURL('geo:37.484847,-122.148386');
        Linking.canOpenURL(`google.navigation:q=${region.latitude},${region.longitude}`).then(supported => {
            if (supported) {
                Linking.openURL(`google.navigation:q=${region.latitude},${region.longitude}`);
            } else {
                alert('sorry invalid url')
            }
        });
    }

    // Platform.select({
    //     ios: () => {
    //         Linking.openURL('http://maps.apple.com/maps?daddr=');
    //     },
    //     android: () => {
    //         Linking.openURL('maps://app?saddr=Cupertino&San+Francisco');
    //     }
    // });
    render() {
        const { title, description, date, time, status, price, region, mobileNumber } = this.state;
        return (
            <ScrollView scrollEnabled={true} style={styles.container}>
                <View style={styles.listCard}>
                    <View style={{
                        flexDirection: "row",
                        alignItems: "center",
                        margin: 5
                    }}>
                        <Icon name="ios-create" size={25} color='#4d8dd6' />
                        <Text style={{ color: "#1567d3", padding: 5, margin: 12 }}>
                            <Text style={{ color: "#828282" }}> Title:</Text> {title}
                        </Text>
                    </View>
                    <View style={{
                        flexDirection: "row",
                        alignItems: "center",
                        flexWrap: 'wrap', paddingEnd: 50, marginVertical: 10
                    }}>
                        <Icon name="md-clipboard" size={25} color='#4d8dd6' style={{ margin: 5 }} />
                        <Text style={{ color: "#828282" }}> Description:</Text>
                        <Text numberOfLines={3} ellipsizeMode=
                            "tail" style={{ width: '100%', color: "#1567d3", left: 40 }}>
                            {description}
                        </Text>
                    </View>
                    <View style={{
                        flexDirection: "row",
                        margin: 5,

                        alignItems: "center"
                    }}>
                        <Icon name="ios-calendar" size={25} color='#4d8dd6' />
                        <Text style={{ color: "#1567d3", padding: 5, margin: 12 }}>
                            <Text style={{ color: "#828282" }}>  Date:</Text> {date}
                            <Text style={{ color: "#828282" }}>   Time:</Text> {time}
                        </Text>
                    </View>

                    <View style={{
                        flexDirection: "row",
                        margin: 5,

                        alignItems: "center"
                    }}>
                        <Icon name="ios-cash" size={25} color='#4d8dd6' />
                        <Text style={{ color: "#1567d3", padding: 5, margin: 12 }}>
                            <Text style={{ color: "#828282" }}>  Price:</Text> {price}
                        </Text>
                    </View>

                    <View style={{
                        flexDirection: "row",
                        margin: 5,

                        alignItems: "center"
                    }}>
                        <Icon name="ios-alert" size={25} color='#4d8dd6' />
                        <Text style={{ color: "#1567d3", padding: 5, margin: 12 }}>
                            <Text style={{ color: "#828282" }}>  status:</Text> {status}
                        </Text>
                    </View>
                    {
                        (status == "Accepted" || status == "Completed") ?
                            <View style={{
                                flexDirection: "row",
                                margin: 5,

                                alignItems: "center"
                            }}>
                                <Icon name="ios-call" size={25} color='#4d8dd6' />
                                <Text style={{ color: "#1567d3", padding: 5, margin: 12 }}>
                                    <Text style={{ color: "#828282" }}>  mobileNumber:</Text> {mobileNumber}
                                </Text>
                            </View>
                            : (
                                <View />
                            )
                    }

                    <Text style={{ marginLeft: 15, marginTop: 15 }}>Have you finished this work? Click the button</Text>
                    <View style={styles.btnContainer}>
                        <TouchableOpacity
                            disabled={this.state.status == "Completed"}
                            onPress={() => {
                                Alert.alert(
                                    'Cancel Order',
                                    'Do you want to cancel this order?',
                                    [
                                        { text: 'No', onPress: () => { return null } },
                                        {
                                            text: 'Yes', onPress: () => {
                                                this._RemoveOrder();
                                                alert("Canceled Order Successfully");
                                                this.props.navigation.goBack(null);
                                            }
                                        },
                                    ],
                                    { cancelable: false }
                                )
                                // this.setState(Object.assign(item, { statusInfo: "Rejected" }))
                                // this._onRemove(item);
                            }}
                            style={styles.btnReject}
                        >

                            <Text style={{ color: "#fff", fontSize: 17 }}>Cansel</Text>
                        </TouchableOpacity>

                        <TouchableOpacity disabled={this.state.status == "Completed"} style={[styles.btnAccept, { backgroundColor: this.state.btnColor }]} onPress={() => this._completeOrder()} >
                            <Text style={{ color: "#fff", fontSize: 17 }}>Completed</Text>
                        </TouchableOpacity>
                    </View>

                </View>
                <View style={{ width: width - 20, height: height - 200, marginTop: 10 }}>
                    <MapView
                        showsUserLocation={true}
                        style={styles.map}
                        loadingEnabled={true}
                        region={region}
                        showsMyLocationButton={true}
                    >
                        <Marker
                            coordinate={this.state.region}
                            title={"Marker"}
                            description={"Marker description"}
                        />
                    </MapView>
                    <TouchableOpacity
                        onPress={() => this._openMap()}
                        style={styles.navigateBtn}>
                        <Icon name="ios-navigate" size={70} color="#2F98AE" />
                        {/* <Text
                            style={{ fontSize: 13, fontWeight: "700", lineHeight: 14 }}
                        >Open Google Map</Text> */}
                    </TouchableOpacity>
                </View>

            </ScrollView>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignSelf: "center"
    },
    listCard: {
        flex: 1,
        padding: 15,
        borderRadius: 5,
        width: width - 20,
        alignItems: "flex-start",
        justifyContent: "flex-start",
        backgroundColor: "#eee",
        marginTop: 20
    }, btn: {
        width: width - 50,
        borderRadius: 5,
        height: 45,
        marginVertical: 20,
        alignItems: "center",
        justifyContent: "center"
    },
    map: {
        position: 'absolute',
        zIndex: - 1,
        top: 10,
        left: 0,
        right: 0,
        bottom: 0,
        width: width - 20,
    }, btnContainer: {
        width: width - 50,
        flexDirection: "row",
        justifyContent: "space-around",
        margin: 10, marginBottom: 0
    }, btnAccept: {
        backgroundColor: "#5ed81c",
        width: 170,
        justifyContent: "center",
        alignItems: "center",
        margin: 10,
        padding: 10
    },
    btnReject: {
        backgroundColor: "#c6c6c6",
        width: 100,
        justifyContent: "center",
        margin: 10,
        padding: 10, alignItems: "center"
    },
    navigateBtn: {
        alignItems: "flex-end",
        justifyContent: "flex-end",
        borderRadius: 100,
        position: "absolute",
        bottom: 20,
        left: 0,
        right: 10
    }
});

export default withNavigation(OrderDetails);