drnaf/src/elements/DRNAFLocationLabel.js

Dynamic React-Native Application Framework

import React from 'react';
import {
    Platform,
    Linking,
    StyleSheet, View,
    Image,
    Text, TouchableOpacity
} from 'react-native'
import geolocation from '@react-native-community/geolocation'
import { DRNAFComponent } from '../inherites/DRNAFComponent';

class DRNAFLocationLabel extends DRNAFComponent {
    constructor(props) {
        super(props, "DRNAFLocationLabel");

        this.state = {
            latitude: 0.0,
            longitude: 0.0,

        }

        this.handlerLocation = this.handlerLocation.bind(this);
    }

    /** Feature methods */
    openGoogleMap(lat, lng) {
        const scheme = Platform.select({ ios: 'maps:0,0?q=', android: 'geo:0,0?q=' });
        const latLng = `${lat},${lng}`;
        const label = 'DRNAF ส่งคุณมาจุดนี้';
        const url = Platform.select({
            ios: `${scheme}${label}@${latLng}`,
            android: `${scheme}${latLng}(${label})`
        });

        Linking.openURL(url);

    }
    handlerLocation(position) {
        // null
        if (position === null) {
            // log
            alert('no position');

            // exit fro mthis process
            return;
        }

        // prepare usage variables
        const coords = position.coords;

        // update state
        this.setState({
            latitude: coords.latitude,
            longitude: coords.longitude,

        }, () => {
            // collection callback
            this.collectionCallback( {
                fieldName: this.reference_key,
                data: {
                    latitude: coords.latitude,
                    longitude: coords.longitude,

                }
            } );
        })
    }

    /** Life cycle */
    componentDidMount() {
        // prepare usage variables
        geolocation.getCurrentPosition(this.handlerLocation);
        
    }

    render() {
        // prepare usage variables
        const { latitude, longitude } = this.state;

        return <View style={[styles.container, {
            backgroundColor: 'white',
            flexDirection: 'row',
            padding: 4,
            width: '100%',
            marginTop: 4,
            marginBottom: 4,
            alignItems: 'center',

        }]} >
            <Text style={{
                fontWeight: 'bold',
            }}>Coordinates:</Text>
            <Text> {latitude} {longitude} </Text>

            <View style={{
                flex: 1,
            }}>
                <TouchableOpacity
                    style={{
                        alignSelf: 'flex-end',
                        borderRadius: 8,
                        padding: 8,

                    }}
                    onPress={() => {
                        this.openGoogleMap(latitude, longitude);
                    }}>
                    <Image style={{
                        width: 20,
                        height: 20,
                    }}
                        source={{
                            uri: 'https://s3.us-east-2.amazonaws.com/upload-icon/uploads/icons/png/6139362151554126456-256.png'
                        }} />

                </TouchableOpacity>
            </View>
        </View >
    }

}

const styles = StyleSheet.create({
    container: {
        // flex: 1,
        flexDirection: 'column',
        backgroundColor: 'black',
    },
    preview: {
        flex: 1,
        justifyContent: 'flex-end',
        alignItems: 'center',
    },
    capture: {
        backgroundColor: '#fff',
        borderRadius: 5,
        padding: 15,
        paddingHorizontal: 20,
        alignSelf: 'center',
        margin: 20,
    },
});

export { DRNAFLocationLabel }