Add "index" to renderRow function (#678)

Co-authored-by: Marco Marinangeli <marco.marinangeli@cortislentini.it>
FaridSafi · Jan 25, 2021 · cc2e67b · cc2e67b
1 parent ca8e5b6
commit cc2e67b
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 7 deletions.
diff --git a/GooglePlacesAutocomplete.d.ts b/GooglePlacesAutocomplete.d.ts
@@ -412,7 +412,7 @@ interface GooglePlacesAutocompleteProps {
   renderHeaderComponent?: () => JSX.Element | React.ComponentType<{}>;
   renderLeftButton?: () => JSX.Element | React.ComponentType<{}>;
   renderRightButton?: () => JSX.Element | React.ComponentType<{}>;
-  renderRow?: (data: GooglePlaceData) => JSX.Element | React.ComponentType<{}>;
+  renderRow?: (data: GooglePlaceData, index: number) => JSX.Element | React.ComponentType<{}>;
   // sets the request URL to something other than the google api.  Helpful if you want web support or to use your own api.
   requestUrl?: RequestUrl;
   styles?: Partial<Styles> | Object;

diff --git a/GooglePlacesAutocomplete.js b/GooglePlacesAutocomplete.js
@@ -546,9 +546,9 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
     return <ActivityIndicator animating={true} size='small' />;
   };
 
-  const _renderRowData = (rowData) => {
+  const _renderRowData = (rowData, index) => {
     if (props.renderRow) {
-      return props.renderRow(rowData);
+      return props.renderRow(rowData, index);
     }
 
     return (
@@ -592,7 +592,7 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
     return null;
   };
 
-  const _renderRow = (rowData = {}) => {
+  const _renderRow = (rowData = {}, index) => {
     return (
       <ScrollView
         contentContainerStyle={
@@ -619,7 +619,7 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
             ]}
           >
             {_renderLoader(rowData)}
-            {_renderRowData(rowData)}
+            {_renderRowData(rowData, index)}
           </View>
         </TouchableHighlight>
       </ScrollView>
@@ -745,7 +745,7 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
           keyExtractor={keyGenerator}
           extraData={[dataSource, props]}
           ItemSeparatorComponent={_renderSeparator}
-          renderItem={({ item }) => _renderRow(item)}
+          renderItem={({ item, index }) => _renderRow(item, index)}
           ListEmptyComponent={
             stateText.length > props.minLength && props.listEmptyComponent
           }

diff --git a/README.md b/README.md
@@ -249,7 +249,7 @@ _This list is a work in progress. PRs welcome!_
 | renderHeaderComponent         | function | use the `ListHeaderComponent` from `FlatList` when showing autocomplete results                                                                                                                                                             |                                                                   |                                                            |
 | renderLeftButton              | function | add a component to the left side of the Text Input                                                                                                                                                                                          |                                                                   |                                                            |
 | renderRightButton             | function | add a component to the right side of the Text Input                                                                                                                                                                                         |                                                                   |                                                            |
-| renderRow                     | function | custom component to render each result row (use this to show an icon beside each result)                                                                                                                                                    |                                                                   |                                                            |
+| renderRow                     | function | custom component to render each result row (use this to show an icon beside each result). *data* and *index* will be passed as input parameters                                                                                                                                                    |                                                                   |                                                            |
 | requestUrl                    | object   | used to set the request url for the library                                                                                                                                                                                                 |                                                                   |                                                            |
 | returnKeyType                 | string   | the return key text https://reactnative.dev/docs/textinput#returnkeytype                                                                                                                                                                    | 'search'                                                          |                                                            |
 | styles                        | object   | See styles section below                                                                                                                                                                                                                    |                                                                   |                                                            |