jaing / react-native-places-input Goto Github PK

View Code? Open in Web Editor NEW

45.0 45.0 18.0 58 KB

License: MIT License

JavaScript 100.00%

react-native-places-input's People

Contributors

Stargazers

Forkers

metalpapa lopoi anthonykrivonos diegojimenes josmontes kevinvayro alindao911 vibhu-athavaria talha7o uchihabeats sergiostorinojr imaginnovate salman98 brunna-rosa tufanlodos geangu-rua stick-it rodrigosoareschaves

react-native-places-input's Issues

Restricting to search only locality/administrative_area_level_3

Is there a provision to look up only for locality ?

Please, add support with Typescript

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.

Results list not showing

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!

Current location

Any update to get current location?

Plans on this package

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?

When using in LinearGradient view, Results are overlapping with the below content in IOS

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;

In Android it is working fine. As seen in the below image.

But in IOS, it is not working as expected.

Possible Unhandled Promise Rejection (id: 1): TypeError: Network request failed

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:

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?

Set default value

is this possible?

i'd like have a default address selected

Any way to handle the focus ?

Hi,

There is any way to handle the focus on the input ?

If no, could you add it please ?

Overall positioning of list and impact from keyboard

First of all, absolutely love this package, thank you so much.

Impact of Keyboard view:

im trying to think aloud what make sense here, but in my case, this field is lower in my screen, so when the suggestions pop up, they come behind the keyboard
one thing i tried was switching the list to populate above
- this isnt great and a little hacky, but helps
- i think having a "top" and "bottom" (where bottom is default) of list would be an easy conditional in the render

Happy to look into a PR for these

street number not applied for some addresses even though the predictions include the street address number

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?

Session token

Can you please add the option of passing a session token value inside the component?

Can you please call this.onPlaceSearch() when "query" is set so it autopopulates with a list

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!

Selecting address innside scrollview doesn't fire select

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

Placeholder Text Color

Hey, is there a way to manipulate placeholder text color?

Can't click on search results on Android

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)}
      />
  );
}

Screen of what happens

Property placeholderTextColor does not work for Android

Overridding query input

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

No Results are Returned

I have the following code:
<PlacesInput
googleApiKey={"*******}
placeHolder={'Your Address'}
language={'en-US'}
onSelect={place => console.log(place)}
/>

However, I keep getting stuck here...

Can't register tap on list when wrapped in fixed height View

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"
  }
});

Include 'powered by Google` Logo when Showing Predictions

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!

Query could not clear when submit form

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:''});

Clear input icon not visible

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?

keyboard doesn't open when clicking on the search bar

iOS TextInput placeholderTextColor support

Prop placeholderTextColor unapplied on source code so it doesn't work.

Is there any way to set an initial value and listen to a changed value?

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,
                }}
              />

type declarations for react-native-places-input

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.

Encountered two children with the same key

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)

jaing / react-native-places-input Goto Github PK

react-native-places-input's People

Contributors

Stargazers

Forkers

react-native-places-input's Issues

Recommend Projects

Recommend Topics

Recommend Org