Security News
Fluent Assertions Faces Backlash After Abandoning Open Source Licensing
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
react-native-places-input
Advanced tools
Up to date working Google Places Input. Calling directly API not JS SDK.
Up to date working Google Places Input. Calling directly API not JS SDK.
Component is now fetching places if query prop is provided.
If query prop change it will also update a component state. New configuration props:
Adding loading indicator for a place details request.
New configuration props:
yarn add react-native-places-input
or
npm install react-native-places-input
Fairly easy. Few required props but most of the work is already done in a component.
import PlacesInput from 'react-native-places-input';
And inside a component
<PlacesInput
googleApiKey={GOOGLE_API_KEY}
onSelect={place => console.log(place)}
/>
class InputWrapper extends React.Component {
render() {
return (
<View style={{ width: '100%' }}>
<PlacesInput
googleApiKey={GOOGLE_API_KEY}
placeHolder={"Some Place holder"}
language={"en-US"}
onSelect={place => {
this.props.goToPoint(get(place, 'result.geometry.location.lat'), get(place, 'result.geometry.location.lng'))
}}
iconResult={<Ionicons name="md-pin" size={25} style={styles.placeIcon}/>}
/>
</View>
);
}
}
List of props supported by a component
Prop | Type | Default | Description |
---|---|---|---|
googleApiKey | PropTypes.string.isRequired | Google API key | |
clearQueryOnSelect | bool | false | Clear input query on place select |
iconInput | any | Icon added to an input | |
iconResult | any | Icon added to results | |
language | string | en | Language for google API call |
placeHolder | string | Search places... | placeholder for an input |
query | string | Custom text field value on init | |
querySession | string | A random string which identifies an autocomplete session for billing purposes. If this parameter is omitted from an autocomplete request, the request is billed independently. See the pricing sheet for details. | |
queryTypes | string | You may restrict results from a Place Autocomplete request to be of a certain type by passing a types parameter. Google docs | |
queryFields | string | formatted_address,geometry,name | Fields requested from Google API |
queryCountries | array | Array of country codes to limit results | |
resultRender | func | place => place.description | Function to render results text |
searchLatitude | number | Lat to limit results | |
searchLongitude | number | Lng to limit results | |
searchRadius | number | radius to limit results | |
stylesContainer | object | {} | Custom styles for a container |
stylesInput | object | {} | Custom styles for an input |
stylesItem | object | {} | Custom styles for an item |
stylesItemText | object | {} | Custom styles for an item text |
stylesList | object | {} | Custom styles for a list |
stylesLoading | object, | {} | Custom styles for a loading indicator |
textInputProps | object | {} | Custom TextInput props |
requiredCharactersBeforeSearch | number | 2 | Component wont fetch places unless string length is equal this prop |
requiredTimeBeforeSearch | number | 1000 | Idle time on text input before component will fetch places |
onSelect | func | Function called when you select a place | |
onChangeText | func | Method triggered when TextInput is changed. Returning query and this. |
<PlacesInput
placeHolder={'Some placeholder'}
stylesContainer={{
position: 'relative',
alignSelf: 'stretch',
margin: 0,
top: 0,
left: 0,
right: 0,
bottom: 0,
shadowOpacity: 0,
borderColor: '#dedede',
borderWidth: 1,
marginBottom: 10
}}
stylesList={{
top: 50,
borderColor: '#dedede',
borderLeftWidth: 1,
borderRightWidth: 1,
borderBottomWidth: 1,
left: -1,
right: -1
}}
googleApiKey={GOOGLE_API_KEY}
onSelect={place => this.setState({place})}
/>
<PlacesInput
placeHolder={'Some placeholder'}
queryCountries={['pl', 'fr']}
googleApiKey={GOOGLE_API_KEY}
onSelect={place => this.setState({place})}
/>
<PlacesInput
placeHolder={'Some placeholder'}
searchRadius={500}
searchLatitude={51.905070}
searchLongitude={19.458834}
googleApiKey={GOOGLE_API_KEY}
onSelect={place => this.setState({place})}
/>
<PlacesInput
placeHolder={'Some placeholder'}
queryTypes="establishment"
googleApiKey={GOOGLE_API_KEY}
onSelect={place => this.setState({place})}
/>
If on click is not working and component is inside a ScrollView make sure to add keyboardShouldPersistTaps = always.
<ScrollView
keyboardShouldPersistTaps="always"
1.1.7
Fixing UID for a place
FAQs
Up to date working Google Places Input. Calling directly API not JS SDK.
The npm package react-native-places-input receives a total of 277 weekly downloads. As such, react-native-places-input popularity was classified as not popular.
We found that react-native-places-input demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
Research
Security News
Socket researchers uncover the risks of a malicious Python package targeting Discord developers.
Security News
The UK is proposing a bold ban on ransomware payments by public entities to disrupt cybercrime, protect critical services, and lead global cybersecurity efforts.