react-native-gifted-chat 3.0.0 → 3.0.1

package/package.json

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

package/src/Composer.tsx

@@ -1,7 +1,10 @@
-import React from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import {
+  Platform,
   StyleSheet,
   TextInput,
+  TextInputChangeEvent,
+  TextInputContentSizeChangeEvent,
   TextInputProps,
   useColorScheme,
   View,
@@ -24,6 +27,37 @@ export function Composer ({
 
   const placeholder = textInputProps?.placeholder ?? 'Type a message...'
 
+  const minHeight = useMemo(() =>
+    Platform.select({
+      web: styles.textInput.lineHeight + styles.textInput.paddingTop + styles.textInput.paddingBottom,
+      default: undefined,
+    })
+  , [])
+
+  const [height, setHeight] = useState<number | undefined>(minHeight)
+
+  const handleContentSizeChange = useMemo(() => {
+    if (Platform.OS === 'web')
+      return (e: TextInputContentSizeChangeEvent) => {
+        const contentHeight = e.nativeEvent.contentSize.height
+        setHeight(Math.max(minHeight ?? 0, contentHeight))
+      }
+
+    return undefined
+  }, [minHeight])
+
+  const handleChange = useCallback((event: TextInputChangeEvent) => {
+    if (Platform.OS === 'web')
+      // Reset height to 0 to get the correct scrollHeight
+      // @ts-expect-error - web-specific code
+      window.requestAnimationFrame(() => {
+        // @ts-expect-error - web-specific code
+        event.nativeEvent.target.style.height = '0px'
+        // @ts-expect-error - web-specific code
+        event.nativeEvent.target.style.height = `${event.nativeEvent.target.scrollHeight}px`
+      })
+  }, [])
+
   return (
     <View style={stylesCommon.fill}>
       <TextInput
@@ -37,8 +71,10 @@ export function Composer ({
         keyboardAppearance={isDark ? 'dark' : 'default'}
         multiline
         placeholder={placeholder}
+        onContentSizeChange={handleContentSizeChange}
+        onChange={handleChange}
         {...textInputProps}
-        style={getColorSchemeStyle(styles, 'textInput', colorScheme)}
+        style={[getColorSchemeStyle(styles, 'textInput', colorScheme), stylesWeb.textInput, { height }, textInputProps?.style]}
       />
     </View>
   )
@@ -55,3 +91,10 @@ const styles = StyleSheet.create({
     color: '#fff',
   },
 })
+
+const stylesWeb = StyleSheet.create({
+  textInput: {
+    /* @ts-expect-error - web-specific styles */
+    outlineStyle: 'none',
+  },
+})

package/src/__tests__/__snapshots__/Composer.test.tsx.snap

@@ -14,15 +14,25 @@ exports[`should render <Composer /> and compare with snapshot 1`] = `
     enablesReturnKeyAutomatically={true}
     keyboardAppearance="default"
     multiline={true}
+    onChange={[Function]}
     placeholder="Type a message..."
     placeholderTextColor="#b2b2b2"
     style={
       [
+        [
+          {
+            "fontSize": 16,
+            "lineHeight": 22,
+            "paddingBottom": 10,
+            "paddingTop": 8,
+          },
+          undefined,
+        ],
         {
-          "fontSize": 16,
-          "lineHeight": 22,
-          "paddingBottom": 10,
-          "paddingTop": 8,
+          "outlineStyle": "none",
+        },
+        {
+          "height": undefined,
         },
         undefined,
       ]

package/src/__tests__/__snapshots__/InputToolbar.test.tsx.snap

@@ -43,15 +43,25 @@ exports[`should render <InputToolbar /> and compare with snapshot 1`] = `
         enablesReturnKeyAutomatically={true}
         keyboardAppearance="default"
         multiline={true}
+        onChange={[Function]}
         placeholder="Type a message..."
         placeholderTextColor="#b2b2b2"
         style={
           [
+            [
+              {
+                "fontSize": 16,
+                "lineHeight": 22,
+                "paddingBottom": 10,
+                "paddingTop": 8,
+              },
+              undefined,
+            ],
             {
-              "fontSize": 16,
-              "lineHeight": 22,
-              "paddingBottom": 10,
-              "paddingTop": 8,
+              "outlineStyle": "none",
+            },
+            {
+              "height": undefined,
             },
             undefined,
           ]