add missing props to the readme. options -> actions

Author: kesha-antonov

README.md

@@ -355,10 +355,12 @@ interface QuickReplies {
 - **`messageContainerRef`** _(FlatList ref)_ - Ref to the flatlist
 - **`textInputRef`** _(TextInput ref)_ - Ref to the text input
 - **`messages`** _(Array)_ - Messages to display
+- **`messagesContainerStyle`** _(Object)_ - Custom style for the messages container
 - **`isTyping`** _(Bool)_ - Typing Indicator state; default `false`. If you use`renderFooter` it will override this.
 - **`keyboardBottomOffset`** _(Integer)_ - Distance between the bottom of the screen and bottom of the `GiftedChat` component. Useful when you have a tab bar or navigation bar; default is `0`. Needed for correct keyboard avoiding behavior. Without it you might see gap between the keyboard and the input toolbar if you have a tab bar, navigation bar, or safe area.
 - **`isKeyboardInternallyHandled`** _(Bool)_ - Determine whether to handle keyboard awareness inside the plugin. If you have your own keyboard handling outside the plugin set this to false; default is `true`
 - **`text`** _(String)_ - Input text; default is `undefined`, but if specified, it will override GiftedChat's internal state (e.g. for redux; [see notes below](#notes-for-redux))
+- **`initialText`** _(String)_ - Initial text to display in the input field
 - **`onInputTextChanged`** _(Function)_ - Callback when the input text changes
 - **`messageIdGenerator`** _(Function)_ - Generate an id for new messages. Defaults to UUID v4, generated by [uuid](https://github.com/kelektiv/node-uuid)
 - **`user`** _(Object)_ - User sending the messages: `{ _id, name, avatar }`
@@ -400,13 +402,17 @@ interface QuickReplies {
 - **`renderMessageText`** _(Function)_ - Custom message text
 - **`renderMessageImage`** _(Function)_ - Custom message image
 - **`renderMessageVideo`** _(Function)_ - Custom message video
+- **`renderMessageAudio`** _(Function)_ - Custom message audio
 - **`imageProps`** _(Object)_ - Extra props to be passed to the [`<Image>`](https://reactnative.dev/docs/image.html) component created by the default `renderMessageImage`
+- **`imageStyle`** _(Object)_ - Custom style for message images
 - **`videoProps`** _(Object)_ - Extra props to be passed to the video component created by the required `renderMessageVideo`
 - **`isCustomViewBottom`** _(Bool)_ - Determine whether renderCustomView is displayed before or after the text, image and video views; default is `false`
 - **`renderCustomView`** _(Function)_ - Custom view inside the bubble
 - **`renderDay`** _(Function)_ - Custom day above a message
 - **`renderTime`** _(Function)_ - Custom time inside a message
+- **`timeTextStyle`** _(Object)_ - Custom text style for time inside messages (supports left/right styles)
 - **`renderFooter`** _(Function)_ - Custom footer component on the ListView, e.g. `'User is typing...'`; see [App.tsx](/example/App.tsx) for an example. Overrides default typing indicator that triggers when `isTyping` is true.
+- **`renderTypingIndicator`** _(Function)_ - Custom typing indicator component
 - **`renderChatEmpty`** _(Function)_ - Custom component to render in the ListView when messages are empty
 - **`renderChatFooter`** _(Function)_ - Custom component to render below the MessageContainer (separate from the ListView)
 - **`renderInputToolbar`** _(Function)_ - Custom message composer container
@@ -415,6 +421,9 @@ interface QuickReplies {
 - **`renderSend`** _(Function)_ - Custom send button; you can pass children to the original `Send` component quite easily, for example, to use a custom icon ([example](https://github.com/FaridSafi/react-native-gifted-chat/pull/487))
 - **`renderAccessory`** _(Function)_ - Custom second line of actions below the message composer
 - **`onPressActionButton`** _(Function)_ - Callback when the Action button is pressed (if set, the default `actionSheet` will not be used)
+- **`actionSheet`** _(Function)_ - Custom action sheet interface for showing action options
+- **`actions`** _(Array)_ - Custom action options for the input toolbar action button; array of objects with `title` (string) and `action` (function) properties
+- **`actionSheetOptionTintColor`** _(String)_ - Tint color for action sheet options
 - **`focusOnInputWhenOpeningKeyboard`** _(Bool)_ - Focus on <TextInput> automatically when opening the keyboard; default `true`
 - **`minInputToolbarHeight`** _(Integer)_ - Minimum height of the input toolbar; default is `44`
 - **`listProps`** _(Object)_ - Extra props to be passed to the messages [`<FlatList>`](https://reactnative.dev/docs/flatlist.html); some props can't be overridden, see the code in `MessageContainer.render()` for details
@@ -463,9 +472,12 @@ Example:
 * **`onQuickReply`** _(Function)_ - Callback when sending a quick reply (to backend server)
 * **`renderQuickReplies`** _(Function)_ - Custom all quick reply view
 * **`quickReplyStyle`** _(StyleProp<ViewStyle>)_ - Custom quick reply view style
+* **`quickReplyTextStyle`** _(StyleProp<TextStyle>)_ - Custom text style for quick reply buttons
+* **`quickReplyContainerStyle`** _(StyleProp<ViewStyle>)_ - Custom container style for quick replies
 * **`renderQuickReplySend`** _(Function)_ - Custom quick reply **send** view
 * **`shouldUpdateMessage`** _(Function)_ - Lets the message component know when to update outside of normal cases.
 * **`typingIndicatorStyle`** _(StyleProp<ViewStyle>)_ - Custom style for the TypingIndicator component.
+* **`handleOnScroll`** _(Function)_ - Custom scroll event handler for the message list
 
 ## Notes for [Redux](https://github.com/reactjs/redux)
 

src/Actions.tsx

@@ -14,8 +14,8 @@ import { useChatContext } from './GiftedChatContext'
 import stylesCommon from './styles'
 
 export interface ActionsProps {
-  options?: { [key: string]: () => void }
-  optionTintColor?: string
+  actions?: Array<{ title: string, action: () => void }>
+  actionSheetOptionTintColor?: string
   icon?: () => ReactNode
   wrapperStyle?: StyleProp<ViewStyle>
   iconTextStyle?: StyleProp<TextStyle>
@@ -24,8 +24,8 @@ export interface ActionsProps {
 }
 
 export function Actions ({
-  options,
-  optionTintColor = Color.optionTintColor,
+  actions,
+  actionSheetOptionTintColor = Color.optionTintColor,
   icon,
   wrapperStyle,
   iconTextStyle,
@@ -35,28 +35,26 @@ export function Actions ({
   const { actionSheet } = useChatContext()
 
   const onActionsPress = useCallback(() => {
-    if (!options)
+    if (!actions?.length)
       return
 
-    const optionKeys = Object.keys(options)
-    const cancelButtonIndex = optionKeys.indexOf('Cancel')
+    const titles = actions.map(item => item.title)
 
     actionSheet().showActionSheetWithOptions(
       {
-        options: optionKeys,
-        cancelButtonIndex,
-        tintColor: optionTintColor,
+        options: titles,
+        cancelButtonIndex: titles.length - 1,
+        tintColor: actionSheetOptionTintColor,
       },
-      (buttonIndex: number | undefined) => {
+      (buttonIndex?: number) => {
         if (buttonIndex === undefined)
           return
 
-        const key = optionKeys[buttonIndex]
-        if (key)
-          options[key]()
+        const item = actions[buttonIndex]
+        item.action?.()
       }
     )
-  }, [actionSheet, options, optionTintColor])
+  }, [actionSheet, actions, actionSheetOptionTintColor])
 
   const renderIcon = useCallback(() => {
     if (icon)

src/GiftedChat/index.tsx

@@ -27,6 +27,7 @@ import Animated, {
   withTiming,
   runOnJS,
 } from 'react-native-reanimated'
+import { SafeAreaProvider } from 'react-native-safe-area-context'
 import { Actions } from '../Actions'
 import { Avatar } from '../Avatar'
 import Bubble from '../Bubble'
@@ -45,14 +46,13 @@ import { Send } from '../Send'
 import stylesCommon from '../styles'
 import { SystemMessage } from '../SystemMessage'
 import { Time } from '../Time'
+
 import {
   IMessage,
 } from '../types'
-
 import * as utils from '../utils'
 import styles from './styles'
 import { GiftedChatProps } from './types'
-import { SafeAreaProvider } from 'react-native-safe-area-context'
 
 dayjs.extend(localizedFormat)
 

src/GiftedChat/types.ts

@@ -77,8 +77,8 @@ export interface GiftedChatProps<TMessage extends IMessage> extends Partial<Mess
   minComposerHeight?: number
   /* composer min Height */
   maxComposerHeight?: number
-  options?: { [key: string]: () => void }
-  optionTintColor?: string
+  actions?: Array<{ title: string, action: () => void }>
+  actionSheetOptionTintColor?: string
   quickReplyStyle?: StyleProp<ViewStyle>
   quickReplyTextStyle?: StyleProp<TextStyle>
   quickReplyContainerStyle?: StyleProp<ViewStyle>

src/InputToolbar.tsx

@@ -8,8 +8,8 @@ import { Send, SendProps } from './Send'
 import { IMessage } from './types'
 
 export interface InputToolbarProps<TMessage extends IMessage> {
-  options?: { [key: string]: () => void }
-  optionTintColor?: string
+  actions?: Array<{ title: string, action: () => void }>
+  actionSheetOptionTintColor?: string
   containerStyle?: StyleProp<ViewStyle>
   primaryStyle?: StyleProp<ViewStyle>
   accessoryStyle?: StyleProp<ViewStyle>
@@ -31,8 +31,8 @@ export function InputToolbar<TMessage extends IMessage = IMessage> (
     renderComposer,
     renderSend,
     renderAccessory,
-    options,
-    optionTintColor,
+    actions,
+    actionSheetOptionTintColor,
     icon,
     wrapperStyle,
     containerStyle,
@@ -43,8 +43,8 @@ export function InputToolbar<TMessage extends IMessage = IMessage> (
   const actionsFragment = useMemo(() => {
     const props = {
       onPressActionButton,
-      options,
-      optionTintColor,
+      actions,
+      actionSheetOptionTintColor,
       icon,
       wrapperStyle,
       containerStyle,
@@ -56,8 +56,8 @@ export function InputToolbar<TMessage extends IMessage = IMessage> (
   }, [
     renderActions,
     onPressActionButton,
-    options,
-    optionTintColor,
+    actions,
+    actionSheetOptionTintColor,
     icon,
     wrapperStyle,
     containerStyle,