text: import React, { useState, useEffect } from 'react';
  import { StyleSheet, Image, View, Text, TextInput, TouchableOpacity } from 'react-native';
  import MapView, { Marker, Callout } from 'react-native-maps'
  import { requestPermissionsAsync, getCurrentPositionAsync } from 'expo-location';
  import { MaterialIcons } from '@expo/vector-icons';
  
  import api from '../../services/api';
  import { connect, disconnect, subscribeToNewDevs } from '../../services/socket';
  
  export default function Main({ navigation }) {
    const [techs, setTechs] = useState('');
    const [devs, setDevs] = useState([]);
    const [currentRegion, setCurrentRegion] = useState(null);
  
    useEffect(() => {
      async function loadInicialPosition() {
        const { granted } = await requestPermissionsAsync();
  
        if(granted) {
          const { coords } = await getCurrentPositionAsync({
            enableHighAccuracy: true,
          });
  
          const { latitude, longitude } = coords;
  
          setCurrentRegion({
            latitude,
            longitude,
            latitudeDelta: 0.02,
            longitudeDelta: 0.02,
          });
        }
      }
  
      loadInicialPosition();
    }, []);
  
    useEffect(() => {
      subscribeToNewDevs(dev => setDevs([...devs, dev]));
    }, [devs])
  
    function setupWebSocket() {
      disconnect();
  
      const { latitude, longitude } = currentRegion;
  
      connect(latitude, longitude, techs);
    }
  
    async function loadDevs() {
      const { latitude, longitude } = currentRegion
  
      const response = await api.get('/search', {
        params: {
          latitude,
          longitude,
          techs
        }
      });
  
      setDevs(response.data);
      setupWebSocket();
    }
  
    function handleRegionChanged(region) {
      setCurrentRegion(region);
    }
  
    if(!currentRegion) {
      return null;
    }
  
    return (
      <>
      <MapView 
        onRegionChangeComplete={handleRegionChanged}
        initialRegion={currentRegion}
        style={styles.map} 
      >
        {devs.map(dev => (
          <Marker 
            key={dev._id}
            coordinate={{
              longitude: dev.location.coordinates[0],
              latitude: dev.location.coordinates[1],
            }}
          >
          <Image style={styles.avatar} source={{uri: dev.avatar_url}} />
  
          <Callout onPress={() => navigation.navigate('Profile', { github_username: dev.github_username})}>
            <View style={styles.callout} >
              <Text style={styles.devName}>{dev.name}</Text>
              <Text style={styles.devBio}>{dev.bio}</Text>
              <Text style={styles.devtechs}>{dev.techs.join(', ')}</Text>
            </View>
          </Callout>
        </Marker>
        ))}
      </MapView>
      <View style={styles.searchForm}>
        <TextInput 
          style={styles.searchInput} 
          placeholder="Buscar devs por techs ..."
          placeholderTextColor="#999"
          autoCapitalize="words"
          autoCorrect={false}
          value={techs}
          onChangeText={setTechs}
        />
  
        <TouchableOpacity onPress={loadDevs} style={styles.loadButton}>
          <MaterialIcons name="my-location" size={20} color="#FFF"/>
        </TouchableOpacity>
      </View>
      </>
    );
  }
  
  const styles = StyleSheet.create({
    map: {
      flex: 1,
    },
  
    avatar: {
      height: 54,
      width: 54,
      borderRadius: 4,
      borderWidth: 4,
      borderColor: '#FFF',
      borderRadius: 26
    },
  
    callout: {
      width: 260,
      borderRadius: 4
    },
  
    devName: {
      fontWeight: 'bold',
      fontSize: 18
    },
  
    devBio: {
      color: '#666'
    },
  
    devTechs: {
      marginTop: 5
    },
  
    searchForm: {
      position: 'absolute',
      left: 0,
      top: 20,
      left: 20,
      right: 5,
      zIndex: 5,
      flexDirection: 'row'
    }, 
  
    searchInput: {
      flex: 1,
      height: 50,
      backgroundColor: "#FFF",
      color: '#333',
      borderRadius: 25,
      paddingHorizontal: 20,
      fontSize: 16,
      shadowColor: '#000',
      shadowOpacity: 0.2,
      shadowOffset: {
        width: 4,
        height: 4
      },
      elevation: 2,
      
    },
  
    loadButton: {
      width: 50,
      height: 50,
      borderRadius: 25,
      backgroundColor: '#7159c1',
      alignItems: 'center',
      justifyContent: 'center',
      marginLeft: 15
    }
  })