Skip to main content
Version: Next

Kabelwerk Message Form

The <KabelwerkMessageForm> component renders an input form for posting new messages in a chat room.

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

Example​

// example using expo-document-picker
const pickFile = function () {
  return DocumentPicker.getDocumentAsync({
    copyToCacheDirectory: false,
    type: ['image/jpeg', 'image/png'],
  }).then((result) => {
    if (result.type == 'cancel') {
      return Promise.reject();
    }

    return {
      name: result.name,
      type: result.mimeType,
      uri: result.uri,
    };
  });
};

<KabelwerkMessageForm
  postMessage={postMessage}
  postUpload={postUpload}
  pickFile={pickFile}
/>;

Props​

postMessage​

Called when the user intends to post a new message in the chat room via the form. Called with an { text } object for text messages and with an { uploadId } object for image messages. It should return a Promise which resolves if the message has been posted successfully.

postUpload​

Called when the user intends to upload a new file in the chat room via the form. Called with the resolved value of the pickFile callback (see below). It should return a Promise which resolves into an upload object if the file has been uploaded successfully.

pickFile​

Called when the user intends to pick a file for uploading in the chat room. Called without arguments, the function should return a Promise which resolves into an { name, type, uri } object — which can then be uploaded to the Kabelwerk backend via the postUpload callback.

See also​