jaing / react-native-places-input Goto Github PK
View Code? Open in Web Editor NEWLicense: MIT License
License: MIT License
Is there a provision to look up only for locality ?
Thanks for the Wonderful library.
My environment development use Typescript, my VS CODE warns Try npm install @types/react-native-places-input if it exists or add a new declaration (.d.ts) file containing declare module 'react-native-places-input';
.
But @types/react-native-places-input not find in npm repository. Could you do an update on that? Thanks.
As soon as I finish typing, the activity loader comes and disappears within a second,
and no results show up.
What am I doing wrong here?
This was the case with the other Google places libraries like "react-native-google-autocomplete" and "react-native-google-places-autocomplete"
My API key seems to be working fine as I am able to retrieve the results using the API URL in the browser.
I found your library recently and decided to use it after using all possible and available libraries with no success and exactly the same issue.
Any help would be appreciated!
Any update to get current location?
Hi, currently I am using react-native-google-places-autocomplete and it has a rich API, but a feature which is missing for Android is clearButtonMode as in iOS.
The codebase is a mess and it is hard to contribute. Maintainer said that he is working on refactoring (but it may take a long time).
I would like to know about future plans for this package. Will be more configurations added or it is ok for your case and you don't plan to invest a lot of time on this package?
The package is working fine when it is used in any normal View elements. If I use it in LinearGradient View, The search results View is overlapping with the below content in IOS. I tried with lot of styles, But no luck.
import React from 'react';
import { View, Text, Platform} from 'react-native';
import {LinearGradient} from 'expo-linear-gradient';
import PlacesInput from 'react-native-places-input';
const TestScreen = (props) => {
return (
<View
style={[
{flex: 1},
Platform.OS === 'ios' ? {paddingTop: 32} : {paddingTop: 22},
]}>
<LinearGradient
colors={['#64C0CB', '#5EC8C7', '#56D8C3']}
start={{x: 0, y: 0}}
end={{x: 1, y: 0}}
style={{height: 100, paddingLeft: 15, paddingRight: 15}}>
<PlacesInput
googleApiKey="YOUR_GOOGLE_API_KEY"
onSelect={(place) => {
console.log(place);
}}
placeHolder={'search place'}
stylesInput={{
backgroundColor: 'transparent',
borderWidth: 1,
borderColor: 'white',
borderRadius: 22,
color: 'white',
fontSize: 18,
}}
stylesList={{zIndex: 10002}} /*This is not working */
/>
</LinearGradient>
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Text>Below content</Text>
</View>
</View>
);
};
TestScreen.navigationOptions = {
headerShown: false,
};
export default TestScreen;
I'm just trying the example in the README - there is basically no other code on my app other than minimal boilerplate and imports. The build succeeds, but when I click the autocomplete box and start typing something I get the above error. Here is what I see on my terminal:
Possible Unhandled Promise Rejection (id: 1):
TypeError: Network request failed
onerror@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:28001:31
dispatchEvent@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:34129:31
setReadyState@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:33213:33
__didCompleteResponse@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:33040:29
emit@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:3416:42
__callFunction@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:2744:49
http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:2466:31
__guard@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:2698:15
callFunctionReturnFlushedQueue@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:2465:21
callFunctionReturnFlushedQueue@[native code]
I'm using Android 9.0 on Pixel 2 API 28 emulator, with react-native 0.62.0, on macOS Catalina.
I've tried using a proxy and tweaking network-security-config. Nothing worked. I doubled checked that my Places API key works by using it directly on the browser. Since what I have now is a really barebones app, with nothing else on it, I'm guessing it could be an issue with the react-native-places-input itself. So, anyone else is experiencing this?
is this possible?
i'd like have a default address selected
Hi,
There is any way to handle the focus on the input ?
If no, could you add it please ?
First of all, absolutely love this package, thank you so much.
Impact of Keyboard view:
Happy to look into a PR for these
I have an address 188 Quay Street in Auckland New Zealand.
Google refers to this in a number of listings and it has geoloc details.
Places Input returns it as wholly recognisable prediction. I select that and the street number is wiped I just get returned the street name - have tried with address_components and without.. still no street number.
Any ideas?
Can you please add the option of passing a session token value inside the component?
We can set "query" now for initial load, but it wont autopopulate, so the user has to focus it and then type a letter. We'd like it if it populated the list on load and focus if the query is set.
Thanks for all you do!
Hi thanks for creating this component it's saved me heaps of time.
I have found something interesting though - I'm using the address lookup in my form which worked well until I had to have the address lookup inside a scrollview...
This works as expected and the select is fired on tap and I get the address
<View style={{marginTop: 200, zIndex: 300}}>
<PlacesInput
googleApiKey={'KEY'}
language={'en-US'}
onSelect={place => this.fillForm(place)}
queryCountries={['nz']}
/>
</View>
This works but DOES NOT fire the select on tap so I don't get the address
<ScrollView style={{marginTop: 200, zIndex: 300}}>
<PlacesInput
googleApiKey={'KEY'}
language={'en-US'}
onSelect={place => this.fillForm(place)}
queryCountries={['nz']}
/>
</ScrollView>
Any thoughts - I think it may have something to do with the list being inside a scrollview.
React Native 0.61.5 - iOS 13
Hey, is there a way to manipulate placeholder text color?
Hello, just wanted to warn you with an issue on Android emulator (Google Pixel 3), we can't click on the searchables results, so it won't trigger the onSelect.
My exemple on Expo:
import React from "react";
import PlacesInput from "react-native-places-input";
export default function NewTerminal() {
return (
<PlacesInput
googleApiKey={"MY_API_KEY"}
onSelect={place => console.log(place)}
/>
);
}
When i set a default query i.e. query={default location} and then try to select a new place the event is not fired and thus i cannot override it and set the new place
Really impressed thank you.
Small speed bump.
I think I'm stuck. Could someone nudge me in the right direction?
I have two of these inside a view with two rows.
The tap event is not registering since (i believe) the dropdown overflows outside the parent View .
(Never mind the pesky dropdown with a a zIndex of 1000. that's should be more manageable.
It is a native-base Picker)
Is this a panResponder thing to catch the tap event ? Or just a matter of sticking-in the ScrollView i keep hearing about somewhere?
If posible. I'd like to contribute the base idea
of this examplee to your docs.
import React from "react";
import { View, Text, StyleSheet, TextInput } from "react-native";
import { Card } from "native-base";
import { FontAwesome } from "@expo/vector-icons";
import { orange } from "../utils/colors";
import PlacesInput from "react-native-places-input";
export default ({ tripDetails, setTripDetails, style }) => {
return (
<Card style={[style, styles.container]}>
<View style={[styles.row, styles.topRow]}>
<FontAwesome name="circle" color={orange} size={10}></FontAwesome>
<View style={[styles.textWrapper]}>
<Text style={styles.greyText}>Origen</Text>
<PlacesInput
queryCountries={["mx"]}
placeHolder={tripDetails.origin.description ?? ""}
stylesInput={{
height: 25,
backgroundColor: "transparent", //para que ni pise el greyText,
color: orange
}}
stylesContainer={{
position: "relative",
alignSelf: "stretch",
margin: 0,
top: 0,
left: 0,
right: 0,
bottom: 0,
shadowOpacity: 0,
borderColor: "white",
borderWidth: 1,
marginBottom: 9, // hace que la listView tape el underline, no perfecto
elevation: 0 // remove shadow on android
}}
stylesList={{
top: 1, // shrink space between nput and list
borderColor: "#dedede",
borderLeftWidth: 1,
borderRightWidth: 1,
borderBottomWidth: 1,
left: -1,
right: -1,
backgroundColor: "white", //so the input below isint visible
zIndex: 2,
elevation: 3
}}
googleApiKey="------"
onSelect={place => {
setTripDetails({ ...tripDetails, origin: { ...place.result.geometry.location, description: place.result.formatted_address } });
// console.log("origin onSelect: ", place);
}}
/>
</View>
</View>
<View style={[styles.row, styles.bottomRow]}>
<FontAwesome name="map-marker" color={orange} size={10}></FontAwesome>
<View style={styles.textWrapper}>
<Text style={[styles.greyText, { marginBottom: -4 }]}>Destino</Text>
{/*
<Text style={[styles.orangeText]}> {destination}</Text> */}
<PlacesInput
queryCountries={["mx"]}
placeHolder={""}
stylesInput={{ height: 25, backgroundColor: "transparent", color: orange, borderWidth: 0 }}
textInputProps={{
underlineColorAndroid: "transparent" //noline in andoird
}}
stylesContainer={{
position: "relative",
alignSelf: "stretch",
margin: 0,
top: 0,
left: 0,
right: 0,
bottom: 0,
shadowOpacity: 0,
borderColor: "transparent",
borderWidth: 0,
marginBottom: 10,
elevation: 0, // quitar la puta boxShadow del input en android !!
backgroundColor: "transparent" //para que ni pise el greyText
}}
stylesList={{
top: 1, // encoger espacio entre input y lista estaba en 50
borderColor: "#dedede",
borderLeftWidth: 1,
borderRightWidth: 1,
borderBottomWidth: 1,
left: -1,
right: -1
}}
googleApiKey="------"
onSelect={place => {
setTripDetails(tripDetails => ({
...tripDetails,
destination: { ...place.result.geometry.location, description: place.result.formatted_address }
}));
}}
/>
</View>
</View>
</Card>
);
};
const styles = StyleSheet.create({
container: {
position: "absolute",
left: 10,
right: 10,
top: 10
},
textWrapper: { marginLeft: 20, marginRight: "auto", flex: 1, height: 30 },
orangeText: { color: orange },
greyText: { color: "#BFBFBF", fontSize: 10, zIndex: -1 },
row: {
padding: 10,
paddingLeft: 20,
flexDirection: "row",
alignItems: "center",
justifyContent: "flex-start"
},
topRow: {
borderBottomColor: "rgba(112,112,112,0.08)",
borderBottomWidth: 1,
paddingTop: 0,
zIndex: 10 // que este arriba del input de abajo
},
bottomRow: {
paddingBottom: 0,
zIndex: 5 //Que este abajo del inpout de arriba
},
costBox: {
elevation: 4,
height: 40,
// width: 40,
backgroundColor: orange,
justifyContent: "center",
padding: 10
},
costContainer: {
position: "absolute",
flexDirection: "row",
top: 0,
bottom: 0,
left: 0,
right: 20,
alignItems: "center",
justifyContent: "flex-end"
}
});
According to the Google Maps Platform doc, it says that
Note: When you display predictions from Place Autocomplete, you must include the 'powered by Google' logo. This logo is included in the results list by default, as shown in the above example.
Like the figure below:
So I think it needs to show not only predictions but also the logo.
Thank you!
First of all thanks for being a useful library. I am new in react native maybe i can miss some trips. When a place search after select and submit for input text value could not clear. I am using placeQuery state for keep input value. When i click to button i am setting placeQuery state to empty string but input text could not clear.
query={this.state.placeQuery || ''}
googleApiKey={API_KEY}
placeHolder="Arazi Lokasyonu"
language={'tr'}
queryCountries={['tr']}
onSelect={place => {
this.setState({selectedPlaceLat : place.result.geometry.location.lat, selectedPlaceLon: place.result.geometry.location.lat, placeQuery: ''});
}}
Submit button function inside
this.setState({landName: '',placeQuery: '',selectedPlaceLat: '',selectedPlaceLon:'',error:''});
I am using your nice component in Expo to create an Android app:
<PlacesInput
queryCountries={['uk']}
querySession={uuidV4}
googleApiKey={GOOGLE_API_KEY as string}
requiredCharactersBeforeSearch={3}
onSelect={(place) => {
const region = {
latitude: place.result.geometry.location.lat,
longitude: place.result.geometry.location.lng,
...deltas,
}
setRegion(region)
Keyboard.dismiss()
}}
/>
It's working well except that the clear input icon (i.e. the cross) is not displayed in the input box.
Do I need to set a property to get this rendered or is this an issue?
Prop placeholderTextColor
unapplied on source code so it doesn't work.
I have a form with several TextInputs that have common behaviour. One of this fields is now a PlacesInput. But I'm having trouble trying to replicate the behaviour of a regular TextInput with this component. For example, I'm missing how to change the initial value of the field based on the initial state. Also how to listen to onChangeText to adjust fontSize on the fly in the case of long inputs, keyboardType, placeholderTextColor, etc...
Is there any way this component can be made to extend a regular TextInput ? Just with a displayable list of locations as user enters the value?
My current implementation:
<PlacesInput
googleApiKey={GOOGLE_PLACES_API_KEY}
language={'en-US'}
placeHolder={''}
onSelect={(place) => this.handleSelectedPlace(place, 'home')}
queryTypes={'(cities)'}
stylesInput={[(homeTown ? styles.placesField : styles.emptyPlacesField),
( !homeTownFocused && homeTown.length === 0) ? styles.placeholderStyle : '' ]}
stylesContainer={{
position: 'relative',
alignSelf: 'stretch',
margin: 0,
top: 0,
left: 0,
right: 0,
bottom: 0,
shadowOpacity: 0,
marginBottom: 10,
}}
stylesList={{
top: 0,
borderColor: '#dedede',
borderLeftWidth: 1,
borderRightWidth: 1,
borderBottomWidth: 1,
left: -1,
right: -1,
}}
/>
Hi! ๐
Firstly, thanks for your work on this project! ๐
Today I used patch-package to patch [email protected]
for the project I'm working on.
Here is the diff that solved my problem:
diff --git a/node_modules/react-native-places-input/PlacesInput.d.ts b/node_modules/react-native-places-input/PlacesInput.d.ts
new file mode 100644
index 0000000..5f21ff9
--- /dev/null
+++ b/node_modules/react-native-places-input/PlacesInput.d.ts
@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { TextInputProps } from 'react-native';
+
+export interface PlacesInputProps {
+ clearQueryOnSelect?: boolean;
+ contentScrollViewBottom?: React.ReactNode;
+ contentScrollViewTop?: React.ReactNode;
+ stylesInput?: React.CSSProperties;
+ stylesContainer?: React.CSSProperties;
+ stylesList?: React.CSSProperties;
+ stylesItem?: React.CSSProperties;
+ stylesItemText?: React.CSSProperties;
+ stylesLoading?: React.CSSProperties;
+ resultRender?: (place: any) => React.ReactNode;
+ query?: string;
+ queryFields?: string;
+ queryCountries?: string[];
+ queryTypes?: string;
+ querySession?: string;
+ searchRadius?: number;
+ searchLatitude?: number;
+ searchLongitude?: number;
+ googleApiKey: string;
+ placeHolder?: string;
+ textInputProps?: TextInputProps;
+ iconResult?: React.ReactNode;
+ iconInput?: React.ReactNode;
+ language?: string;
+ onSelect?: (place: any) => void;
+ onChangeText?: (query: string, instance: PlacesInput) => void;
+ requiredCharactersBeforeSearch?: number;
+ requiredTimeBeforeSearch?: number;
+}
+
+declare class PlacesInput extends React.Component<PlacesInputProps> {}
+
+export default PlacesInput;
diff --git a/node_modules/react-native-places-input/index.js b/node_modules/react-native-places-input/index.js
index ffa45ae..4c9019c 100755
--- a/node_modules/react-native-places-input/index.js
+++ b/node_modules/react-native-places-input/index.js
@@ -2,6 +2,7 @@ import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {
ActivityIndicator,
+ ScrollView,
StyleSheet,
Text,
TextInput,
@@ -51,12 +52,13 @@ class PlacesInput extends Component {
}}
value={this.state.query}
onFocus={() => this.setState({showList: true})}
- onBlur={() => this.setState({showList: false})}
+ // onBlur={() => this.setState({showList: false})}
{...this.props.textInputProps}
clearButtonMode="always"
+
/>
{this.state.showList && (
- <View
+ <ScrollView
style={[styles.scrollView, this.props.stylesList]}
keyboardShouldPersistTaps="always"
>
@@ -82,7 +84,7 @@ class PlacesInput extends Component {
);
})}
{this.props.contentScrollViewBottom}
- </View>
+ </ScrollView>
)}
</View>
);
This issue body was partially generated by patch-package.
Hi,
I'm using this package and when I select a result, sometimes I'll get an advisory message in RN telling me "Encountered two children with the same key, %s
. Keys should be unique so that components maintain their identity across updates."
Full stacktrace is below. Any ideas?
Cheers,
Alex
Warning: Encountered two children with the same key, %s
. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted โ the behavior is unsupported and could change in a future version.%s, place-undefined,
in RCTView (at react-native-places-input/index.js:49)
in RCTView (at react-native-places-input/index.js:32)
in PlacesInput (at PlaceSearch.js:13)
in RCTView (at PlaceSearch.js:12)
in PlaceSearch (at AddressSettingModal.js:189)
in RCTView (at AddressSettingModal.js:187)
in RCTView (at AddressSettingModal.js:160)
in RCTView (at AddressSettingModal.js:149)
in TouchableWithoutFeedback (at AddressSettingModal.js:148)
in RCTScrollContentView (at ScrollView.js:1038)
in RCTScrollView (at ScrollView.js:1178)
in ScrollView (at AddressSettingModal.js:147)
in RCTView (at AddressSettingModal.js:146)
in RCTSafeAreaView (at SafeAreaView.js:55)
in SafeAreaView (at AddressSettingModal.js:145)
in RCTView (at AppContainer.js:101)
in RCTView (at AppContainer.js:119)
in AppContainer (at Modal.js:250)
in RCTView (at Modal.js:271)
in RCTModalHostView (at Modal.js:258)
in Modal (at AddressSettingModal.js:140)
in AddressSettingModal (created by ConnectFunction)
in ConnectFunction (at HomeHeader.js:96)
in RCTView (at HomeHeader.js:89)
in HomeHeader (created by ConnectFunction)
in ConnectFunction (at HomeStack.js:20)
in RCTView (at createAnimatedComponent.js:151)
in AnimatedComponent (at HeaderSegment.tsx:346)
in RCTView (at HeaderSegment.tsx:332)
in RCTView (at createAnimatedComponent.js:151)
in AnimatedComponent (at HeaderSegment.tsx:324)
in HeaderSegment (at Header.tsx:58)
in Header (at HeaderContainer.tsx:151)
in RCTView (at HeaderContainer.tsx:124)
in RCTView (at HeaderContainer.tsx:59)
in HeaderContainer (at StackView.tsx:328)
in CardStack (at StackView.tsx:433)
in KeyboardManager (at StackView.tsx:431)
in SafeAreaProviderCompat (at StackView.tsx:428)
in RCTView (at StackView.tsx:427)
in StackView (at createStackNavigator.tsx:82)
in StackNavigator (at HomeStack.js:15)
in HomeStack (at SceneView.tsx:121)
in StaticContainer
in StaticContainer (at SceneView.tsx:112)
in EnsureSingleNavigator (at SceneView.tsx:111)
in SceneView (at useDescriptors.tsx:147)
in RCTView (at BottomTabView.tsx:42)
in SceneContent (at BottomTabView.tsx:118)
in RCTView (at ResourceSavingScene.tsx:44)
in RCTView (at ResourceSavingScene.tsx:27)
in ResourceSavingScene (at BottomTabView.tsx:113)
in RCTView (at screens.native.js:132)
in ScreenContainer (at BottomTabView.tsx:97)
in RCTView (at BottomTabView.tsx:96)
in SafeAreaProviderCompat (at BottomTabView.tsx:95)
in BottomTabView (at createBottomTabNavigator.tsx:41)
in BottomTabNavigator (at TabNav.js:18)
in EnsureSingleNavigator (at BaseNavigationContainer.tsx:277)
in ForwardRef(BaseNavigationContainer) (at NavigationContainer.tsx:64)
in ThemeProvider (at NavigationContainer.tsx:63)
in ForwardRef(NavigationContainer) (at TabNav.js:17)
in TabNav (at RootContainer.js:51)
in RootContainer (created by FirestoreConnectWrapped(RootContainer))
in FirestoreConnectWrapped(RootContainer) (created by Context.Consumer)
in FirestoreConnect(RootContainer) (created by ConnectFunction)
in ConnectFunction (at App.js:42)
in RNCSafeAreaView (at src/index.tsx:28)
in SafeAreaProvider (at App.js:41)
in ReduxFirestoreProvider (created by ReactReduxFirebaseProvider)
in ReactReduxFirebaseProvider (at App.js:40)
in Provider (at App.js:39)
in App (at withExpoRoot.js:26)
in ExpoRoot (at renderApplication.js:40)
in RCTView (at AppContainer.js:101)
in DevAppContainer (at AppContainer.js:115)
in RCTView (at AppContainer.js:119)
in AppContainer (at renderApplication.js:39)
Could you add a license?
Sometimes when i click on a prediction i get an TypeError: undefined is not an object (evaluating 'place.result.formmated_adress') error.. and sometimes it works good
Hi, can you please show a loading indicator before sending the second api request to "https://maps.googleapis.com/maps/api/place/details/..." on "onPlaceSelect" function call.
thanks
You are using View to list all result places. and now the problem is that Users cant scroll if the size of content inside this View increases than screen size. Can you change it to ScrollView or KeyboardAvoidingView
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.