Customize 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 listitemProps
: They are different for the different trigger types. Thecommand
type acceptsname
andargs
. Theemoji
type if of type Emoji and themention
type is ofSuggestionUser<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.