Enrich Your App Interactions with react-native-mentions

Introducing react-native-mentions, an open-source component by mt-robotics, engineered to seamlessly implement mentioning functionality within your React Native applications. This robust library, woven with React Native and TypeScript, is designed for ease of use and effective integration.

Here are the standout features of react-native-mentions:

1. Versatile Mention Types: Whether you're tagging users, hashtags, or links, it's got you covered.
2. Customizable Mention Styles: Tailor the appearance of mentions to align with your app's aesthetics.
3. Mention Search: A feature that enables real-time search, making mention selection smoother.

Getting started with react-native-mentions is as simple as importing the module into your React Native application:

import React, { useState } from "react";
import { Mentions, TextInput } from "react-native-mentions";

const App = () => {
  const [text, setText] = useState("");

  return (
    <View>
      <TextInput
        placeholder="Type a mention"
        value={text}
        onChangeText={setText}
      />
      <Mentions
        mentions={[
          {id: "1", name: "John Doe"},
          {id: "2", name: "Jane Doe"},
          {id: "3", name: "Sam Smith"},
        ]}
        onChange={({ mention }) => {
          console.log(mention);
        }}
      />
    </View>
  );
};

export default App;

The above snippet unveils a textual input field within your app, allowing users to type mentions. As users type, a list of mention suggestions unfurls, from which a mention can be selected.

Further, react-native-mentions allows you to set different types of mentions through the mentions attribute, and customize mention styles via the style attribute, as shown in the examples below:

// Custom mention styles
const style = {
  container: {
    backgroundColor: "#ccc",
  },
  mention: {
    color: "#fff",
  },
};

<Mentions
  mentions={mentions}
  style={style}
/>

// Enable mention search
<Mentions
  mentions={mentions}
  searchable={true}
/>