react-native-google-places-autocomplete 2.5.7 → 2.6.1

package/README.md

@@ -6,24 +6,6 @@
 
 **Customizable Google Places autocomplete component for iOS and Android React-Native apps**
 
-## Sponsor
-
-<p align="center">
-  <br/>
-  <a href="https://bit.ly/3rneTTI" target="_blank">
-    <img src="https://raw.githubusercontent.com/FaridSafi/react-native-google-places-autocomplete/master/Assets/expensify-logo.png">
-  </a>
-  <br>
-  <p align="center">
-    The financial management super app for expenses, corporate cards, and more.
-  </p>
-  <a href="https://bit.ly/3rneTTI" target="_blank">
-    <p align="center">
-      Click to learn more
-    </p>
-  </a>
-</p>
-
 ## Preview
 
 ![](https://raw.githubusercontent.com/FaridSafi/react-native-google-places-autocomplete/master/Assets/screenshot.png)

package/example/App.js

@@ -0,0 +1,221 @@
+import React, { useState } from 'react';
+import {
+  StyleSheet,
+  View,
+  Text,
+  KeyboardAvoidingView,
+  Platform,
+  ScrollView,
+  Alert,
+} from 'react-native';
+import { StatusBar } from 'expo-status-bar';
+import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';
+import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
+
+// Replace with your Google Places API Key
+const GOOGLE_PLACES_API_KEY = 'YOUR_API_KEY_HERE';
+
+export default function App() {
+  const [selectedPlace, setSelectedPlace] = useState(null);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView
+        style={styles.container}
+        edges={['top', 'bottom', 'left', 'right']}
+      >
+        <StatusBar style='auto' />
+        <KeyboardAvoidingView
+          style={styles.keyboardAvoidingView}
+          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+          keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : 20}
+        >
+          <ScrollView
+            style={styles.scrollView}
+            keyboardShouldPersistTaps='handled'
+            contentContainerStyle={styles.contentContainer}
+            nestedScrollEnabled={true}
+          >
+            <View style={styles.header}>
+              <Text style={styles.title}>Google Places Autocomplete</Text>
+              <Text style={styles.subtitle}>Example App</Text>
+            </View>
+
+            <View style={styles.section}>
+              <GooglePlacesAutocomplete
+                placeholder='Search for a place'
+                onPress={(data, details = null) => {
+                  console.log('Selected place:', data);
+                  console.log('Place details:', details);
+                  setSelectedPlace({ data, details });
+                  Alert.alert('Place Selected', data.description);
+                }}
+                query={{
+                  key: GOOGLE_PLACES_API_KEY,
+                  language: 'en',
+                }}
+                fetchDetails={true}
+                styles={{
+                  textInputContainer: {
+                    backgroundColor: 'transparent',
+                    borderTopWidth: 0,
+                    borderBottomWidth: 0,
+                  },
+                  textInput: {
+                    marginLeft: 0,
+                    marginRight: 0,
+                    height: 50,
+                    color: '#5d5d5d',
+                    fontSize: 16,
+                    borderWidth: 1,
+                    borderColor: '#ddd',
+                    borderRadius: 8,
+                    paddingHorizontal: 12,
+                  },
+                  predefinedPlacesDescription: {
+                    color: '#1faadb',
+                  },
+                }}
+                debounce={200}
+              />
+            </View>
+
+            {selectedPlace && (
+              <View style={styles.resultSection}>
+                <Text style={styles.sectionTitle}>Selected Place</Text>
+                <View style={styles.resultBox}>
+                  <Text style={styles.resultLabel}>Description:</Text>
+                  <Text style={styles.resultText}>
+                    {selectedPlace.data.description}
+                  </Text>
+                  {selectedPlace.details && (
+                    <>
+                      <Text style={styles.resultLabel}>Address:</Text>
+                      <Text style={styles.resultText}>
+                        {selectedPlace.details.formatted_address}
+                      </Text>
+                      {selectedPlace.details.geometry && (
+                        <>
+                          <Text style={styles.resultLabel}>Coordinates:</Text>
+                          <Text style={styles.resultText}>
+                            Lat: {selectedPlace.details.geometry.location.lat},
+                            Lng: {selectedPlace.details.geometry.location.lng}
+                          </Text>
+                        </>
+                      )}
+                    </>
+                  )}
+                </View>
+              </View>
+            )}
+
+            {GOOGLE_PLACES_API_KEY === 'YOUR_API_KEY_HERE' && (
+              <View style={styles.footer}>
+                <Text style={styles.footerText}>
+                  Make sure to replace YOUR_API_KEY_HERE with your actual Google
+                  Places API key in App.js
+                </Text>
+              </View>
+            )}
+          </ScrollView>
+        </KeyboardAvoidingView>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#f5f5f5',
+  },
+  keyboardAvoidingView: {
+    flex: 1,
+  },
+  scrollView: {
+    flex: 1,
+  },
+  contentContainer: {
+    padding: 16,
+  },
+  header: {
+    marginBottom: 24,
+    alignItems: 'center',
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: 'bold',
+    color: '#333',
+    marginBottom: 8,
+  },
+  subtitle: {
+    fontSize: 16,
+    color: '#666',
+  },
+  section: {
+    backgroundColor: '#fff',
+    padding: 16,
+    borderRadius: 12,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+  sectionTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#333',
+    marginBottom: 12,
+  },
+  resultSection: {
+    marginTop: 24,
+    backgroundColor: '#fff',
+    padding: 16,
+    borderRadius: 12,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+  resultBox: {
+    backgroundColor: '#f9f9f9',
+    padding: 12,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: '#e0e0e0',
+  },
+  resultLabel: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#666',
+    marginTop: 8,
+    marginBottom: 4,
+  },
+  resultText: {
+    fontSize: 14,
+    color: '#333',
+    marginBottom: 4,
+  },
+  footer: {
+    marginTop: 16,
+    marginBottom: 32,
+    padding: 12,
+    backgroundColor: '#fff3cd',
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: '#ffc107',
+  },
+  footerText: {
+    fontSize: 12,
+    color: '#856404',
+    textAlign: 'center',
+  },
+});

