Inteligencia Futura

React Native Encontrar direcciones básicas – Find basic addresses


la dependencia que debe instalar es npm add react-native-google-autocomplete

import React from ‘react’;
import { StyleSheet, Text, View, TextInput, ScrollView, ActivityIndicator, Button } from ‘react-native’;
import {GoogleAutoComplete} from ‘react-native-google-autocomplete’;
v
import LocationItem from ‘./components/LocationItem’;

export default class App extends React.Component {

state = {
autoCompleteValue: null,
};

onAutoCompleteInput = autoCompleteValue => {
this.setState({ autoCompleteValue });
};

render(){
return (
<View style={styles.container}>
<GoogleAutoComplete
apiKey={‘API KEY’}
debounce={500}
components=”country:co”
returnKeyType={‘search’}
listViewDisplayed=’auto’
fetchDetails={true}
currentLocation={true}
>
{({
handleTextChange,
locationResults,
fetchDetails,
isSearching,
inputValue,
clearSearch
}) => (
<React.Fragment>
{console.log(‘locationResults’, locationResults)}
<View style={styles.inputWrapper}>
<TextInput style={styles.TextInput}
placeholder=”Buscar direccion”
onChangeText={handleTextChange}
value={this.state.autoCompleteValue || inputValue}
/>
<Button title=”Borrar” onPress={clearSearch} />
</View>
{isSearching && <ActivityIndicator size=”large” color=”red” />}
<ScrollView>
{locationResults.map(el => (
<LocationItem
{…el}
key={el.id}
onAutoCompleteInput={this.onAutoCompleteInput}
fetchDetails={fetchDetails}
/>
))}
</ScrollView>
</React.Fragment>
)}
</GoogleAutoComplete>
</View>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: ‘#fff’,
alignItems: ‘center’,
justifyContent: ‘center’,
},
TextInput: {
height:40,
width:300,
borderWidth:1,
paddingHorizontal:16
},
inputWrapper: {
marginTop: 80,
flexDirection: ‘row’
}
});



import React, { PureComponent } from ‘react’;
import { View, Alert, Text, StyleSheet, TouchableOpacity } from ‘react-native’;

class LocationItem extends React.PureComponent {
_handlePress = async () => {
this.props.onAutoCompleteInput(this.props.description);
const res = await this.props.fetchDetails(this.props.place_id);
console.log(‘result’, res);
};

render() {
return (
<TouchableOpacity style={styles.root} onPress={this._handlePress}>
<Text>{this.props.description}</Text>
</TouchableOpacity>
);
}
}

const styles = StyleSheet.create({
root: {
height: 40,
borderBottomWidth: StyleSheet.hairlineWidth,
justifyContent: ‘center’,
},
});

export default LocationItem;
Email:

inteligenciafuturatv@gmail.com

Empresa
(Business)

Links

Últimas noticias(Latest News)

Saint Seiya animation 15 agosto, 2021 - futura

Copyright © 2021. Designed by  Inteligencia Futura