harshq / react-native-mentions Goto Github PK

Hi, is there anyway to hide the scrollbar, in my case the horizontal scroll bar?

RN ScrollView has the prop showsHorizontalScrollIndicator={false}, perhaps this could be passed into the MentionsTextInput component to handle this.

Can we allow multiple triggers?

For our use case, we use @ to target users and # to target channels. Different autocomplete values... As trigger is a string, it cannot do this at the moment.

It looks like identifyKeyword would be compatible with that string being a regex pattern (eg [@#] or (@|#)) but onChangeText does a literal last character comparison...

What do you think?

• When I am trying to set suggestion panel with absolute suggested row won't clickable but when I'm trying with iOS its clickable. I'm using mention textInput as a composer of following url library. https://github.com/FaridSafi/react-native-gifted-chat

Style: suggestionPanelContainer: {
    backgroundColor: 'rgba(100,100,100,0.1)',
    width: DeviceUiInfo.screenSize.width - pageMargin * 2,
    position: 'absolute',
    top: -150,
    zIndex: 1
  }

I've tried with all possible attempts I've failed to get desired output. @harshq please help to overcome this problem.

Hello, I love this MentionsTextInput component!

Now, I am facing the following challenge : I need to give a different font colour to the mention that the user has selected (like mentions on Facebook). For this I will have to split (or embed) the TextInput component. This seems quite difficult/complex.

Has anyone already given some thought on how to approach this?

Actually, what I need is Facebook's Draft.js capabilities on React Native. So far, this module is the thing that brought me the closest. Any suggestion on which direction to move forward, is highly appreciated!

Thank you.

Hi, is it possible to customize the background-color of the @mention, like Facebook for example ? And to delete the all @mention name in one click and not delete letter by letter like now ?

Thank you for this awesome library!

Would you know how can we add the option to highlight the mentions after selection?

Can you provide the support for InputAccessoryView in which the suggestion list will stick on top of the keyboard on iOS?

Something like this:

Thanks.

Should this be isTrackingStarted?

Animated: useNativeDriver was not specified. This is a required option and must be explicitly set to true or false

So I type @m and get this...

If I select the user martin, this happens:

The package size is extremely large and taking tons of time to download in my system.
Please remove the sample from the published package using npmignore.

check this out,
wget https://registry.yarnpkg.com/react-native-mentions/-/react-native-mentions-1.1.4.tgz

Something is causing the package size to bloat hugely

Thanks for this splendid library.

How do you get this library to respect the vertical padding set to the textinputstyle? And is there anyway to not have to set a min and max height to the textinput?

Normally, RN's textinput respects the padding set on a textinput so that as you fill in multiple lines of text the vertical padding is respected. With RNM the textinput's vertical padding disappears as soon as multiple lines of text are inputted. At times it looks like its trying to adjust and add the padding in toward the bottom fo the text but there's a delay to it.

Also, unless you specify a minimum height the textinput collapses. Is it necessary to compensate for the positioning of the suggestions row?

@harshq
I noticed that the new version of this package not support props for root view style, implemented in my PR #10.

ref 7c70981#diff-a8eb8d969b80431379d772201132a07fR100

Is there some reason?

This assumes all usernames match that syntax.

We have a username with @first.lastname. The result of this code is that the keyword passed to our triggerCallback does not contain anything including and after the dot.

Suggest that the regex is exposed as a param and defaults to its current value?

I just would like to ask if how do you enable the mention trigger after typing two characters after @. Thanks :)

It is imposible to show the keyboard with this.inputRef.focus() because there seems to be no way to use ref?

Am I missing something here, it would be super nice to have this!

I'm hoping to duplicate the exact user experience with facebook's mobile app....

I was wondering if it's possible to display a human name "John Davis" rather than just "@JohnDavis3", based on the item selected? And then when pressing backspace, that it clear the full name (or last name) all at once, rather than one letter at a time?

I noticed there was info on how to add background coloring (#7), but that shows the formatted text absolutely positioning on top of the textinput, which has transparent text... This would work except the only issue is if we're using a human name instead of the encoded @name, it's likely not the same length so the cursor is going to be in the wrong place. The human name could be longer than the @name (which could be padded), but it could also be shorter (which can't really be padded).

Any suggestions?

I cannot install it with NPM or YARN, why and how to fix it? thanks

React-Native Errors on
onChange={(event) => { this.setState({ textInputHeight: this.props.textInputMinHeight >= event.nativeEvent.contentSize.height ? this.props.textInputMinHeight : event.nativeEvent.contentSize.height, }); } }
at event.nativeEvent.contentSize.height

Problem

No value is returned for languages other than English.
Can other languages be supported?

Code

const callback = (keyword) => { console.log(keyword); }
<MentionsTextInput triggerCallback={callback} />

Any chance to place the options in the bottom, just below the text, instead of in the upper section?

Hello,
samples folder (410MB) has been included in the published package which lead to a package size of 140MB.
Can you please bump a new version without this folder to reduce the package size?

Just run into this components, I was developing something quite alike components as your's, and there's tough issue that when input the trigger word at the middle of text, it should be show the suggestionView, I havent not run the demo, just viewed the code, i thought the component might be helpless at this case.
my solution is to diff the changed text every time to decide to show/off the suggestion view when onKeyPress listener receive the provided trigger value

no offense, just as a test case

This is what I mean.

1. On Instagram comments, type:
   @john
2. Tap on any user suggestion
3. The result text comment will be:
   @john (notice the white space)
   The suggestions UI will disappear.
4. Delete the whitespace and the suggestions appear again.

How would we add this feature?

I was looking for a component to manage mention suggestion in my app and I found yours. The only problem is that I also need in the same input a hashtag suggestion.

I can't do it with your component because the prop trigger only accepts a string.

Do you think we could change this to also accept an array of string (['@', '#'] for my case)?

If you think it could be added to your component but you don't have time to implement it just tell me and I will create a PR for that.

Good job for the component!

Does it have to be horizontal by default?
I wish we could set it's orientation. Is this something you'd be willing to add/change?

Oh and thanks for the library.

Is it possible to separate the suggestion panel flatlist into another component? It's more than a bit tricky right now to position the mentions box when it's inside the same view as the textinput. I'm attempting to have it sit flush on top of a textinput which has buttons on either end but that doesn't seem to be possible without some sort of position: 'absolute' gymnastics which won't work on android due to overflow issues.

Hello,

I am having an issue with the callback function. I have trigger={'#'} so when I type # then it does show me the suggestions. However, suggestions does not get updated with matching suggestions when I continue typing.

Below is the example of what I mean

Here is my code for MentionsTextInput:

Here is my callback function:

I am actually importing sample hashTag data from local json file through
import * as hashTagData from '../data/sampleHashTagData.json';

And in the componentDidMount(), I am setting that data to the state:
componentDidMount() { this.setState({ hashTags: hashTagData.results, }); }

Could you anyone please help me solve this issue?

Access to overwrite any props of the FlatList would be helpful. Maybe through the usage of a object?

<MentionsTextInput
  // ...
  listProps={{
    nestedScrollEnabled: true
  }}
/>

Thank you!

Hello,

I have this error

A VirtualizedList contains a cell which itself contains more than one VirtualizedList of the same orientation as the parent list. You must pass a unique listKey prop to each sibling list.

please add prop listKey to Flatlist. Thanks

It seems as if this is always stuck on 'Write a comment...'.

First of all thanks for this great package!

How do I require a minimum of characters? For example, I don't what all the suggestions to appear after the @ sign is typed. Only after one character.

@harshq The suggestions should be position absolute so that content is not pushed upwards when the list is rendered.