Custom Autocomplete Suggestion List

AutoComplete suggestion list and its components can be customized using the props which are introduced in the Channel component. The following props are useful for customizing the components:

The Header and the Item components are exposed used within the list component in the FlatList.

The above props allow customizing the different parts of the list as header, list item and the entire list at once.

The available suggestion trigger types are:

command
emoji
mention

The customized version can be rendered conditionally for the appropriate cases and the default implementation can be rendered otherwise.

Customizing Header component

The Header is the component which is rendered at the top of the autocomplete suggestion list. It can be customized using the prop AutoCompleteSuggestionHeader.

The props for the component are:

triggerType: The trigger type of the suggestion list.
queryText: The custom value to be displayed in the header component.

An example for the same would be as follows:

import { AutoCompleteSuggestionHeader } from 'stream-chat-react-native';
import { Text } from 'react-native';

<Channel
  AutoCompleteSuggestionHeader={({ queryText, triggerType }) => {
    if (triggerType === 'command') {
      return <Text>Command Header Component</Text>;
    } else if (triggerType === 'emoji') {
      return <Text>Emoji Header Component</Text>;
    } else {
      return <AutoCompleteSuggestionHeader queryText={queryText} triggerType={triggerType} />;
    }
  }}
>
  {/* The underlying components */}
</Channel>;

Note: The default AutoCompleteSuggestionHeader must be returned if you don’t want any change for a particular trigger type.

Customizing Item Component

The List Item component can be customized in the similar way as the Header is customized above. To customize it we use the AutoCompleteSuggestionItem prop in the Channel component.

The props for the component are as follows:

triggerType: The trigger type of the suggestion list
itemProps: They are different for the different trigger types. The command type accepts name and args. The emoji type if of type Emoji and the mention type is of SuggestionUser<Us>.

import { Avatar, AutoCompleteSuggestionItem } from 'stream-chat-react-native';
import { Text, View } from 'react-native';

<Channel
  AutoCompleteSuggestionItem={({ itemProps, triggerType }) => {
    if (triggerType === 'command') {
      return (
        <View>
          <Text>{itemProps.name}</Text>
          <Text>{itemProps.args}</Text>
        </View>
      );
    } else if (triggerType === 'mention') {
      const { id, image, name, online } = itemProps;
      return (
        <View>
          <Avatar image={image} name={name} online={online} size={30} />
          <Text>{itemProps.name}</Text>
        </View>
      );
    } else {
      return <AutoCompleteSuggestionItem itemProps={itemProps} triggerType={triggerType} />;
    }
  }}
>
  {/*The underlying components*/}
</Channel>;

Note: The default AutoCompleteSuggestionItem must be returned if you don’t want any change for a particular trigger type.

Customizing the AutoComplete suggestion list

The list can also be entirely customized with its own header, item and other definitions. This can be done using the prop AutoCompleteSuggestionList in the Channel component.

The props available to the component are:

active: Checks the list is active or not.
data: The array of the suggestions which will be displayed on the list.
onSelect: The function which is triggered when the item is selected.
queryText: The value of the query text which a user types in the input.
triggerType: The trigger type of the suggestion list.

An example to demonstrate the same is as follows. The different ways of usage is also explained:

import { AutoCompleteSuggestionHeader, AutoCompleteSuggestionItem } from 'stream-chat-react-native';
import { FlatList, Text, View } from 'react-native';

<Channel
  AutoCompleteSuggestionList={({ data, onSelect, queryText, triggerType }) => {
    if (triggerType === 'command') {
      return (
        <View>
          <View>
            <Text>Command suggestions for {queryText}</Text>
          </View>
          {data.map(item => (
            <AutoCompleteSuggestionItem itemProps={item} key={item.name} triggerType={triggerType} />
          ))}
        </View>
      );
    } else if (triggerType === 'emoji') {
      return (
        <FlatList
          data={data}
          keyboardShouldPersistTaps='always'
          ListHeaderComponent={<AutoCompleteSuggestionHeader queryText={queryText} triggerType={triggerType} />}
          renderItem={({ index, item }) => (
            <TouchableOpacity
              onPress={() => {
                onSelect(item);
              }}
            >
              <Text>{item.unicode}</Text>
            </TouchableOpacity>
          )}
        />
      );
    } else {
      return (
        <View>
          <AutoCompleteSuggestionHeader queryText={queryText} triggerType={triggerType} />
          {data.map(item => (
            <AutoCompleteSuggestionItem itemProps={item} key={item.name} triggerType={triggerType} />
          ))}
        </View>
      );
    }
  }}
>
  {/*The underlying components*/}
</Channel>;

Note: The default AutoCompleteSuggestionList must be returned if you don’t want any change for a particular trigger type.

Customize Auto complete emoji search result

Our AutoCompleteSuggestionList already support emoji search using a query that starts with : in the message input, on a default data set that can be found here.

We allow overriding this behaviour and the default search behaviour by using the emojiSearchIndex prop in the Channel component.

An example to do the same is as followed:

import { Channel, EmojiSearchIndex } from 'stream-chat-react-native';
import search from '@jukben/emoji-search';

const ChannelScreen: React.FC<ChannelScreenProps> = ({ navigation }) => {
  const customEmojiSearchIndex: EmojiSearchIndex = {
    search: (query: string) => {
      const results = search(query);
      return results.slice(0, 10).map(data => ({
        name: data.name,
        names: data.keywords,
        unicode: data.name,
        skins: [],
      }));
    },
  };

  return (
    <Channel
      channel={channel}
      emojiSearchIndex={customEmojiSearchIndex}
      keyboardVerticalOffset={headerHeight}
      thread={thread}
    >
      {/* Underlying components here */}
    </Channel>
  );
};

Please make sure you follow the type of the Emoji which is defined as below:

type Emoji = {
  id: string;
  name: string;
  names: string[];
  unicode: string;
  skins?: string[];
};

Custom Message Input

Custom Channel Background