Composer Bar

A message composer. The field grows line by line up to a limit, and the button on the right turns from a microphone into a send arrow as soon as there is text, with the two glyphs swapping on a spring. On the web Enter sends and Shift+Enter starts a new line. It clears itself after sending and keeps focus, so you can keep typing. Built for React Native and Expo with react-native only; this page previews it in the browser through react-native-web.

Installation

CLI

npx @modus-ui/cli add composer-bar

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/composer-bar.tsx.
3. Paste the code.

It needs no packages beyond react-native, which your Expo or React Native app already has.

Usage

import { useState } from "react";
import { ComposerBar } from "@/components/ui/composer-bar";

export default function Example() {
  const [text, setText] = useState("");

  return (
    <ComposerBar
      value={text}
      onChangeText={setText}
      onSend={(message) => console.log("send", message)}
      onAttach={() => console.log("attach")}
      onRecord={() => console.log("record")}
    />
  );
}

Props