Member List for PubNub Chat Components for React Native

USED BY THE OLD IA, PLEASE DISREGARD

Renders a list of members.

It can represent all users of the application, only members of the current channel, users currently subscribed/present on the channel, or whatever else is passed into it. Custom memberRenderer can be used to modify how the users are rendered. For example you can add presence indicators.

Component​

Check the source code of the Member List component and its preview on the right.

You are set as Sue Flores.


USED BY THE OLD IA, PLEASE DISREGARD

Try it out​

Modify the source code of the component to your liking and see the changes live on the preview. For example, you can change the theme to dark or uncomment one of the configurable parameters to see how you can modify the component's default behavior.

Parameters​

You can configure the component using these parameters:

members?#
Type: UserEntity[] | string[]
Option to pass a list of members, including metadata, to render on the list.
Default value
[]
presentMembers?#
Type: string[]
Option to pass a list of present member IDs to mark them with a presence indicator.
Default value
[]
selfText?#
Type: string
This text is added after current user's name.
Default value
"(You)"
sort?#
Type: (a: UserEntity, b: UserEntity) => -1 | 0 | 1
Members are sorted by presence and alphabetically by default, you can override that by providing a sorter function.
Default value
n/a
extraActionsRenderer?#
Type: (member: UserEntity) => JSX.Element
Provide extra actions renderer to add custom action buttons to each member.
Default value
n/a
memberRenderer?#
Type: (member: UserEntity) => JSX.Element
Option to provide a custom user renderer to override themes and styles.
Default value
n/a
onMemberClicked?#
Type: (member: UserEntity) => unknown
Callback run when a user clicked one of the members.
Default value
n/a
onMemberLongPressed?#
Type: (member: UserEntity) => unknown
Callback run when a user long pressed one of the members. Can be used for extra actions menu.
Default value
n/a
style?#
Type: MemberListStyle
Option to provide a custom StyleSheet for the component. It will be merged with the default styles.
Default value
n/a

Was this page useful?

Last updated on