react-native-gifted-chat 2.8.2-alpha.4 → 2.8.2-alpha.6

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-chat",
-  "version": "2.8.2-alpha.4",
+  "version": "2.8.2-alpha.6",
   "description": "The most complete chat UI for React Native",
   "keywords": [
     "android",

package/src/GiftedChat/index.tsx

@@ -280,7 +280,6 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
 
   const onInitialLayoutViewLayout = useCallback(
     (e: LayoutChangeEvent) => {
-      console.log('onInitialLayoutViewLayout', e.nativeEvent.layout.height)
       if (isInitialized)
         return
 
@@ -416,18 +415,14 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
 }
 
 function GiftedChatWrapper<TMessage extends IMessage = IMessage> (props: GiftedChatProps<TMessage>) {
-  // Don't use KeyboardProvider when keyboard is not internally handled
-  if (!props.isKeyboardInternallyHandled)
-    return <GiftedChat<TMessage> {...props} />
-
   return (
-    <GestureHandlerRootView style={styles.fill}>
-      <SafeAreaProvider>
-        <KeyboardProvider>
+    <KeyboardProvider>
+      <GestureHandlerRootView style={styles.fill}>
+        <SafeAreaProvider>
           <GiftedChat<TMessage> {...props} />
-        </KeyboardProvider>
-      </SafeAreaProvider>
-    </GestureHandlerRootView>
+        </SafeAreaProvider>
+      </GestureHandlerRootView>
+    </KeyboardProvider>
   )
 }
 

package/src/LoadEarlierMessages.tsx

@@ -1,7 +1,6 @@
-import React, { useMemo } from 'react'
+import React from 'react'
 import {
   ActivityIndicator,
-  Platform,
   StyleSheet,
   Text,
   View,
@@ -13,36 +12,10 @@ import Color from './Color'
 import { TouchableOpacity } from './components/TouchableOpacity'
 import stylesCommon from './styles'
 
-const styles = StyleSheet.create({
-  container: {
-    alignItems: 'center',
-    marginTop: 5,
-    marginBottom: 10,
-  },
-  wrapper: {
-    backgroundColor: Color.defaultColor,
-    borderRadius: 15,
-    height: 30,
-    paddingLeft: 10,
-    paddingRight: 10,
-  },
-  text: {
-    backgroundColor: Color.backgroundTransparent,
-    color: Color.white,
-    fontSize: 12,
-  },
-  activityIndicator: {
-    marginTop: Platform.select({
-      ios: -14,
-      android: -16,
-      default: -15,
-    }),
-  },
-})
-
 export interface LoadEarlierMessagesProps {
-  isAvailable?: boolean
-  isLoading?: boolean
+  isAvailable: boolean
+  isLoading: boolean
+  onPress: () => void
   isInfiniteScrollEnabled?: boolean
   label?: string
   containerStyle?: StyleProp<ViewStyle>
@@ -51,7 +24,6 @@ export interface LoadEarlierMessagesProps {
   activityIndicatorStyle?: StyleProp<ViewStyle>
   activityIndicatorColor?: string
   activityIndicatorSize?: number | 'small' | 'large'
-  onPress: () => void
 }
 
 export const LoadEarlierMessages: React.FC<LoadEarlierMessagesProps> = ({
@@ -65,23 +37,6 @@ export const LoadEarlierMessages: React.FC<LoadEarlierMessagesProps> = ({
   activityIndicatorSize = 'small',
   activityIndicatorStyle,
 }) => {
-  const loadingContent = useMemo(() => (
-    <View>
-      <Text style={[styles.text, textStyle, { opacity: 0 }]}>
-        {label}
-      </Text>
-      <ActivityIndicator
-        color={activityIndicatorColor!}
-        size={activityIndicatorSize!}
-        style={[styles.activityIndicator, activityIndicatorStyle]}
-      />
-    </View>
-  ), [label, textStyle, activityIndicatorColor, activityIndicatorSize, activityIndicatorStyle])
-
-  const labelContent = useMemo(() => (
-    <Text style={[styles.text, textStyle]}>{label}</Text>
-  ), [label, textStyle])
-
   return (
     <TouchableOpacity
       style={[styles.container, containerStyle]}
@@ -90,8 +45,50 @@ export const LoadEarlierMessages: React.FC<LoadEarlierMessagesProps> = ({
       accessibilityRole='button'
     >
       <View style={[stylesCommon.centerItems, styles.wrapper, wrapperStyle]}>
-        {isLoading ? loadingContent : labelContent}
+        {
+          isLoading
+            ? (
+              <ActivityIndicator
+                color={activityIndicatorColor}
+                size={activityIndicatorSize}
+                style={[styles.activityIndicator, activityIndicatorStyle]}
+              />
+            )
+            : (
+              <View style={styles.textContainer}>
+                <Text style={[styles.text, textStyle]}>
+                  {label}
+                </Text>
+              </View>
+            )
+        }
       </View>
     </TouchableOpacity>
   )
 }
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    marginVertical: 10,
+  },
+  wrapper: {
+    backgroundColor: Color.defaultColor,
+    borderRadius: 15,
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+  },
+  textContainer: {
+    paddingTop: 3,
+    paddingBottom: 4,
+  },
+  text: {
+    backgroundColor: Color.backgroundTransparent,
+    color: Color.white,
+    fontSize: 12,
+    lineHeight: 13,
+  },
+  activityIndicator: {
+    paddingHorizontal: 20,
+  },
+})

package/src/MessageContainer/components/DayAnimated/index.tsx

@@ -134,6 +134,7 @@ const DayAnimated = ({ scrolledY, daysPositions, listHeight, renderDay, messages
     <Animated.View
       style={[stylesCommon.centerItems, styles.dayAnimated, style]}
       onLayout={handleLayout}
+      pointerEvents='none'
     >
       <Animated.View
         style={contentStyle}

package/src/MessageContainer/index.tsx

@@ -79,7 +79,7 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
   }, [renderFooterProp, renderTypingIndicator, props])
 
   const renderLoadEarlier = useCallback(() => {
-    if (loadEarlierMessagesProps?.onPress && loadEarlierMessagesProps?.isAvailable) {
+    if (loadEarlierMessagesProps?.isAvailable) {
       if (renderLoadEarlierProp)
         return renderLoadEarlierProp(loadEarlierMessagesProps)
 
@@ -286,10 +286,10 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
 
   const onEndReached = useCallback(() => {
     if (
-      loadEarlierMessagesProps?.isInfiniteScrollEnabled &&
-      loadEarlierMessagesProps?.onPress &&
-      loadEarlierMessagesProps?.isAvailable &&
-      !loadEarlierMessagesProps?.isLoading
+      loadEarlierMessagesProps &&
+      loadEarlierMessagesProps.isAvailable &&
+      loadEarlierMessagesProps.isInfiniteScrollEnabled &&
+      !loadEarlierMessagesProps.isLoading
     )
       loadEarlierMessagesProps.onPress()
   }, [loadEarlierMessagesProps])

package/src/MessageText.tsx

@@ -55,7 +55,8 @@ export const MessageText: React.FC<MessageTextProps<IMessage>> = ({
       <Autolink
         email
         phone
-        link
+        url
+        stripPrefix={false}
         {...rest}
         onPress={onPressProp ? handlePress : undefined}
         linkStyle={linkStyle}

package/src/SystemMessage.tsx

@@ -1,29 +1,16 @@
-import React, { useMemo } from 'react'
+import React from 'react'
 import {
   StyleSheet,
-  Text,
   View,
   ViewStyle,
   StyleProp,
   TextStyle,
 } from 'react-native'
 import Color from './Color'
+import { MessageText } from './MessageText'
 import stylesCommon from './styles'
 import { IMessage } from './types'
 
-const styles = StyleSheet.create({
-  container: {
-    marginTop: 5,
-    marginBottom: 10,
-  },
-  text: {
-    backgroundColor: Color.backgroundTransparent,
-    color: Color.defaultColor,
-    fontSize: 12,
-    fontWeight: '300',
-  },
-})
-
 export interface SystemMessageProps<TMessage extends IMessage> {
   currentMessage: TMessage
   containerStyle?: StyleProp<ViewStyle>
@@ -39,22 +26,41 @@ export function SystemMessage<TMessage extends IMessage = IMessage> ({
   textStyle,
   children,
 }: SystemMessageProps<TMessage>) {
-  const textContent = useMemo(() => {
-    if (!currentMessage?.text)
-      return null
-
-    return <Text style={[styles.text, textStyle]}>{currentMessage.text}</Text>
-  }, [currentMessage?.text, textStyle])
-
   if (currentMessage == null || currentMessage.system === false)
     return null
 
   return (
     <View style={[stylesCommon.fill, stylesCommon.centerItems, styles.container, containerStyle]}>
       <View style={wrapperStyle}>
-        {textContent}
+        <MessageText
+          currentMessage={currentMessage}
+          customTextStyle={[styles.text, textStyle]}
+          containerStyle={{ left: styles.messageContainer, right: styles.messageContainer }}
+        />
         {children}
       </View>
     </View>
   )
 }
+
+const styles = StyleSheet.create({
+  container: {
+    marginTop: 5,
+    marginBottom: 10,
+    marginHorizontal: 20,
+  },
+  messageContainer: {
+    borderRadius: 20,
+    borderWidth: 1,
+    borderColor: 'rgba(0,0,0,0.1)',
+    paddingHorizontal: 10,
+    paddingVertical: 10,
+    backgroundColor: 'rgba(0,0,0,0.05)',
+  },
+  text: {
+    backgroundColor: Color.backgroundTransparent,
+    fontStyle: 'italic',
+    fontSize: 12,
+    fontWeight: '300',
+  },
+})