package/example/README.md

@@ -0,0 +1,64 @@
+# Google Places Autocomplete Example
+
+This is an example Expo project to test the `react-native-google-places-autocomplete` library locally.
+
+## Setup
+
+1. **Install dependencies:**
+
+   ```bash
+   cd example
+   npm install
+   # or
+   yarn install
+   ```
+
+2. **Get your Google Places API Key:**
+
+   - Go to [Google Cloud Console](https://console.cloud.google.com/)
+   - Create a new project or select an existing one
+   - Enable the "Places API" (Web Service)
+   - Create credentials (API Key)
+   - Optionally, enable "Geocoding API" if you want to use current location features
+
+3. **Add your API Key:**
+
+   - Open `App.js`
+   - Replace `YOUR_API_KEY_HERE` with your actual Google Places API key
+
+4. **Run the app:**
+
+   ```bash
+   npm start
+   # or
+   yarn start
+   ```
+
+   Then press:
+
+   - `i` for iOS simulator
+   - `a` for Android emulator
+   - `w` for web browser
+
+## Features Demonstrated
+
+This example app demonstrates:
+
+- **Basic Search**: Simple autocomplete search functionality
+- **Current Location**: Using the current location feature
+- **Predefined Places**: Adding predefined places like Home and Work
+- **Place Details**: Fetching detailed information about selected places
+
+## Testing Local Changes
+
+Since this example uses `file:..` to link to the parent library, any changes you make to the library files in the parent directory will be reflected in this example app. You may need to:
+
+1. Restart the Expo development server after making changes to the library
+2. Clear the cache if changes aren't reflected: `npm start -- --clear` or `yarn start --clear`
+
+## Notes
+
+- Make sure you have the Expo CLI installed globally: `npm install -g expo-cli` (optional, as npx can be used)
+- For iOS, you'll need Xcode installed
+- For Android, you'll need Android Studio and an emulator set up
+- The library requires a valid Google Places API key to function

package/example/app.json

@@ -0,0 +1,24 @@
+{
+  "expo": {
+    "name": "Google Places Autocomplete Example",
+    "slug": "google-places-autocomplete-example",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "assetBundlePatterns": ["**/*"],
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "com.example.googleplacesautocomplete"
+    },
+    "android": {
+      "adaptiveIcon": {
+        "backgroundColor": "#ffffff"
+      },
+      "package": "com.example.googleplacesautocomplete"
+    }
+  }
+}

package/example/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

package/example/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "google-places-autocomplete-example",
+  "version": "1.0.0",
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web"
+  },
+  "dependencies": {
+    "expo": "^54.0.25",
+    "expo-status-bar": "~3.0.8",
+    "react": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-google-places-autocomplete": "file:..",
+    "react-native-safe-area-context": "~5.6.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0"
+  },
+  "private": true
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-google-places-autocomplete",
-  "version": "2.5.7",
+  "version": "2.6.1",
   "description": "Customizable Google Places autocomplete component for iOS and Android React-Native apps",
   "main": "GooglePlacesAutocomplete.js",
   "types": "GooglePlacesAutocomplete.d.ts",
@@ -30,13 +30,13 @@
   "homepage": "https://github.com/FaridSafi/react-native-google-places-autocomplete#readme",
   "dependencies": {
     "lodash.debounce": "^4.0.8",
-    "prop-types": "^15.7.2",
     "qs": "~6.9.1",
-    "uuid": "^10.0.0"
+    "react-native-uuid": "^2.0.3"
   },
   "devDependencies": {
     "@react-native-community/eslint-config": "2.0.0",
     "eslint": "7.10.0",
+    "eslint-plugin-prettier": "^3.1.2",
     "husky": "4.3.0",
     "lint-staged": "10.4.0",
     "prettier": "2.1.2",