joeroddy / react-native-tag-autocomplete Goto Github PK

I would like to change background color of list suggestion.
Please how can i make it?

Thanks for the great package, do you have a way to limit the number of text input boxes? I want a user to only be able to select one tag. (once 1 tag has been selected no further text input boxes should be displayed).

I need to show the dropdown above the keyboard. But it always behind the keyboard.

If the user place the pointer in-between any word and click on the space means, it not create the tag.

createTagOnSpace ={true} not worked here.

Hello,
I use the tag autocomplete component, I would like to make the border to the component.
Please, how can I do it?

Hi, Just installed and when I imported it in the app, I am getting this error:

image
Did everything presented in the error but no luck, any suggestions?

My suggestion list is too long to view on a page hence, it is hidden when page ends and i can not see all the suggestions, s how can i add a scroll bar in suggestions list so that user can scroll down the list and no record gets lost.

I have entered a new word in the suggestions. But it not shown as tag it goes above the input text(not shown in the input text box).

1. Enter any input
2. It not shown in the input text field
3. Again search for the same word (It rendering the word)
4. Form as a tag

Can you please provide a demo which can run in android ?
As per your example : https://www.npmjs.com/package/react-native-tag-autocomplete
I am getting this error.

I'm having this warning VirtualizedList: missing keys for items, make sure to specify a key or id property on each item or provide a custom keyExtractor. how to solve this one?

Hi thanks for the work on this been helpful. couple of questions:

1. is there any plans to enable ability to style the dropdown list of suggested selection
2. limit inputs to 1

Thanks again.

Scrolling is not user friendly for the liststyle. Any option to highlight the scrolling indicator?

when I tap on the box, the suggestion list appears on top of other components in ios.

however on android it works well, when the list appears the other components slide down

1. If a user place the cursor in-between a word and then clicks double space, it change to full stop.

2. After enter the words it remains in the input box.
   
   

Can we have cursor next to the tag we just created/selected?
Can we use back/clear press to remove tags?

I am trying to enact what Gmail app does (the To parameter of Gmail app)

After having upgraded all my dependencies, including this library and its dependency react-native-autocomplete-input, I'm facing the following error :

Error: Objects are not valid as a React child (found: object with keys {id, first_name, last_name, locale, code, trigram, _model, name}). If you meant to render a collection of children, use an array instead.

This is due to the fact that since version 5.x of react-native-autocomplete-input, the renderItem has been moved within the flatListProps like so :

