princessjanf’s gists

princessjanf / locationA.js

Last active October 26, 2019 08:06

Final Code For React Native's Geolocation

	import React, { Component } from "react";
	import { AppRegistry, StyleSheet, Dimensions, Image, View, StatusBar, TouchableOpacity } from "react-native";
	import { Container, Text } from "native-base";

	import MapView from 'react-native-maps';
	import Polyline from '@mapbox/polyline';


	class LocationA extends Component {
	constructor(props) {

princessjanf / viewPath.js

Created December 4, 2017 15:33

	{!!this.state.latitude && !!this.state.longitude && this.state.x == 'true' &&
	<MapView.Polyline
	coordinates={this.state.coords}
	strokeWidth={2}
	strokeColor="red"
	/>
	}

	{!!this.state.latitude && !!this.state.longitude && this.state.x == 'error' &&
	<MapView.Polyline

princessjanf / mergeLot.js

Last active December 4, 2017 15:39

merge latitude and longitude to fit google directions api format

	mergeLot(){
	if (this.state.latitude != null && this.state.longitude!=null)
	{
	let concatLot = this.state.latitude +","+this.state.longitude
	this.setState({
	concat: concatLot
	}, () => {
	this.getDirections(concatLot, "-6.270565,106.759550");
	});
	}

princessjanf / viewGDirApi.js

Created December 4, 2017 15:27

View polyline from google directions api

	render() {

	return (
	<MapView style={styles.map} initialRegion={{
	latitude:-6.270565,
	longitude:106.759550,
	latitudeDelta: 1,
	longitudeDelta: 1
	}}>

princessjanf / gDirApi.js

Last active December 4, 2017 15:23

Method to get google directions api

	async getDirections(startLoc, destinationLoc) {

	try {
	let resp = await fetch(`https://maps.googleapis.com/maps/api/directions/json?origin=${ startLoc }&destination=${ destinationLoc }`)
	let respJson = await resp.json();
	let points = Polyline.decode(respJson.routes[0].overview_polyline.points);
	let coords = points.map((point, index) => {
	return {
	latitude : point[0],
	longitude : point[1]

princessjanf / reactNativeMapsGeo.js

Created December 4, 2017 15:18

View that shows condition for showing current location marker

	render() {
	return (
	<MapView style={styles.map} initialRegion={{
	latitude:-6.270565,
	longitude:106.759550,
	latitudeDelta: 1,
	longitudeDelta: 1
	}}>

	{!!this.state.latitude && !!this.state.longitude && <MapView.Marker

princessjanf / geolocation.js

Created December 4, 2017 15:14

React Native's geolcoation.getCurrentPosition

	import React, { Component } from "react";
	import { AppRegistry, StyleSheet, Dimensions, View } from "react-native";
	import { TabNavigator } from "react-navigation";
	import { Container, Text } from "native-base";


	class LocationA extends Component {
	constructor(props) {
	super(props);

princessjanf / geolocationResp.json

Created December 4, 2017 15:10

Response from Navigator.Geolocation