RN 0.76.X - Multiline does not grow - New architecture

[claudiozam]

Issue Description

The toolbar / composer height is always fixed. The auto grow is not working when i am writing multiples lines in IOS (Android No problem).

Steps to Reproduce / Code Snippets

https://github.com/user-attachments/assets/b5032f87-11a1-4387-b787-b8415138c024

Write multiple lines in the input field

Expected Results

https://github.com/user-attachments/assets/456332b7-081f-4dac-b182-a0c9fe87e3c7

The issue only occurs on iOS. If I disable the new architecture, it works fine.

There’s no problem on Android.

Additional Information

react-native: "0.76.1" react-native-gifted-chat: "^2.6.4" react-native-safe-area-context: "^4.14.0" react-native-reanimated: "^3.16.1" react-native-get-random-values: "^1.11.0" ENV['RCT_NEW_ARCH_ENABLED'] = '1' //TRUE

System: OS: macOS 15.0.1 CPU: (12) arm64 Apple M2 Max Memory: 15.95 GB / 64.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 22.10.0 - /opt/homebrew/bin/node Yarn: 1.22.22 - /opt/homebrew/bin/yarn npm: 10.9.0 - /opt/homebrew/bin/npm Managers: CocoaPods: 1.15.2 - /Users/claudiozamoszczyk/.rvm/gems/ruby-3.1.4@fastlane/bin/pod Homebrew: 4.4.2 - /opt/homebrew/bin/brew pip3: 24.2 - /opt/homebrew/bin/pip3 RubyGems: 3.3.26 - /Users/claudiozamoszczyk/.rvm/rubies/ruby-3.1.4/bin/gem Utilities: Make: 3.81 - /usr/bin/make GCC: 16.0.0 - /usr/bin/gcc Git: 2.47.0 - /opt/homebrew/bin/git Clang: 16.0.0 - /usr/bin/clang Curl: 8.7.1 - /usr/bin/curl OpenSSL: 3.3.2 - /opt/homebrew/bin/openssl SDKs: iOS SDK: Platforms: DriverKit 24.0, iOS 18.0, macOS 15.0, tvOS 18.0, visionOS 2.0, watchOS 11.0 IDEs: Xcode: 16.0/16A242d - /usr/bin/xcodebuild Languages: Bash: 3.2.57 - /bin/bash Java: 17.0.13 - /opt/homebrew/opt/openjdk@17/bin/javac Perl: 5.34.1 - /usr/bin/perl Python3: 3.13.0 - /opt/homebrew/bin/python3 Ruby: 3.1.4 - /Users/claudiozamoszczyk/.rvm/rubies/ruby-3.1.4/bin/ruby

[zemuldo]

Same problem here. RN 0.76.0, Happens only on ios

[nahooni0511]

Same on 0.76.3

[TaylorFoster-Informulate]

@FaridSafi Can we get any input on this by chance? This is happening to me as well. The input composer refuses to grow even when I set it to multiline.

[ceunnseo]

same problem too. RN 0.74.5. (android is working but iOS do not work)

[MR-AMDEV]

Same issue, but i have done the following workaround (it works fine for me):

import { InputToolbar } from 'react-native-gifted-chat';

renderInputToolbar={(props) => (
  <InputToolbar
    {...props}
    containerStyle={{
      backgroundColor: Colors.$backgroundDefault,
    }}
    renderComposer={(props) => (
      <View flex padding-10>
        <TextInput
          style={{
            color: Colors.$textPrimary,
          }}
          multiline
          placeholderTextColor={Colors.$textPrimary}
          placeholder="Type a message..."
          value={props.text}
          onChangeText={props.onTextChanged}
        />
      </View>
    )}
  />
)}

[huix9527]

Same problem, RN 0.76.9

[tonicastillo]

Another simpler workaround that works for me:

<GiftedChat
  renderComposer = {(props) => (
    <Composer
      {...props}
      // @ts-expect-error - The component expects a number but works with "auto" string. This is a known issue with the typing
      composerHeight="auto"
      ...

The problem is that, by default, Composer's TextInput has a defined height.

[socialcode-rob1]

The core issue is it's passing a fixed composerHeight prop to the Composer component — which prevents the TextInput from growing dynamically when multiple lines are entered.

Patch Composer.tsx

style={[
  styles.textInput,
  textInputStyle,
  {
    ...(composerHeight ? { height: composerHeight } : {}),
    ...Platform.select({
      web: {
        outlineWidth: 0,
        outlineColor: 'transparent',
        outlineOffset: 0,
      },
    }),
  },
]}

then manage it outside of the component...

    const [composerHeight, setComposerHeight] = useState(40);
    ...
    <Composer
      composerHeight={composerHeight}
      textInputRef={inputRef}
      textInputStyle={style}
      onTextChanged={onTextChanged}
      onInputSizeChanged={({ height }) => setComposerHeight(height)}
      text={text}
    />

[ceunnseo]

Instead of patching the Composer.tsx or relying on composerHeight="auto" (which causes type errors), I implemented a custom TextInput component via renderComposer that handles dynamic height adjustment using onContentSizeChange.

Here’s what I did:

• Created a custom CustomMultiTextInput component
• Dynamically measured and updated height using onContentSizeChange
• Applied a max height based on desired line count (5)

Sample (simplified):

renderComposer={(composerProps) => (
  <CustomMultiTextInput
    value={composerProps.text}
    onChangeText={composerProps.onTextChanged}
    setInputHeight={setInputHeight}
    ...
  />


<TextInput
  multiline
  onContentSizeChange={(e) => {
    const height = e.nativeEvent.contentSize.height;
    setInputHeight(Math.max(minHeight, height));
  }}
  style={{
    maxHeight: lineHeight * 5, // limits to 5 lines
    textAlignVertical: 'top',
    flex: 1,
    ...
  }}
/>

[Njaah-0]

It also seems that at some point the onContentSizeChange property stopped working on iOS, which means the composer height is never updated correctly. https://github.com/facebook/react-native/issues/52854

If you are relying on that, you can overcome the issue with the help of onLayout, which seems to work correctly.

[dzbrozek]

I fixed the issue by patching Composer.js and replacing height: composerHeight with minHeight: composerHeight