Highlight mentions?

[oferRounds]

Thank you for this awesome library!

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

[azkahi]

You can use ParsedText. Check out this library react-native-parsed-text

[lizzieshipwreck]

@azkahi does this actually work inside the text input (i.e. while the user is typing?) I'm currently using react-native-parsed-text to highlight the mentions when they appear as regular <Text> components that render in my app's comment feed - but it doesn't seem like there's a way to highlight the mentions while the user is actually typing the text into the input.

[Abhishek-Sankey]

@lizzieshipwreck you can use parsedText as a children of TextInput and you're good to go....
Example:
<TextInput
...props>
<Parsedtext
...props>
thi.state.text
close tags

[oferRounds]

Got you, thank you for the answers!

[dabakovich]

You can try a react-native-controlled-mentions that is not rich in configuration yet but enough stable for use in projects.
https://github.com/dabakovich/react-native-controlled-mentions#readme

[oferRounds]

@dabakovich thanks! I think you should add there some screenshots, it‘s hard to get an impression without them

[dabakovich]

@dabakovich thanks! I think you should add there some screenshots, it‘s hard to get an impression without them

Thanks! I plan to add demo gifs later. But for now you can play with the library on Expo Snack that I think it's much better then just looking at the pictures.

[The0racle]

@Abhishek-Sankey Can you provide an example of how to use it? If I provide children to MentionsTextInput then the suggestions popup does not work.

    <MentionsTextInput
      textInputStyle={{ borderColor: '#ebebeb', borderWidth: 1, padding: 5, fontSize: 15 }}
      suggestionsPanelStyle={{ backgroundColor: 'rgba(100,100,100,0.1)' }}
      loadingComponent={() => (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <ActivityIndicator />
        </View>
      )}
      textInputMinHeight={30}
      trigger={'@'}
      triggerLocation={'new-word-only'} // 'new-word-only', 'anywhere'
      onChangeText={(val) => {
        setValue(val)
      }}
      triggerCallback={callback}
      renderSuggestionsRow={renderSuggestionsRow}
      suggestionsData={data} // array of objects
      keyExtractor={(item, index) => item.id}
      suggestionRowHeight={45}
      horizontal={false} // defaut is true, change the orientation of the list
      MaxVisibleRowCount={3} // this is required if horizontal={false}
    >
    {value}
    </MentionsTextInput>

[oferRounds]

@dabakovich most people won’t try a UI library before they see some screenshots...

[Abhishek-Sankey]

@The0racle I haven't used react-native mentions for implementing mentions. Instead, used TextInput for taking input, made my own component to render suggestions, and used react-native-parsed-text to highlight the mentions. This way you can implement mentions or hashtags easily.
The only issue I'm having is: I want to show firstName lastName just like Facebook does, instead of showing the only username(Instagram does this). I'm open to suggestions.

[Abhishek-Sankey]

@dabakovich tried your expo project. It misbehaves when you have more than one mentions

[The0racle]

@Abhishek-Sankey Got it. Thanks!

[dabakovich]

@dabakovich most people won’t try a UI library before they see some screenshots...

You are right. Just added a demo gif to the package home page :)

[dabakovich]

@dabakovich tried your expo project. It misbehaves when you have more than one mentions

Thanks a lot for your comment! Unfortunately expo snack was using an outdated library version. The bug is fixed already. You can try it again if you wish.

[The0racle]

@Abhishek-Sankey Could you share your code? I'm using a TextInput the same way you did, with react-native-parsed-text inside the TextInput, but I'm having the following issue:

• Mentions somebody; parsing works fine and mentions is displayed;
• When a move the TextInput cursor after the mention, it goes back to being a normal text.

[dabakovich]

@Abhishek-Sankey Could you share your code? I'm using a TextInput the same way you did, with react-native-parsed-text inside the TextInput, but I'm having the following issue:

• Mentions somebody; parsing works fine and mentions is displayed;
• When a move the TextInput cursor after the mention, it goes back to being a normal text.

@The0racle unfortunately, it doesn't work that way. Against, you can check this react-native-controlled-mentions library. It uses one workaround to solve the highlighting issue more gracefully.

[The0racle]

Thanks @dabakovich. I had checked your library before but it seems you fixed the issues I encountered. I'll let you know if it works.

[anhquan291]

@Abhishek-Sankey Can you provide an example of how to use it? If I provide children to MentionsTextInput then the suggestions popup does not work.

    <MentionsTextInput
      textInputStyle={{ borderColor: '#ebebeb', borderWidth: 1, padding: 5, fontSize: 15 }}
      suggestionsPanelStyle={{ backgroundColor: 'rgba(100,100,100,0.1)' }}
      loadingComponent={() => (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <ActivityIndicator />
        </View>
      )}
      textInputMinHeight={30}
      trigger={'@'}
      triggerLocation={'new-word-only'} // 'new-word-only', 'anywhere'
      onChangeText={(val) => {
        setValue(val)
      }}
      triggerCallback={callback}
      renderSuggestionsRow={renderSuggestionsRow}
      suggestionsData={data} // array of objects
      keyExtractor={(item, index) => item.id}
      suggestionRowHeight={45}
      horizontal={false} // defaut is true, change the orientation of the list
      MaxVisibleRowCount={3} // this is required if horizontal={false}
    >
    {value}
    </MentionsTextInput>

Same problem here since MentionTextInput requires the value. When I pass in the Value then the textinput content will be repeated... When I remove the highlight mention works but suggestions doesn't.
Any helps, please.
Thanks a lot

[erickgtzh]

@Abhishek-Sankey Can you provide an example of how to use it? If I provide children to MentionsTextInput then the suggestions popup does not work.

    <MentionsTextInput
      textInputStyle={{ borderColor: '#ebebeb', borderWidth: 1, padding: 5, fontSize: 15 }}
      suggestionsPanelStyle={{ backgroundColor: 'rgba(100,100,100,0.1)' }}
      loadingComponent={() => (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <ActivityIndicator />
        </View>
      )}
      textInputMinHeight={30}
      trigger={'@'}
      triggerLocation={'new-word-only'} // 'new-word-only', 'anywhere'
      onChangeText={(val) => {
        setValue(val)
      }}
      triggerCallback={callback}
      renderSuggestionsRow={renderSuggestionsRow}
      suggestionsData={data} // array of objects
      keyExtractor={(item, index) => item.id}
      suggestionRowHeight={45}
      horizontal={false} // defaut is true, change the orientation of the list
      MaxVisibleRowCount={3} // this is required if horizontal={false}
    >
    {value}
    </MentionsTextInput>

Same problem here since MentionTextInput requires the value. When I pass in the Value then the textinput content will be repeated... When I remove the highlight mention works but suggestions doesn't.
Any helps, please.
Thanks a lot

Hi! I'm trying to highlight mentions, did you find something to fix it?
Thanks in advance!