mention formatting messed

[anilios]

I am working on an app, in which user can add posts like FB. App has @ mention feature.

So when user type any mention following with some simple text and navigate to select images/hashtags(some other screen) and comes back to post screen after selection. The mentioned text is not shown formatted as it was displayed while typed. I have tried many ways to fix but all in vain.

Please help me to fix this.

[mrazadar]

Hi @anilios can you reproduce this with provided demo application in /example folder? if you can explain this way; I can test on my end.

Meanwhile if you are navigating from the InputView to some other view and coming back on InputView, this might get resolved with initialValue fix I just published last week.

[anilios]

I am already using initialValue prop.

Try following scenario to reproduce, add some text to input box like:

"Hello @mrazadar, How are you doing?"

Navigate to other screen (hashtag selection) and then come back.

"Hello @mrazadar, How are you doing?"

Same text will be shown but @mrazadar will no longer be highlighted.

[mrazadar]

If you see the source Editor/index.js
This is the constructor code which set the mentions for initialValue.

    if (props.initialValue && props.initialValue !== "") {
      const { map, newValue } = EU.getMentionsWithInputText(props.initialValue);
      this.mentionsMap = map;
      msg = newValue;
      formattedMsg = this.formatText(newValue);
      setTimeout(()=>{
        this.sendMessageToFooter(newValue);
      });
    }

Can you debug; this code runs when you navigate back to EditorScreen? Just wanted to see if component re-rendered or not.

Does your component get mounted all the time? Maybe you can debug some lifecycle component methods as well?

[anilios]

I don't know but this is working now. I have to add length >0 check to initialValue

onChangeHandler = message => { /** * this callback will be called whenever input value change and will have * formatted value for mentioned syntax * */ const { displayText, text } = message; let { params } = this.state; message.displayText = displayTextWithMentions(text, formatMentionNode); params.postMessage = message; this.setState({ params }); }); };

<Editor onRef={function(_textInput) { if (!isAndroid() && _textInput) { _textInput.setNativeProps({ placeholder: '' }); } }} editorStyles={{ mainContainer: { borderWidth: 0, width: '100%' }, input: { width: '100%' } }} initialValue={(postMessage && postMessage.text.length>0) ? postMessage.text : ''} list={this.mentionedUserList()} onChange={this.onChangeHandler} toggleEditor={this.toggleEditor} showEditor={true} onHideMentions={this.onHideMentions} placeholder={'What do you want to share'} />

Thanks for your efforts and time.

[mrazadar]

Nice.. that's a good news. I wish I have more time to spent on this package. Need contributors.. :(