@lowkey/react-native-mentions-input

Mentions input for tagging user (@username).

2.0.0 Update

2.0.0 update @lowkey/react-native-mentions-input: Thanks to @evgenusov for refactoring and optimising this library!

Installation

npm install @lowkey/react-native-mentions-input

or

yarn add @lowkey/react-native-mentions-input

Usage

import MentionsInput, {parseMarkdown} from '@lowkey/react-native-mentions-input';

Input

| Property | Type | Description| | ------------- | ------------- | ------------- | | value | string | Value of the input | | placeholder | string | Placeholder string for input | | placeholderTextColor | string | Color of placeholder text | | multiline | boolean | Boolean indicating whether input multiline or not | | leftComponent | ReactNode | Component rendered on the left side of the input | | rightComponent | ReactNode | Component rendered on the right side of the input | | innerComponent | ReactNode | Component rendered inside of the input | | textInputStyle | ViewStyle | Style of the input (TextInput) | | suggestedUsersComponent | ReactNode | Component for suggested users triggered by @ | | users | { id: string; name: string; avatar: string; } [] | List of users to be suggested in suggestedUsersComponent |

<MentionsInput
    value={value}
    onTextChange={onChangeText}
    onMarkdownChange={(markdown: string) => setMarkdown(markdown)}
    onFocusStateChange={(isFocused: booldean) => console.log('Input is focused', isFocused )}
    mentionStyle={styles.mentionStyle}
    textInputStyle={styles.textInputStyle}
    users={[
      {
        id: '5f5f2b120a958f2e6b2ff0d1',
        name: 'The Maximus The Bestus',
        avatar:
          'https://images.pexels.com/photos/1561020/pexels-photo-1561020.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=50',
      },
    ]}
    suggestedUsersComponent={(users, addMentions) => (
      <View
        style={{
          alignSelf: 'stretch',
          backgroundColor: '#fff',
          borderTopLeftRadius: 10,
          borderTopRightRadius: 10,
          position: 'absolute',
          top: -(USER_ITEM_HEIGHT * users.length),
          left: 0,
          right: 0,
        }}
      >
        {users.map((user: any) => (
          <TouchableOpacity onPress={() => addMentions(user)}>
            <View key={user.id} style={styles.suggestedUserComponentStyle}>
              <Image
                source={{ uri: user.avatar }}
                style={styles.suggestedUserComponentImageStyle}
              />
              <Text>{user.name}</Text>
            </View>
          </TouchableOpacity>
        ))}
      </View>
    )}
/>

Parsing markdown

parseMarkdown(markdown, mentionStyle)

onMarkdownChange returns markdown of the input. To parse the markdown use helper function parseMarkdown, which parses markdown into array of <Text> nodes.

URL are parssed to <TouchableWithoutFeedback> node, which open parsed URL with Linking.openURL()

| Argument | Type | Description| | ------------- | ------------- | ------------- | | markdown | string | Markdown string to be parsed | | mentionStyle | TextStyle | Style of parsed mentions | | urlStyle | TextStyle | Style of parsed urls |

<View style={styles.exampleContainer}>
  <Text style={styles.exampleHeader}>Parsed Text</Text>
  <Text>{parseMarkdown(markdown, styles.mentionStyle)}</Text>
</View>

Example Styles

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#f5f5f5',
    },
    textInputStyle: {
        backgroundColor: '#fff',
        width: width * 0.8,
        height: USER_ITEM_HEIGHT,
        borderRadius: 5,
        paddingHorizontal: 10,
        borderColor: '#c1c1c1',
        borderWidth: StyleSheet.hairlineWidth,
    },
    suggestedUserComponentImageStyle: {
        width: USER_ITEM_HEIGHT * 0.65,
        height: USER_ITEM_HEIGHT * 0.65,
        backgroundColor: '#f1f1f1',
        borderRadius: 10,
        marginRight: 5,
    },
    suggestedUserComponentStyle: {
        alignItems: 'center',
        paddingHorizontal: 10,
        height: USER_ITEM_HEIGHT,
        flexDirection: 'row',
    },
    mentionStyle: {
        fontWeight: '500',
        color: 'blue',
    },

    // Example styles
    sendButtonStyle: {
        marginTop: 20,
        width: 100,
        height: 40,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#efefef',
        borderRadius: 15,
    },
    exampleContainer: {
        alignSelf: 'stretch',
        flexDirection: 'column',
        paddingHorizontal: 30,
        marginVertical: 30,
    },
    exampleHeader: {
        fontWeight: '700',
    }
});

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.