diff --git a/node_modules/react-native-tag-autocomplete/index.js b/node_modules/react-native-tag-autocomplete/index.js
index 291f3e0..95b8aab 100644
--- a/node_modules/react-native-tag-autocomplete/index.js
+++ b/node_modules/react-native-tag-autocomplete/index.js
@@ -122,15 +122,17 @@ export default class AutoTags extends Component {
           onSubmitEditing={this.onSubmitEditing}
           multiline={true}
           autoFocus={this.props.autoFocus === false ? false : true}
-          renderItem={({ item, i }) => (
-            <TouchableOpacity onPress={e => this.addTag(item)}>
-              {this.props.renderSuggestion ? (
-                this.props.renderSuggestion(item)
-              ) : (
-                <Text>{item.name}</Text>
-              )}
-            </TouchableOpacity>
-          )}
+          flatListProps={{
+            renderItem: ({ item, i }) => (
+              <TouchableOpacity onPress={e => this.addTag(item)}>
+                {this.props.renderSuggestion ? (
+                  this.props.renderSuggestion(item)
+                ) : (
+                  <Text>{item.name}</Text>
+                )}
+              </TouchableOpacity>
+            )
+          }}
           inputContainerStyle={
             this.props.inputContainerStyle || styles.inputContainerStyle
           }

With this update, this library is compatible with react-native-autocomplete-input 5.x.

Either this lib should stick to the react-native-autocomplete-input 4.2.x version or be patched with the above.

While I am typing any input in the input field I can't able to see the input text box. The keyboard shown above the input textbox while using this package. Kindly suggest any solution for me

@JoeRoddy we are using RN >0.60
As ListView is deprecated we are unable to use react-native-tag-autocomplete both in Android & iOS. Please provide me a fix. Thanks in advance

React-native-tag-autocomplete is not working on IOS and perfectly working on Android. Please provide me a fix. Thanks in advance

Is there any way to limit the selected tag lines upto 2 lines.

Here I has 4 lines and also we can add more tags. Refer the below attachment

While Creating a tag by pressing the Enter Key does not work for me. Anyhow it recognizes the Space Key and works properly.
<AutoTags
suggestions={this.state.items}
tagsSelected={this.state.selectedItems}
handleAddition={this.handleAddition}
handleDelete={this.handleDelete}
onCustomTagCreated={(value) => this.handleInput(value)}
createTagOnSpace={true}
placeholder="Choose Cliks to share" />

handleDelete = index => {
let tagsSelected = this.state.selectedItems;
tagsSelected.splice(index, 1);
this.setState({ selectedItems: tagsSelected });
}

handleAddition = suggestion => {
    this.setState({ selectedItems: this.state.selectedItems.concat([suggestion]) });
}

handleInput = (value) => {
    this.setState({ selectedItems: this.state.selectedItems.concat([{ "name": value }]) });
}

I Have tested the code on Both Mobile and Web platforms. but :(

I used react-native-tag-autocomplete in my app. Everything is OK on Android and Iphone, but when I run app on Ipad, it has a problem in display in the picture I attached.
I set marginLeft is 20, but at first, the input text display in the center of the screen. When I select an item on suggestions, it displays on the left with margin left is 20.
Please help me. Thanks so much.

To make the autocomplete working in Android, I added a wrapper with the style below:

  autocompleteContainer: {
    flex: 1,
    left: 0,
    position: 'absolute',
    right: 0,
    top: 100,  //<<==make tag input below 2 input elements
    zIndex: 1
  },

Here top is increased to 100 to give space for other 2 input elements. Here is the render code:

import {Textarea, Item, Icon, Input, Text,  Header, Container, Content, Form } from 'native-base';

 return (
           
    <Container style={styles.container}>
        
            <Header>
                //header
            </Header>
            
            <Content style={styles.contentContainer}
                showsHorizontalScrollIndicator={false}
                showsVerticalScrollIndicator={false}
                >
                    <Form>
                        <Input onChangeText={nameChange} placeholder={'Name'} />  //<<==input Name
                        <Textarea padder rowSpan={2} bordered placeholder="Spec" onChangeText={despChange} />  //<<==input desp
                        
                        <View style={styles.autocompleteContainer}>  //<<==View wrapper
                        <AutoTags  //<<==here is tag input
                            style={styles.tags}
                            keyExtractor={(item, index) => item + index}
                            suggestions={tagSelection}
                            tagsSelected={tagSelected}
                            handleAddition={addTag}
                            handleDelete={deleteTag}
                            placeholder="Tag.." />
                        </View>
                    </Form>
        ...
   )

Here is how the screen look like:

Now the tag input field is on top of rest of the view and overlap. how to make the tag input align with other elements?

Hello,
I use the tag autocomplete component in my react native app and I want to change the background color of this component.
How can I do this ?

I want to get suggestion from backend on autocomplete.

How do we make the same effect (circled) if the text entered is not in one of the suggestions array? In this case, 'tambayan' is not in the list. Thank you.

Hi, thank you for the great work,
I'm looking for a way to implement this library but with a custom template for the dropdown list, example: displaying an icon flag on the right side
is there a way we can add our own template?

thank you so much.

I am using AutoTags, but here I am facing issue with the Keyboard. If I pointed the pointer inside the text input box the keyboard hide the inputbox. Here I need to scroll up the page to see the input field.

Note: I have used ScrollView inside the KeyboardAvoidingView

I need a clarification here. Is there is any props to check the focus is inside the AutoTags inputbox