Chat Input with Custom Keyboard Accessory

Build a chat input component for a React Native mobile messaging application that provides a custom accessory view above the keyboard with quick action buttons.

Capabilities

Custom Keyboard Accessory View

Create a custom accessory view that appears above the keyboard when the text input is focused, containing action buttons that the user can tap.

• The accessory view displays a "Send" button and a "Cancel" button in a horizontal row @test
• The "Send" button triggers a callback function when pressed @test
• The "Cancel" button dismisses the keyboard when pressed @test

Text Input Integration

Integrate the keyboard accessory with a text input field that allows users to type messages.

• The text input field accepts multi-line text input @test
• The text input field shows the custom keyboard accessory when focused @test
• The component maintains the current input text in its state @test

Implementation

@generates

API

import React from 'react';

export interface ChatInputProps {
  onSendMessage: (message: string) => void;
  placeholder?: string;
}

export const ChatInput: React.FC<ChatInputProps>;

Dependencies { .dependencies }

react-native { .dependency }

Provides InputAccessoryView component for custom keyboard accessories, TextInput for text entry, and other UI components.

@satisfied-by