react-native-gifted-chat 2.8.2-alpha.4 → 2.9.0-alpha.0

package/CHANGELOG_2.8.1_to_2.8.2-alpha.5.md

@@ -0,0 +1,374 @@
+# Changelog: v2.8.1 to v2.8.2-alpha.5
+
+## 🚨 BREAKING CHANGES
+
+### Removed Dependencies
+- **Removed `react-native-lightbox-v2`**: The library now uses a custom Modal implementation for viewing images
+  - ❌ Removed prop: `lightboxProps` from `MessageImageProps`
+  - ❌ Removed prop: `lightboxProps` from `GiftedChatProps`
+  - The image viewer now uses `react-native-zoom-reanimated` for zoom functionality
+
+### New Required Peer Dependencies
+- ✅ **`react-native-gesture-handler`** (>=2.0.0) - now required
+- ✅ **`react-native-safe-area-context`** (>=5.0.0) - now required
+- Updated **`react-native-reanimated`** peer dependency to support both v3 and v4 (>=3.0.0 || ^4.0.0)
+
+### Renamed Props (GiftedChatProps)
+
+#### Action Sheet Props
+- ❌ `options` → ✅ `actions` (type changed from `{ [key: string]: () => void }` to `Array<{ title: string, action: () => void }>`)
+- ❌ `optionTintColor` → ✅ `actionSheetOptionTintColor`
+
+#### Keyboard Props
+- ❌ `bottomOffset` → ✅ `keyboardBottomOffset`
+
+#### Message Event Handlers
+- ❌ `onPress` → ✅ `onPressMessage`
+- ❌ `onLongPress` → ✅ `onLongPressMessage`
+
+#### LoadEarlier Component
+- ❌ `LoadEarlier` → ✅ `LoadEarlierMessages` (component renamed)
+- ❌ `LoadEarlierProps` → ✅ `LoadEarlierMessagesProps` (type renamed)
+
+### Removed Props (GiftedChatProps)
+
+#### Keyboard & Input Props
+- ❌ `keyboardShouldPersistTaps` - removed (keyboard handling is now managed internally)
+- ❌ `maxInputLength` - removed (use `textInputProps.maxLength` instead)
+- ❌ `placeholder` - removed (use `textInputProps.placeholder` instead)
+- ❌ `disableComposer` - removed (use `textInputProps.editable={false}` instead)
+
+#### Load Earlier Props
+- ❌ `loadEarlier` - removed from GiftedChatProps (use `loadEarlierMessagesProps.isAvailable` instead)
+- ❌ `isLoadingEarlier` - removed from GiftedChatProps (use `loadEarlierMessagesProps.isLoading` instead)
+- ❌ `onLoadEarlier` - removed from GiftedChatProps (use `loadEarlierMessagesProps.onPress` instead)
+- ❌ `infiniteScroll` - removed (use `loadEarlierMessagesProps.isInfiniteScrollEnabled` instead)
+
+#### ListView Props
+- ❌ `listViewProps` - removed (use `listProps` via MessageContainerProps instead)
+
+#### Parse Patterns
+- ❌ `parsePatterns` - removed (replaced with `matchers`)
+
+#### Explicit Props Moved to Parent Interface
+The following props were explicitly listed in GiftedChatProps in v2.8.1 but are now only available through the extended `MessageContainerProps`:
+- ❌ `messages` - removed as explicit prop (still available via MessageContainerProps)
+- ❌ `isTyping` - removed as explicit prop (still available via MessageContainerProps)
+- ❌ `inverted` - removed as explicit prop (still available via MessageContainerProps)
+- ❌ `alignTop` - removed as explicit prop (still available via MessageContainerProps)
+- ❌ `isScrollToBottomEnabled` - removed as explicit prop (still available via MessageContainerProps)
+- ❌ `scrollToBottomStyle` - removed as explicit prop (still available via MessageContainerProps)
+- ❌ `extraData` - removed as explicit prop (still available via MessageContainerProps)
+- ❌ `renderMessage` - removed as explicit prop (still available via MessageContainerProps)
+- ❌ `renderFooter` - removed as explicit prop (still available via MessageContainerProps)
+- ❌ `renderChatEmpty` - removed as explicit prop (still available via MessageContainerProps)
+- ❌ `renderDay` - removed as explicit prop (still available via MessageContainerProps)
+- ❌ `renderLoadEarlier` - removed as explicit prop (still available via MessageContainerProps)
+- ❌ `onQuickReply` - removed as explicit prop (still available via MessageContainerProps)
+
+**Important:** Since `GiftedChatProps` extends `Partial<MessageContainerProps<TMessage>>` in both versions, all MessageContainerProps are still available on GiftedChat. The difference is they're no longer explicitly redefined in the GiftedChatProps interface.
+
+### Removed Props (ComposerProps)
+- ❌ `placeholder` - removed (use `textInputProps.placeholder` instead)
+- ❌ `placeholderTextColor` - removed (use `textInputProps.placeholderTextColor` instead)
+
+### Removed Props (InputToolbarProps)
+- ❌ `options` → ✅ `actions` (renamed)
+- ❌ `optionTintColor` → ✅ `actionSheetOptionTintColor` (renamed)
+
+### Changed Props (GiftedChatProps)
+
+#### Type Changes
+- `textInputProps`: Changed from `object` to `Partial<React.ComponentProps<typeof TextInput>>`
+  - Now properly typed with all TextInput props available
+  - Use this for `placeholder`, `placeholderTextColor`, `maxLength`, `editable`, etc.
+
+#### MessageContainer Props
+- `invertibleScrollViewProps` removed - use individual props instead:
+  - `inverted` prop now passed directly
+  - Removed `keyboardShouldPersistTaps` (handled internally)
+
+#### Link Parsing
+- ❌ `parsePatterns` → ✅ `matchers`
+  - Now uses `react-native-autolink` instead of `react-native-parsed-text`
+  - See [react-native-autolink documentation](https://github.com/joshswan/react-native-autolink) for matcher configuration
+
+### New Props
+
+#### GiftedChatProps
+- ✅ `messageTextProps` - Extra props to be passed to the MessageText component
+- ✅ `matchers` - Custom parse patterns for react-native-autolink (replaces `parsePatterns`)
+- ✅ `keyboardBottomOffset` - Distance of the chat from the bottom of the screen (replaces `bottomOffset`)
+- ✅ `actions` - Array of action sheet options (replaces `options`)
+- ✅ `actionSheetOptionTintColor` - Tint color for action sheet (replaces `optionTintColor`)
+
+#### IMessage Interface
+- ✅ `location` - Optional location data with latitude and longitude:
+  ```typescript
+  location?: {
+    latitude: number
+    longitude: number
+  }
+  ```
+
+## 📦 Migration Guide
+
+### 1. Install New Dependencies
+
+```bash
+# Yarn
+yarn add react-native-gesture-handler react-native-safe-area-context
+
+# npm
+npm install react-native-gesture-handler react-native-safe-area-context
+
+# Expo
+npx expo install react-native-gesture-handler react-native-safe-area-context
+```
+
+### 2. Update Imports
+
+If you were importing `LoadEarlier`:
+```typescript
+// Before
+import { LoadEarlier, LoadEarlierProps } from 'react-native-gifted-chat'
+
+// After
+import { LoadEarlierMessages, LoadEarlierMessagesProps } from 'react-native-gifted-chat'
+```
+
+### 3. Update Props
+
+#### Action Sheet Props
+```typescript
+// Before
+<GiftedChat
+  options={{
+    'Action 1': () => console.log('Action 1'),
+    'Action 2': () => console.log('Action 2'),
+  }}
+  optionTintColor="#007AFF"
+/>
+
+// After
+<GiftedChat
+  actions={[
+    { title: 'Action 1', action: () => console.log('Action 1') },
+    { title: 'Action 2', action: () => console.log('Action 2') },
+  ]}
+  actionSheetOptionTintColor="#007AFF"
+/>
+```
+
+#### Keyboard Offset
+```typescript
+// Before
+<GiftedChat bottomOffset={50} />
+
+// After
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+
+function MyChat() {
+  const insets = useSafeAreaInsets()
+  const tabbarHeight = 50
+  const keyboardBottomOffset = insets.bottom + tabbarHeight
+
+  return <GiftedChat keyboardBottomOffset={keyboardBottomOffset} />
+}
+```
+
+#### Message Press Handlers
+```typescript
+// Before
+<GiftedChat
+  onPress={(context, message) => console.log('Pressed')}
+  onLongPress={(context, message) => console.log('Long pressed')}
+/>
+
+// After
+<GiftedChat
+  onPressMessage={(context, message) => console.log('Pressed')}
+  onLongPressMessage={(context, message) => console.log('Long pressed')}
+/>
+```
+
+#### Text Input Props
+```typescript
+// Before
+<GiftedChat
+  placeholder="Type a message..."
+  maxInputLength={1000}
+  disableComposer={false}
+/>
+
+// After
+<GiftedChat
+  textInputProps={{
+    placeholder: "Type a message...",
+    maxLength: 1000,
+    editable: true,
+  }}
+/>
+```
+
+#### Load Earlier Messages
+```typescript
+// Before
+<GiftedChat
+  loadEarlier={true}
+  isLoadingEarlier={isLoading}
+  onLoadEarlier={handleLoadEarlier}
+  renderLoadEarlier={(props) => <CustomLoadEarlier {...props} />}
+/>
+
+// After
+<GiftedChat
+  loadEarlierMessagesProps={{
+    loadEarlier: true,
+    isLoadingEarlier: isLoading,
+    onLoadEarlier: handleLoadEarlier,
+    renderLoadEarlier: (props) => <CustomLoadEarlier {...props} />,
+  }}
+/>
+```
+
+#### Link Parsing
+```typescript
+// Before
+<GiftedChat
+  parsePatterns={(linkStyle) => [
+    { pattern: /#(\w+)/, style: linkStyle, onPress: (tag) => console.log(tag) },
+  ]}
+/>
+
+// After
+<GiftedChat
+  matchers={[
+    {
+      pattern: /#(\w+)/,
+      style: { color: 'blue' },
+      onPress: (url, match) => console.log(match),
+    },
+  ]}
+/>
+```
+
+#### Lightbox Props (Image Viewer)
+```typescript
+// Before
+<GiftedChat
+  lightboxProps={{
+    backgroundColor: 'black',
+    // other lightbox props
+  }}
+/>
+
+// After
+// Custom image viewer is now built-in with react-native-zoom-reanimated
+// No props needed - just works out of the box
+<GiftedChat />
+```
+
+## ✨ New Features
+
+### TypeScript Improvements
+- Complete TypeScript conversion of the library
+- Better type safety for all props
+- Properly typed `textInputProps` with TextInput component types
+
+### Keyboard Handling
+- Improved keyboard handling with `react-native-keyboard-controller`
+- Better support for safe areas
+- More predictable keyboard offset behavior
+
+### Image Viewer
+- Custom built-in image viewer using `react-native-zoom-reanimated`
+- No external lightbox dependency needed
+- Better cross-platform support (including web)
+
+### SafeArea Integration
+- Built-in SafeAreaProvider integration
+- Better handling of notches and device-specific layouts
+
+### Link Parsing
+- Upgraded from `react-native-parsed-text` to `react-native-autolink`
+- Better URL, email, and phone number detection
+- More customizable matchers
+
+### Load Earlier Messages
+- Improved load earlier messages logic
+- Better UX with proper safe area handling
+- Consolidated props under `loadEarlierMessagesProps`
+
+## 🐛 Bug Fixes
+
+- Fixed scroll to bottom behavior on Android
+- Fixed load earlier messages display
+- Fixed keyboard offset calculations
+- Fixed TypeScript type inconsistencies
+- Fixed ESLint errors throughout the codebase
+- Fixed snapshot tests
+- Fixed message container reanimated issues
+- Fixed DayAnimated component and proper test coverage for renderDay prop
+- Fixed automatic scroll to bottom when `isScrollToBottomEnabled=false`
+- Fixed MessageText container styles
+- Fixed construct messages on send in examples
+
+## 🔧 Internal Improvements
+
+- Converted JavaScript to TypeScript throughout the library
+- Improved ESLint configuration with import sorting
+- Added support for Reanimated v3 and v4
+- Memoized values and functions for better performance
+- Better themed styles refactoring
+- Improved example app with tabs and different examples
+- Updated to latest React Native, Expo, and dependency versions
+- Removed unused dependencies (`react-native-iphone-x-helper`, `react-native-lightbox-v2`)
+- Replaced deprecated `TouchableWithoutFeedback` with `Pressable`
+- Added useCallbackThrottled for better scroll to bottom visibility
+- Removed redundant TextInput configs
+
+## 📚 Documentation Updates
+
+- Updated README with new installation instructions
+- Added working Expo Snack link
+- Better structure for props documentation
+- Added missing props to README
+- Fixed broken links
+- Added dark theme support in examples
+- Better keyboard offset documentation
+- Improved example readmes
+
+## 🧪 Testing
+
+- Fixed tests to run in correct timezone (Europe/Paris)
+- Updated snapshots for new components
+- Added proper test coverage for DayAnimated
+- Fixed test setup and configuration
+
+## 📋 Repository Changes
+
+- Added GitHub stale workflow
+- Removed package-lock.json (yarn-only repository)
+- Updated Node.js engine requirement to >=20
+- Various CI/CD improvements
+
+## ⚠️ Important Notes
+
+1. **This is an alpha release** - Test thoroughly before using in production
+2. **Backup your code** before upgrading
+3. **Review all prop changes** - Many props have been renamed or removed
+4. **New peer dependencies** - Make sure to install `react-native-gesture-handler` and `react-native-safe-area-context`
+5. **TypeScript users** - You may need to update type imports and usages
+6. **Keyboard behavior** - The keyboard is now handled internally by default. Set `isKeyboardInternallyHandled={false}` if you have custom keyboard handling
+7. **Safe areas** - The library now includes SafeAreaProvider internally, but you should still wrap your app with it for best results
+
+## 📊 Version History
+
+- **2.8.1** - Last stable release
+- **2.8.2-alpha.0** - Initial alpha release
+- **2.8.2-alpha.5** - Current alpha release (this changelog)
+
+---
+
+For issues or questions, please visit: https://github.com/FaridSafi/react-native-gifted-chat/issues

package/README.md

@@ -1,5 +1,5 @@
-<p align="center" >
-<p align="center" >
+<p align="center">
+<p align="center">
    <a href="https://reactnative.gallery/FaridSafi/gifted-chat">
     <img alt="react-native-gifted-chat" src="https://thumbs.gfycat.com/AbsoluteSadDobermanpinscher-size_restricted.gif" width="260" height="510" />
  </a>
@@ -382,44 +382,44 @@ interface QuickReplies {
   - `activityIndicatorStyle` - Custom style for the loading indicator
   - `activityIndicatorColor` - Color of the loading indicator (default: 'white')
   - `activityIndicatorSize` - Size of the loading indicator (default: 'small')
-- **`renderLoading`** _(Function)_ - Render a loading view when initializing
-- **`renderLoadEarlier`** _(Function)_ - Custom "Load earlier messages" button
-- **`renderAvatar`** _(Function)_ - Custom message avatar; set to `null` to not render any avatar for the message
+- **`renderLoading`** _(Component | Function)_ - Render a loading view when initializing
+- **`renderLoadEarlier`** _(Component | Function)_ - Custom "Load earlier messages" button
+- **`renderAvatar`** _(Component | Function)_ - Custom message avatar; set to `null` to not render any avatar for the message
 - **`showUserAvatar`** _(Bool)_ - Whether to render an avatar for the current user; default is `false`, only show avatars for other users
 - **`showAvatarForEveryMessage`** _(Bool)_ - When false, avatars will only be displayed when a consecutive message is from the same user on the same day; default is `false`
 - **`onPressAvatar`** _(Function(`user`))_ - Callback when a message avatar is tapped
 - **`onLongPressAvatar`** _(Function(`user`))_ - Callback when a message avatar is long-pressed
 - **`renderAvatarOnTop`** _(Bool)_ - Render the message avatar at the top of consecutive messages, rather than the bottom; default is `false`
-- **`renderBubble`** _(Function)_ - Custom message bubble
-- **`renderTicks`** _(Function(`message`))_ - Custom ticks indicator to display message status
-- **`renderSystemMessage`** _(Function)_ - Custom system message
+- **`renderBubble`** _(Component | Function)_ - Custom message bubble
+- **`renderTicks`** _(Component | Function(`message`))_ - Custom ticks indicator to display message status
+- **`renderSystemMessage`** _(Component | Function)_ - Custom system message
 - **`onPressMessage`** _(Function(`context`, `message`))_ - Callback when a message bubble is pressed
 - **`onLongPressMessage`** _(Function(`context`, `message`))_ - Callback when a message bubble is long-pressed (see [example using `showActionSheetWithOptions()`](https://github.com/FaridSafi/react-native-gifted-chat/blob/master@%7B2017-09-25%7D/src/Bubble.js#L96-L119))
 - **`inverted`** _(Bool)_ - Reverses display order of `messages`; default is `true`
 - **`renderUsernameOnMessage`** _(Bool)_ - Indicate whether to show the user's username inside the message bubble; default is `false`
-- **`renderUsername`** _(Function)_ - Custom Username container
-- **`renderMessage`** _(Function)_ - Custom message container
-- **`renderMessageText`** _(Function)_ - Custom message text
-- **`renderMessageImage`** _(Function)_ - Custom message image
-- **`renderMessageVideo`** _(Function)_ - Custom message video
-- **`renderMessageAudio`** _(Function)_ - Custom message audio
+- **`renderUsername`** _(Component | Function)_ - Custom Username container
+- **`renderMessage`** _(Component | Function)_ - Custom message container
+- **`renderMessageText`** _(Component | Function)_ - Custom message text
+- **`renderMessageImage`** _(Component | Function)_ - Custom message image
+- **`renderMessageVideo`** _(Component | Function)_ - Custom message video
+- **`renderMessageAudio`** _(Component | 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
+- **`renderCustomView`** _(Component | Function)_ - Custom view inside the bubble
+- **`renderDay`** _(Component | Function)_ - Custom day above a message
+- **`renderTime`** _(Component | 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
-- **`renderComposer`** _(Function)_ - Custom text input message composer
-- **`renderActions`** _(Function)_ - Custom action button on the left of the message composer
-- **`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
+- **`renderFooter`** _(Component | 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`** _(Component | Function)_ - Custom typing indicator component
+- **`renderChatEmpty`** _(Component | Function)_ - Custom component to render in the ListView when messages are empty
+- **`renderChatFooter`** _(Component | Function)_ - Custom component to render below the MessageContainer (separate from the ListView)
+- **`renderInputToolbar`** _(Component | Function)_ - Custom message composer container
+- **`renderComposer`** _(Component | Function)_ - Custom text input message composer
+- **`renderActions`** _(Component | Function)_ - Custom action button on the left of the message composer
+- **`renderSend`** _(Component | 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`** _(Component | 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-chat",
-  "version": "2.8.2-alpha.4",
+  "version": "2.9.0-alpha.0",
   "description": "The most complete chat UI for React Native",
   "keywords": [
     "android",
@@ -80,6 +80,7 @@
     "@typescript-eslint/parser": "^8.46.4",
     "babel-jest": "^29.7.0",
     "eslint": "^9.18.0",
+    "eslint-import-resolver-typescript": "^4.4.4",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jest": "^28.11.0",
     "eslint-plugin-perfectionist": "^4.15.1",

package/src/Actions.tsx

@@ -7,7 +7,7 @@ import {
   ViewStyle,
   TextStyle,
 } from 'react-native'
-import Color from './Color'
+import { Color } from './Color'
 import { TouchableOpacity } from './components/TouchableOpacity'
 import { useChatContext } from './GiftedChatContext'
 

package/src/Bubble/index.tsx

@@ -15,14 +15,14 @@ import stylesCommon from '../styles'
 
 import { Time } from '../Time'
 import { IMessage } from '../types'
-import { isSameUser, isSameDay } from '../utils'
+import { isSameUser, isSameDay, renderComponentOrElement } from '../utils'
 
 import styles from './styles'
 import { BubbleProps, RenderMessageTextProps } from './types'
 
 export * from './types'
 
-const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<TMessage>): JSX.Element => {
+export const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<TMessage>): JSX.Element => {
   const {
     currentMessage,
     nextMessage,
@@ -109,7 +109,7 @@ const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<TMessag
       } = props
 
       if (props.renderQuickReplies)
-        return props.renderQuickReplies(quickReplyProps)
+        return renderComponentOrElement(props.renderQuickReplies, quickReplyProps)
 
       return (
         <QuickReplies
@@ -150,9 +150,9 @@ const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<TMessag
       const combinedProps = { ...messageTextPropsRest, ...messageTextProps } as RenderMessageTextProps<TMessage>
 
       if (props.renderMessageText)
-        return props.renderMessageText(combinedProps)
+        return renderComponentOrElement(props.renderMessageText, combinedProps)
 
-      return <MessageText {...combinedProps} />
+      return <MessageText {...combinedProps as any} />
     }
 
     return null
@@ -169,7 +169,7 @@ const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<TMessag
       } = props
 
       if (props.renderMessageImage)
-        return props.renderMessageImage(messageImageProps)
+        return renderComponentOrElement(props.renderMessageImage, messageImageProps)
 
       return <MessageImage {...messageImageProps} />
     }
@@ -190,7 +190,7 @@ const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<TMessag
     } = props
 
     if (props.renderMessageVideo)
-      return props.renderMessageVideo(messageVideoProps)
+      return renderComponentOrElement(props.renderMessageVideo, messageVideoProps)
 
     return <MessageVideo />
   }, [props, currentMessage])
@@ -208,7 +208,7 @@ const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<TMessag
     } = props
 
     if (props.renderMessageAudio)
-      return props.renderMessageAudio(messageAudioProps)
+      return renderComponentOrElement(props.renderMessageAudio, messageAudioProps)
 
     return <MessageAudio />
   }, [props, currentMessage])
@@ -220,7 +220,7 @@ const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<TMessag
     } = props
 
     if (renderTicks && currentMessage)
-      return renderTicks(currentMessage)
+      return renderComponentOrElement(renderTicks, currentMessage)
 
     if (
       user &&
@@ -271,7 +271,7 @@ const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<TMessag
       } = props
 
       if (props.renderTime)
-        return props.renderTime(timeProps)
+        return renderComponentOrElement(props.renderTime, timeProps)
 
       return <Time {...timeProps} />
     }
@@ -289,7 +289,7 @@ const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<TMessag
         return null
 
       if (renderUsername)
-        return renderUsername(currentMessage.user)
+        return renderComponentOrElement(renderUsername, currentMessage.user)
 
       return (
         <View style={styles.content.usernameView}>
@@ -313,7 +313,7 @@ const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<TMessag
 
   const renderCustomView = useCallback(() => {
     if (props.renderCustomView)
-      return props.renderCustomView(props)
+      return renderComponentOrElement(props.renderCustomView, props)
 
     return null
   }, [props])
@@ -378,5 +378,3 @@ const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<TMessag
     </View>
   )
 }
-
-export default Bubble

package/src/Bubble/styles.ts

@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native'
-import Color from '../Color'
+import { Color } from '../Color'
 
 const styles = {
   left: StyleSheet.create({

package/src/Bubble/types.ts

@@ -5,7 +5,7 @@ import {
   TextStyle,
 } from 'react-native'
 import { MessageImageProps } from '../MessageImage'
-import { MessageTextProps, MessageOption } from '../MessageText'
+import { MessageTextProps } from '../MessageText'
 import { QuickRepliesProps } from '../QuickReplies'
 import { TimeProps } from '../Time'
 import {
@@ -18,7 +18,7 @@ import {
   MessageAudioProps,
 } from '../types'
 
- 
+
 export type RenderMessageImageProps<TMessage extends IMessage> = Omit<
   BubbleProps<TMessage>,
   'containerStyle' | 'wrapperStyle'
@@ -39,10 +39,10 @@ export type RenderMessageAudioProps<TMessage extends IMessage> = Omit<
 
 export type RenderMessageTextProps<TMessage extends IMessage> = Omit<
   BubbleProps<TMessage>,
-  'containerStyle' | 'wrapperStyle' | 'options'
+  'containerStyle' | 'wrapperStyle'
 > &
   MessageTextProps<TMessage>
- 
+
 
 export interface BubbleProps<TMessage extends IMessage> {
   user?: User
@@ -54,7 +54,6 @@ export interface BubbleProps<TMessage extends IMessage> {
   currentMessage: TMessage
   nextMessage?: TMessage
   previousMessage?: TMessage
-  options?: MessageOption[]
   containerStyle?: LeftRightStyle<ViewStyle>
   wrapperStyle?: LeftRightStyle<ViewStyle>
   textStyle?: LeftRightStyle<TextStyle>

package/src/Color.ts

@@ -1,4 +1,4 @@
-export default {
+export const Color = {
   defaultColor: '#b2b2b2',
   backgroundTransparent: 'transparent',
   defaultBlue: '#0084ff',

package/src/Composer.tsx

@@ -8,7 +8,7 @@ import {
   TextInputContentSizeChangeEventData,
   useColorScheme,
 } from 'react-native'
-import Color from './Color'
+import { Color } from './Color'
 import { MIN_COMPOSER_HEIGHT } from './Constant'
 import stylesCommon from './styles'
 

package/src/Day/styles.ts

@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native'
-import Color from '../Color'
+import { Color } from '../Color'
 
 export default StyleSheet.create({
   container: {

package/src/GiftedAvatar.tsx

@@ -8,7 +8,7 @@ import {
   ImageStyle,
   TextStyle,
 } from 'react-native'
-import Color from './Color'
+import { Color } from './Color'
 import { TouchableOpacity } from './components/TouchableOpacity'
 import stylesCommon from './styles'
 import { User } from './types'