@@ -13,8 +13,13 @@ A customizable React Native TextInput component for Google Places Autocomplete u
13
13
- 🔍 Custom place types filtering
14
14
- 🌐 Multi-language support
15
15
16
- ## Screenshot
17
- <img src =" https://github.com/user-attachments/assets/1eb0c4da-4a2e-453e-a6b4-d63bf7fa4d20 " width =" 320 " />
16
+ ## Preview
17
+
18
+ <table >
19
+ <tr >
20
+ <td><img width="260" src="assets/places-search-demo.gif" alt="Places Search Demo"></td>
21
+ </tr >
22
+ </table >
18
23
19
24
## Installation
20
25
@@ -31,17 +36,67 @@ yarn add react-native-google-places-textinput
31
36
32
37
## Usage
33
38
39
+ ### Basic Example
34
40
``` javascript
35
41
import GooglePlacesTextInput from ' react-native-google-places-textinput' ;
36
42
37
43
const YourComponent = () => {
38
44
const handlePlaceSelect = (place ) => {
39
- if (place) {
40
- console .log (' Selected place:' , place);
45
+ console .log (' Selected place:' , place);
46
+ };
47
+
48
+ const basicStyles = {
49
+ container: {
50
+ width: ' 100%' , // Ensure full width
51
+ paddingHorizontal: 16 ,
52
+ },
53
+ input: {
54
+ height: 40 , // Comfortable touch target
41
55
}
42
56
};
43
57
44
- // Example with custom styles
58
+ return (
59
+ < GooglePlacesTextInput
60
+ apiKey= " YOUR_GOOGLE_PLACES_API_KEY"
61
+ onPlaceSelect= {handlePlaceSelect}
62
+ style= {basicStyles}
63
+ / >
64
+ );
65
+ };
66
+ ```
67
+
68
+ <details >
69
+ <summary >Example with Places API Configuration</summary >
70
+
71
+ ``` javascript
72
+ const ConfiguredExample = () => {
73
+ const handlePlaceSelect = (place ) => {
74
+ console .log (' Selected place:' , place);
75
+ };
76
+
77
+ return (
78
+ < GooglePlacesTextInput
79
+ apiKey= " YOUR_GOOGLE_PLACES_API_KEY"
80
+ onPlaceSelect= {handlePlaceSelect}
81
+ languageCode= " fr"
82
+ types= {[' restaurant' , ' cafe' ]}
83
+ includedRegionCodes= {[' fr' , ' be' ]}
84
+ minCharsToFetch= {2 }
85
+ / >
86
+ );
87
+ };
88
+ ```
89
+ </details >
90
+
91
+ <details >
92
+ <summary >Example with Full Styling</summary >
93
+
94
+ ``` javascript
95
+ const StyledExample = () => {
96
+ const handlePlaceSelect = (place ) => {
97
+ console .log (' Selected place:' , place);
98
+ };
99
+
45
100
const customStyles = {
46
101
container: {
47
102
width: ' 100%' ,
@@ -82,30 +137,36 @@ const YourComponent = () => {
82
137
apiKey= " YOUR_GOOGLE_PLACES_API_KEY"
83
138
placeHolderText= " Search for a place"
84
139
onPlaceSelect= {handlePlaceSelect}
85
- languageCode= " en"
86
140
style= {customStyles}
87
141
/ >
88
142
);
89
143
};
90
144
```
145
+ </details >
91
146
92
147
## Props
93
148
94
149
| Prop | Type | Required | Default | Description |
95
150
| ------| ------| ----------| ---------| -------------|
151
+ | ** Essential Props** |
96
152
| apiKey | string | Yes | - | Your Google Places API key |
153
+ | ** Input Configuration** |
97
154
| value | string | No | '' | Initial input value |
98
155
| placeHolderText | string | No | - | Placeholder text for input |
156
+ | minCharsToFetch | number | No | 1 | Minimum characters before fetching |
157
+ | debounceDelay | number | No | 200 | Delay before triggering search |
158
+ | ** Places API Configuration** |
99
159
| proxyUrl | string | No | - | Custom proxy URL for Places API requests |
100
160
| languageCode | string | No | - | Language code (e.g., 'en', 'fr') |
101
161
| includedRegionCodes | string[ ] | No | - | Array of region codes to filter results |
102
162
| types | string[ ] | No | [ ] | Array of place types to filter |
103
163
| biasPrefixText | string | No | - | Text to prepend to search query |
104
- | minCharsToFetch | number | No | 1 | Minimum characters before fetching |
105
- | onPlaceSelect | (place: Place \| null) => void | Yes | - | Callback when place is selected |
106
- | debounceDelay | number | No | 200 | Delay before triggering search |
107
- | showLoadingIndicator | boolean | No | true | Show/hide loading indicator |
164
+ | ** UI Customization** |
108
165
| style | StyleProp | No | {} | Custom styles object |
166
+ | showLoadingIndicator | boolean | No | true | Show/hide loading indicator |
167
+ | showClearButton | boolean | No | true | Show/hide the input clear button |
168
+ | ** Event Handlers** |
169
+ | onPlaceSelect | (place: Place \| null) => void | Yes | - | Callback when place is selected |
109
170
| onTextChange | (text: string) => void | No | - | Callback triggered on text input changes |
110
171
111
172
## Methods
156
217
157
218
---
158
219
220
+ Written by Amit Palomo
221
+
159
222
Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
0 commit comments