mapAPI

const Parameters = {UID: '26.2716025' & '50.2017993'}

export const task_register = async (lat,lon) => {

   let url = `https://wainnakel.com/api/v1/GenerateFS.php?uid=${lat},${lon}&get_param=value`
   const res = await fetch(url, {
       method: "POST",
       headers: {
           Accept: 'application/json',
           'Content-Type': 'application/json',
       },
       body: JSON.stringify({
        uid: `${Parameters.UID.Longitude}${Parameters.UID.Latitude}`
       })
   })
    return res.json();
   
}  

mapDetails

import React, { Component } from 'react'
import { Text, View, StyleSheet} from 'react-native'
import { Button } from 'native-base'
import { task_register } from '../api'
import MapView, { Callout, PROVIDER_GOOGLE } from 'react-native-maps'
import { Icon } from 'react-native-elements';



class DetailsScreen extends Component {

  static navigationOptions = () => ({
    title: 'وين ناكل',
    headerStyle: {
      backgroundColor: '#0A4E5F'
    },
    headerTintColor: 'white',
    headerRight: <Icon name="menu" size={34} color='#fff' iconStyle={{ marginRight: 15 }}
    />
  })

  componentDidMount(){
    navigator.geolocation.getCurrentPosition(
        position => {
            console.log(position)
          const longitude = position.coords.longitude
          const latitude = position.coords.latitude
          this.setState({ long: longitude, lati: latitude });
        },
        error => alert(error.message),
        { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
    );
}

  state = {
    lati: '',
    long: '',
    lat:'',
    lon:'',
    name:'',
    rate:'',
    cat:''
  }
  

  async onButtonPressed() {
    const result = await task_register()
      this.setState ({
        lat: parseFloat(result.lat),
        lon: parseFloat(result.lon),
        name: result.name,
        rate: result.rating,
        cat: result.cat
    },
    () => {
      this.mapView.fitToCoordinates([{
        longitude: parseFloat(this.state.lon),
        latitude: parseFloat(this.state.lat),
    }], {
        edgePadding: { top: 50, right: 50, bottom: 50, left: 50 },
        animated: true,
    })
    }
    
    )
    console.log(this.state)   
  }
  

  render() {
    const { result,lati, long} = this.props.navigation.state.params;
    console.log(result,lati, long)
    return (
      <View style={styles.container}>
      
        <MapView
          style={styles.mapStyle}
          provider={PROVIDER_GOOGLE}
          showsUserLocation={true}
          followsUserLocation={true}
          ref= {ref => this.mapView = ref}
          initialRegion={{
            latitude: parseFloat(this.state.lat) || parseFloat(result.lat) ,
            longitude: parseFloat(this.state.lon)|| parseFloat(result.lon),
            latitudeDelta: 0.00 ,
            longitudeDelta: 0.00,
          }}
        >
        <MapView.Marker 
        coordinate ={{
          latitude: parseFloat(this.state.lat) || parseFloat(result.lat), 
          longitude: parseFloat(this.state.lon)|| parseFloat(result.lon)
          }}/>
        </MapView>
        <Callout style={styles.callout}>
          <View style={styles.textsContainerStyle}>
            <Text style={styles.nameStyle}>{this.state.name || result.name}</Text>
            <View style={styles.textsViewStyle}>
              <View style={{flexDirection:'row', marginRight: 30}}>
                <Text style={styles.rateTextStyle}>{this.state.rate || result.rate}</Text>
                <Text style={styles.rateTextStyle}>-10</Text>
              </View>
              <Text style={styles.textStyle}>{this.state.cat || result.cat}</Text>
            </View>
          </View>

        </Callout>
        <View style={styles.buttonView}>
            <Button bordered light
              style={styles.button}
              onPress={this.onButtonPressed.bind(this)}>
              <Text style={styles.buttonText}>اقتراح اخر</Text>
            </Button>
          </View>
      </View>
    )
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  mapStyle: {
    flex: 1,
    width: null,
    height: '100%'
  },
  callout: {
    width: '100%'
  },
  textsContainerStyle: {
    padding: 40,
    backgroundColor: 'rgba(255,255,255,0.7)'
  },
  nameStyle: {
    color: '#0A4E5F',
    fontSize: 30,
    textAlign: 'center',
    alignItems: 'center'
  },
  textsViewStyle: {
    marginLeft: 20,
    flexDirection: 'row',
    alignItems: 'center'
  },
  textStyle: {
    color: '#000',
    fontSize: 15,
    textAlign: 'center',
    alignItems: 'center'
  },
  rateTextStyle:{
    fontSize: 20,
    color: '#0A4E5F'
  },
  buttonView: {
    marginVertical: '140%',
    marginHorizontal: '20%',
    position:'absolute',
    flexDirection: 'column'
  },
  button: {
    width: 200,
    backgroundColor: 'rgba(10,78,95,0.6)',
    borderRadius: 8,
    margin: 5
  },
  buttonText: {
    textAlign: 'center',
    flex: 1,
    color: '#fff',
    fontSize: 20
  }
});



export default DetailsScreen

mapHOME

import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, StatusBar, ImageBackground } from 'react-native';
import { task_register } from '../api'
import { Button } from 'native-base'


class HomeScreen extends Component {
    static navigationOptions={
        header: null
    }

    state = {
        long: null,
        lati: null
    }

    componentDidMount(){
        navigator.geolocation.getCurrentPosition(
            position => {
                console.log(position)
              const longitude = position.coords.longitude
              const latitude = position.coords.altitude
              this.setState({ long: longitude });
              this.setState({ lati: latitude });
            },
            error => alert(error.message),
            { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
        );
    }

    async onButtonPressed (){
        const { lati,long } = this.state
        const result = await task_register(parseFloat(lati), parseFloat(long))
        this.props.navigation.navigate('Details', {result,lati, long})
        console.log(result)
    }

    
    render() {
        return (
            <ImageBackground
                source={require('../images/back.jpg')}
                style={{ flex: 1, width: null, height:'100%' }}
            >
                <View style={[styles.container, { backgroundColor: 'rgba(10,78,95,0.9)' }]}>

                    <StatusBar backgroundColor='#0A4E5F' />
                    <Image
                        source={require('../images/logo.png')}
                        style={styles.image}
                    />
                    <Text style={styles.text}>وين ناكل؟</Text>
                    <View style={styles.buttonView}>
                        <Button bordered light
                            style={styles.button}
                            onPress={this.onButtonPressed.bind(this)}
                        >
                            <Text style={{ textAlign: 'center', flex: 1, color: '#3c8994', fontSize: 20 }}>اقترح</Text>
                        </Button>
                    </View>

                </View>
            </ImageBackground>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#3c8994',
    },
    image: {
        width: 150,
        height: 150,
        borderRadius: 75,
        marginBottom: 30
    },
    text: {
        color: '#ebf9fb',
        fontSize: 55,
        marginBottom: 40
    },
    buttonView: {
        alignItems: 'center',
        justifyContent: 'center'
    },
    button: {
        width: 200,
        backgroundColor: '#ebf9fb',
        borderRadius: 8
    }
});

export default HomeScreen