Skip to main content
Version: 0.1.7

Kabelwerk Message

The <KabelwerkMessage> component renders a single chat message in a room.

Probably you will not directly use the <KabelwerkMessage> component in your code — on the contrary, it is likely that you will want to replace it with a component of your own.

Example

<KabelwerkMessage
message={message}
theirMarker={42}
renderCheckmarks={(number) => number == 2 && <Text>seen</Text>}
renderTime={(d) => <Text>{d.toTimeString().substring(0, 5)}</Text>}
onPress={(message) =>
message.type != 'text' && Linking.openURL(message.upload.original.url)
}
onLongPress={(message) =>
message.type == 'text' && Clipboard.setString(message.text)
}
style={{ borderRadius: 10 }}
/>

Props

message

A chat message object. Please refer to the JavaScript SDK docs for more information about chat message objects.

theirMarker

The ID of the latest message marked by someone on the hub side. This is used to determine the number of checkmarks shown in the bottom right corner of messages posted by the connected user.

renderCheckmarks

The function used to render the checkmarks in the bottom right corner of messages posted by the connected user. The default is to simply render the corresponding number of ✓ symbols. If you do not want to have checkmarks, pass a falsy value. This prop is not relevant for messages which have not been posted by the connected user.

renderTime

The function used to render the message's posting time in the bottom right corner of the component. The function is invoked with the posting timestamp as a Date object. The default is to render a HH:MM string (the 24-hour format).

onPress

Called — with the chat message object — when the user presses the component. The default is to do nothing if the message is a text message and to open the browser with the message's upload otherwise.

onLongPress

Called — with the chat message object — when the user long-presses the component. The default is to copy the message's text to the clipboard if the message is a text message and to do nothing otherwise.

style

An object with extra styles to be applied to the message container component. You may want to use this to, for example, set a different background colour for messages authored by the connected user.

See also