SHARE
TWEET

Untitled

mogzzer Feb 18th, 2020 84 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React from 'react';
  2. import {
  3.     View,
  4.     TextInput,
  5.     StyleSheet,
  6.     Text,
  7.     Dimensions,
  8.     TouchableOpacity,
  9.     Keyboard,
  10. } from 'react-native';
  11. import axios from 'axios';
  12. import _ from 'lodash'
  13.  
  14. const WIDTH = Dimensions.get('window').width;
  15. const HEIGHT = Dimensions.get('window').height;
  16.  
  17. class PlaceInput extends React.Component{
  18.  
  19.     constructor(props){
  20.         super(props);
  21.  
  22.         this.state={
  23.             predictions: [],
  24.             destinationInput: '',
  25.         }
  26.         this.getPlaces = this.getPlaces.bind(this);
  27.         this.getPlacesDebounced = _.debounce(this.getPlaces, 500);
  28.         this.setDestination = this.setDestination.bind(this);
  29.     }
  30.  
  31.     async getPlaces(input){
  32.         const { userLatitude, userLongitude } = this.props;
  33.         const result = await axios.get(
  34.             `https://maps.googleapis.com/maps/api/place/autocomplete/json?key=AIzaSyDV6GaU80hyu9abT6hgm5P5MFrbq9o8MaE&input=${input}&location=${userLatitude},${userLongitude}&radius=2000`
  35.         );
  36.         this.setState({
  37.             predictions: result.data.predictions
  38.         });
  39.     }
  40.  
  41.     setDestination(main_text, place_id){
  42.         Keyboard.dismiss();
  43.         this.setState({
  44.             destinationInput: main_text,
  45.             predictions: [],
  46.         })
  47.         this.props.showDirectionOnMap(place_id);
  48.     }
  49.  
  50.     render() {
  51.         console.log(this.state);
  52.         const predictions = this.state.predictions.map(prediction => {
  53.             const { id, structured_formatting, place_id } = prediction;
  54.             return(
  55.                 <TouchableOpacity
  56.                     key={id}
  57.                     onPress={() => this.setDestination(structured_formatting.main_text, place_id)}    
  58.                 >
  59.                     <View style={styles.suggestion}>
  60.                         <Text style={styles.mainText}>{structured_formatting.main_text}</Text>
  61.                         <Text style={styles.secText}>{structured_formatting.secondary_text}</Text>
  62.                     </View>
  63.                 </TouchableOpacity>
  64.             );
  65.         } )
  66.         return (
  67.             <View>
  68.                 <TextInput
  69.                     autoCorrect={false}
  70.                     autoCapitalize='none'
  71.                     style={styles.inputStyle}
  72.                     placeholder='Search your places'
  73.                     onChangeText={(input) => {
  74.                         this.setState({destinationInput: input});
  75.                         this.getPlacesDebounced(input);
  76.                     }}
  77.                     value={this.state.destinationInput}
  78.                 />
  79.                 {predictions}
  80.             </View>
  81.         )
  82.     }
  83. }
  84.  
  85. const styles = StyleSheet.create({
  86.     inputStyle:{
  87.         height: 40,
  88.         marginTop: 50,
  89.         padding: 5,
  90.         backgroundColor: 'white',
  91.         //position: 'absolute',
  92.         zIndex: 9,
  93.         width: WIDTH,
  94.     },
  95.     suggestion:{
  96.         backgroundColor: 'white',
  97.         padding: 10,
  98.         borderWidth: 0.5
  99.     },
  100.     secText:{
  101.         color: '#777'
  102.     },
  103.     mainText:{
  104.         color: '#000'
  105.     }
  106. })
  107.  
  108. export default PlaceInput;
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Top